/* CLOUT RUSH - style.css: tokens, layout, components, keyframes. Dark-only "social app" look. */
:root {
  --bg: #0b0a14; --panel: #17152a; --panel2: #221f3d; --line: #34305a; --text: #f4f2ff; --muted: #9b97b8;
  --pink: #ff4fa3; --green: #3ddc84; --gold: #ffd34d; --red: #ff4d4d; --blue: #5ab0ff; --purple: #9b6bff;
  --grad: linear-gradient(135deg, #ff4fa3 0%, #9b6bff 100%);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji";
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
* { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overscroll-behavior: none; background: #0b0a14; }
body {
  background: radial-gradient(ellipse at 50% 0%, #2a1846 0%, #0b0a14 60%) #0b0a14; color: var(--text); font-family: var(--font);
  font-size: 14px; font-size: clamp(13px, 3.6vw, 15px); line-height: 1.3; touch-action: manipulation; -webkit-text-size-adjust: 100%;
}
input, textarea { -webkit-user-select: text; user-select: text; font-family: var(--font); }
button { font-family: var(--font); color: var(--text); touch-action: manipulation; min-height: 44px; min-width: 44px; border: 0; padding: 0; background: none; cursor: pointer; outline: none; }
.num { font-variant-numeric: tabular-nums; }
small { font-size: 11px; color: var(--muted); }

#app {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 430px; overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  display: flex; flex-direction: column; background: var(--bg); box-shadow: 0 0 60px rgba(155, 107, 255, .18);
}
#app.bootfade { animation: fadeIn .5s ease-out; }
#studio-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: linear-gradient(160deg, #2a2340, #1a1726); opacity: .55; transition: opacity .4s; }
#studio-bg::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(11,10,20,.55), rgba(11,10,20,.2) 40%, rgba(11,10,20,.85)); }
#studio-bg.soup { background: linear-gradient(160deg, #e8a33c, #5a3410) !important; }
/* room props are not drawn on Home: half off-screen at .22 opacity they read as grey stains over the grid and carousel.
 * The studio shows its props in the Shop diorama, and Home keeps the studio's colours. */
.prop { display: none; }

/* ---------- HUD ---------- */
#hud { position: relative; z-index: 2; flex: none; padding: 6px 12px 2px; background: linear-gradient(180deg, rgba(11,10,20,.95), rgba(11,10,20,.6)); }
.fraz #hud { animation: jitter .12s steps(2) infinite; }
.hrow { display: flex; align-items: center; }
.r1 { height: 46px; }
.ava { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 3px solid #8a8a99; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--panel2); position: relative; overflow: hidden; }
.ava.t6 { border-color: #ff4fa3; box-shadow: 0 0 0 2px #ffd34d, 0 0 0 4px #5ab0ff; }
.ava.t7 { border-color: #ffd34d; box-shadow: 0 0 10px #ffd34d; }
.ava.t7::after { content: ''; position: absolute; top: -10px; bottom: -10px; width: 14px; background: rgba(255,255,255,.55); transform: translateX(-40px) rotate(20deg); animation: sweep 2.4s infinite; }
.who { flex: 1; min-width: 0; margin: 0 8px; }
.hn { display: flex; align-items: center; min-width: 0; }
.hn b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16ch; }
.hn span { margin-left: 4px; font-size: 13px; }
.check { animation: wiggleIn .6s var(--spring); }
.who small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; background: var(--panel2); border: 1px solid var(--line); font-weight: 700; font-size: 13px; white-space: nowrap; }
.chip.cash { min-height: 36px; color: var(--green); font-size: 15px; padding: 0 12px; }
.r2 { flex-direction: column; align-items: stretch; }
.fline { display: flex; align-items: baseline; }
.fcount { font-size: 34px; font-size: clamp(28px, 9vw, 40px); font-weight: 900; letter-spacing: -1px; line-height: 1.05; display: inline-block; }
.flbl { margin-left: 6px; color: var(--muted); font-weight: 700; }
.bots { margin-left: 6px; color: var(--muted); font-size: 12px; }
.progrow { display: flex; align-items: center; margin: 2px 0 2px; }
.prog { flex: 1; height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
.progt { font-size: 10px; color: var(--muted); margin-left: 8px; min-width: 64px; text-align: right; }
.r3 { height: 44px; margin-top: 2px; }
.bat { flex: 1.1; display: flex; align-items: center; min-width: 0; }
.bat .bi { font-size: 15px; margin-right: 4px; }
.bar { flex: 1; height: 10px; border-radius: 5px; background: var(--panel2); overflow: hidden; }
.bar i { display: block; height: 100%; transform-origin: left; transition: transform .3s; }
.bar i.hi { background: var(--green); } .bar i.mid { background: var(--gold); } .bar i.lo { background: var(--red); }
.grass { width: 44px; height: 44px; margin-left: 4px; border-radius: 50%; background: var(--panel2); position: relative; font-size: 20px; flex: none; }
.grass.ibtn { border-radius: 50%; }
.grass svg { position: absolute; top: 0; left: 0; width: 44px; height: 44px; transform: rotate(-90deg); pointer-events: none; }
.grass circle { fill: none; stroke: var(--green); stroke-width: 3; stroke-dasharray: 125.6; stroke-dashoffset: 0; }
.grass.cool { opacity: .55; }
.fraz .grass:not(.cool) { box-shadow: 0 0 0 2px var(--green), 0 0 14px var(--green); animation: glowPulse 1s infinite alternate; }
.rep { flex: 1; display: flex; align-items: center; margin-left: 10px; font-size: 14px; min-width: 0; }
.rbar { flex: 1; height: 10px; margin: 0 4px; border-radius: 5px; background: var(--panel2); position: relative; overflow: hidden; }
.rbar .mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--muted); z-index: 1; }
.rbar i { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: left; transform: scaleX(0); transition: transform .3s; }
.rbar i.good { background: var(--blue); } .rbar i.bad { background: var(--pink); } .rbar i.max.good { background: var(--gold); } .rbar i.max.bad { background: var(--red); }
.race { display: flex; align-items: center; height: 26px; font-size: 12px; font-weight: 700; }
.race .rn { margin: 0 4px; color: var(--blue); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race .rc { color: var(--blue); }
.race .ry { color: var(--pink); margin-left: 4px; }
.race.ahead .ry { text-shadow: 0 0 8px var(--pink); }
.track { flex: 1; height: 2px; background: var(--line); margin: 0 8px; position: relative; }
.track .rd { position: absolute; top: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; }
.rdot { background: var(--blue); } .ydot { background: var(--pink); box-shadow: 0 0 6px var(--pink); }
.clashchip { min-height: 26px; height: 26px; padding: 0 8px; margin-left: 6px; border-radius: 13px; font-size: 11px; font-weight: 900; background: var(--red); position: relative; animation: glowPulse 1s infinite alternate; }
.clashchip::before { content: ''; position: absolute; top: -9px; bottom: -9px; left: 0; right: 0; }

/* ---------- screens ---------- */
#screens { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; }
.screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 8px 14px 20px; }
.sh { font-size: 20px; font-weight: 900; margin: 6px 0 10px; }
.sub { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 16px 0 8px; }
.empty { color: var(--muted); padding: 14px; text-align: center; background: var(--panel); border-radius: 14px; }

/* ---------- home ---------- */
/* the Craving: a two-line, tappable pill (tap = select the craved type) */
.craving { flex: none; margin: 4px 12px 0; min-height: 46px; border-radius: 16px; padding: 4px 12px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; cursor: pointer;
  background: linear-gradient(90deg, rgba(255,211,77,.18), rgba(155,107,255,.18)); border: 1px solid rgba(255,211,77,.4); animation: slideDown .5s var(--spring); }
.craving.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.cv1 { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: .4px; color: var(--muted); white-space: nowrap; }
.cv1 .cvl { color: var(--gold); margin-left: 8px; }
.cv2 { display: flex; align-items: baseline; font-size: 14px; white-space: nowrap; min-width: 0; }
.cv2 b { color: var(--gold); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* flex items drop their leading space ("#SoupSzn→"), so the gaps are margins */
.cv2 .cvr { flex: none; font-weight: 800; margin-left: .3em; }
.cvok { color: var(--green); font-weight: 900; flex: none; margin-left: .25em; }
/* a 👾 / 🔮 Craving override: its type and × lead (never cut); the algorithm's waiting Craving is the part that may shrink */
.craving.ovr { background: linear-gradient(90deg, rgba(155,107,255,.32), rgba(61,220,132,.16)); border-color: rgba(155,107,255,.75); }
.craving.ovr.on { border-color: #b99bff; box-shadow: inset 0 0 0 1px #b99bff; }
.craving.ovr .cv1 { color: #d8c8ff; }
.craving.ovr .cv2 b { flex: none; color: #fff; }
.cv2 .cvw { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; font-weight: 700; margin-left: .5em; }
.center { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 8px 0; }
.grid { display: grid; grid-gap: 8px; gap: 8px; justify-content: center; }
.gempty { color: var(--muted); font-size: 13px; padding: 10px; text-align: center; grid-column: 1 / span 3; }
.tile { position: relative; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
/* only the newest post pops in (with a camera flash); empty slots are dashed and the next one invites a post */
.tile.fresh { animation: popIn .45s var(--spring); }
.tile.fresh::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; opacity: 0; animation: tileFlash .5s ease-out; pointer-events: none; }
.tile.vir { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(255,211,77,.5); }
.tile.ghost { background: rgba(255,255,255,.02); border: 2px dashed var(--line); box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.tile.ghost .gh { font-size: 18px; opacity: .45; font-style: normal; }
.tile.ghost small { font-size: 11px; margin-top: 2px; }
.tile.ghost.next { border-color: rgba(255,79,163,.65); background: rgba(255,79,163,.06); animation: ghostPulse 1.6s ease-in-out infinite; }
.tile.ghost.next .gh { font-size: 26px; opacity: 1; }
.goal { display: block; width: 100%; max-width: 340px; margin: 2px 6px 4px; padding: 6px 12px; border-radius: 14px; background: rgba(23,21,42,.85); border: 1px solid var(--line); font-size: 12px; font-weight: 800; text-align: center; }
.goal .gl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal .gbar { display: block; height: 4px; border-radius: 2px; background: var(--panel2); margin-top: 4px; overflow: hidden; }
.goal .gbar b { display: block; height: 100%; background: var(--grad); transform-origin: left; transition: transform .4s; }
.tile .te { font-size: 34px; }
.tile .tt { position: absolute; left: 5px; top: 3px; font-size: 14px; }
.tile .tp { position: absolute; left: 5px; bottom: 3px; font-size: 14px; }
.tile .tv { position: absolute; right: 5px; bottom: 3px; font-size: 13px; }
.tile .tg { position: absolute; right: 4px; top: 4px; font-size: 11px; font-weight: 900; background: rgba(0,0,0,.45); border-radius: 8px; padding: 1px 6px; }
.tile.gS .tg { color: var(--gold); } .tile.gA .tg { color: var(--pink); } .tile.gB .tg { color: var(--blue); }
.tile.gFLOP { filter: grayscale(1); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 6px; max-height: 104px; overflow: hidden; width: 100%; }
.chips .chip { margin: 2px 3px; font-size: 12px; min-height: 28px; }
.chip.deal { color: var(--gold); min-height: 32px; }
.chip.buff { color: var(--green); } .chip.buff.neg { color: var(--red); }
.chip.deal.ok { color: var(--green); border-color: var(--green); } .chip.deal.fail { color: var(--red); border-color: var(--red); }
.flames { flex: none; height: 24px; text-align: center; font-weight: 900; }
.flames span { display: inline-block; animation: popIn .3s var(--spring); color: #ffb03d; }
.flames .fl1 { font-size: 14px; } .flames .fl2 { font-size: 16px; } .flames .fl3 { font-size: 18px; } .flames .fl4 { font-size: 20px; } .flames .fl5 { font-size: 22px; text-shadow: 0 0 10px #ff8a3d; }
.preview { flex: none; height: 18px; text-align: center; font-size: 12px; color: var(--muted); }
.carousel { flex: none; height: 112px; display: flex; overflow-x: auto; overflow-y: hidden; padding: 4px 12px; touch-action: pan-x; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel::-webkit-scrollbar { display: none; }
.pcard { flex: none; width: 92px; height: 104px; margin-right: 8px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; }
.pcard .pce { font-size: 30px; line-height: 1.1; }
.pcard .pcn { font-size: 11px; font-weight: 800; margin-top: 2px; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
.pcard .pcm { font-size: 12px; font-weight: 900; color: var(--pink); }
.pcard .pcb { font-size: 10px; color: var(--muted); }
.pcard.sel { border: 2px solid #fff; background: var(--panel2); }
.pcard.locked { filter: grayscale(1); opacity: .5; }
.pcard.locked .pcm { color: var(--muted); }
.pcard.crave::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 18px; border: 2px solid var(--gold); box-shadow: 0 0 14px var(--gold); opacity: .4; animation: glow 1.2s ease-in-out infinite alternate; pointer-events: none; }
.pcard.isnew { animation: jiggle 3s infinite; }
.newtag { position: absolute; top: -4px; right: -2px; font-style: normal; font-size: 9px; font-weight: 900; background: var(--red); border-radius: 6px; padding: 1px 5px; }
.cravetag { position: absolute; top: -5px; right: -2px; font-style: normal; font-size: 10px; font-weight: 900; color: #1a0b14; background: var(--gold); border-radius: 6px; padding: 1px 5px; }
.postwrap { flex: none; padding: 6px 16px 10px; }
.btn.postbtn { width: 100%; height: 72px; border-radius: 22px; background: var(--grad); font-size: 20px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(255,79,163,.35); animation: breathe 1.6s ease-in-out infinite; }
.postbtn .pe { font-size: 26px; margin-right: 8px; }
.postbtn small { margin-left: 8px; color: rgba(255,255,255,.75); font-size: 12px; }
.staging .postbtn, .rm .postbtn { animation: none; }

/* ---------- tab bar ---------- */
#tabbar { position: relative; z-index: 3; flex: none; height: 56px; display: flex; background: rgba(23,21,42,.96); border-top: 1px solid var(--line); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-width: 44px; color: var(--muted); }
.tab .ti { font-size: 20px; line-height: 1.1; }
.tab .tl { font-size: 10px; font-weight: 700; }
.tab.on { color: var(--text); }
.tab.on::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad); }
.tab .badge { display: none; position: absolute; top: 7px; right: 50%; margin-right: -18px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--panel); }
.tab.badged .badge { display: block; }

/* ---------- vignette (frazzled) ---------- */
#vignette { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 15; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,77,77,0) 55%, rgba(255,77,77,.75) 100%); transition: opacity .4s; }
.fraz #vignette { opacity: .25; animation: vig 1.2s ease-in-out infinite alternate; }

/* ---------- mini-game stage ---------- */
#stage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: #0b0a14; display: flex; flex-direction: column; touch-action: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); animation: stageIn .3s ease-out; }
#mg-hud { flex: none; height: 56px; position: relative; display: flex; align-items: center; padding: 0 8px 4px 12px; }
#mg-label { flex: 1; font-weight: 900; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s; }
#mg-hud.combo #mg-label { opacity: 0; }   /* the combo takes the title's place instead of overlapping it */
#mg-combo { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 20px; font-weight: 900; white-space: nowrap; }
#mg-combo.c5 { color: var(--gold); } #mg-combo.c10 { color: #ff8a3d; } #mg-combo.c15 { color: var(--red); animation-name: comboWob; }
#mg-combo.c25 { background: linear-gradient(90deg, #ff4d4d, #ffd34d, #3ddc84, #5ab0ff, #9b6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#mg-combo.pa { animation: popA .2s ease-out; } #mg-combo.pb { animation: popB .2s ease-out; }
#mg-pause { width: 48px; height: 48px; border-radius: 14px; background: var(--panel2); font-size: 18px; }
#mg-timer { position: absolute; left: 12px; right: 12px; bottom: 0; height: 4px; border-radius: 2px; background: var(--panel2); overflow: hidden; }
#mg-timer i { display: block; height: 100%; background: var(--grad); transform-origin: left; }
#mg-pips { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; }
#mg-pips i { width: 9px; height: 9px; border-radius: 50%; margin: 0 3px; border: 2px solid var(--muted); }
#mg-pips i.ok { background: var(--pink); border-color: var(--pink); } #mg-pips i.perf { background: var(--gold); border-color: var(--gold); } #mg-pips i.miss { background: #444; border-color: #444; }
#bezel { flex: 1 1 auto; min-height: 0; position: relative; margin: 6px 12px 0; border: 10px solid #1b1a24; border-radius: 28px; overflow: hidden; background: #000; }
#mg-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#cracks { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
/* the crack joke stays, pushed back so it never competes with the gameplay (full-strength on the title and shop phones) */
#stage.ph0 #bezel { border-color: #555; } #stage.ph0 #cracks { display: block; opacity: .28; stroke-width: 2px; }
#stage.ph1 #bezel { border-color: #6b6b75; } #stage.ph1 #cracks { display: block; opacity: .14; stroke-width: 1px; }
#stage.ph1 #bezel::after { content: ''; position: absolute; top: -14px; height: 70px; left: 12%; width: 18px; background: rgba(230,215,170,.6); transform: rotate(35deg); pointer-events: none; border-radius: 2px; }
#stage.ph2 #bezel { border-color: #1b1a24; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
#stage.phg #bezel { border-color: #d4af37; box-shadow: 0 0 18px rgba(255,211,77,.5); }
#mg-prompt { flex: none; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .5px; transition: transform .25s; }
#mg-prompt.big { font-size: 17px; color: #fff; transform: translateY(-6px); }
#mg-prompt .hand { display: inline-block; margin-right: 6px; animation: tapHand .7s ease-in-out infinite; }
.pausedov { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(5,4,12,.72); display: flex; align-items: center; justify-content: center; animation: fadeIn .2s; pointer-events: auto; }
.pzcard { width: calc(100% - 64px); max-width: 320px; background: var(--panel); border-radius: 24px; padding: 20px; text-align: center; animation: slideUp .3s var(--spring); }
.ptitle { font-size: 24px; font-weight: 900; } .psub { color: var(--muted); margin: 4px 0 14px; }
.pzcard .btn { width: 100%; margin-top: 10px; }

/* ---------- buttons ---------- */
.btn { border-radius: 16px; background: var(--panel2); font-weight: 800; font-size: 16px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; text-align: center; transition: transform 60ms, opacity .2s; position: relative; }
.btn.big { height: 72px; width: 100%; font-size: 19px; font-weight: 900; border-radius: 20px; }
.btn.go { background: var(--grad); box-shadow: 0 6px 18px rgba(255,79,163,.3); }
.btn.mid { height: 48px; background: var(--panel2); border: 1px solid var(--line); }
.btn.mid.can { background: var(--green); color: #06210f; border: 0; animation: hop 2s infinite; }
.btn.ghost { background: transparent; border: 1px solid var(--line); height: 48px; }
.btn.danger { background: var(--red); height: 52px; width: 100%; margin-top: 18px; }
.btn.danger.soft { background: transparent; border: 1px solid rgba(255,77,77,.6); color: var(--red); height: 48px; margin-top: 4px; }
.sub.dz { color: var(--red); margin-top: 28px; }
.btn.dis { opacity: .45; filter: grayscale(.6); }
.ibtn { border-radius: 14px; }
button.pressed { transform: scale(.92) !important; animation: none !important; transition: transform 60ms; }
.springA { animation: springA .22s var(--spring); } .springB { animation: springB .22s var(--spring); }
.wobA { animation: wobA .3s ease-in-out !important; } .wobB { animation: wobB .3s ease-in-out !important; }
.bumpA { animation: bumpA .25s var(--spring); } .bumpB { animation: bumpB .25s var(--spring); }
.newA { animation: newA .5s var(--spring); } .newB { animation: newB .5s var(--spring); }
.btn.hold { overflow: hidden; touch-action: none; }
.btn.hold .hfill { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: rgba(255,255,255,.28); transform-origin: left; transform: scaleX(0); transition: transform 150ms linear; }
.btn.hold.holding .hfill { transform: scaleX(1); }
.btn.hold span { position: relative; }

/* ---------- results ---------- */
#results { position: absolute; left: 0; right: 0; bottom: 0; top: 140px; z-index: 20; background: var(--panel); border-radius: 22px 22px 0 0; display: flex; flex-direction: column;
  box-shadow: 0 -10px 30px rgba(0,0,0,.5); animation: sheetUp .3s var(--spring); padding-bottom: env(safe-area-inset-bottom, 0px); }
.rbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 22px 14px 6px; display: flex; flex-direction: column; align-items: center; }
.rtile.vir { box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgba(255,211,77,.55); }
.rfirst { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 900; color: #1a0b14;
  background: linear-gradient(90deg, #ffd34d, #ff8a3d); border-radius: 10px; padding: 3px 10px; box-shadow: 0 4px 12px rgba(0,0,0,.4); animation: popIn .5s .3s var(--spring) both; }
.rtile { position: relative; flex: none; border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.rtile.flop { filter: grayscale(1); }
.rte { font-size: 56px; }
.rta { position: absolute; left: 8px; bottom: 6px; font-size: 22px; }
.rtt { position: absolute; left: 8px; top: 6px; font-size: 20px; }
.rtp { position: absolute; right: 8px; bottom: 6px; font-size: 22px; animation: popIn .4s var(--spring); }
.rtv { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 900; background: var(--grad); border-radius: 10px; padding: 3px 8px; }
.stamp { position: absolute; right: -14px; top: -14px; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900;
  border: 4px solid currentColor; background: rgba(11,10,20,.85); opacity: 0; transform: scale(3) rotate(-12deg); }
.stamp.in { animation: stamp .15s ease-in forwards; }
.stamp.sS { color: var(--gold); overflow: hidden; } .stamp.sA { color: var(--pink); } .stamp.sB { color: var(--blue); } .stamp.sC { color: #aaa; }
.stamp.sFLOP { color: #777; font-size: 16px; }
.stamp.sFLOP.in { animation: stampDroop .5s ease-in forwards; }
.stamp.sS::after { content: ''; position: absolute; top: -10px; bottom: -10px; width: 16px; background: rgba(255,255,255,.6); transform: translateX(-60px) rotate(20deg); animation: sweep 1.6s .3s infinite; }
.rcap { margin-top: 18px; font-size: 13px; text-align: center; color: var(--gold); max-width: 320px; }
.rcap.take { color: var(--pink); margin-top: 8px; }
.rnums { display: flex; justify-content: space-around; width: 100%; margin-top: 16px; font-size: 15px; }
.rnums b { font-variant-numeric: tabular-nums; }
.rnums .rf b { color: var(--pink); } .rnums .rc b { color: var(--green); }
.rflames { height: 22px; margin-top: 4px; font-weight: 900; }
.rflames span { display: inline-block; animation: popIn .3s var(--spring); color: #ffb03d; }
.rflames .puff { color: var(--muted); }
.rflames .crave { color: var(--gold); }
.rflames span + span { margin-left: 12px; }
.rdeals { display: flex; flex-wrap: wrap; justify-content: center; }
.rdeals .chip { margin: 2px; }
.comments { width: 100%; margin-top: 4px; }
.cmt { display: flex; align-items: flex-start; flex-wrap: wrap; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.06); transition: transform .25s var(--spring), opacity .2s; }
.cmt.hide { opacity: 0; transform: translateY(10px); }
.cmt .ca { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--panel2); display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: 8px; }
.cmt .cb { flex: 1; min-width: 0; font-size: 13px; }
.cmt .cb b { color: var(--muted); font-size: 12px; }
.cmt .cl { font-size: 11px; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.cmt.feat { background: rgba(155,107,255,.12); border-radius: 12px; }
.reply { width: 100%; display: flex; justify-content: flex-end; margin-top: 4px; }
.btn.rchip { min-height: 44px; height: 44px; font-size: 13px; padding: 0 10px; margin-left: 6px; border-radius: 22px; background: var(--panel2); border: 1px solid var(--line); }
.replied { color: var(--green); font-size: 12px; font-weight: 800; padding: 10px; }
.rbtns { flex: none; padding: 6px 14px 10px; }
.rbtns .again { margin-bottom: 8px; }
.rbtns .again.ready { animation: pulse 1.2s ease-in-out infinite; }
.rbtns .again small { color: rgba(255,255,255,.75); margin-left: 4px; }
.rbtns .home { width: 100%; }
.rrow { display: flex; }
.rrow .home { flex: 1; width: auto; }
.rrow .chase { flex: 1.4; margin-left: 8px; height: 48px; font-size: 14px; color: var(--gold); border-color: rgba(255,211,77,.6); background: rgba(255,211,77,.08); }
.rrow .chase b { margin-left: 2px; }

/* ---------- modals / overlays ---------- */
#modal-root, #overlay-root { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
#modal-root { z-index: 30; } #overlay-root { z-index: 40; }
.mwrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); transition: opacity .18s; }
.mwrap.closing { opacity: 0; pointer-events: none; }
.mback { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(5,4,12,.7); animation: fadeIn .2s; }
.modal { position: relative; width: calc(100% - 32px); max-width: 400px; max-height: calc(100% - 40px); overflow-y: auto; overscroll-behavior: contain; background: var(--panel);
  border: 1px solid var(--line); border-radius: 24px; padding: 18px 16px 16px; animation: slideUp .3s var(--spring); }
.modal .x { position: absolute; top: 4px; right: 4px; width: 48px; height: 48px; border-radius: 50%; font-size: 18px; color: var(--muted); z-index: 2; }
.modal .btn { width: 100%; margin-top: 10px; }
.modal.nudA { animation: nudA .3s; } .modal.nudB { animation: nudB .3s; }
.pzcard.nudA { animation: nudA .3s; } .pzcard.nudB { animation: nudB .3s; }
.mt { font-size: 19px; font-weight: 900; margin: 2px 40px 10px 0; }
.nox .mt { margin-right: 0; }
.note2.left { text-align: left; margin: -2px 0 8px; }
.note2 { color: var(--muted); font-size: 12px; text-align: center; margin-top: 8px; }
.small .modal { text-align: center; }
.oc-e { font-size: 52px; line-height: 1.1; margin-top: 4px; }
.oc-t { font-size: 17px; font-weight: 800; margin: 6px 0; }
.oc-d { font-size: 18px; font-weight: 900; margin: 4px 0; }
.oc-d.up { color: var(--green); } .oc-d.down { color: var(--red); }
.ov .mback { background: rgba(5,4,12,.9); }
.mwrap.drama .modal { animation: slideUp .3s var(--spring), shake6 .3s .3s; }

/* event card */
.ev { padding: 12px 12px 14px; overflow-x: hidden; }
.evc { position: relative; background: var(--panel2); border-radius: 18px; padding: 12px 14px 16px; margin: 4px 8px 0; text-align: center; touch-action: none; will-change: transform; }
.evc.drag { box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.evh { display: flex; align-items: center; justify-content: center; }
.evwho { width: 48px; height: 48px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 8px; flex: none; }
.evh b { font-size: 15px; }
.evart { font-size: 64px; line-height: 1.2; margin-top: 4px; }
.evhead { font-size: 18px; font-weight: 900; margin-top: 2px; }
.evtext { font-size: 14px; color: #d8d5ef; margin-top: 6px; line-height: 1.4; }
.lean { position: absolute; top: 10px; max-width: 58%; padding: 6px 10px; border-radius: 12px; font-size: 13px; font-weight: 900; opacity: 0; pointer-events: none; }
.lean.l { left: 8px; background: rgba(255,77,77,.92); transform: rotate(-6deg); }
.lean.r { right: 8px; background: rgba(61,220,132,.92); color: #06210f; transform: rotate(6deg); }
.swhand { position: absolute; bottom: 8px; left: 50%; font-size: 30px; animation: swipeHand 1.8s ease-in-out infinite; pointer-events: none; }
.ch2 { display: flex; margin-top: 4px; }
.ch2 .choice { flex: 1; margin: 10px 4px 0; }
.choice { min-height: 56px; height: auto; padding: 8px 10px; flex-direction: column; font-size: 14px; border: 1px solid var(--line); background: var(--panel2); }
.choice .ct { line-height: 1.2; }
.choice .cc { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.choice .cc i { font-style: normal; font-size: 11px; background: rgba(0,0,0,.3); border-radius: 8px; padding: 1px 6px; margin: 1px 2px; }
.ch3 .choice { width: 100%; margin-top: 8px; }
.dots { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 5; }
.dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .15s; }
.dot.on { opacity: 1; transform: scale(1); } .dot.on.big { transform: scale(1.9); }

/* tier up / clash result */
.tierup .modal { text-align: center; padding-top: 26px; background: radial-gradient(ellipse at 50% 0%, #3a2466, var(--panel) 70%); }
.tu-k { font-size: 14px; font-weight: 900; letter-spacing: 3px; color: var(--gold); }
.tu-ava { width: 88px; height: 88px; margin: 12px auto 6px; border-radius: 50%; border: 5px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 48px; background: var(--panel2); animation: popIn .5s var(--spring); }
.tu-ava.t6 { border-color: #ff4fa3; box-shadow: 0 0 0 4px #ffd34d, 0 0 0 8px #5ab0ff; } .tu-ava.t7 { border-color: #ffd34d; box-shadow: 0 0 22px #ffd34d; }
.tu-n { font-size: 30px; font-weight: 900; line-height: 1.1; animation: popIn .5s .1s var(--spring) both; }
.rainbowtxt { background: linear-gradient(90deg, #ff4d4d, #ffd34d, #3ddc84, #5ab0ff, #9b6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tu-f { color: var(--muted); margin: 4px 0 10px; }
.tu-l div { background: var(--panel2); border-radius: 12px; padding: 10px; margin: 6px 0; font-weight: 700; animation: slideUp .4s var(--spring) both; }
.tu-l div:nth-child(2) { animation-delay: .1s; } .tu-l div:nth-child(3) { animation-delay: .2s; }
.un-e { font-size: 72px; line-height: 1.1; margin: 8px 0 2px; animation: popIn .5s var(--spring); }
.tu-l .gold { color: var(--gold); }
.unlock .modal .btn.ghost { margin-top: 8px; }
.defeated { display: inline-block; font-size: 34px; font-weight: 900; color: var(--red); border: 4px solid var(--red); border-radius: 10px; padding: 2px 12px; transform: rotate(-8deg); animation: stamp .2s ease-in both; }

/* viral splash */
.viral .modal { text-align: center; overflow: hidden; background: #140f2a; border: 0; }
.viral .modal::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(#ff4d4d, #ffd34d, #3ddc84, #5ab0ff, #9b6bff, #ff4d4d); animation: spin 2s linear infinite; z-index: 0; }
.viral .modal::after { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 20px; background: #140f2a; z-index: 0; }
.viral .modal > * { position: relative; z-index: 1; }
.vr-k { font-size: 30px; font-weight: 900; margin-top: 8px; animation: popIn .4s var(--spring); }
.vr-c { margin: 12px 4px; font-size: 15px; }
.vr-s { color: var(--gold); font-weight: 800; margin-bottom: 8px; }

/* away */
.away .modal { text-align: center; }
.aw-k { font-weight: 900; letter-spacing: 2px; color: var(--gold); font-size: 13px; }
.aw-c { font-size: 16px; font-weight: 700; margin: 10px 0; }
.aw-n { display: flex; flex-direction: column; font-size: 17px; }
.aw-n span { margin: 3px 0; } .aw-n b { color: var(--pink); } .aw-n .cash b { color: var(--green); }
.aw-m { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* handle picker / take picker */
/* the handle card sits high so the on-screen keyboard never covers "That's me!" */
.handle.mwrap { align-items: flex-start; }
.handle .modal { text-align: center; margin-top: 40px; }
.hp-k { color: var(--gold); font-weight: 900; font-size: 13px; margin: 2px 0 6px; }
.hp-a { display: inline-block; font-size: 12px; font-weight: 800; color: var(--green); background: rgba(61,220,132,.1); border: 1px solid rgba(61,220,132,.35); border-radius: 999px; padding: 3px 10px; margin: 0 0 8px; animation: popIn .4s .2s var(--spring) both; }
.hp-v { font-size: 24px; font-weight: 900; color: var(--pink); margin: 6px 0 4px; word-break: break-all; }
.handle .hp-i { margin-top: 4px; text-align: center; }
.handle .btn.mid { margin-top: 8px; }
.btn.takeb.last { box-shadow: inset 0 0 0 2px var(--gold); }
.hp-i { width: 100%; height: 48px; margin-top: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 16px; padding: 0 12px; outline: none; }
.btn.takeb { width: 100%; min-height: 64px; height: auto; padding: 8px 12px; flex-direction: column; align-items: flex-start; margin-top: 8px; text-align: left; border: 1px solid var(--line); }
.tk1 { font-weight: 900; } .tk2 { font-size: 13px; font-weight: 600; color: #d8d5ef; } .tk3 { font-size: 12px; color: var(--muted); }
.takeb.t-spicy { border-color: #ff8a3d; } .takeb.t-nuclear { border-color: var(--red); background: rgba(255,77,77,.12); }

/* notes app + cutscene */
.notes .modal, .cutscene .modal { background: #fbfaf6; color: #222; border: 0; }
.note { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5; white-space: pre-wrap; min-height: 120px; text-align: left; color: #222; }
.nh { font-weight: 800; color: #d4a017; margin-bottom: 6px; font-size: 14px; }
.note p { margin: 6px 0; } .note .sig { color: #888; }
.cutscene .modal { min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.cs { text-align: center; }
.cs .btn { color: #fff; }
.epcard { background: #17152a; color: var(--text); border-radius: 18px; padding: 18px 14px; position: relative; overflow: hidden; }
.ep-k { font-weight: 900; letter-spacing: 2px; color: var(--gold); font-size: 13px; animation: stamp .2s ease-in both; }
.ep-e { font-size: 56px; margin-top: 6px; } .ep-n { font-size: 22px; font-weight: 900; }
.ep-l { white-space: pre-wrap; margin-top: 8px; min-height: 60px; color: #d8d5ef; }
.ep-new { position: absolute; top: 12px; right: -30px; background: var(--red); color: #fff; font-weight: 900; font-size: 12px; padding: 3px 34px; transform: rotate(35deg); }
.stars { background: #17152a; color: var(--text); border-radius: 18px; padding: 18px 14px; }
.st-n { font-size: 44px; font-weight: 900; color: var(--gold); } .st-t { color: var(--muted); } .st-h { margin-top: 8px; font-weight: 800; color: var(--pink); }

/* phone ceremony + phone element */
.ceremony .modal { background: transparent; border: 0; height: 320px; overflow: hidden; text-align: center; }
.ceremony .phone { position: absolute; left: 50%; top: 30px; margin-left: -60px; width: 120px; height: 210px; }
.ceremony .phone.old { animation: tumble .6s ease-in forwards; }
.ceremony .phone.new { animation: dropIn .6s .5s var(--spring) both; }
.ceremony .phone.new::before { content: ''; position: absolute; top: -20px; bottom: -20px; width: 30px; z-index: 3; background: rgba(255,255,255,.6); transform: translateX(-80px) rotate(20deg); animation: sweep .8s 1s; }
.cer-t { position: absolute; left: 0; right: 0; bottom: 34px; font-size: 20px; font-weight: 900; animation: fadeIn .3s .9s both; }
.cer-s { position: absolute; left: 0; right: 0; bottom: 10px; color: var(--green); font-weight: 800; animation: fadeIn .3s 1s both; }
.phone { width: 64px; height: 112px; border-radius: 14px; border: 5px solid #555; background: #111; position: relative; overflow: hidden; flex: none; }
.phone .pscreen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; background: linear-gradient(160deg, #3a2456, #1d1530); }
.ceremony .phone .pscreen { font-size: 48px; }
.phone .pcrack { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .85; stroke-width: 3px; }
.phone .pcrack svg { width: 100%; height: 100%; display: block; }
.phone.ph1 { border-color: #6b6b75; } .phone.ph1 .pcrack { opacity: .35; stroke-width: 1.5px; }
.phone.ph1::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: 30%; width: 12px; background: rgba(230,215,170,.6); transform: rotate(12deg); }
.phone.ph2 { border-color: #2a2836; box-shadow: 0 0 0 1px #555, 0 8px 20px rgba(0,0,0,.5); }
.phone.phg { border-color: #d4af37; box-shadow: 0 0 16px rgba(255,211,77,.6); }

/* ---------- toasts / floaters / fx ---------- */
/* toasts are phone notification banners that drop in from the top, away from POST / POST AGAIN */
#toasts { position: absolute; left: 0; right: 0; top: 6px; top: calc(6px + env(safe-area-inset-top, 0px)); z-index: 50; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; width: calc(100% - 20px); max-width: 410px; margin-bottom: 6px; padding: 9px 14px; border-radius: 18px; background: rgba(34,31,61,.97); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.5);
  font-size: 13px; font-weight: 700; animation: toastDrop .32s var(--spring); transition: opacity .25s, transform .25s; }
.toast.out { opacity: 0; transform: translateY(-12px); }
.toast.ach { border-color: rgba(255,211,77,.6); background: linear-gradient(90deg, rgba(58,47,16,.97), rgba(34,31,61,.97)); }
.toast .te { font-size: 18px; margin-right: 8px; flex: none; }
.toast .tt { flex: 1; min-width: 0; }
/* full-size and clipped: parked or in-flight floaters must not grow #app's scroll area (focus/scrollIntoView would shift the whole UI) */
#floaters { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 60; pointer-events: none; }
.fl { position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(-999px, -999px); will-change: transform; }
.fl b { display: block; transform: translate(-50%, -50%); opacity: 0; white-space: nowrap; font-weight: 900; font-size: 17px; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.4); }
.fl.a b { animation: floatA .9s ease-out forwards; } .fl.b b { animation: floatB .9s ease-out forwards; }
.fl.fly b { opacity: 1; animation: none; }
#fx-canvas { position: absolute; top: 0; left: 0; z-index: 70; pointer-events: none; }
#flash { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 80; background: #fff; opacity: 0; pointer-events: none; }
.blessed .postbtn { box-shadow: 0 0 0 3px var(--gold), 0 8px 24px rgba(255,211,77,.45); }
.sun .postbtn { background: linear-gradient(135deg, #ffd34d, #ff4fa3); }

/* ---------- title ---------- */
#title { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 90; background: radial-gradient(ellipse at 50% 30%, #3a1d6e 0%, #0b0a14 70%); display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); transition: opacity .25s; }
#title.closing { opacity: 0; }
.tsnd { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; width: 48px; height: 48px; background: var(--panel2); font-size: 20px; }
.logo { font-size: 44px; font-size: clamp(36px, 13vw, 56px); font-weight: 900; letter-spacing: -1px; line-height: 1; text-align: center; background: linear-gradient(90deg, #ff4fa3, #ffd34d, #9b6bff);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #000); animation: bob 2s ease-in-out infinite; }
.tphone { position: relative; width: 180px; height: 320px; max-height: 40vh; max-width: 22.5vh; border-radius: 26px; border: 8px solid #555; overflow: hidden; background: #111; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.tphone .pscreen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 72px; background: linear-gradient(160deg, #2a2340, #1a1726); }
.tphone .pcrack { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .85; stroke-width: 2.5px; }
.tphone .pcrack svg { width: 100%; height: 100%; display: block; }
.tphone.squashA { animation: squashA .3s var(--spring); } .tphone.squashB { animation: squashB .3s var(--spring); }
.tline { text-align: center; color: var(--muted); font-weight: 700; font-size: 15px; max-width: 300px; }
.tgo { width: calc(100% - 0px); max-width: 398px; animation: pulse 1.2s ease-in-out infinite; font-size: 22px; }

/* ---------- touch grass ---------- */
.grassov { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 48; overflow: hidden; background: linear-gradient(180deg, #8fd3ff 0%, #c9f0ff 45%, #7ad36b 70%, #3c9a3a 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fadeIn .4s; transition: opacity .3s; touch-action: none; }
.grassov.closing { opacity: 0; }
.gsun { position: absolute; top: 9%; right: 14%; width: 70px; height: 70px; border-radius: 50%; background: #fff6b0; box-shadow: 0 0 40px #fff6b0; }
.blade { position: absolute; bottom: -6px; width: 14px; background: linear-gradient(180deg, #8be36f, #2f8a2e); border-radius: 14px 14px 0 0; transform-origin: bottom center; animation: sway 2.4s ease-in-out infinite alternate; font-style: normal; }
.gtxt { position: relative; z-index: 2; color: #0b3a12; font-weight: 900; font-size: 18px; text-align: center; padding: 0 30px; }
.gring { position: relative; z-index: 2; width: 150px; height: 150px; margin-top: 18px; }
.gring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gtrack { fill: rgba(255,255,255,.35); stroke: rgba(11,58,18,.15); stroke-width: 8; }
.gprog { fill: none; stroke: #0b3a12; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 0; animation: ring8 8s linear forwards; }
.gnum { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 54px; font-weight: 900; color: #0b3a12; }

/* ---------- shop ---------- */
.shopprev { height: 120px; border-radius: 18px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 10px; }
.shopprev span { position: absolute; font-size: 34px; opacity: .6; } .sp1 { left: 10%; top: 18%; } .sp2 { right: 10%; top: 30%; } .sp3 { left: 30%; bottom: 8%; } .shopprev .sp4 { right: 28%; top: 6%; font-size: 26px; opacity: .9; }
.shopprev .phone { width: 56px; height: 98px; }
/* Light upgrades are visible: a warm glow that grows with each level */
.slight { position: absolute; top: -40px; left: 50%; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,170,.55), rgba(255,236,170,0) 65%); opacity: 0; pointer-events: none; }
.lt1 .slight { opacity: .25; } .lt2 .slight { opacity: .4; } .lt3 .slight { opacity: .55; } .lt4 .slight { opacity: .7; } .lt5 .slight { opacity: .8; } .lt6 .slight { opacity: .9; } .lt7 .slight { opacity: 1; }
.srow { display: flex; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 10px; margin-bottom: 10px; }
.sic { font-size: 30px; width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; }
.sinfo { flex: 1; min-width: 0; margin: 0 8px; }
.sname { font-weight: 900; font-size: 15px; }
.pips { display: flex; align-items: center; margin: 3px 0; }
.pips i { width: 8px; height: 8px; border-radius: 2px; background: #3a3660; margin-right: 3px; }
.pips i.on { background: var(--pink); box-shadow: 0 0 4px var(--pink); }
.pips .lv { margin-left: 4px; font-size: 10px; }
.snext { font-size: 12px; color: #d8d5ef; } .seff { color: var(--green); font-weight: 800; }
.sjoke { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 2px; }
.btn.price { min-width: 96px; height: 48px; font-size: 15px; font-weight: 900; flex: none; padding: 0 10px; }
.btn.price.can { background: var(--green); color: #06210f; animation: hop 3s infinite; }
.btn.price.cant { background: var(--panel2); color: var(--muted); }
.btn.price.maxed { background: transparent; border: 1px solid var(--gold); color: var(--gold); font-size: 13px; }
.disc { position: absolute; top: -8px; right: -6px; font-style: normal; font-size: 10px; background: var(--red); color: #fff; border-radius: 8px; padding: 1px 5px; }
.shint { text-align: center; color: var(--muted); font-size: 11px; margin-top: 6px; }

/* ---------- DMs ---------- */
.dm { display: flex; align-items: center; width: 100%; min-height: 64px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 8px 10px; margin-bottom: 8px; text-align: left; position: relative; }
.dm.contract { border-color: rgba(255,211,77,.5); }
.dav { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--panel2); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 10px; }
.dav.big { width: 56px; height: 56px; font-size: 30px; }
.dmb { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dmb b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmb small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmr { display: flex; flex-direction: column; align-items: flex-end; margin-left: 6px; flex: none; }
.pay { color: var(--green); font-weight: 900; font-size: 14px; }
.exp { font-size: 10px; color: var(--muted); background: var(--panel2); border-radius: 8px; padding: 1px 6px; margin-top: 3px; }
.udot { display: none; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
.dm.unread .udot { display: block; }
.deal .modal { text-align: center; }
.dl-h { display: flex; align-items: center; justify-content: center; font-size: 18px; }
.dl-p { margin: 10px 0; color: #d8d5ef; font-style: italic; }
.dl-req { background: var(--panel2); border-radius: 12px; padding: 8px; font-weight: 800; }
.dl-n { display: flex; justify-content: space-around; margin: 10px 0 4px; font-weight: 900; font-size: 16px; }
.dl-n .neg { color: var(--pink); } .dl-n .pos { color: var(--blue); }
.bubbles { max-height: 50vh; overflow-y: auto; }
.bub { display: flex; align-items: flex-start; margin: 6px 0; }
.bub span { font-size: 22px; margin-right: 8px; }
.bub p { margin: 0; background: var(--panel2); border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 14px; }

/* ---------- fame ---------- */
.btn.rebrand { background: linear-gradient(135deg, #ffd34d, #ff4fa3); color: #1a0b14; margin-bottom: 8px; animation: glowPulse 1.2s infinite alternate; }
.ladder { background: var(--panel); border-radius: 16px; padding: 4px; }
.tier { display: flex; align-items: center; min-height: 40px; padding: 5px 10px; border-radius: 12px; font-size: 13px; }
.tier .tn { flex: 1; font-weight: 800; line-height: 1.15; }
.tier .ta { width: 48px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.tier .tu { width: 42%; margin-left: 10px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier.past .tn { color: var(--muted); }
.tier.cur { background: var(--panel2); box-shadow: inset 0 0 0 2px var(--pink); }
.tier.next { box-shadow: inset 0 0 0 1px var(--gold); } .tier.next .tu { color: var(--gold); }
.rival { display: flex; align-items: center; background: var(--panel); border-radius: 16px; padding: 10px; }
.rival .dmb small { white-space: normal; }
.rival .btn { margin-left: 6px; font-size: 13px; padding: 0 8px; background: var(--red); border: 0; }
.quest { display: flex; align-items: center; background: var(--panel); border-radius: 16px; padding: 10px; margin-bottom: 8px; }
.quest.claimed { opacity: .5; }
.qb { flex: 1; min-width: 0; margin-right: 8px; }
.qb b { font-size: 13px; display: block; }
.qbar { height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; margin: 4px 0 2px; }
.qbar i { display: block; height: 100%; background: var(--green); transform-origin: left; }
.qdone { font-size: 22px; color: var(--green); width: 60px; text-align: center; }
.qprog { width: 80px; text-align: center; font-weight: 900; color: var(--muted); font-size: 13px; }
.quest .btn { min-width: 80px; }
.achs { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 6px; gap: 6px; }
.ach { height: 48px; border-radius: 12px; background: var(--panel); font-size: 22px; }
.ach.got { background: var(--panel2); box-shadow: inset 0 0 0 1px var(--gold); }
.ach:not(.got) { font-size: 18px; font-weight: 900; color: var(--muted); }
.epis { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 6px; gap: 6px; }
.epi { background: var(--panel); border-radius: 14px; padding: 10px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.epi span { font-size: 30px; filter: grayscale(1) brightness(.4); } .epi.got span { filter: none; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 6px; gap: 6px; }
.stats div { background: var(--panel); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.stats b { font-size: 17px; font-variant-numeric: tabular-nums; }
.rebrand .modal { max-width: 420px; }
.rb-p { font-weight: 800; color: var(--gold); text-align: center; }
.personas { display: flex; overflow-x: auto; touch-action: pan-x; padding: 10px 2px; margin: 0 -4px; }
.persona { flex: none; width: 128px; min-height: 150px; margin: 0 4px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.persona .pe { font-size: 34px; } .persona b { font-size: 13px; margin: 2px 0; } .persona small { font-size: 10px; }
.persona .suf { color: var(--pink); margin-top: auto; word-break: break-all; }
.persona.sel { border: 2px solid var(--gold); box-shadow: 0 0 12px rgba(255,211,77,.4); }

/* ---------- settings ---------- */
.btn.row, .row { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; background: var(--panel); border-radius: 16px; padding: 0 14px; margin-bottom: 8px; font-size: 15px; font-weight: 700; text-align: left; }
.sw { position: relative; width: 48px; height: 28px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); flex: none; font-style: normal; }
.sw b { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .2s var(--spring); }
.tog.on .sw { background: var(--green); } .tog.on .sw b { transform: translateX(20px); background: #fff; }
.row.rename { flex-direction: column; align-items: stretch; padding: 10px 14px; }
.rn { display: flex; align-items: center; margin-top: 6px; }
.rn .hp-i { margin: 0 6px; flex: 1; min-width: 0; }
.rn .ibtn { width: 48px; height: 48px; background: var(--panel2); font-size: 20px; }
.rn .btn.mid { width: auto; margin: 0; }
.chip.warn { color: var(--red); border-color: var(--red); margin: 6px 0; }
.credits { color: var(--muted); text-align: center; margin-top: 18px; font-size: 12px; }
.ver { color: var(--muted); text-align: center; font-size: 11px; margin-top: 4px; }

/* ---------- hover only where hover exists ---------- */
@media (hover: hover) {
  .btn:hover, .tab:hover, .pcard:hover { filter: brightness(1.12); }
}
@media (max-width: 359px) {
  .pcard { width: 84px; height: 96px; } .carousel { height: 104px; }
  .achs { grid-template-columns: repeat(4, 1fr); }
  .postbtn { font-size: 18px; } .tier .tu { display: none; }
}
@media (max-height: 600px) {
  /* v2 S5: .btn.postbtn (two classes) used to outrank this rule, so POST stayed 72 px on short screens; §3.11 budgets 64 + 10 */
  .r1 { height: 42px; } .fcount { font-size: 28px; } .btn.postbtn { height: 64px; } .postwrap { padding: 4px 16px 6px; }
}

/* ---------- keyframes ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes stageIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastIn { from { transform: translateY(20px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastDrop { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tileFlash { from { opacity: .85; } to { opacity: 0; } }
@keyframes ghostPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes popA { from { transform: translateX(-50%) scale(1.25); } to { transform: translateX(-50%) scale(1); } }
@keyframes popB { from { transform: translateX(-50%) scale(1.25); } to { transform: translateX(-50%) scale(1); } }
@keyframes comboWob { 0%, 100% { transform: translateX(-50%) rotate(-4deg); } 50% { transform: translateX(-50%) rotate(4deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(255,79,163,.3); } 50% { transform: scale(1.05); box-shadow: 0 6px 30px rgba(255,79,163,.6); } }
@keyframes bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes springA { from { transform: scale(.92); } to { transform: scale(1); } }
@keyframes springB { from { transform: scale(.92); } to { transform: scale(1); } }
@keyframes wobA { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes wobB { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes bumpA { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes bumpB { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes newA { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes newB { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes nudA { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes nudB { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes shake6 { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes squashA { 0% { transform: scaleY(.9); } 100% { transform: scaleY(1); } }
@keyframes squashB { 0% { transform: scaleY(.9); } 100% { transform: scaleY(1); } }
@keyframes jiggle { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-5deg); } 93% { transform: rotate(5deg); } 96% { transform: rotate(-3deg); } }
@keyframes glow { from { opacity: .25; } to { opacity: .9; } }
@keyframes glowPulse { from { opacity: .8; } to { opacity: 1; transform: scale(1.03); } }
@keyframes hop { 0%, 88%, 100% { transform: translateY(0); } 92% { transform: translateY(-5px); } 96% { transform: translateY(0); } }
@keyframes jitter { 0% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); } 100% { transform: translate(-1px, 1px); } }
@keyframes vig { from { opacity: .25; } to { opacity: .5; } }
@keyframes floatA { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); } 25% { transform: translate(-50%, -80%) scale(1.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 70px)) scale(1); } }
@keyframes floatB { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); } 25% { transform: translate(-50%, -80%) scale(1.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 70px)) scale(1); } }
@keyframes stamp { 0% { opacity: 0; transform: scale(3) rotate(-12deg); } 100% { opacity: 1; transform: scale(1) rotate(-12deg); } }
@keyframes stampDroop { 0% { opacity: 0; transform: scale(3) rotate(-12deg); } 30% { opacity: 1; transform: scale(1) rotate(-12deg); } 100% { opacity: 1; transform: scale(1) rotate(8deg) translateY(4px); } }
@keyframes sweep { 0% { transform: translateX(-60px) rotate(20deg); } 60%, 100% { transform: translateX(140px) rotate(20deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wiggleIn { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.3) rotate(10deg); } 100% { transform: none; } }
@keyframes tapHand { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes swipeHand { 0% { transform: translateX(-60px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(50px); opacity: 0; } }
@keyframes sway { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes ring8 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 326.7; } }
@keyframes tumble { 0% { transform: none; opacity: 1; } 100% { transform: translateY(120%) rotate(35deg); opacity: 0; } }
@keyframes dropIn { 0% { transform: translateY(-120%); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- reduce motion: drop decorative loops ---------- */
.rm .postbtn, .rm .tgo, .rm .logo, .rm .pcard.isnew, .rm .btn.price.can, .rm .btn.mid.can, .rm .clashchip, .rm .btn.rebrand, .rm .blade, .rm .swhand,
.rm #mg-prompt .hand, .rm .ava.t7::after, .rm .stamp.sS::after, .rm .viral .modal::before, .rm .fraz #hud,
.rm .tile.ghost.next, .rm .rbtns .again.ready, .rm .fraz .grass, .rm .tile.fresh, .rm .tile.fresh::after { animation: none !important; }
.rm .fraz #vignette { animation: none; opacity: .35; }
.rm .pcard.crave::after { animation: none; opacity: .7; }

/* =====================================================================
 * v2.0 "OMNIPRESENT" (PROGRESSION_SPEC.md): Clout Receipt, Clout Math, floaters, rate chip, mastery pips, late tiers
 * Family colours: base white · skill pink · algorithm purple · gear blue · prestige gold · power-ups green · penalties red stripes
 * ===================================================================== */
:root { --f-base: #ffffff; --f-skill: #ff4fa3; --f-algo: #9b6bff; --f-gear: #5ab0ff; --f-prestige: #ffd34d; --f-power: #3ddc84; --f-penalty: #ff4d4d; }
.num, .rnums b, .rcm, .cm-row .cx, .cm-row .cs, .cm-tr span, .fcount, .progt { font-variant-numeric: tabular-nums; }
.rnums { justify-content: center; margin-top: 14px; }
.rnums span + span { margin-left: 28px; }
.rnums .rf { font-size: 18px; font-weight: 900; }
.rnums .rf.bumpA, .rnums .rf.bumpB { display: inline-block; }
/* the receipt: at most 7 chips in 2 rows + [?], always fits at 320 px */
.rcpt { width: 100%; max-width: 380px; margin-top: 8px; }
.rc-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.rcf, .rc-q { position: relative; min-height: 34px; min-width: 0; height: 34px; margin: 5px 3px; padding: 0 9px; border-radius: 17px; background: var(--panel2);
  border: 1.5px solid currentColor; font-size: 13px; font-weight: 900; display: inline-flex; align-items: center; white-space: nowrap; visibility: hidden; }
.rcf::before, .rc-q::before { content: ''; position: absolute; top: -5px; bottom: -5px; left: -2px; right: -2px; }   /* 44 px touch target */
.rcf.in, .rc-q { visibility: visible; }
.rcf.pop { animation: chipIn .2s ease-out; }   /* transient: a tap (pressed/spring) must not replay the landing */
.rcf .rce { margin-right: 4px; font-size: 14px; }
.rcf.f-base { color: var(--f-base); } .rcf.f-skill { color: var(--f-skill); } .rcf.f-algo { color: var(--f-algo); } .rcf.f-gear { color: var(--f-gear); }
.rcf.f-prestige { color: var(--f-prestige); } .rcf.f-power { color: var(--f-power); }
.rcf.f-penalty { color: var(--f-penalty); background: repeating-linear-gradient(135deg, rgba(255,77,77,.22) 0 6px, rgba(255,77,77,.06) 6px 12px); }
.rcf.top { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(255,211,77,.55); }
.rcn { position: absolute; top: -8px; right: -4px; font-style: normal; font-size: 8px; font-weight: 900; color: #fff; background: var(--red); border-radius: 5px; padding: 1px 4px; }
.cm-row .rcn { position: static; margin-left: 4px; }
.rc-q { width: 34px; justify-content: center; padding: 0; color: var(--muted); border-color: var(--line); font-size: 15px; }
.rc-pop { margin: 4px 6px 0; padding: 7px 10px; border-radius: 12px; background: rgba(34,31,61,.95); border: 1px solid var(--line); font-size: 12px; line-height: 1.35; text-align: left;
  animation: popIn .18s ease-out; }
.rc-pop .rpp.isnew { color: var(--gold); }
.rc-lines { margin-top: 4px; text-align: center; font-size: 12px; font-weight: 700; animation: fadeIn .25s; }
.rc-top { color: var(--gold); }
.rc-line { color: var(--muted); margin-top: 2px; }
.rc-line.cap { color: #ff8a3d; } .rc-line.sat { color: #c9c4e8; }
.rcpt.off .rc-row { justify-content: flex-end; }
@keyframes chipIn { from { transform: scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }
.rm .rcf.pop, .rm .rc-pop, .rm .rc-lines { animation: none; }
.rtp { font-size: 15px !important; font-weight: 900; background: rgba(0,0,0,.45); border-radius: 10px; padding: 1px 6px; }

/* bottom sheets (full receipt, Clout Math) */
.mwrap.sheet { align-items: flex-end; }
.sheet .modal { width: 100%; max-width: 430px; max-height: 85%; border-radius: 22px 22px 0 0; border-bottom: 0; padding: 16px 14px 0; display: flex; flex-direction: column;
  animation: sheetUp .28s var(--spring); }
.sheet.math .modal { height: 85%; }
.sheet .modal .btn { width: auto; margin-top: 0; }
.sheet .sb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding-bottom: 16px; }
.btn.cmlink { height: 44px; margin-bottom: 8px !important; width: 100% !important; font-size: 14px; }
.cm-sub { font-size: 12px; color: var(--muted); font-weight: 700; margin: 2px 0 6px; }
.cm-h { font-size: 11px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 16px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.cm-bar { display: flex; height: 24px; border-radius: 12px; overflow: hidden; background: var(--panel2); }
.cm-bar i { display: flex; align-items: center; justify-content: center; min-width: 3px; font-style: normal; font-size: 10px; font-weight: 900; color: #120e22; overflow: hidden; white-space: nowrap; }
.cm-leg { display: flex; flex-wrap: wrap; margin-top: 6px; font-size: 11px; }
.cm-leg span { margin: 2px 10px 2px 0; white-space: nowrap; }
.cm-pen { margin-top: 6px; font-size: 12px; color: var(--f-penalty); font-weight: 700; }
.cm-fam { font-size: 11px; font-weight: 900; letter-spacing: .4px; margin: 10px 0 2px; }
.cm-item { width: 100%; }
.cm-row { width: 100%; min-height: 44px; display: flex; align-items: center; padding: 4px 6px; border-radius: 10px; font-size: 13px; text-align: left; font-weight: 700; }
.cm-row:active { background: var(--panel2); }
.cm-row .cl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-row .cx { flex: none; width: 64px; text-align: right; font-weight: 900; }
.cm-row .cs { flex: none; width: 50px; text-align: right; color: var(--muted); font-size: 12px; }
.cm-row .ci { flex: none; width: 18px; margin-left: 4px; font-style: normal; color: var(--muted); font-size: 12px; text-align: center; }
.cm-row.f-skill .cx { color: var(--f-skill); } .cm-row.f-algo .cx { color: var(--f-algo); } .cm-row.f-gear .cx { color: var(--f-gear); }
.cm-row.f-prestige .cx { color: var(--f-prestige); } .cm-row.f-power .cx { color: var(--f-power); }
.cm-row.f-penalty { color: var(--f-penalty); background: repeating-linear-gradient(135deg, rgba(255,77,77,.14) 0 6px, transparent 6px 12px); }
.cm-row.ended { opacity: .45; }
.cm-row .cl .cln, .cm-row .cl .csrc { display: block; overflow: hidden; text-overflow: ellipsis; }
.cm-row .cl .csrc { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 1px; white-space: normal; line-height: 1.25; }
.cm-row.total { border-top: 1px dashed var(--line); border-radius: 0; margin-top: 6px; color: var(--muted); }
.cm-row.total.final { color: var(--text); font-size: 16px; font-weight: 900; }
.cm-info { font-size: 12px; color: var(--muted); padding: 2px 8px 8px 30px; line-height: 1.35; }
.cm-line { font-size: 12px; color: #c9c4e8; padding: 6px 8px; line-height: 1.35; }
.cm-miss { min-height: 44px; display: flex; align-items: center; padding: 4px 6px; font-size: 13px; color: var(--muted); font-weight: 700; }
.cm-miss .cl { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.btn.mid.fix { flex: none; height: 44px; min-width: 64px; margin-left: 8px; padding: 0 10px; font-size: 12px; color: var(--text); max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-tab { font-size: 12px; }
.cm-tr { display: flex; padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
.cm-tr span { flex: 1; text-align: right; } .cm-tr span:first-child { flex: 1.5; text-align: left; }
.cm-tr.hd { color: var(--muted); font-weight: 800; font-size: 11px; }
.cm-hist { display: flex; align-items: flex-end; height: 120px; }
.cm-hist .hb { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.cm-hist .hbar { flex: 1; width: 60%; display: flex; flex-direction: column-reverse; background: var(--panel2); border-radius: 6px 6px 0 0; overflow: hidden; }
.cm-hist .hbar i { display: block; width: 100%; }
.cm-hist small { font-size: 10px; } .cm-hist .hv { color: var(--text); }

/* Fame: the Clout Math card */
.btn.mathcard { width: 100%; min-height: 60px; justify-content: flex-start; margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(155,107,255,.18), rgba(255,79,163,.12)); }
.mathcard .mce { font-size: 26px; margin-right: 10px; }
.mathcard .mcb { flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.mathcard .mcb b { font-size: 15px; } .mathcard .mca { font-size: 22px; color: var(--muted); }
.mathcard .newtag { position: static; font-size: 10px; padding: 2px 6px; }

/* HUD: the 📊 rate chip replaces the "followers" label from 100 followers */
.flbl.rate { position: relative; color: #d8d0ff; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 10px; background: rgba(155,107,255,.18); border: 1px solid rgba(155,107,255,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; cursor: pointer; }
/* (no sideways overhang: the label is overflow:hidden, and an overhang made scrollWidth read as "does not fit" for the ⏰ suffix check) */
.flbl.rate::before { content: ''; position: absolute; top: -12px; bottom: -12px; left: 0; right: 0; }
.fline { min-width: 0; }
.fcount { cursor: pointer; }

/* carousel: 🏅 Mastery pips under the ×mult */
.pcard .pcp { font-size: 8px; letter-spacing: -.5px; color: var(--muted); line-height: 1; margin-top: 1px; white-space: nowrap; }
.pcard .pcp.on { color: var(--gold); }
/* Shop: 12-13 gear levels still fit at 320 px */
.pips { flex-wrap: wrap; }
.pips i { width: 6px; height: 7px; margin-right: 2px; }
/* buffs that wait behind a stronger one of the same kind */
.chip.buff.idle { opacity: .55; }
/* deals + buffs: one line that scrolls sideways inside itself (centred while it fits), so nothing is clipped at 320 px */
.chipline { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chipline::-webkit-scrollbar { display: none; }
.chipline > :first-child { margin-left: auto; } .chipline > :last-child { margin-right: auto; }
.chipline .chip { flex: none; padding: 4px 8px; }
.chipline.more { -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
@media (max-height: 640px) {
  .goal { padding: 4px 10px; margin: 1px 6px 2px; }
  .goal .gbar { height: 3px; margin-top: 2px; }
  .chips { margin-top: 2px; }
  .chips .chip { min-height: 26px; margin: 1px 3px; padding: 2px 8px; }
}
/* Results tile: the pet badge stays clear of the avatar on a small tile */
.rtile.sm .rtp { right: 3px; bottom: 3px; font-size: 12px !important; padding: 1px 4px; }
.rtile.sm .rta { left: 5px; bottom: 4px; font-size: 18px; }
/* Settings: cycling rows (Numbers, Receipt) */
.row.cyc .cv { color: var(--gold); font-size: 14px; }

/* avatar frames past 1B (§9.1) */
.ava.t8 { border-color: #4fc3ff; box-shadow: 0 0 10px #4fc3ff; }
.ava.t9 { border-color: #4fc3ff #4fc3ff #ffd34d #ffd34d; box-shadow: 0 0 0 2px rgba(255,211,77,.55); }
.ava.t10 { border-color: #ffd34d; box-shadow: 0 0 0 2px #ff4fa3, 0 0 0 4px #3ddc84, 0 0 12px #9b6bff; }
.ava.t11, .ava.t12, .ava.t13, .ava.t14, .ava.t15, .ava.t16, .ava.t17, .ava.t18, .ava.t19, .ava.t20 { border-color: #c9b8ff; box-shadow: 0 0 0 2px #5ab0ff, 0 0 10px #c9b8ff; }
/* t21 OMNIPRESENT: a holo ring (conic border-box under the panel fill) and a soft halo; static, so nothing to stop under .rm */
.ava.t21 { border-color: transparent; background: linear-gradient(var(--panel2), var(--panel2)) padding-box, conic-gradient(#ff4fa3, #ffd34d, #3ddc84, #5ab0ff, #9b6bff, #ff4fa3) border-box;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 12px #9b6bff, 0 0 20px rgba(90,176,255,.55); }
/* the tier overlay (ui_v2 tierFx): a 👑 on t10 / t21, the saturated device's emoji at 4 static spots on t11–t20 */
.tfx { position: absolute; top: 0; left: 0; width: 40px; height: 40px; pointer-events: none; font-style: normal; }
.tfx b { position: absolute; font-size: 11px; line-height: 1; font-weight: 400; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.tfx .o1 { top: -5px; right: -5px; } .tfx .o2 { bottom: -5px; right: -5px; } .tfx .o3 { bottom: -5px; left: -5px; } .tfx .o4 { top: -5px; left: -5px; }
.tfx .cr { top: -8px; left: 50%; margin-left: -7px; font-size: 13px; }   /* sits on the ring: the HUD starts 9 px from the top */
.lvf-crown .tfx .cr { display: none; }   /* the Lv 150 crown frame already wears one */

@media (max-width: 359px) {
  .rcf, .rc-q { margin: 5px 2px; padding: 0 7px; font-size: 12px; }
  .rc-q { width: 32px; padding: 0; }
  .rnums span + span { margin-left: 18px; }
  .cm-row .cx { width: 56px; } .cm-row .cs { width: 42px; }
}
@media (max-height: 640px) {
  .rnums { margin-top: 10px; }
}

/* =====================================================================
 * v2 S2: Creator Level (HUD XP bar, avatar frames, level toast) and the 🌳 Skills tab (Clout Tree)
 * Only transform and opacity animate; the tree has at most 6 pulsing nodes and one edge drawing in at a time.
 * ===================================================================== */
/* the 3 px XP bar under the who-block (§3.3) */
.who { position: relative; }
.xpbar { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; display: block; }
.xpbar[hidden] { display: none; }
.xpbar b { display: block; height: 100%; background: linear-gradient(90deg, #ff4fa3, #ff8a3d); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
/* avatar frames: a ring every 10 levels; gold 75 · holo 100 · ring light 125 · crown 150 */
.avabox { position: relative; flex: none; width: 40px; height: 40px; }
.lvring { position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2px solid transparent; pointer-events: none; }
.lvf-f1 .lvring { border-color: rgba(255,255,255,.3); } .lvf-f2 .lvring { border-color: rgba(90,176,255,.6); } .lvf-f3 .lvring { border-color: rgba(61,220,132,.65); }
.lvf-f4 .lvring { border-color: rgba(155,107,255,.75); } .lvf-f5 .lvring { border-color: rgba(255,79,163,.8); } .lvf-f6 .lvring { border-color: rgba(255,138,61,.85); }
.lvf-f7 .lvring { border-color: #ff8a3d; box-shadow: 0 0 6px rgba(255,138,61,.6); }
.lvf-gold .lvring { border-color: #ffd34d; box-shadow: 0 0 8px rgba(255,211,77,.65); }
.lvf-holo .lvring, .lvf-ring .lvring, .lvf-crown .lvring { border: 0; background: conic-gradient(#ff4fa3, #ffd34d, #3ddc84, #5ab0ff, #9b6bff, #ff4fa3);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 84%, #000 87%); mask-image: radial-gradient(circle closest-side, transparent 84%, #000 87%); }
.lvf-ring .lvring { animation: spin 3s linear infinite; }
.lvf-crown::after { content: '👑'; position: absolute; top: -16px; left: 50%; margin-left: -9px; font-size: 15px; pointer-events: none; }
.rm .lvf-ring .lvring { animation: none; }
/* the level-up toast slides down from the HUD (non-blocking, §4.4) */
.lvtoast { position: absolute; left: 12px; right: 12px; z-index: 55; pointer-events: none; padding: 8px 12px; border-radius: 16px; text-align: center; color: #fff;
  background: linear-gradient(90deg, rgba(255,79,163,.96), rgba(255,138,61,.96)); box-shadow: 0 8px 24px rgba(0,0,0,.45); animation: lvIn .35s var(--spring); transition: opacity .3s, transform .3s; }
.lvtoast.out { opacity: 0; transform: translateY(-14px); }
.lvtoast.glow { background: linear-gradient(90deg, rgba(255,211,77,.97), rgba(255,79,163,.97), rgba(155,107,255,.97)); }
.lvtoast .lt-h b { font-size: 19px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.lvtoast .lt-g { display: block; font-size: 12px; font-weight: 900; color: #fff6c9; }
.lvtoast .lt-l { font-size: 12px; font-weight: 800; margin-top: 2px; line-height: 1.3; }
@keyframes lvIn { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.rm .lvtoast { animation: fadeIn .1s; }
/* Fame: the Creator Level card, Craving picker, the goal card's keystone path, the Rebrand respec toggle */
.btn.lvcard { background: linear-gradient(90deg, rgba(255,79,163,.16), rgba(255,138,61,.12)); }
.lvcard .mcb small { white-space: normal; line-height: 1.3; }
.sheet.cpick .modal .btn.cpk { width: 100%; margin-top: 8px; justify-content: flex-start; }
.craving.pick { border-color: #c9b8ff; box-shadow: inset 0 0 0 1px #c9b8ff; }
.goal .gpath { display: block; font-size: 11px; color: var(--gold); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal.tap { cursor: pointer; border-color: rgba(255,211,77,.5); }
.btn.row.rbrespec { margin-top: 10px; font-size: 13px; }

/* ---------- 🌳 Skills (§5.3): header card · sub-tab chips · a vertically scrolling lane ---------- */
.skills { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
.skh { flex: none; display: flex; align-items: center; flex-wrap: wrap; margin: 6px 12px 0; padding: 8px 10px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.skh:not(.ov) { border-color: var(--bc, var(--line)); }
.skh .masc { margin-right: 10px; }
.skav { width: 44px; height: 44px; flex: none; border-radius: 50%; margin-right: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--panel2);
  box-shadow: 0 0 0 2px #ff4fa3, 0 0 12px rgba(255,79,163,.5); }
.skinfo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.skinfo b { font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skinfo small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skinfo .skbp { color: #d8d5ef; font-weight: 700; }
.skbar { display: block; height: 4px; border-radius: 2px; background: var(--panel2); margin-top: 3px; overflow: hidden; }
.skbar b { display: block; height: 100%; background: var(--bc, #ff4fa3); transform-origin: left; }
.skr { flex: none; display: flex; flex-direction: column; align-items: flex-end; margin-left: 6px; }
.skcp { font-weight: 900; color: var(--green); font-size: 15px; white-space: nowrap; }
.skk { font-size: 11px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.skk.dim { color: var(--muted); }
.skrow2 { flex-basis: 100%; min-width: 0; display: flex; margin-top: 8px; }
.btn.skinf { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1 1 0; min-width: 0; height: 44px; line-height: 1.2; font-size: 13px; text-align: left;
  border: 1px solid var(--line); background: var(--panel2); padding: 0 10px; overflow: hidden; }
.btn.skinf b, .btn.skinf small { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.skinf b { font-size: 13px; font-weight: 900; }
.btn.skinf small { font-size: 11px; font-weight: 700; color: #d8d5ef; }
.btn.skinf.can small { color: var(--gold); }
.skinfo .skpp { color: var(--gold); font-weight: 800; }
.btn.skinf.can { background: linear-gradient(90deg, rgba(255,211,77,.22), rgba(255,79,163,.22)); border-color: var(--gold); }
.btn.skrs { flex: none; height: 44px; margin-left: 8px; font-size: 13px; background: transparent; border: 1px solid var(--line); padding: 0 12px; }
.skt { flex: none; display: flex; overflow-x: auto; overflow-y: hidden; padding: 6px 12px 4px; touch-action: pan-x; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.skt::-webkit-scrollbar { display: none; }
.skc { flex: none; position: relative; width: 44px; height: 44px; margin-right: 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-size: 20px; }
.skc:last-child { margin-right: 0; }
.skc.on { background: var(--panel2); border: 2px solid var(--bc, #fff); }
.skdot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--panel); }
.skpin { position: absolute; bottom: -3px; right: -3px; font-size: 12px; font-style: normal; }
.skl { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.skw { position: relative; width: 100%; }
.ske { position: absolute; top: 0; left: 0; pointer-events: none; }
.ske line { stroke: #4a4570; stroke-width: 3; stroke-dasharray: 5 6; stroke-linecap: round; }
.ske line.own { stroke-dasharray: none; }
.ske line.path { stroke-dasharray: 2 6; }
.sknote { position: absolute; left: 12px; right: 12px; font-size: 11px; color: var(--muted); text-align: center; }
/* nodes: circle 56 (notable 60, Collab 48), keystone 64 as a hexagon */
.tnode { position: absolute; border-radius: 50%; background: var(--panel); border: 3px solid var(--rc, #4a4570); display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; padding: 0; transition: opacity .2s; }
.tnode .te { position: relative; z-index: 1; font-size: 26px; line-height: 1; }
.tnode.collab .te { font-size: 22px; }
.tnode .tr { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 2; font-style: normal; font-size: 10px; font-weight: 900; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0 5px; line-height: 15px; }
.tnode .tr:empty { display: none; }
.tnode .tnm { position: absolute; top: 100%; left: 50%; width: 96px; margin-left: -48px; margin-top: 9px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tnode::after { content: attr(data-b); position: absolute; top: -7px; right: -7px; z-index: 3; font-size: 12px; line-height: 1; }
.tnode[data-b=""]::after { display: none; }
.tnode.isnew::after { font-size: 9px; font-weight: 900; color: #fff; background: var(--red); border-radius: 6px; padding: 2px 4px; }
.tnode.root::after { font-size: 16px; top: -8px; right: -8px; }
.tnode.own { --rc: var(--bc); background: var(--panel2); }
.tnode.own .tnm { color: #d8d5ef; }
.tnode.max { --rc: #ffd34d; box-shadow: 0 0 10px rgba(255,211,77,.45); }
.tnode.dim .tr { color: var(--muted); }
.tnode.lock { filter: grayscale(1); opacity: .45; }
.tnode.hid { opacity: .55; border-style: dashed; }
.tnode.hid .te { font-size: 20px; font-weight: 900; color: var(--muted); }
.tnode.path { box-shadow: 0 0 0 2px rgba(255,211,77,.55); }
.tnode.lock.path { opacity: .8; filter: grayscale(.5); }
.tnode.path .tnm { color: var(--gold); }
/* available + affordable: a story ring (pink → orange) */
.tnode.avail { border: 4px solid transparent; background: linear-gradient(var(--panel2), var(--panel2)) padding-box, conic-gradient(#ff4fa3, #ff8a3d, #ffd34d, #ff4fa3) border-box; }
.tnode.avail .tr { color: var(--green); border-color: var(--green); }
.tnode.pulse { animation: tnPulse 1.4s ease-in-out infinite; }
@keyframes tnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.rm .tnode.pulse { animation: none; }
/* keystones: hexagons (the face is the .te element, its inner face a ::before) */
.tnode.key, .tnode.key.avail, .tnode.key.own { border: 0; background: transparent; border-radius: 0; box-shadow: none; }
.tnode.key .te { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 28px;
  -webkit-clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: var(--rc, #4a4570); }
.tnode.key .te::before { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; z-index: -1; background: var(--panel);
  -webkit-clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.tnode.key.own .te::before { background: var(--panel2); }
.tnode.key.avail .te { background: conic-gradient(#ff4fa3, #ff8a3d, #ffd34d, #ff4fa3); }
.tnode.key.path .te { background: #ffd34d; }
.tnode.key .tnm { color: #ff8a3d; font-weight: 900; }
/* mascots (§5.2): gradient head + face, accessory at 30°; ring light at 34%, ✔️ at 67%, 👑 at 100% (nothing animates) */
.masc { position: relative; flex: none; border-radius: 50%; padding: 0; min-width: 0; min-height: 0; }
.masc.ovm { position: absolute; }
.masc .mh { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1;
  background: var(--mg); box-shadow: inset 0 -6px 12px rgba(0,0,0,.25); }
.masc .macc { position: absolute; top: -8%; right: -14%; font-style: normal; line-height: 1; transform: rotate(30deg); pointer-events: none; }
.masc.ms1 .mh, .masc.ms2 .mh, .masc.ms3 .mh { box-shadow: 0 0 0 3px #fff, 0 0 12px rgba(255,255,255,.55), inset 0 -6px 12px rgba(0,0,0,.25); }
.masc .mchk { position: absolute; bottom: -3px; right: -3px; font-style: normal; font-size: 15px; line-height: 1; }
.masc .mcrown { position: absolute; top: -20px; left: 50%; margin-left: -10px; font-style: normal; font-size: 20px; line-height: 1; }
.masc .mnm { position: absolute; top: 100%; left: 50%; width: 90px; margin-left: -45px; margin-top: 4px; font-style: normal; font-size: 10px; font-weight: 800; color: #d8d5ef; text-align: center; white-space: nowrap; }
.mb-content { --mg: linear-gradient(135deg, #ff4fa3, #9b6bff); } .mb-algo { --mg: linear-gradient(135deg, #9b6bff, #4b3bd6); }
.mb-brand { --mg: linear-gradient(135deg, #ffd34d, #ff8a3d); } .mb-fandom { --mg: linear-gradient(135deg, #3ddc84, #1fb5a8); }
.mb-drama { --mg: linear-gradient(135deg, #ff8a3d, #ff4d4d); } .mb-tech { --mg: linear-gradient(135deg, #5ab0ff, #3de0ff); }
.mb-device { --mg: linear-gradient(135deg, #e6e6f0, #c9b8ff); }
/* the node sheet */
.sheet.node .modal { padding-bottom: 14px; }
.nd-h { display: flex; align-items: center; margin: 0 40px 6px 0; }
.nd-e { width: 64px; height: 64px; flex: none; border-radius: 50%; border: 3px solid var(--bc, var(--line)); background: var(--panel2); display: flex; align-items: center; justify-content: center;
  font-size: 34px; margin-right: 12px; }
.nd-e.key { border-radius: 14px; }
.nd-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nd-t b { font-size: 18px; font-weight: 900; line-height: 1.15; }
.nd-pips { color: var(--gold); letter-spacing: 2px; font-size: 13px; margin-top: 2px; }
.nd-d { font-size: 14px; line-height: 1.4; margin: 6px 0; }
.nd-bad { color: var(--red); font-weight: 800; }
.nd-pv { background: var(--panel2); border-radius: 12px; padding: 8px 10px; margin: 8px 0; font-size: 13px; line-height: 1.35; }
.nd-pv small { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; font-size: 10px; margin-bottom: 2px; }
.nd-pv div { padding: 2px 0; } .nd-pv .up { color: var(--green); font-weight: 900; }
.nd-req { color: var(--muted); font-size: 13px; margin: 6px 0; line-height: 1.35; }
.nd-max { color: var(--gold); font-weight: 900; text-align: center; margin: 10px 0 2px; }
.sheet.node .modal .btn { width: 100%; margin-top: 8px; }
.sheet.node .modal .btn.big { height: 52px; }
.kc-g { font-weight: 800; margin: 4px 0; } .kc-b { color: var(--red); font-weight: 900; margin: 4px 0 2px; }
@media (max-height: 640px) {
  .tnode .tnm { margin-top: 8px; font-size: 9px; }
  .tnode .te { font-size: 23px; }
  .skh { padding: 5px 8px; margin-top: 4px; }
  .skrow2 { margin-top: 4px; }
  .skt { padding: 4px 12px 2px; }
}

/* =====================================================================
 * v2 S3: power-ups (moves row, drop bubbles, sheets, Hype Shop, combo), Scheduler, away receipt, Remix and reskins
 * Only transform and opacity animate; everything decorative is static under .rm.
 * ===================================================================== */
/* the moves row (§3.11): [✉️][⏰][⚡] 🔥 streak [Moves…][🎛️], 48 px, scrolls sideways inside itself */
.moves { flex: none; position: relative; height: 48px; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 0 10px; touch-action: pan-x;
  overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.moves::-webkit-scrollbar { display: none; }
.moves > * { flex: none; margin-right: 6px; }
.moves > :first-child { margin-left: auto; } .moves > :last-child { margin-right: auto; }
.moves.more { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.mvu { position: relative; height: 44px; min-width: 44px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.mvu .mue { font-size: 18px; line-height: 1; }
.mvu .mut { font-size: 10px; font-weight: 900; margin-left: 3px; color: var(--muted); white-space: nowrap; }
.mvu .mut:empty { display: none; }
.mvsc .mut { color: #8fd0ff; } .mvsc.off .mut { color: var(--muted); } .mvsc.off .mue { opacity: .5; }
.mvpw .mut { color: var(--green); }
.mvb { display: none; position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--red); color: #fff; font-style: normal; font-size: 10px; font-weight: 900; line-height: 16px; text-align: center; padding: 0 3px; }
.mvb.on { display: block; }
.mvdr .mvb { display: none !important; }
.mvu.has { border-color: rgba(61,220,132,.65); } .mvdr.has { border-color: rgba(255,211,77,.7); } .mvdr .mut { color: var(--gold); font-size: 12px; }
.mvst { font-weight: 900; color: #ffb03d; font-size: 13px; white-space: nowrap; padding: 0 2px; }
.mv { position: relative; width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: var(--panel); padding: 0; display: flex; align-items: center; justify-content: center; }
.mv .mvr { position: absolute; top: 0; left: 0; width: 48px; height: 48px; transform: rotate(-90deg); pointer-events: none; }
.mv .mvrt { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 3; }
.mv .mvrf { fill: none; stroke: #ffd34d; stroke-width: 3; stroke-linecap: round; }
.mv .mve { position: relative; font-size: 22px; line-height: 1; }
.mv .mvt { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 9px; font-weight: 900; color: #fff; background: rgba(0,0,0,.6); border-radius: 6px; padding: 0 3px; line-height: 13px; }
.mv .mvt:empty { display: none; }
.mv .mve { opacity: .55; } .mv.ready .mve { opacity: 1; }
.mv.ready { background: var(--panel2); box-shadow: 0 0 0 2px rgba(255,211,77,.65), 0 0 12px rgba(255,211,77,.45); animation: mvPulse 1.4s ease-in-out infinite; }
.mv .mvx { position: absolute; top: -4px; right: -7px; font-style: normal; font-size: 8px; font-weight: 900; color: #1a0b14; background: var(--gold); border-radius: 5px; padding: 0 3px; }
.mv.empty { border: 2px dashed var(--line); background: transparent; }
.mv.empty .mve { opacity: .6; color: var(--muted); font-size: 20px; font-weight: 900; }
.mv.squashA { animation: mvSquash .3s var(--spring); } .mv.squashB { animation: mvSquash2 .3s var(--spring); }
.moves.hyped .mv { box-shadow: 0 0 0 2px #ff4fa3, 0 0 14px rgba(255,79,163,.6); }
.hypest { position: absolute; left: 50%; top: 50%; z-index: 3; font-style: normal; font-weight: 900; font-size: 22px; color: #ff4fa3; text-shadow: 0 2px 0 #000; pointer-events: none;
  animation: hypeSt .9s ease-out forwards; }
@keyframes mvPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes mvSquash { 0% { transform: scale(.8, 1.15); } 100% { transform: none; } }
@keyframes mvSquash2 { 0% { transform: scale(.8, 1.15); } 100% { transform: none; } }
@keyframes hypeSt { 0% { transform: translate(-50%, -50%) scale(2.2) rotate(-8deg); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1) rotate(-8deg); opacity: 0; } }
.rm .mv.ready { animation: none; }
/* the HUD 🎰 combo chip (§6.5, from ×5) */
.combochip { flex: none; margin-left: 6px; font-size: 12px; font-weight: 900; color: #ffd34d; background: rgba(255,211,77,.14); border: 1px solid rgba(255,211,77,.5); border-radius: 10px; padding: 2px 6px; white-space: nowrap; }
.fline .flbl.rate { flex: 0 1 auto; min-width: 0; }
/* POST: 💣 a bomb is armed (fuse), 💓 Heartbeat Sync, 🕹️ Speedrun; the 🐢 Slow-Mo tint */
.postbtn.fuse::after, .postbtn.heart::after, .postbtn.speedy::after { position: absolute; top: -10px; right: 14px; font-size: 22px; line-height: 1; animation: fuseF .5s steps(2) infinite; }
.postbtn.fuse::after { content: '💣'; } .postbtn.heart::after { content: '💓'; right: 46px; } .postbtn.speedy::after { content: '🕹️'; right: 78px; }
.postbtn.fuse { box-shadow: 0 0 0 3px #ff8a3d, 0 8px 24px rgba(255,138,61,.45); }
@keyframes fuseF { from { opacity: 1; } to { opacity: .55; } }
.rm .postbtn.fuse::after, .rm .postbtn.heart::after, .rm .postbtn.speedy::after { animation: none; }
.slowmo .center { box-shadow: inset 0 0 40px rgba(90,176,255,.35); border-radius: 18px; }
/* the drop bubble layer (§6.2): one bubble (56 px, 64 rare) with a shrinking timer ring */
#droplayer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.dropw { position: absolute; left: 0; top: 0; will-change: transform; }
.dropb { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; border-radius: 50%; pointer-events: auto; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fffbe6 0, var(--dg, #ffd34d) 46%, var(--dg2, #ff8a3d) 100%); box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 0 18px var(--dg, #ffd34d);
  animation: bubIn .22s var(--spring); }
.dropb::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 50%; }   /* a bigger touch target */
.dropb .dsvg { position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.dropb .dtrack { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 3; }
.dropb .dring { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.dropb .de { position: relative; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.dropb.rare { box-shadow: 0 0 0 3px #fff, 0 0 26px var(--dg, #ffd34d), 0 0 48px rgba(255,255,255,.35); }
.dpair { position: absolute; bottom: -6px; right: -8px; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; background: var(--red); border-radius: 8px; padding: 1px 5px; }
@keyframes bubIn { from { transform: scale(0); } to { transform: scale(1); } }
.rm .dropb { animation: fadeIn .1s; }
.d-sound { --dg: #ff4fa3; --dg2: #9b6bff; } .d-rain { --dg: #3ddc84; --dg2: #1f9e5a; } .d-collab { --dg: #f6a6ff; --dg2: #9b6bff; } .d-seed { --dg: #ff8a3d; --dg2: #ff4d4d; }
.d-glitch { --dg: #5affc8; --dg2: #ff3d9b; } .d-slowmo { --dg: #8fd0ff; --dg2: #3d6bff; } .d-chain { --dg: #ffffff; --dg2: #9b97b8; } .d-energy { --dg: #ffe14d; --dg2: #ff8a3d; }
.d-mcm { --dg: #ffd34d; --dg2: #ff4fa3; } .d-signal { --dg: #9ad7ff; --dg2: #2f6bb0; } .d-tabs { --dg: #c9e2ff; --dg2: #5ab0ff; } .d-binge { --dg: #ff9a9a; --dg2: #b0203a; }
.d-heart { --dg: #ff7fb0; --dg2: #d6005c; } .d-speed { --dg: #b8ff6b; --dg2: #2fa84f; } .d-road { --dg: #ffc46b; --dg2: #8a5a2a; } .d-ditch { --dg: #ffe0a6; --dg2: #c98a2a; }
.d-jam { --dg: #f4f2ff; --dg2: #9b97b8; } .d-pop { --dg: #ffcf6b; --dg2: #b06b1f; } .d-flush { --dg: #a6f0ff; --dg2: #2fa8c9; } .d-strike { --dg: #ffb36b; --dg2: #6b2fff; }
.d-letter { --dg: #fff1c9; --dg2: #c9a66b; }
/* short power-up effects on #app (each power-up looks distinct, §6.2 / §10) */
.fxo { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 26; pointer-events: none; overflow: hidden; }
.fxo.glitch { background: linear-gradient(90deg, rgba(255,0,90,.2), transparent 28%, transparent 72%, rgba(0,220,255,.2)); animation: glitchJ .34s steps(4) forwards; }
@keyframes glitchJ { 0% { transform: translateX(-5px); opacity: 1; } 33% { transform: translateX(4px); } 66% { transform: translateX(-3px); } 100% { transform: none; opacity: 0; } }
.fxo.slowv { background: radial-gradient(ellipse at center, rgba(90,176,255,0) 45%, rgba(90,176,255,.6) 100%); animation: fadeIO .9s ease-out forwards; }
.fxo.rainbow { background: linear-gradient(135deg, rgba(255,77,77,.45), rgba(255,211,77,.45), rgba(61,220,132,.45), rgba(90,176,255,.45), rgba(155,107,255,.45)); animation: fadeIO .65s ease-out forwards; }
@keyframes fadeIO { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.fxo.radar { top: auto; left: auto; right: auto; bottom: auto; width: 0; height: 0; overflow: visible; }
.fxo.radar::before { content: ''; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 3px solid #9ad7ff; animation: radarR .9s ease-out forwards; }
@keyframes radarR { from { transform: scale(.3); opacity: 1; } to { transform: scale(4); opacity: 0; } }
.fxo.binge { display: grid; grid-template-columns: repeat(3, 56px); grid-gap: 6px; gap: 6px; align-content: center; justify-content: center; animation: fadeIO 1.1s ease-out forwards; }
.fxo.binge i { display: block; width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, #ff4d4d, #9b6bff); opacity: 0; animation: tileIn .35s var(--spring) forwards; }
@keyframes tileIn { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: .9; } }
.fxo.speedrun, .fxo.clock, .fxo.paper, .fxo.comet { display: flex; align-items: center; justify-content: center; }
.fxo.speedrun b { font-size: 26px; font-weight: 900; color: #b8ff6b; text-shadow: 0 3px 0 #000; animation: popFade .9s ease-out forwards; }
.fxo.clock b { font-size: 90px; animation: spinFade .8s ease-out forwards; }
@keyframes popFade { 0% { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
@keyframes spinFade { 0% { transform: rotate(0) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(-540deg) scale(1.2); opacity: 0; } }
.fxo.road::before { content: ''; position: absolute; left: -50%; right: -50%; top: 132px; height: 22px; background: repeating-linear-gradient(90deg, #ffd34d 0 26px, transparent 26px 52px), #2a2340;
  background-size: 52px 4px, auto; background-repeat: repeat-x; background-position: 0 9px, 0 0; animation: roadR 1.3s linear forwards; }
@keyframes roadR { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(-104px); opacity: 0; } }
.fxo.paper b { font-size: 120px; animation: paperD 1s ease-in forwards; }
@keyframes paperD { 0% { transform: translateY(-60vh) rotate(-8deg); opacity: 1; } 60% { transform: translateY(10vh) rotate(4deg); opacity: 1; } 100% { transform: translateY(25vh) rotate(4deg); opacity: 0; } }
.fxo.swirl::before { content: ''; position: absolute; left: 50%; bottom: 150px; width: 160px; height: 160px; margin-left: -80px; border-radius: 50%;
  background: conic-gradient(rgba(166,240,255,.0), rgba(166,240,255,.7), rgba(47,168,201,.0)); animation: swirlS .75s ease-out forwards; }
@keyframes swirlS { from { transform: rotate(0) scale(.4); opacity: 1; } to { transform: rotate(-720deg) scale(1.3); opacity: 0; } }
.fxo.comet { align-items: flex-start; justify-content: flex-start; }
.fxo.comet b { font-size: 46px; margin-top: 70px; animation: cometX 1s ease-in forwards; }
@keyframes cometX { from { transform: translate(-60px, 0) rotate(-20deg); } to { transform: translate(480px, 60px) rotate(-20deg); } }
.fxo.clones { display: flex; flex-direction: column; justify-content: center; }
.fxo.clones i { font-style: normal; font-size: 40px; margin: 6px 0; opacity: .8; animation: cloneX 1.5s linear forwards; }
@keyframes cloneX { from { transform: translateX(-60px); } to { transform: translateX(480px); } }
/* 🗨️ Comment Chain and 🔆 Golden Brown */
.chainov .modal, .popov .modal { text-align: center; }
.chainov .modal { height: 72%; display: flex; flex-direction: column; overflow: hidden; }
.cc-h { display: flex; align-items: center; justify-content: space-between; font-weight: 900; font-size: 14px; color: var(--gold); }
.cc-n { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.cc-bar { display: block; height: 4px; border-radius: 2px; background: var(--panel2); margin: 6px 0 8px; overflow: hidden; }
.cc-bar b { display: block; height: 100%; background: var(--grad); transform-origin: left; }
.cc-field { position: relative; flex: 1 1 auto; min-height: 200px; border-radius: 16px; background: rgba(255,255,255,.03); }
.cbub { position: absolute; min-height: 44px; padding: 0 12px; border-radius: 18px 18px 18px 4px; background: var(--panel2); border: 1px solid var(--line); font-size: 13px; font-weight: 800;
  white-space: nowrap; animation: popIn .2s var(--spring); transition: transform .2s, opacity .2s; }
.cbub.pop { transform: scale(1.35); opacity: 0; }
.gb-t { width: 128px; height: 128px; margin: 18px auto 8px; display: flex; align-items: center; justify-content: center; font-size: 76px; border-radius: 28px; background: var(--panel2); border: 2px solid var(--line); }
.gb-t.up { border-color: var(--gold); box-shadow: 0 0 24px rgba(255,211,77,.7); animation: toastUp .3s var(--spring); }
@keyframes toastUp { from { transform: translateY(26px) scale(.8); } to { transform: none; } }
.gb-m { font-weight: 900; font-size: 15px; min-height: 22px; }
/* sheets: ✉️ Drafts · ⚡ power-ups · ⏰ Scheduler · 🎛️ Moves */
.pwrow { display: flex; align-items: center; min-height: 52px; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.05); text-align: left; }
.pwrow .pwe { flex: none; width: 36px; font-size: 24px; text-align: center; }
.pwrow .pwb { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; margin: 0 6px; }
.pwrow .pwb b { font-size: 14px; font-weight: 900; }
.pwrow .pwb small { white-space: normal; line-height: 1.3; }
.pwrow.idle { opacity: .55; } .pwrow.neg b { color: var(--red); } .pwrow.lock { opacity: .5; } .pwrow.focus { box-shadow: inset 0 0 0 2px var(--gold); border-radius: 12px; }
.pwrow.remix { background: rgba(255,211,77,.08); border-radius: 12px; }
.sheet .modal .btn.mid.use, .sheet .modal .mvbtns .btn { flex: none; height: 44px; min-width: 56px; padding: 0 10px; font-size: 13px; }
.sheet .modal .mvbtns .btn.on { border-color: var(--gold); color: var(--gold); }
.mvbtns { flex: none; display: flex; }
.mvbtns .btn + .btn { margin-left: 6px; }
.lorow { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 6px; gap: 6px; }
.sheet .modal .btn.lob { width: 100%; height: 44px; font-size: 12px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .modal .sb > .btn { width: 100%; margin-top: 10px; }
/* the Hype Shop rows */
.srow.hype { border-color: rgba(255,211,77,.35); }
/* Results: the 🎰 combo stamp, 🌇 Afterglow posts, the 🔀 Remix tag */
.rc-line.combo { color: #ffb03d; font-weight: 900; }
.rc-line.combo.c-viral { color: #ffd34d; }
.rc-line.combo.c-broke { background: linear-gradient(90deg, #ff4d4d, #ffd34d, #3ddc84, #5ab0ff, #9b6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cstamp { position: absolute; left: 50%; top: 42%; z-index: 4; white-space: nowrap; font-size: 15px; font-weight: 900; color: #1a0b14; background: linear-gradient(90deg, #ffd34d, #ff8a3d); border-radius: 10px;
  padding: 3px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.45); animation: cstampIn .3s var(--spring) forwards; transform: translate(-50%, -50%) rotate(-8deg); }
.cstamp.c-broke { background: linear-gradient(90deg, #ff4d4d, #ffd34d, #3ddc84, #5ab0ff, #9b6bff); color: #fff; text-shadow: 0 1px 0 #000; }
@keyframes cstampIn { from { transform: translate(-50%, -50%) rotate(-8deg) scale(2.2); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; } }
.rtile.glowp::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; background: linear-gradient(120deg, rgba(255,138,61,0), rgba(255,170,90,.7), rgba(255,79,163,0));
  opacity: 0; animation: glowSweep .45s .3s ease-out; pointer-events: none; }
@keyframes glowSweep { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
.rtr { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 900; color: #1a0b14; background: #ffd34d; border-radius: 9px; padding: 2px 8px; }
.rm .cstamp, .rm .rtile.glowp::after { animation: none; }
.rm .cstamp { opacity: 1; }
/* the itemized away receipt (§3.9) */
.away .aw-k { letter-spacing: 1px; font-size: 12px; }
.aw-rows { margin: 6px 0 4px; text-align: left; }
.aw-r { display: flex; align-items: center; min-height: 28px; font-size: 13px; padding: 3px 2px; border-bottom: 1px solid rgba(255,255,255,.05); transition: opacity .2s, transform .2s; }
.aw-r.hide { opacity: 0; transform: translateY(6px); }
.aw-r .awe { flex: none; width: 26px; font-size: 16px; text-align: center; }
.aw-r .awt { flex: 1 1 auto; min-width: 0; color: #d8d5ef; line-height: 1.3; }
.aw-r .awv { flex: none; margin-left: 6px; color: var(--pink); font-weight: 900; font-variant-numeric: tabular-nums; }
.aw-tot { font-size: 17px; font-weight: 900; margin: 8px 0 2px; }
.aw-tot b { color: var(--pink); } .aw-tot .cash { color: var(--green); } .aw-tot .aw-bat { color: var(--muted); font-size: 14px; }
/* 🔀 a Remix variant names itself; device reskins are static overlays on the play area (§6.7) */
#stage.remix #mg-label { color: #ffd34d; }
#stage[class*="rs-"] #bezel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; }
#stage.rs-laptop #bezel::before { background: linear-gradient(180deg, rgba(200,220,255,.18) 0 22px, transparent 22px); box-shadow: inset 0 22px 0 -20px #5ab0ff; }
#stage.rs-tv #bezel::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 2px, transparent 2px 4px); }
#stage.rs-watch #bezel::before { border-radius: 40%; box-shadow: inset 0 0 0 10px rgba(201,184,255,.25); }
#stage.rs-console #bezel::before { background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 3px, transparent 3px 6px), repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 3px, transparent 3px 6px); }
#stage.rs-car #bezel::before { background: radial-gradient(ellipse at 50% 120%, rgba(255,196,107,.3), transparent 60%); }
#stage.rs-bell #bezel::before { background: radial-gradient(circle at center, transparent 55%, rgba(0,0,0,.55) 100%); }
#stage.rs-printer #bezel::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px); }
#stage.rs-toaster #bezel::before { background: radial-gradient(circle at 20% 30%, rgba(201,138,42,.35) 0 2px, transparent 3px) 0 0 / 34px 34px, radial-gradient(circle at 70% 60%, rgba(201,138,42,.3) 0 2px, transparent 3px) 0 0 / 46px 46px; }
#stage.rs-toilet #bezel::before { background: repeating-linear-gradient(0deg, rgba(166,240,255,.08) 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, rgba(166,240,255,.08) 0 1px, transparent 1px 30px); }
#stage.rs-sat #bezel::before { background: radial-gradient(circle at 15% 25%, #fff 0 1px, transparent 2px) 0 0 / 60px 60px, radial-gradient(circle at 60% 70%, #fff 0 1px, transparent 2px) 0 0 / 90px 90px; opacity: .6; }
#stage.rs-fax #bezel::before { background: repeating-linear-gradient(0deg, rgba(255,241,201,.1) 0 2px, transparent 2px 6px); }
@media (max-width: 359px) {
  .moves { padding: 0 6px; } .moves > * { margin-right: 5px; }
  .mvu { padding: 0 5px; } .mvu .mut { font-size: 9px; }
  /* below 360 px the ⏰ rate and the ⚡ product live in the HUD rate chip / 🎰 chip and the sheets, so more Moves fit */
  .mvsc .mut, .mvpw .mut { display: none; }
  .combochip { font-size: 11px; padding: 1px 5px; margin-left: 4px; }
}

/* =====================================================================
 * S4 · prestige panels (§11), the device ladder (§9.3), the globe (§8.3), ceremonies (§10), the Last Holdouts (§9.5),
 * the finale (§9.6), the ticker (§9.4). Only transform and opacity animate; Reduce Motion shows the final state.
 * ===================================================================== */
.prest { margin-bottom: 4px; }
.pzd { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px 12px; margin-bottom: 10px; }
.pzd.glow { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255,211,77,.6), 0 0 18px rgba(255,211,77,.18); }
.pzd.worth { border-color: rgba(255,211,77,.55); }
.pzd.locked { opacity: .82; }
.pzh { display: flex; align-items: center; min-width: 0; }
.pzh .pze { flex: none; font-size: 28px; margin-right: 8px; }
.pzh .pzt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pzh .pzt b { font-size: 15px; letter-spacing: .6px; }
.pzh .pzt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pzh .pzw { flex: none; margin-left: 6px; font-size: 15px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.pzl { font-size: 12px; margin-top: 7px; line-height: 1.35; }
.pzp { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.pzs { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .5px; margin: 12px 0 0; }
.pzbar { display: block; height: 6px; border-radius: 3px; background: var(--panel2); margin-top: 8px; overflow: hidden; }
.pzbar b { display: block; height: 100%; background: var(--grad); transform-origin: left; }
.btn.big.pzb { height: 56px; font-size: 15px; line-height: 1.15; padding: 0 10px; margin-top: 9px; background: var(--panel2); border: 1px solid var(--line); }
.btn.big.pzb.glow { background: linear-gradient(135deg, #ffd34d, #ff4fa3); color: #1a0b14; border: 0; animation: glowPulse 1.2s infinite alternate; }
.btn.big.pzb.worth { box-shadow: inset 0 0 0 2px rgba(255,211,77,.7); }
.btn.big.pzb.dis { opacity: .5; }
.pc-end .btn.mid { display: block; width: 100%; margin-top: 8px; }
.rm .btn.big.pzb.glow { animation: none; }
.lgrid, .rgrid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 6px; gap: 6px; margin-top: 6px; }
.lgc, .rgc { display: flex; align-items: center; min-height: 48px; padding: 4px 6px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); text-align: left; min-width: 0; }
.lgc .lge, .rgc .lge { flex: none; font-size: 19px; margin-right: 5px; }
.lgc .lgb, .rgc .lgb { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lgc .lgb b, .rgc .lgb b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgc .lgb small, .rgc .lgb small { font-size: 10px; line-height: 1.2; max-height: 24px; overflow: hidden; }
.lgc .lgp, .rgc .lgp { flex: none; margin-left: 4px; font-size: 11px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.lgc.own, .rgc.own { border-color: rgba(61,220,132,.5); background: rgba(61,220,132,.08); }
.lgc.own .lgp, .rgc.own .lgp { color: var(--green); }
.lgc.can, .rgc.can { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255,211,77,.45); }
.lgc.cant, .rgc.cant { opacity: .62; }
.rgc.next { border-style: dashed; border-color: rgba(255,211,77,.5); }
.rgc.enc { grid-column: 1 / span 2; }
.legacy .lgrid { margin-top: 4px; }
/* the globe: 6 low-poly regions; a lit region fades in (opacity, 600 ms) */
.globew { position: relative; margin: 8px 0 2px; }
.globe { display: block; width: 100%; height: auto; }
.globe .gb { fill: #2a2648; stroke: #4a4478; stroke-width: 1; }
.globe .glit { opacity: 0; transition: opacity .6s ease-out; }
.globe .glit.on { opacity: 1; }
.rm .globe .glit { transition: none; }
.globew .plane { position: absolute; left: 0; right: 0; top: 18%; text-align: center; font-size: 28px; opacity: 0; pointer-events: none; }
.globew .plane.fly { animation: planeFly 1.2s .15s ease-in-out both; }
@keyframes planeFly { 0% { opacity: 1; transform: translate3d(-55%, 26px, 0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate3d(55%, -14px, 0); } }
.tourov .globew { max-width: 300px; margin: 6px auto 0; }
.tourov.virt .modal { box-shadow: inset 0 0 0 3px #ff4d4d; }
.tourov.virt .modal::after { content: '● REC'; position: absolute; top: 8px; right: 12px; font-size: 11px; font-weight: 900; color: #ff4d4d; }
.stamps { display: flex; justify-content: center; flex-wrap: wrap; min-height: 32px; margin: 2px 0; }
.stamp1 { font-style: normal; font-size: 24px; margin: 0 2px; animation: stampDrop .35s var(--spring) both; }
@keyframes stampDrop { from { transform: scale(2.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.momdm { display: flex; align-items: flex-start; max-width: 300px; margin: 10px auto 6px; text-align: left; }
.momdm span { flex: none; font-size: 20px; margin-right: 6px; }
.momdm p { margin: 0; padding: 6px 10px; font-size: 12px; background: var(--panel2); border-radius: 12px 12px 12px 3px; }
.dvz { font-size: 84px; line-height: 1.15; margin: 4px 0; }
.dvz.zoom { animation: dvZoom .9s var(--spring) both; }
@keyframes dvZoom { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: none; } }
.launchov .capn { color: var(--gold); font-variant-numeric: tabular-nums; }
.rm .stamp1, .rm .dvz.zoom, .rm .globew .plane.fly { animation: none; }
/* the device ladder: 12 squares in 2 rows of 6 (≥ 44 px wide at 320 px) */
.ladder12 { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 4px; gap: 4px; margin-top: 8px; }
.dvs { position: relative; min-height: 50px; min-width: 0; border-radius: 10px; background: var(--panel2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 0; overflow: hidden; }
.dvs > * { position: relative; z-index: 1; }
.dvs .dve { font-size: 20px; line-height: 1.1; }
.dvs small { font-size: 9px; line-height: 1.1; color: var(--text); }
.dvs.sat { background: rgba(201,184,255,.2); box-shadow: inset 0 0 0 1px #c9b8ff; }
.dvs.cur::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); }
.dvs.cur::after { content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; border-radius: 8px; background: var(--panel2); }
.dvs.fut { opacity: .5; }
/* at 320 px the card's inner width (266 px) gave 41 px squares: a 2 px gap and 4 px into the card's padding make them 44 px */
@media (max-width: 359px) { .ladder12 { grid-gap: 2px; gap: 2px; margin-left: -4px; margin-right: -4px; } }
/* tour milestones */
.tms { display: flex; flex-wrap: wrap; margin-top: 6px; }
.tm { min-width: 44px; min-height: 44px; margin: 0 4px 4px 0; border-radius: 10px; background: var(--panel2); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: .5; }
.tm.on { opacity: 1; box-shadow: inset 0 0 0 1px var(--gold); }
.tm span { font-size: 18px; line-height: 1.1; } .tm small { font-size: 9px; }
/* the Rebrand sheet's ⭐/min line, ⚡ Quick Rebrand */
.rb-r { font-size: 12px; margin: 6px 0 4px; } .rb-r.glow { color: var(--gold); font-weight: 800; }
.qrb { position: absolute; left: 50%; top: 36%; z-index: 55; transform: translate(-50%, -50%); text-align: center; padding: 12px 22px; border-radius: 18px;
  background: rgba(23,21,42,.94); border: 2px solid var(--gold); animation: qrbIn .3s var(--spring) both; pointer-events: none; transition: opacity .3s; }
.qrb b { display: block; font-size: 28px; color: var(--gold); }
.qrb.out { opacity: 0; }
@keyframes qrbIn { from { transform: translate(-50%, -50%) scale(.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.rm .qrb { animation: fadeIn .1s; }
/* the Last Holdouts and TOTAL SATURATION (the humanity breakthrough glitches for 400 ms) */
.holdout .modal { background: radial-gradient(ellipse at 50% 0%, #3d2b1c, var(--panel) 70%); }
.holdout .tu-f.who { color: var(--text); font-weight: 700; }
@media (max-height: 640px) { .holdout .un-e, .satov .un-e, .launchov .dvz { font-size: 48px; margin: 0; } .tourov .globew { max-width: 220px; } .holdout .tu-l > div, .satov .tu-l > div { padding: 5px 8px; } }
#stage.boss { box-shadow: inset 0 0 0 3px rgba(201,184,255,.65); }
#stage.boss #mg-label { color: #c9b8ff; }
.satov .modal { background: radial-gradient(ellipse at 50% 0%, #2e2a66, var(--panel) 72%); }
.brk { margin: 10px 0 2px; }
.brk b { display: block; font-size: 21px; font-weight: 900; letter-spacing: .5px; animation: finGlitch .1s steps(2) 4; }
.brk span { display: block; margin-top: 4px; color: #c9b8ff; font-weight: 700; }
/* the finale's counter jitter (v2.0 review: it was a second @keyframes glitchJ, which overrode the 👾 overlay's fade) */
@keyframes finGlitch { 0% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 100% { transform: translate(1px, 1px); } }
#h-f.glitch { animation: finGlitch .12s steps(2) infinite; }
.rm .brk b, .rm #h-f.glitch { animation: none; }
/* the finale */
.finov .modal { background: #06050c; border: 1px solid #2a2648; min-height: 420px; padding-top: 52px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.fin { min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fin-k { font-size: 13px; letter-spacing: 1px; color: var(--muted); }
.fin-n { font-size: 32px; font-size: clamp(26px, 8.5vw, 36px); font-weight: 900; font-variant-numeric: tabular-nums; margin: 12px 0 6px; animation: finGlitch .12s steps(2) 8; }
.fin-s { font-size: 12px; font-weight: 900; color: #ff4d4d; letter-spacing: 2px; }
.fax { width: 230px; max-width: 100%; margin-top: 10px; padding: 12px 14px; text-align: left; background: #f4f0e6; color: #222; border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.6);
  font-family: "Courier New", Courier, monospace; animation: faxIn .6s ease-out both; }
.fxl { font-size: 13px; min-height: 17px; animation: fadeIn .25s both; }
@keyframes faxIn { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.roll { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 6px 10px; gap: 6px 10px; margin-top: 12px; text-align: left; width: 100%; }
.rcl { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: popIn .3s var(--spring) both; }
.fin-mom { margin-top: 16px; animation: fadeIn .4s 1.4s both; }
.fin-h { font-size: 30px; font-size: clamp(24px, 8vw, 34px); font-weight: 900; line-height: 1.1; letter-spacing: .5px; animation: popIn .5s var(--spring) both; }
.fin-h.h1 { animation-delay: .45s; } .fin-h.h2 { margin-top: 10px; font-size: 20px; color: var(--gold); animation-delay: .9s; }
.fin-news { font-size: 13px; font-weight: 800; color: var(--gold); margin-bottom: 8px; }
.fin-stats { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 6px; gap: 6px; width: 100%; }
.fin-stats div { background: var(--panel2); border-radius: 10px; padding: 6px 8px; text-align: left; min-width: 0; }
.fin-stats small { display: block; } .fin-stats b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-epi { font-size: 12px; color: var(--muted); margin-top: 8px; }
.fin-ch { width: 100%; margin-top: 10px; } .fin-ch .btn { margin-top: 8px; }
.finov .btn.ghost.finskip { position: absolute; top: 6px; right: 6px; width: auto; min-width: 76px; height: 44px; margin: 0; padding: 0 12px; font-size: 13px; z-index: 3; }
.rm .fax, .rm .fxl, .rm .rcl, .rm .fin-h, .rm .fin-n, .rm .fin-mom { animation: none; }
/* the goal card's next-layer line (§3.7) and the Trending ticker (§9.4) */
.goal .glayer { display: block; font-size: 11px; color: var(--gold); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker { flex: none; height: 18px; margin: 0 12px; overflow: hidden; white-space: nowrap; font-size: 11px; line-height: 18px; color: var(--muted); }
.ticker span { display: inline-block; padding-left: 100%; }
.ticker span.tkA { animation: tickA 12s linear both; } .ticker span.tkB { animation: tickB 12s linear both; }
@keyframes tickA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@keyframes tickB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
.rm .ticker span { padding-left: 0; animation: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 640px) { .ticker { display: none; } .goal .glayer { display: none; } }
/* S4 fixes: toasts held under the finale, its achievement line, the tier-ladder silhouette, the Legacy chip's selected state */
#toasts.held { visibility: hidden; }
.fin-ach { font-size: 12px; font-weight: 800; color: #c9b8ff; margin-top: 8px; }
.tier.hid { opacity: .6; font-style: italic; }
.lgc .lgb b { white-space: normal; line-height: 1.15; }
.lgc.sel { grid-column: 1 / span 2; align-items: flex-start; padding: 8px; box-shadow: inset 0 0 0 2px var(--gold); }
.lgc.sel .lge { font-size: 24px; } .lgc.sel .lgb b { font-size: 14px; }
.lgc.sel .lgb small { max-height: none; font-size: 11px; line-height: 1.3; }
.lgc.sel .lgb .lgx { margin-top: 3px; color: var(--text); }
.lgc.sel .lgb .lgy { margin-top: 4px; font-weight: 900; color: var(--gold); }
.lgc.sel.cant { opacity: .85; } .lgc.sel.cant .lgb .lgy { color: var(--muted); }

/* =====================================================================
 * v2 S5: clarity polish. The three-goal card (§3.7), the POST / carousel / Shop previews and BEST BUY (§3.5), numbers on
 * event choices (§3.6), the away receipt order (§3.9). Only transform and opacity animate; BEST BUY is a static glow on an
 * ::after layer whose opacity pulses (static under Reduce Motion).
 * ===================================================================== */
.goal.g3 { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 54px; padding: 4px 12px 6px; color: var(--text); font-weight: 800; }
.goal.g3 .gq { display: flex; justify-content: center; width: 100%; font-size: 11.5px; line-height: 15px; white-space: nowrap; overflow: hidden; }
.goal.g3 .gq .gn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* a long name is cut with "…" */
.goal.g3 .gq .gt { flex: none; }                                                                    /* the cost / posts / ETA always shows */
.goal.g3 .gq[hidden] { display: none; }
.goal.g3 .g-buy { color: #fff; } .goal.g3 .g-buy.now { color: var(--green); }
.goal.g3 .g-next { color: #d8d5ef; }
.goal.g3 .g-layer { color: var(--gold); } .goal.g3 .g-layer.now { text-shadow: 0 0 8px rgba(255,211,77,.7); }
.goal.g3 .gbar { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; margin: 0; }
@media (max-height: 640px) {
  /* §3.7 / §3.11: one 30 px line (the next buy; the next unlock when there is nothing to buy); ::before keeps a 44 px target */
  .goal.g3 { min-height: 30px; height: 30px; padding: 0 12px; margin: 0 6px; }
  .goal.g3::before { content: ''; position: absolute; top: -7px; bottom: -7px; left: 0; right: 0; }
  /* the chips box holds the card's 44 px target (it clips its content), and the centre gives it its whole height: 46 px at
   * 320×568 with the rival race row (deals ride in the moves row there, ui_v2) */
  .center { padding-top: 0; }
  .chips { margin-top: 0; padding: 7px 0; }
  .goal.g3 .g-next, .goal.g3 .g-layer { display: none; }
  .goal.g3.nobuy .g-next:not([hidden]) { display: flex; }
  .goal.g3 .gbar { bottom: 2px; }
}
/* deals in the moves row on short screens (§3.11) */
.moves .chip.deal.mvdeal { flex: none; min-height: 44px; height: 44px; font-size: 12px; padding: 0 10px; border-radius: 16px; }
/* the POST preview line is tappable (its mini receipt) */
.preview { cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; }
.preview::after { content: ' ⓘ'; opacity: .6; }
/* carousel: "≈+2.1K −8🔋" under the mastery pips */
.pcard .pcg { font-size: 10px; line-height: 12px; color: #d8d5ef; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 1px; font-variant-numeric: tabular-nums; }
.pcard .pcg .pcb { font-size: 9px; color: var(--muted); font-weight: 700; }
.pcard.locked .pcg { display: none; }
.newtag.rsnew { background: var(--purple); }   /* a device reskin not played yet (§10 drip beat) */
@media (max-width: 359px) { .pcard .pce { font-size: 26px; } .pcard .pcn { font-size: 10px; } }
/* Shop: "Now ×1.75 → ×2.10 · ≈ +3.1K/post · pays back in 6 posts", BEST BUY, fill bar + ETA on prices you cannot afford */
.sprev { font-size: 11px; color: #bfe8cf; line-height: 1.3; margin-top: 2px; }
.sprev b { color: var(--green); font-weight: 900; }
.btn.price { flex-direction: column; line-height: 1.1; overflow: hidden; }
.btn.price .pp { display: block; }
.btn.price .peta { display: block; font-size: 9px; font-weight: 700; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.btn.price .pfill { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.btn.price .pfill b { display: block; height: 100%; background: var(--green); opacity: .7; transform-origin: left; }
.srow.best { position: relative; border-color: rgba(255,211,77,.8); }
.srow.best::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 18px; box-shadow: 0 0 0 2px rgba(255,211,77,.85), 0 0 18px rgba(255,211,77,.55);
  opacity: .3; pointer-events: none; animation: bbPulse 1.6s ease-in-out infinite alternate; }
@keyframes bbPulse { from { opacity: .3; } to { opacity: 1; } }
.rm .srow.best::after { animation: none; opacity: .8; }
.bbtag { position: absolute; top: -9px; right: 16px; z-index: 1; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .5px; color: #1a0b14; background: var(--gold); border-radius: 8px; padding: 1px 7px; }
/* event choices: numbers, losses in red */
.choice .cc i.neg { color: #ff9a9a; }
/* the away receipt: the total line between what paid and what else happened */
.aw-tot { transition: opacity .2s, transform .2s; }
.aw-tot.hide { opacity: 0; transform: translateY(6px); }
.aw-rows.aw-x { margin-top: 2px; }
.aw-rows.aw-x .aw-r .awt { color: var(--muted); }
/* the mini receipt's family row (static chips) */
.rc-row.mini { margin: 4px 0 6px; }
.rc-row.mini .rcf { visibility: visible; }