/* ==================== Base ==================== */
:root {
  --bg: #0e0f11;
  --panel: #1c1d21;
  --panel-2: #2c2d32;
  --line: rgba(255,255,255,.07);
  --muted: #9a9ca3;
  --text-2: #d6d7db;
  --cyan: #1fbed4;
  --on-cyan: #061216;
  --sec: #8b5cff;
  --pink: #ff4fd8;
  --mint: #2ee07f;
  --gold: #ffb020;
  --r: 4px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stage {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.4rem 1.6rem 7rem;
  min-width: 0;
}
@keyframes detail-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 800px) {
  .stage { padding: 1.6rem 1rem 7rem; }
}

/* ==================== Loop board ==================== */
/* Evolve — shared pieces for the three evolving loop designs.
   Follows the investor build: charcoal panels, one cyan, Inter labels,
   status colours only for status, glow only on the selected state. */
:root {
  --panel-3: #16171a;
  --sel-bg: linear-gradient(100deg, color-mix(in srgb, var(--cyan) 22%, #171a1f), #1a1c21 78%);
  --done: #2ee07f;
  --soon: #ffb020;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 4800ms;
}
/* ---------- Labels ---------- */
.lab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--cyan);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.lab--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.lab--muted { color: var(--muted); }
.lab--done { color: var(--done); }
/* ---------- Player cell ---------- */
.cell {
  --s: 30px;
  --c: var(--cyan);
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--c) 50%, #fff) 0, var(--c) 40%, color-mix(in srgb, var(--c) 42%, #05080b) 100%);
  box-shadow: 0 0 0 2px #121316, 0 6px 14px rgba(0,0,0,.35);
  color: #061216;
  font-size: calc(var(--s) * .34);
  font-weight: 800;
  letter-spacing: -.02em;
  flex: none;
}
.c-cyan { --c: #1fbed4; }

/* ==================== page styles ==================== */
/* ---------- Board: story on the left, the loop on the right ---------- */
.board {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.side { display: grid; gap: 1.1rem; max-width: 420px; }
.side .count { font-variant-numeric: tabular-nums; }
.side h2 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.side h2.swap, .side p.swap { animation: detail-in .4s ease; }
.side > p { color: var(--text-2); font-size: 1rem; line-height: 1.6; min-height: 4.8em; }
.ctrl { display: flex; align-items: center; gap: .8rem; }
.ctrl button { display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .9rem; border-radius: 4px; background: #2c2d32; color: #fff; font-size: .84rem; font-weight: 600; }
.ctrl button:hover { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #fff; }
.ctrl svg { width: 16px; height: 16px; }
.ctrl .i-play { display: none; }
.ctrl [aria-pressed="false"] .i-play { display: block; }
.ctrl [aria-pressed="false"] .i-pause { display: none; }
/* ---------- Player profile (left) ---------- */
.pcard {
  position: relative;
  overflow: hidden;
  padding: 1rem;
  border-radius: 6px;
  background:
  radial-gradient(ellipse 70% 60% at 0% 0%, rgba(31,190,212,.12), transparent 70%),
  #1c1d21;
}
.ph { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; }
.ph .ava { position: relative; display: grid; place-items: center; }
.ph .ava::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(31,190,212,.55); }
.ph strong { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
.plv { padding: .3rem .55rem; border-radius: 4px; background: rgba(31,190,212,.12); color: var(--cyan); font: 800 .72rem/1 Orbitron, sans-serif; letter-spacing: .04em; transition: background .3s, color .3s; }
.plv.flash { background: var(--cyan); color: #061216; }
.pstats { display: grid; grid-template-columns: 1fr; gap: .45rem; margin-top: .9rem; }
.pstats div { padding: .55rem .6rem; border-radius: 4px; background: rgba(255,255,255,.04); }
.pstats dt { color: var(--muted); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pstats dd { margin-top: .2rem; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: color .3s; }
.pstats dd.money { color: var(--done); }
.pstats dd.flash { color: var(--cyan); }
.pstats dd.money.flash { color: #7df0b0; }
.hist { margin-top: .9rem; }
.hist ul { list-style: none; display: grid; gap: .3rem; margin-top: .5rem; }
.hist li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 4px; background: rgba(255,255,255,.03); font-size: .8rem; }
.hist li i { width: 8px; height: 8px; border-radius: 50%; background: var(--k, var(--muted)); }
.hist li span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hist li span small { margin-left: .4rem; color: var(--muted); font-size: .7rem; }
.hist li b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--k, #fff); }
.hist li.fresh { animation: hist-in .5s var(--ease); background: rgba(31,190,212,.08); }
@keyframes hist-in { from { opacity: 0; transform: translateY(-8px); } }
/* ---------- The loop: a track around the snippet ---------- */
.orbit { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; margin-inline: auto; }
.orbit > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 10; }
.prog { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; }
.comet { fill: #fff; filter: drop-shadow(0 0 8px rgba(31,190,212,.9)); }
.orbit.pulse .track { animation: lap-pulse 1s ease; }
@keyframes lap-pulse { 30% { stroke: rgba(31,190,212,.45); } }
.node {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1c1d21;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 0 6px var(--bg);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -50%);
  transition: background .3s, color .3s, box-shadow .3s;
}
.node:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 6px var(--bg); }
.node.done { background: #1f3a40; color: #d6f6fb; }
.node.on { background: var(--cyan); color: #061216; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px rgba(31,190,212,.4), 0 0 22px rgba(31,190,212,.45); }
.node .tag {
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translate(calc(-50% + var(--lx)), calc(-50% + var(--ly)));
  pointer-events: none;
  transition: color .3s;
}
.node.on .tag { color: #fff; }
/* ---------- Snippets ---------- */
.snips { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%); }
.snip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #1c1d21;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 70px rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(.94);
  transition: opacity .45s ease, transform .6s var(--ease), visibility 0s .45s;
}
.snip.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .1s, transform .6s var(--ease) .1s, visibility 0s; }
.snip > header { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem 0; }
.snip.dive { transform: scale(1.12); opacity: 0; transition: transform .8s var(--ease), opacity .6s ease; }
.money { color: var(--done); }
.crlogo { height: 15px; width: auto; display: block; }
/* 0 · Choose / 5 · Expand — the Clash Rush dashboard */
.s-hub { padding: .85rem .85rem 0; }
.hub-top { display: flex; justify-content: space-between; align-items: center; }
.mechip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .5rem .2rem .22rem; border-radius: 999px; background: rgba(255,255,255,.05); font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: box-shadow .3s; }
.mechip.flash { box-shadow: 0 0 0 1px rgba(31,190,212,.6); }
.tabs { display: flex; gap: .25rem; margin-top: .75rem; overflow: hidden; }
.tab { position: relative; overflow: hidden; flex: none; padding: .26rem .42rem; border-radius: 4px; background: rgba(255,255,255,.04); color: var(--muted); font-size: .62rem; font-weight: 600; white-space: nowrap; }
.tab.on { background: #fff; color: #0e0f11; box-shadow: none; }
.tab.new { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,176,32,.55); animation: tab-in .55s var(--ease) both, fresh-glow 1.6s ease .3s 2; }
.tab.new::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: .35rem; border-radius: 50%; background: var(--soon); vertical-align: 1px; }
@keyframes tab-in { from { opacity: 0; transform: translateY(-6px) scale(.85); } }
.ggrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .7rem; }
.gtile { position: relative; height: 80px; overflow: hidden; border-radius: 6px; background: #26282d; transition: box-shadow .3s; }
.gtile .art { position: absolute; inset: 0 0 26px; background: #0b0d10 url(../assets/art/devora-banner.webp) center / cover; }
.gtile .art.cls { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px), #15171b; display: grid; place-items: center; font: 800 1.1rem/1 Orbitron, sans-serif; color: rgba(255,255,255,.18); }
.gtile .meta { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; justify-content: space-between; align-items: center; padding: 0 .55rem; }
.gtile strong { font: 800 .6rem/1 Orbitron, sans-serif; letter-spacing: .04em; }
.gtile .lab { font-size: .52rem; }
.gtile.empty { background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); display: grid; place-items: center; align-content: center; gap: .3rem; color: rgba(255,255,255,.3); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.gtile.empty svg { width: 14px; height: 14px; }
.gtile.sel { box-shadow: 0 0 0 2px var(--cyan), 0 0 18px rgba(31,190,212,.35); }
.gtile.fresh { box-shadow: inset 0 0 0 1px rgba(255,176,32,.7); animation: tile-in .7s var(--ease) both, fresh-glow 1.6s ease .5s 2; }
.newtag { padding: .12rem .35rem; border-radius: 3px; background: var(--soon); color: #1a1000; font-size: .52rem; font-weight: 800; letter-spacing: .1em; }
@keyframes tile-in { 0% { opacity: 0; transform: translateY(-10px) scale(.6); } 60% { opacity: 1; transform: translateY(0) scale(1.05); } 100% { transform: none; } }
@keyframes fresh-glow { 50% { box-shadow: inset 0 0 0 1px rgba(255,176,32,.9), 0 0 18px rgba(255,176,32,.45); } }
/* A light sweep across anything freshly added. */
.fresh::after, .tab.new::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: translateX(-120%); animation: sweep 1s ease .35s forwards; pointer-events: none; }
@keyframes sweep { to { transform: translateX(120%); } }
.spark { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 1px; background: #ffd27a; transform: rotate(45deg) scale(0); animation: spark .9s ease forwards; pointer-events: none; }
@keyframes spark { 40% { transform: rotate(45deg) scale(1); opacity: 1; } 100% { transform: rotate(45deg) scale(0) translateY(-10px); opacity: 0; } }
.playbtn { position: absolute; right: 6px; top: 6px; padding: .25rem .55rem; border-radius: 4px; background: var(--cyan); color: #061216; font-size: .64rem; font-weight: 800; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s var(--ease); }
.gtile.sel .playbtn { opacity: 1; transform: none; }
.playbtn.press { transform: scale(.9); }
.hub-toast { position: absolute; left: .85rem; right: .85rem; bottom: .8rem; padding: .45rem .6rem; border-radius: 4px; background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--cyan); font-size: .7rem; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); }
.hub-toast.on { opacity: 1; transform: none; }
.golock { position: relative; overflow: hidden; display: grid; place-items: center; height: 38px; margin: .6rem 1rem 0; border-radius: 4px; background: var(--cyan); color: #061216; font-size: .82rem; font-weight: 700; transition: transform .15s, background .3s, color .3s; }
.golock.press { transform: scale(.97); }
.golock.locked { background: #2c2d32; color: #fff; }
.golock i { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--cyan); transform: scaleX(0); transform-origin: left; }
.golock.locked i { transform: scaleX(1); transition: transform 1.3s linear; }
/* 2 · Compete — a live arena that ends in a cash out */
.s-compete canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter .5s; }
.s-compete.cashed canvas { filter: brightness(.4) saturate(.6) blur(1px); }
.chip { position: absolute; z-index: 2; display: grid; gap: .15rem; padding: .45rem .6rem; border-radius: 4px; background: rgba(14,15,17,.82); transition: opacity .4s; }
.chip.tl { left: 10px; top: 10px; }
.chip.tr { right: 10px; top: 10px; text-align: right; }
.chip.bl { left: 10px; bottom: 10px; grid-auto-flow: column; align-items: center; gap: .6rem; }
.chip b { font: 700 1.05rem/1 Orbitron, sans-serif; font-variant-numeric: tabular-nums; }
.chip .rank { color: var(--cyan); }
.chip small { color: var(--text-2); font-size: .7rem; font-variant-numeric: tabular-nums; }
.s-compete.cashed .chip { opacity: 0; }
.cashbtn { position: absolute; z-index: 3; right: 10px; bottom: 10px; overflow: hidden; display: grid; place-items: center; min-width: 108px; height: 36px; padding: 0 .75rem; border-radius: 4px; background: var(--done); color: #06140c; font-size: .78rem; font-weight: 800; white-space: nowrap; transition: transform .15s, background .3s, color .3s, opacity .4s; }
.cashbtn i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(6,20,12,.22); transform: scaleX(0); transform-origin: left; }
.cashbtn span { position: relative; }
.cashbtn.hold { transform: scale(.96); }
.cashbtn.hold i { transform: scaleX(1); transition: transform .9s linear; }
.cashbtn.done { background: #1f3b2b; color: var(--done); box-shadow: inset 0 0 0 1px rgba(46,224,127,.6); }
/* The cashed amount travels to the centre of the screen. */
.cashpop {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 54px;
  display: grid;
  justify-items: end;
  gap: .2rem;
  opacity: 0;
  transform: translateY(16px) scale(.7);
  transform-origin: right bottom;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  pointer-events: none;
}
.cashpop b { font: 700 1.7rem/1 Orbitron, sans-serif; color: var(--done); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(46,224,127,.45); }
.s-compete.centred .cashpop { opacity: 1; transform: none; }
/* 3 · Earn — a Clash Rush profile snippet */
.s-earn { display: grid; align-content: start; }
.snip.s-earn.soft { transform: none; transition: opacity 0s, visibility 0s, background .5s ease, box-shadow .5s ease; }
.snip.s-earn.soft.intro { background: transparent; box-shadow: none; }
.s-compete.handed .cashpop { opacity: 0 !important; transition: opacity .12s; }
.s-compete.handed { z-index: 0; }
.s-earn .split b { font-family: Orbitron, sans-serif; letter-spacing: .02em; }
.s-earn > header, .s-earn .pf, .s-earn .bal, .s-earn .split, .s-earn .settled { transition: opacity .45s ease, transform .65s var(--ease); }
.s-earn .pf { transition-delay: .1s; }
.s-earn .bal { transition-delay: .2s; }
.s-earn .settled { transition-delay: .3s; }
/* Opening frame: only the entry and cash out, centred. */
.s-earn.intro > header, .s-earn.intro .pf, .s-earn.intro .bal, .s-earn.intro .settled { opacity: 0; transform: translateY(10px); transition-delay: 0s; }
.s-earn.instant * { transition: none !important; }
.s-earn.intro .split { transform: translateY(var(--dy, 0px)); }
.s-earn .split > * { transition: opacity .45s ease .2s, transform .75s var(--ease), background .4s; }
.s-earn.intro .split > div:first-child, .s-earn.intro .split > span { opacity: 0; transform: translateX(-28px); transition-delay: 0s; }
.s-earn.intro [data-outcell] { transform-origin: var(--bx, 50%) var(--by, 50%); transform: translate(var(--dx, 0px), var(--dy2, 0px)) scale(2.95); background: transparent; box-shadow: none; transition-delay: 0s; }
.s-earn [data-outcell] .lab { transition: opacity .4s ease .35s; }
.s-earn.intro [data-outcell] .lab { opacity: 0; transition-delay: 0s; }
.s-earn.intro [data-outcell] b { text-shadow: 0 0 18px rgba(46,224,127,.45); }
.pf { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; margin: 1rem 1rem 0; }
.pf .nm { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pf strong { font-size: 1rem; }
.pf .lv { padding: .22rem .45rem; border-radius: 4px; background: rgba(31,190,212,.12); color: var(--cyan); font: 800 .66rem/1 Orbitron, sans-serif; letter-spacing: .04em; transition: background .3s, color .3s; }
.pbar { position: relative; height: 5px; margin-top: .45rem; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; transition: box-shadow .3s; }
.pbar i { display: block; height: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .9s var(--ease); }
.pxp { display: block; margin-top: .3rem; color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.pf.hit .pbar { box-shadow: 0 0 0 1px rgba(31,190,212,.6), 0 0 12px rgba(31,190,212,.5); }
.pf.hit .lv { background: var(--cyan); color: #061216; }
.bal { position: relative; display: grid; gap: .3rem; margin: .9rem 1rem 0; padding: .75rem .85rem; border-radius: 6px; background: linear-gradient(100deg, rgba(46,224,127,.12), rgba(255,255,255,.03) 70%); }
.bal b { font: 700 1.8rem/1 Orbitron, sans-serif; font-variant-numeric: tabular-nums; color: var(--done); }
.bal.bump b { animation: bump .5s var(--ease); }
.bal.bump { animation: bal-glow 1.1s ease-out; }
@keyframes bal-glow { 0% { box-shadow: inset 0 0 0 1px rgba(46,224,127,.8), 0 0 28px rgba(46,224,127,.35); } 100% { box-shadow: inset 0 0 0 1px rgba(46,224,127,0), 0 0 0 rgba(46,224,127,0); } }
@keyframes bump { 40% { transform: scale(1.06); } }
.split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .45rem; margin: .55rem 1rem 0; }
.split div { display: grid; gap: .2rem; padding: .5rem .6rem; border-radius: 4px; background: rgba(255,255,255,.04); transition: box-shadow .3s; }
.split div.lit { box-shadow: inset 0 0 0 1px rgba(46,224,127,.55); }
.split b { font-size: .88rem; font-variant-numeric: tabular-nums; }
.split b.lifted { opacity: 0; }
/* Once paid into the balance, the cash-out cell keeps its amount, dimmed and ticked. */
[data-outcell] { position: relative; transition: opacity .4s ease; }
[data-outcell].paid b { opacity: .4; }
[data-outcell].paid::after { content: "Paid"; position: absolute; right: .6rem; bottom: .7rem; padding: .1rem .4rem; border-radius: 3px; background: rgba(46,224,127,.16); color: var(--done); font: 800 .55rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.split > span { color: var(--muted); }
.settled { position: absolute; left: 1rem; right: 1rem; bottom: .95rem; display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .7rem; }
.settled i { width: 6px; height: 6px; border-radius: 50%; background: var(--done); }
/* Flying values: the cash out into the balance, the XP into the level bar. */
.fly { position: absolute; z-index: 4; left: 0; top: 0; padding: .28rem .55rem; border-radius: 4px; font-size: .78rem; font-weight: 800; white-space: nowrap; opacity: 0; pointer-events: none; transition: transform .75s cubic-bezier(.5,0,.2,1), opacity .3s ease; }
.fly.cash { padding: 0; background: none; color: var(--done); font: 700 .88rem Orbitron, sans-serif; text-shadow: 0 0 14px rgba(46,224,127,.6); }
.fly.xp { padding: 0; background: none; color: var(--cyan); font: 800 .82rem Orbitron, sans-serif; text-shadow: 0 0 12px rgba(31,190,212,.7); }
.fly.out { opacity: 1; }
.fly.gone { opacity: 0; transition: transform .75s cubic-bezier(.5,0,.2,1), opacity .25s ease; }
/* Handing over to Progress: everything but the profile header steps back. */
.s-earn.handoff > :not(.pf) { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .45s var(--ease); }
.s-earn.handoff .pf { opacity: 0; transition: opacity .35s ease .3s; }
/* 4 · Progress — the level bar, filled */
.s-progress { display: grid; justify-items: center; align-content: start; padding-top: 1.1rem; }
.snip.s-progress.morph { transform: none; transition: opacity .25s ease, visibility 0s; }
.pg { display: grid; justify-items: center; }
.lvlring { position: relative; display: grid; place-items: center; width: 132px; height: 132px; }
.lvlring svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.lvlring circle { fill: none; stroke-width: 7; }
.lvlring .bg { stroke: rgba(255,255,255,.07); }
.lvlring .fg { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--off, 1); transition: stroke-dashoffset 1s var(--ease); }
.lvlring .full { stroke: var(--cyan); opacity: 0; filter: drop-shadow(0 0 8px rgba(31,190,212,.8)); }
.lvlring.burst .full { animation: full-out .9s ease forwards; }
@keyframes full-out { 0% { opacity: 1; } 100% { opacity: 0; } }
.lvlring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(31,190,212,.6); opacity: 0; pointer-events: none; }
.lvlring.burst::after { animation: halo .9s var(--ease) forwards; }
@keyframes halo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } }
.lvlring .mid { display: grid; justify-items: center; gap: .1rem; }
.num { display: grid; height: 2.7rem; overflow: hidden; }
.num b { grid-area: 1 / 1; font: 700 2.7rem/1 Orbitron, sans-serif; font-variant-numeric: tabular-nums; text-align: center; transition: transform .6s var(--ease), opacity .45s ease, color .6s ease; }
.num b + b { transform: translateY(100%); opacity: 0; color: var(--cyan); }
.num.up b:first-child { transform: translateY(-100%); opacity: 0; }
.num.up b + b { transform: none; opacity: 1; }
.xpline { width: 252px; margin-top: .85rem; }
.xpline .row { display: flex; justify-content: space-between; margin-bottom: .4rem; font-size: .74rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.xpline .bar { position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.xpline .bar i { display: block; height: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 1s var(--ease); }
.xpline .bar::after { content: ""; position: absolute; inset: 0; background: var(--cyan); opacity: 0; }
.xpline .bar.burst::after { animation: full-out .8s ease forwards; }
.s-progress .drop { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: .75rem; padding: .65rem; border-radius: 6px; background: rgba(139,107,255,.1); box-shadow: inset 0 0 0 1px rgba(139,107,255,.28); opacity: 0; transform: translateY(24px); transition: opacity .45s, transform .6s var(--ease); }
.s-progress .drop.on { opacity: 1; transform: none; }
.box { position: relative; width: 46px; height: 42px; margin-top: 6px; }
.box .body, .box .lid { position: absolute; left: 0; right: 0; border-radius: 5px; background: linear-gradient(135deg, #8b6bff, #1fbed4); }
.box .body { top: 10px; bottom: 0; display: grid; place-items: center; font: 800 .95rem/1 Orbitron, sans-serif; color: #fff; }
.box .lid { top: 1px; height: 12px; left: -3px; right: -3px; background: linear-gradient(135deg, #a58cff, #4fd9ec); }
.drop.on .box { animation: shake .5s ease .35s 3; }
@keyframes shake { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.drop strong { display: block; margin-top: .1rem; font-size: .86rem; }
.drop small { color: var(--muted); font-size: .68rem; }
/* Phones: the loop becomes a rounded track hugging the snippet. */
@media (max-width: 860px) {
  .board { grid-template-columns: 1fr; }
  .side { max-width: none; }
  .side > p { min-height: 0; }
}
.orbit.is-rect { aspect-ratio: auto; height: 372px; max-width: 420px; }
.orbit.is-rect .node { width: 36px; height: 36px; font-size: .64rem; }
.orbit.is-rect .node .tag { display: none; }
/* Embedded in the investor page loop section */
:root { --bg: #0e0f11; color-scheme: dark; }
html, body { background: #0e0f11; overflow: hidden; }
body { min-height: 0; }
main.stage { max-width: none; padding: 1rem 0 1.5rem; }
/* Skinned cells, as in the game */
.cell.skin { overflow: hidden; padding: 0; background: #0b0d10; box-shadow: 0 0 0 2px #1fbed4, 0 0 14px rgba(31,190,212,.4); }
.cell.skin img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
/* Play: the same entry picker as the site */
.pe-stage { position: relative; display: grid; place-items: center; height: 128px; margin: .4rem 1rem 0; }
.pe-ring { position: absolute; width: 118px; height: 118px; border-radius: 50%; border: 1px dashed rgba(139,107,255,.35); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.pe-cell { position: relative; z-index: 1; width: calc(var(--cs) * 1.6); max-width: 112px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #1fbed4, 0 0 22px rgba(31,190,212,.45); transition: width .5s cubic-bezier(.22,1,.36,1); }
.pe-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6,8,10,.75)); }
.pe-cell b { position: absolute; left: 0; right: 0; bottom: 14%; z-index: 1; text-align: center; font: 800 .9rem/1 Orbitron, sans-serif; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.pe-read { position: absolute; left: 0; right: 0; bottom: -2px; display: flex; justify-content: space-between; }
.pe-read span { padding: .15rem .4rem; border-radius: 3px; background: rgba(14,15,17,.85); color: var(--muted); font-size: .62rem; }
.pe-read b { color: var(--cyan); font-variant-numeric: tabular-nums; }
.pe-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; margin: .7rem 1rem 0; }
.pe-tiles span { position: relative; display: grid; place-items: center; height: 34px; border-radius: 6px; background: #1f2025; color: #b2b4ba; font: 800 .62rem/1 Orbitron, sans-serif; transition: background .25s, color .25s, box-shadow .25s; }
.pe-tiles span.on { background: #2a2b31; color: #fff; box-shadow: inset 0 0 0 2px #1fbed4, 0 0 14px rgba(31,190,212,.16); }
.pe-tiles span.on::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #1fbed4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061216' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 8px no-repeat; }
.pe-meter { position: relative; height: 6px; margin: .8rem 1.4rem 0; border-radius: 3px; background: rgba(255,255,255,.08); }
.pe-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--m, .5) * 100%); border-radius: 3px; background: linear-gradient(90deg, #1fbed4, #8b6bff); transition: width .5s cubic-bezier(.22,1,.36,1); }
/* The slider thumb, as in Choose your entry. */
.pe-meter i::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(31,190,212,.35), 0 3px 10px rgba(0,0,0,.4); }
/* ---------- Polish in the launcher's design: same structure, same images ---------- */
/* Left: the stage count as a cyan chip, the profile as a flat launcher panel, a white control. */
.side .count { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; height: 26px; padding: 0 .7rem; border-radius: 999px; background: rgba(31,190,212,.12); color: #1fbed4; font-weight: 700; letter-spacing: .12em; }
.side .count::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.side h2 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
.pcard { padding: 1.1rem; border-radius: 8px; background: radial-gradient(ellipse 80% 70% at 0% 0%, rgba(31,190,212,.14), transparent 70%), #1c1d21; box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.pstats div { background: linear-gradient(100deg, rgba(46,224,127,.1), rgba(255,255,255,.035) 70%); border-radius: 6px; }
.pstats dd { font-family: Orbitron, sans-serif; font-size: 1.5rem; letter-spacing: .02em; }
.hist li { border-radius: 6px; background: #1f2025; }
.ctrl button { height: 40px; padding: 0 1rem; border-radius: 4px; background: #fff; color: #0e0f11; font-weight: 700; }
.ctrl button svg { stroke: currentColor; }
/* Right: a glowing arena behind the loop, a thicker track with a lit progress arc. */
.orbit::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,190,212,.16), rgba(139,107,255,.08) 60%, transparent); filter: blur(10px); pointer-events: none; }
.orbit::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 22px 22px; -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%); pointer-events: none; }
.track { stroke: rgba(255,255,255,.06); stroke-width: 16; }
.prog { stroke-width: 4; filter: drop-shadow(0 0 6px rgba(31,190,212,.7)); }
.node { width: 50px; height: 50px; background: #1c1d21; font: 800 .72rem Orbitron, sans-serif; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 0 0 7px #0e0f11; }
.node.done { background: #16171a; color: transparent; box-shadow: inset 0 0 0 2px #2ee07f, 0 0 0 7px #0e0f11; }
/* Finished stages: the launcher's done step, a green ring with a tick. */
.node.done::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ee07f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.node.on { background: #1fbed4; color: #061216; box-shadow: 0 0 0 7px #0e0f11, 0 0 0 9px rgba(31,190,212,.45), 0 0 30px rgba(31,190,212,.6); }
.node.on::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid #1fbed4; opacity: 0; animation: node-ping 2.2s ease-out infinite; }
@keyframes node-ping { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
/* Stage labels as launcher tabs: dark pills, the current one solid white. */
.node .tag { padding: .32rem .6rem; border-radius: 4px; background: #1c1d21; color: #b2b4ba; font-size: .68rem; font-weight: 700; letter-spacing: .1em; box-shadow: 0 6px 16px rgba(0,0,0,.35); transition: background .3s, color .3s; }
.node.done .tag { color: #2ee07f; }
.node.on .tag { background: #fff; color: #0e0f11; }
/* The centre screen reads as a launcher window. */
.snip { border-radius: 10px; background: #16171a; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px rgba(0,0,0,.55), 0 0 60px rgba(31,190,212,.12); }
.gtile { border-radius: 6px; }
.gtile.sel { box-shadow: inset 0 0 0 2px #1fbed4, 0 0 20px rgba(31,190,212,.3); }
.tab.on { border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .node.on::after { animation: none; }
}

/* Recent: a new entry slides in at the top and pushes the list down; the oldest folds away. */
.hist ul { display: flex; flex-direction: column; gap: 0; }
.hist li { margin-bottom: .3rem; overflow: hidden; }
.hist li.fresh { animation: none; }
.hist li.enter { animation: hist-enter .55s var(--ease) both; background: rgba(31,190,212,.1); }
.hist li.leave { animation: hist-leave .45s var(--ease) forwards; }
@keyframes hist-enter { 0% { opacity: 0; max-height: 0; padding-block: 0; margin-bottom: 0; transform: translateY(-10px); } 60% { opacity: 1; } 100% { max-height: 44px; } }
@keyframes hist-leave { 0% { max-height: 44px; } 100% { opacity: 0; max-height: 0; padding-block: 0; margin-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .hist li.enter, .hist li.leave { animation: none; } }


/* The ring: grey track, a green line through finished stages, white for the current one. */
.orbit::before { background: radial-gradient(closest-side, rgba(255,255,255,.035), transparent 70%); filter: none; }
.track { stroke: #1c1d21; stroke-width: 10; }
.prog { stroke: #2ee07f; stroke-width: 3; filter: drop-shadow(0 0 5px rgba(46,224,127,.5)); }
.comet { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); }
.orbit.pulse .track { animation: none; }
.node { width: 46px; height: 46px; background: #1c1d21; color: #8d9098; font: 800 .7rem Orbitron, sans-serif; box-shadow: 0 0 0 6px #0e0f11; }
.node:hover { color: #fff; box-shadow: 0 0 0 6px #0e0f11, inset 0 0 0 1.5px rgba(255,255,255,.3); }
.node.done { background: #0e0f11; color: transparent; box-shadow: inset 0 0 0 2px #2ee07f, 0 0 0 6px #0e0f11; }
.node.on { background: #fff; color: #0e0f11; box-shadow: 0 0 0 6px #0e0f11, 0 0 0 8px rgba(255,255,255,.28), 0 0 22px rgba(255,255,255,.25); }
.node.on::after { border-color: rgba(255,255,255,.7); }
.node .tag { background: #1c1d21; color: #8d9098; }
.node.done .tag { color: #2ee07f; }
.node.on .tag { background: #fff; color: #0e0f11; }

.s-hub { padding: 0; }
.hub-in { position: absolute; inset: 0; padding: .85rem .85rem 0; }

/* Choose → Buy-in: the pressed tile opens to fill the frame and becomes the Buy-in screen. */
.hub-in { transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .9s ease, filter .9s ease; }
.snip.s-hub.recede .hub-in { transform: scale(.92); opacity: .35; filter: blur(2px); }
.gtile.tile-fly { position: absolute; z-index: 5; overflow: hidden; border-radius: 6px; background: #26282d; box-shadow: inset 0 0 0 2px #1fbed4, 0 20px 50px rgba(0,0,0,.55); pointer-events: none; }
.tile-fly.grow { transition: left .8s cubic-bezier(.65, 0, .35, 1), top .8s cubic-bezier(.65, 0, .35, 1), width .8s cubic-bezier(.65, 0, .35, 1), height .8s cubic-bezier(.65, 0, .35, 1), border-radius .8s ease, box-shadow .8s ease, opacity .45s ease; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(31,190,212,.4), 0 30px 70px rgba(0,0,0,.6); }
.tile-fly .art { inset: 0 0 26px; transition: bottom .8s cubic-bezier(.65, 0, .35, 1); }
.tile-fly.grow .art { bottom: 0; }
.tile-fly .playbtn, .tile-fly .meta { transition: opacity .25s ease; }
.tile-fly.grow .playbtn, .tile-fly.grow .meta { opacity: 0; }
.tile-fly.done { opacity: 0; }
/* The Buy-in screen arriving from the tile: full size at once, its parts settling in from the centre. */
.snip.s-play.from-tile { transform: none; transition: opacity .25s ease, visibility 0s; }
.snip.s-play.from-tile.on > * { animation: buyin-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.snip.s-play.from-tile.on > .pe-stage { animation-name: buyin-cell; animation-delay: .05s; }
.snip.s-play.from-tile.on > :nth-child(1) { animation-delay: .12s; }
.snip.s-play.from-tile.on > :nth-child(3) { animation-delay: .16s; }
.snip.s-play.from-tile.on > :nth-child(4) { animation-delay: .2s; }
.snip.s-play.from-tile.on > :nth-child(5) { animation-delay: .24s; }
@keyframes buyin-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes buyin-cell { from { opacity: 0; transform: scale(.7); } }
/* Choose: a cursor clicks Play on the DEVORA tile. */
.hub-cursor { position: absolute; z-index: 4; width: 18px; height: 18px; margin: -2px 0 0 -3px; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); transition: left .8s cubic-bezier(.45, 0, .2, 1), top .8s cubic-bezier(.45, 0, .2, 1), opacity .3s ease, transform .12s ease; }
.hub-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #0e0f11; stroke-width: 1.5; stroke-linejoin: round; }
.hub-cursor.on { opacity: 1; }
.hub-cursor.press { transform: scale(.82); }
.hub-cursor.gone { opacity: 0; }
.gtile.clicked { animation: tile-click .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tile-click { 30% { transform: scale(.95); } }
.playbtn { overflow: visible; }
.click-ring { position: absolute; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #1fbed4; box-shadow: 0 0 12px rgba(31,190,212,.6); pointer-events: none; animation: click-ring .65s ease-out forwards; }
@keyframes click-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(7); opacity: 0; } }
.gtile.clicked::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: rgba(31,190,212,.25); animation: tile-flash .45s ease-out forwards; pointer-events: none; }
@keyframes tile-flash { from { opacity: 1; } to { opacity: 0; } }

/* ...then the zoom continues into the O cell, which lands on the Buy-in cell. */
.gtile.tile-fly { transform-origin: 0 0; }
.gtile.tile-fly.grow .art { transition: bottom .55s cubic-bezier(.65, 0, .35, 1); }
.gtile.tile-fly.grow.dive { transition: transform .45s cubic-bezier(.55, 0, .3, 1), opacity .3s ease; box-shadow: none; border-radius: 0; }
.gtile.tile-fly.done { opacity: 0; }
.snip.s-play.from-tile.on > .pe-stage { animation: none; }
.snip.s-play.from-tile.on .pe-ring, .snip.s-play.from-tile.on .pe-read { animation: buyin-in .5s ease .15s both; }

/* Choose → Buy-in in one motion: the dashboard zooms into the O cell; it fades as Buy-in takes over. */
.snip.s-hub.zoomed, .snip.s-hub.zoomed:not(.on) { transform: none; transition: opacity .3s ease, visibility 0s .3s; }
.snip.s-hub.zoomed .hub-in { transition: transform 1s cubic-bezier(.6, 0, .25, 1); }
.snip.s-hub.zoomed .hub-cursor { opacity: 0; }
.zoom-fly { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.zoom-fly img { position: absolute; max-width: none; height: auto; display: block; }
.zoom-fly.go { transition: clip-path 1s cubic-bezier(.6, 0, .25, 1), opacity .35s ease; }
.zoom-fly.go img { transition: transform 1s cubic-bezier(.6, 0, .25, 1); }
.zoom-fly.done { opacity: 0; }
.snip.s-hub.zoomed .playbtn { opacity: 0; transition: opacity .2s ease; }

/* Play: the cash-out click and countdown; the value rises out of the button and stays above it. */
.cashbtn { overflow: visible; transition: transform .12s ease, background .3s, color .3s; }
.cashbtn.press { transform: scale(.9); }
.cashbtn.hold { background: #71f5d1; }
.cashbtn.hold i { transition: transform 3s linear; }
.cash-ring { position: absolute; inset: 0; border-radius: 4px; box-shadow: 0 0 0 2px #71f5d1; pointer-events: none; animation: cash-ring .7s ease-out forwards; }
@keyframes cash-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.35, 1.8); } }
.cashpop { transform: translateY(48px) scale(.45); transform-origin: right bottom; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.s-compete .hub-cursor { z-index: 6; }