/* ── The Rift — the season's boss raid ─────────────────────────────────────
   Every class here is `rf-` prefixed. Loads after home-v2.css so it can reuse
   the --hv-* panel and amber tokens. The page is public/html/js/rift.js; the
   design study it came from is docs/mockups/rift/.

   ⚠ Never give `.page` a top-level `display` rule from this file — the same
   warning home-v2.css / profile.css / settings.css carry. `.page` visibility is
   owned by main.css and showPage(); setting display here breaks tab switching. */

#page-rift {
  --rf-red: #e2364f; --rf-red-2: #ff7a8c; --rf-teal: #38e0cc; --rf-violet: #7b4dff;
  --rf-void: #07050d; --rf-good: #6ee7a0; --rf-bad: #ff8a8a; --rf-block: #5fd3ff;
}
.rf-px { image-rendering: pixelated; image-rendering: crisp-edges; }

/* Nav: the entry is hidden until /api/me says the Rift is open (topbar.js), and the
   side rail carries a status line under the name like the Apps tiles do. */
[data-rift-nav][hidden] { display: none !important; }
.rf-nav-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rf-nav-sub { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.rf-nav-sub:empty { display: none; }
.rf-nav-sub.act { color: var(--accent); }
.rf-nav-sub.on { color: var(--green); }

.rf-screen { display: none; }
.rf-screen.on { display: block; animation: rf-rise .35s ease both; }
@keyframes rf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rf-msg { padding: 60px 20px; text-align: center; color: var(--text-3); font-size: 13.5px; }

/* ── header ── */
.rf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rf-eyebrow { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; font-weight: 600; color: var(--sp-season-primary, var(--accent)); margin-bottom: 7px; }
.rf-h1 { font-family: var(--font-display); font-size: 31px; font-weight: 700; letter-spacing: -.022em; margin: 0; }
.rf-h1 em { font-style: normal; color: var(--rf-red-2); }
.rf-charges { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.rf-pips { display: inline-flex; gap: 4px; }
.rf-pips i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.rf-pips i.on { background: radial-gradient(circle at 35% 35%, #fff6c8, var(--hv-amber) 55%, #b8860b); box-shadow: 0 0 8px rgba(245,181,24,.6); }
.rf-next { color: var(--text-3); font-variant-numeric: tabular-nums; }
.rf-practice { margin-bottom: 12px; padding: 9px 13px; border-radius: 10px; font-size: 12.5px; color: var(--text-2);
  border: 1px dashed rgba(149,100,255,.45); background: rgba(149,100,255,.07); }
.rf-practice b { color: var(--text); }

/* ── the lab (fall) ── */
.rf-lab { position: relative; aspect-ratio: 16/8; min-height: 260px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #15121a; }
.rf-lab svg.rf-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rf-leaves { position: absolute; left: 6%; top: 12%; width: 22%; height: 38%; overflow: hidden; pointer-events: none; }
.rf-leaves i { position: absolute; top: -8px; width: 6px; height: 4px; border-radius: 60% 0; opacity: .85; animation: rf-leaf linear infinite; }
@keyframes rf-leaf { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(14px, 80px) rotate(180deg); } 100% { transform: translate(-4px, 170px) rotate(360deg); } }
.rf-season-tag { position: absolute; left: 12px; top: 12px; z-index: 3; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800;
  color: #ffd2a8; background: rgba(40,18,8,.72); border: 1px solid rgba(232,114,42,.4); padding: 4px 9px; border-radius: 99px; }
.rf-portal { position: absolute; right: 9%; top: 9%; width: 31%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; background: none; padding: 0; }
.rf-portal::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--rf-red), var(--rf-violet), var(--rf-teal), #1a0a2e, var(--rf-red)); animation: rf-spin 7s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%);
  filter: blur(.5px) drop-shadow(0 0 14px rgba(226,54,79,.55)); }
.rf-portal::after { content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,224,204,.18), rgba(123,77,255,.28) 40%, rgba(7,5,13,.97) 72%); animation: rf-pulse 3.4s ease-in-out infinite; }
.rf-portal.sealed::before { animation: none; filter: grayscale(.8) brightness(.55); }
.rf-portal.sealed::after { animation: none; filter: grayscale(.6) brightness(.7); }
@keyframes rf-spin { to { transform: rotate(360deg); } }
@keyframes rf-pulse { 50% { transform: scale(1.04); filter: brightness(1.3); } }
.rf-portal canvas, .rf-portal img { position: absolute; z-index: 2; filter: drop-shadow(0 0 12px rgba(226,54,79,.75)); }
.rf-portal-lbl { position: absolute; bottom: -4%; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 800; background: rgba(10,6,16,.85); border: 1px solid rgba(255,122,140,.45); color: var(--rf-red-2); padding: 4px 10px; border-radius: 99px; }
.rf-actor { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.rf-actor canvas, .rf-actor img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rf-shadow { position: absolute; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(2px); z-index: 1; }
.rf-make-char { position: absolute; left: 12px; bottom: 12px; z-index: 3; font-size: 11.5px; color: var(--text-2); background: rgba(10,8,16,.8);
  border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; }
.rf-make-char a { color: var(--accent); }

.rf-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 820px) {
  .rf-grid { grid-template-columns: 1fr; }
  .rf-lab { aspect-ratio: 4/3; }
  .rf-portal { width: 44%; right: 5%; }
  .rf-leaves { width: 30%; }
}
.rf-panel { background: var(--hv-panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.rf-kick { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }

/* boss + server bar */
.rf-boss-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rf-boss-top h2 { font-family: var(--font-display); font-size: 22px; margin: 2px 0 0; }
.rf-types { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.rf-tp { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.rf-phase { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.rf-phase.p0 { color: #d6c8ff; border-color: rgba(123,77,255,.45); background: rgba(123,77,255,.12); }
.rf-phase.p1 { color: #ffc28a; border-color: rgba(255,160,80,.45); background: rgba(255,140,50,.12); }
.rf-phase.p2 { color: var(--rf-red-2); border-color: rgba(226,54,79,.55); background: rgba(226,54,79,.14); animation: rf-throb 1.4s ease-in-out infinite; }
.rf-phase.fell { color: var(--rf-good); border-color: rgba(110,231,160,.45); background: rgba(110,231,160,.1); }
@keyframes rf-throb { 50% { box-shadow: 0 0 14px rgba(226,54,79,.55); } }
.rf-sbar { position: relative; height: 18px; margin: 14px 0 6px; border-radius: 9px; background: rgba(255,255,255,.06); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.rf-sbar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; background: linear-gradient(90deg, var(--rf-violet), var(--rf-red)); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.rf-sbar-gain { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.85); transition: width 1.2s cubic-bezier(.2,.8,.2,1), left 1.2s cubic-bezier(.2,.8,.2,1); }
.rf-sbar-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(10,10,20,.9); }
.rf-sbar-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); gap: 8px; flex-wrap: wrap; }
.rf-sbar-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.rf-intel { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin-top: 14px; font-size: 12px; align-items: center; }
.rf-intel .rf-k { color: var(--text-3); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.rf-intel .rf-types { margin: 0; }
.rf-moves-list { margin-top: 10px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.rf-moves-list b { color: var(--text); }
.rf-board { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.rf-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.rf-row-n { width: 18px; color: var(--text-3); font-weight: 700; font-size: 11px; }
.rf-row img { width: 22px; height: 22px; border-radius: 50%; background: #222; object-fit: cover; }
.rf-row-u { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-row-d { font-variant-numeric: tabular-nums; color: var(--text-2); }
.rf-row.me .rf-row-u { color: var(--accent); font-weight: 700; }
.rf-row-sh { font-size: 10px; color: var(--hv-amber); white-space: nowrap; }
.rf-empty { font-size: 12.5px; color: var(--text-3); padding: 6px 0; }

/* partner picker */
.rf-pick h3 { font-family: var(--font-display); font-size: 16px; margin: 0; display: flex; justify-content: space-between; align-items: baseline; }
.rf-pick h3 span { font: 600 11px var(--font-body); color: var(--text-3); }
.rf-mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 12px; max-height: 390px; overflow: auto; padding: 2px; }
.rf-mon { position: relative; border: 1px solid var(--border); background: var(--hv-panel-2); border-radius: 10px; padding: 6px 6px 7px; text-align: center; color: inherit; font: inherit; cursor: pointer; transition: .15s; }
.rf-mon:hover { border-color: rgba(255,255,255,.2); }
.rf-mon.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--hv-a-32); background: linear-gradient(180deg, var(--hv-a-16), var(--hv-panel-2)); }
.rf-mon img { width: 56px; height: 56px; display: block; margin: 0 auto; }
.rf-mon-nm { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-mon-lv { position: absolute; left: 6px; top: 5px; font-size: 9.5px; font-weight: 800; color: var(--text-3); }
.rf-mon-star { position: absolute; right: 5px; top: 4px; font-size: 9px; font-weight: 800; color: var(--hv-amber); }
.rf-mw { display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
.rf-mw.strong { background: rgba(110,231,160,.14); color: var(--rf-good); }
.rf-mw.neutral { background: rgba(255,255,255,.07); color: var(--text-2); }
.rf-mw.weak { background: rgba(255,107,107,.13); color: #ff9b9b; }
.rf-detail { margin-top: 12px; display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.rf-detail:empty { display: none; }
.rf-detail > img { width: 92px; height: 92px; }
.rf-dn { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.rf-dn small { font: 700 12px var(--font-body); color: var(--text-3); }
.rf-stats { display: grid; grid-template-columns: 34px 1fr 30px; gap: 4px 8px; font-size: 10.5px; margin-top: 8px; align-items: center; }
.rf-stats .rf-k { color: var(--text-3); font-weight: 800; letter-spacing: .06em; }
.rf-stat-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.rf-stat-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.rf-stat-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.rf-note { font-size: 10.5px; color: var(--text-3); margin-top: 6px; }
.rf-note b.hurt { color: #ff9b9b; }
.rf-note b.ok { color: var(--rf-good); }
.rf-lvbar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); margin-top: 8px; overflow: hidden; }
.rf-lvbar i { display: block; height: 100%; background: var(--hv-amber); }
.rf-go { display: block; width: 100%; margin-top: 14px; border: 0; border-radius: 12px; padding: 15px; cursor: pointer; font-family: var(--font-display); font-size: 18px; font-weight: 800;
  letter-spacing: .02em; color: #1a1030; background: linear-gradient(180deg, var(--hv-amber-2), var(--hv-amber)); box-shadow: 0 5px 0 #a67c12, 0 10px 26px rgba(245,181,24,.28); transition: transform .08s; }
.rf-go:active { transform: translateY(3px); box-shadow: 0 2px 0 #a67c12; }
.rf-go:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.rf-go small { display: block; font: 600 11px var(--font-body); opacity: .75; margin-top: 2px; }
.rf-ghost { border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--text); border-radius: 12px; padding: 14px; font: 700 14px var(--font-body); cursor: pointer; }
.rf-err { margin-top: 10px; font-size: 12.5px; color: var(--rf-bad); }
.rf-err:empty { display: none; }

/* modals (starter pick, victory) */
.rf-modal { position: fixed; inset: 0; z-index: 800; background: rgba(5,4,12,.82); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 16px; }
.rf-modal.on { display: flex; animation: rf-rise .3s ease; }
.rf-modal-card { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border-radius: 18px;
  background: linear-gradient(180deg, #1d1624, #121019); border: 1px solid rgba(232,114,42,.35); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.rf-modal-card h2 { font-family: var(--font-display); font-size: 24px; margin: 4px 0 0; }
.rf-modal-card p { color: var(--text-2); font-size: 13.5px; line-height: 1.55; margin: 8px 0 0; }
.rf-starters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.rf-starter { border: 1px solid var(--border); background: var(--hv-panel); border-radius: 14px; padding: 12px 8px; text-align: center; color: inherit; font: inherit; cursor: pointer; transition: .15s; }
.rf-starter:hover { border-color: var(--accent); transform: translateY(-2px); }
.rf-starter:disabled { opacity: .5; cursor: wait; }
.rf-starter img { width: 84px; height: 84px; }
.rf-starter-nm { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.rf-starter-ss { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; }
.rf-starter .rf-types { justify-content: center; margin-top: 5px; }
.rf-starter-hint { font-size: 11px; color: var(--text-2); margin-top: 6px; line-height: 1.35; }
@media (max-width: 520px) {
  .rf-starters { grid-template-columns: 1fr; }
  .rf-starter { display: grid; grid-template-columns: 70px 1fr; text-align: left; align-items: center; gap: 0 10px; }
  .rf-starter img { width: 70px; height: 70px; grid-row: span 4; }
  .rf-starter .rf-types { justify-content: flex-start; }
}
.rf-victory .rf-modal-card { text-align: center; border-color: rgba(245,181,24,.5);
  background: radial-gradient(80% 60% at 50% 30%, rgba(245,181,24,.16), transparent), linear-gradient(180deg, #1d1624, #121019); }
.rf-vic-stage { position: relative; width: 220px; height: 220px; margin: 4px auto 0; }
.rf-vic-stage .rf-actor { filter: drop-shadow(0 0 22px rgba(255,214,121,.8)); }
.rf-vic-shiny { font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--hv-amber-2); text-transform: uppercase; }
.rf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.rf-btns .rf-go { margin-top: 0; }

/* ── the fight ── */
.rf-fight { max-width: 880px; margin: 0 auto; }
.rf-stage { position: relative; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; border: 1px solid rgba(226,54,79,.3); user-select: none; -webkit-user-select: none; touch-action: manipulation;
  background: radial-gradient(60% 55% at 72% 34%, rgba(226,54,79,.2), transparent 60%), radial-gradient(80% 70% at 20% 90%, rgba(123,77,255,.26), transparent 65%), linear-gradient(180deg, #120a1c, var(--rf-void) 70%); }
@media (max-width: 620px) { .rf-stage { aspect-ratio: 4/5; } }
.rf-stars { position: absolute; inset: 0; opacity: .75; animation: rf-drift 40s linear infinite; background-size: 220px 220px;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff9, transparent), radial-gradient(1px 1px at 70% 20%, #fff8, transparent), radial-gradient(1.5px 1.5px at 40% 60%, #38e0cc99, transparent),
    radial-gradient(1px 1px at 85% 70%, #fff7, transparent), radial-gradient(1px 1px at 10% 80%, #fff6, transparent), radial-gradient(1.5px 1.5px at 55% 15%, #ff7a8c99, transparent); }
@keyframes rf-drift { to { background-position: 220px 110px; } }
.rf-swirl { position: absolute; right: -12%; top: -30%; width: 90%; aspect-ratio: 1; border-radius: 50%; opacity: .3; filter: blur(18px); animation: rf-spin 18s linear infinite;
  background: conic-gradient(from 0deg, transparent, rgba(226,54,79,.6), transparent 30%, rgba(56,224,204,.45), transparent 60%, rgba(123,77,255,.6), transparent); }
.rf-stage.p1 .rf-swirl { opacity: .45; animation-duration: 10s; }
.rf-stage.p2 .rf-swirl { opacity: .62; animation-duration: 5s; }
.rf-plat { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(123,77,255,.35), rgba(123,77,255,.08) 70%, transparent); }
.rf-shake { animation: rf-shake .35s; }
@keyframes rf-shake { 20% { transform: translate(-4%, 0); } 40% { transform: translate(4%, -2%); } 60% { transform: translate(-3%, 1%); } 80% { transform: translate(2%, 0); } }
.rf-flash { animation: rf-flash .3s; }
@keyframes rf-flash { 50% { filter: brightness(3) saturate(0); } }

.rf-hud { position: absolute; left: 12px; right: 12px; display: flex; gap: 10px; pointer-events: none; z-index: 5; }
.rf-hud.top { top: 10px; justify-content: space-between; align-items: flex-start; }
.rf-hud.bot { bottom: 10px; align-items: flex-end; }
.rf-card { background: rgba(10,7,18,.8); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px 11px; backdrop-filter: blur(4px); }
.rf-card-nm { font-family: var(--font-display); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 7px; }
.rf-card-nm small { font: 700 10.5px var(--font-body); color: var(--text-3); }
.rf-hp { width: 190px; height: 9px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 6px; }
.rf-hp i { display: block; height: 100%; background: linear-gradient(90deg, #4ade80, #a3e635); transition: width .5s ease; }
.rf-hp.mid i { background: linear-gradient(90deg, #facc15, #fb923c); }
.rf-hp.low i { background: linear-gradient(90deg, #ef4444, #f97316); }
.rf-hpv { font-size: 10.5px; color: var(--text-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.rf-energy { display: flex; gap: 4px; margin-top: 6px; }
.rf-energy i { width: 14px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.12); }
.rf-energy i.on { background: var(--rf-block); box-shadow: 0 0 6px rgba(95,211,255,.7); }
.rf-turn { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .04em; color: var(--text-2); text-align: right; }
.rf-turn b { font-size: 22px; color: #fff; }
.rf-run-dmg { font-size: 11px; color: var(--hv-amber-2); text-align: right; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rf-card .rf-sbar { height: 7px; margin: 7px 0 0; width: 210px; }
.rf-srv { font-size: 10px; color: var(--text-3); margin-top: 3px; }
@media (max-width: 620px) { .rf-hp { width: 140px; } .rf-card .rf-sbar { width: 150px; } }

.rf-banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 6; text-align: center; pointer-events: none; opacity: 0; transition: opacity .25s; width: 92%; }
.rf-banner.on { opacity: 1; }
.rf-banner-t { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.rf-banner-s { font-size: 12.5px; color: var(--text-2); margin-top: 2px; text-shadow: 0 1px 4px #000; }
.rf-banner.warn .rf-banner-t { color: var(--rf-red-2); animation: rf-throbt .6s ease-in-out infinite; }
@keyframes rf-throbt { 50% { transform: scale(1.06); } }
@media (max-width: 620px) { .rf-banner { top: 44%; } .rf-banner-t { font-size: 22px; } }
.rf-pop { position: absolute; z-index: 7; font-family: var(--font-display); font-weight: 800; pointer-events: none; transform: translate(-50%, -50%);
  text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 14px rgba(0,0,0,.5); animation: rf-popup 1.1s ease-out forwards; }
.rf-pop-g { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.rf-pop-v { display: block; font-size: 30px; text-align: center; white-space: nowrap; }
@keyframes rf-popup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -55%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -110%); } }
.rf-g-perfect { color: var(--hv-amber-2); } .rf-g-good { color: #fff; } .rf-g-miss { color: #9aa0b4; }

.rf-ring { position: absolute; z-index: 8; pointer-events: none; display: none; transform: translate(-50%, -50%); }
.rf-ring.on { display: block; }
.rf-ring-tg, .rf-ring-mv { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.rf-ring-tg { border: 3px solid rgba(95,211,255,.9); box-shadow: 0 0 14px rgba(95,211,255,.6), inset 0 0 14px rgba(95,211,255,.4); }
.rf-ring-mv { border: 3px solid var(--rf-red-2); box-shadow: 0 0 14px rgba(226,54,79,.8); }
.rf-ring-lbl { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #bfe6ff; text-shadow: 0 1px 4px #000; }

.rf-cmd { margin-top: 12px; padding: 12px; }
.rf-cmd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; min-height: 26px; }
.rf-cmd-q { font-size: 13px; color: var(--text-2); }
.rf-cmd-q b { color: var(--text); }
.rf-cmd-q b.warn { color: var(--rf-red-2); }
.rf-tsel { display: flex; gap: 5px; }
.rf-tsel button { border: 1px solid var(--border); background: var(--hv-panel-2); color: var(--text); border-radius: 7px; padding: 4px 9px; font: 700 11px var(--font-body); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.rf-tsel button.on { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }
.rf-tsel .rf-tp { padding: 1px 5px; }
.rf-moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rf-mvb { position: relative; text-align: left; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 11px 11px 15px; color: var(--text); font: inherit; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); transition: .12s; overflow: hidden; }
.rf-mvb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc, #888); }
.rf-mvb:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.rf-mvb:disabled { opacity: .4; cursor: not-allowed; }
.rf-mvb-k { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.rf-mvb-n { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-top: 1px; }
.rf-mvb-m { display: flex; gap: 6px; align-items: center; margin-top: 5px; font-size: 10.5px; color: var(--text-2); flex-wrap: wrap; }
.rf-cost { display: inline-flex; gap: 2px; }
.rf-cost i { width: 7px; height: 7px; border-radius: 2px; background: var(--rf-block); }
.rf-mvb .rf-mw { margin: 0; }
@media (max-width: 520px) { .rf-moves { grid-template-columns: 1fr; } .rf-mvb { display: grid; grid-template-columns: 1fr auto; align-items: center; } .rf-mvb-m { margin: 0; justify-content: flex-end; } }
.rf-tbar { position: relative; margin: 30px auto 4px; width: min(520px, 100%); height: 30px; display: none; }
.rf-tbar.on { display: block; }
.rf-tbar-track { position: absolute; inset: 0; border-radius: 13px; background: rgba(10,8,20,.85); border: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.rf-tbar-g { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.16); }
.rf-tbar-p { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, var(--hv-amber-2), var(--hv-amber)); box-shadow: 0 0 12px rgba(245,181,24,.8); }
.rf-tbar-mk { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff; }
.rf-tbar-lbl { position: absolute; left: 0; right: 0; top: -22px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.rf-now { display: none; }
.rf-now.on { display: block; }
.rf-hint { font-size: 11.5px; color: var(--text-3); margin-top: 10px; text-align: center; line-height: 1.5; }
.rf-hint kbd { font: 700 10px ui-monospace, monospace; padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(255,255,255,.2); color: var(--text-2); }

/* ── results ── */
.rf-res { max-width: 620px; margin: 0 auto; padding: 22px; }
.rf-res h2 { font-family: var(--font-display); font-size: 30px; margin: 2px 0 0; }
.rf-res-sub { color: var(--text-2); font-size: 14px; margin-top: 4px; }
.rf-big { font-family: var(--font-display); font-weight: 800; font-size: 54px; color: var(--hv-amber-2); line-height: 1; margin-top: 18px; font-variant-numeric: tabular-nums; }
.rf-big small { font-size: 14px; color: var(--text-3); font-weight: 700; margin-left: 6px; }
.rf-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.rf-breakdown div { background: var(--hv-panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
.rf-breakdown b { display: block; font-family: var(--font-display); font-size: 22px; }
.rf-breakdown b.p { color: var(--hv-amber-2); }
.rf-breakdown b.m { color: #9aa0b4; }
.rf-breakdown span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.rf-lines { margin-top: 16px; display: grid; gap: 6px; font-size: 13.5px; }
.rf-lines div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); }
.rf-lines b { font-variant-numeric: tabular-nums; text-align: right; }
.rf-lines div.alert { border: 1px solid rgba(226,54,79,.4); }
.rf-lvup { margin-top: 14px; padding: 12px; border-radius: 12px; border: 1px solid rgba(245,181,24,.4); background: var(--hv-amber-dim); display: flex; align-items: center; gap: 12px; }
.rf-lvup img { width: 56px; height: 56px; }
.rf-lvup-t { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--hv-amber-2); }
.rf-lvup-s { font-size: 12px; color: var(--text-2); }
.rf-res-bar { margin-top: 18px; }
.rf-credit { margin-top: 18px; font-size: 11px; color: var(--text-3); text-align: center; }
.rf-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── the workbench ── */
/* Machines on the lab wall: a dark silhouette until the first tier, then lit in the
   upgrade's colour, the glow brightening per tier, one light per tier below. */
.rf-mach { cursor: pointer; transition: opacity .4s, filter .4s; opacity: .22; filter: grayscale(1) brightness(.7); }
.rf-mach:hover { opacity: .45; }
.rf-mach.t1, .rf-mach.t2, .rf-mach.t3 { opacity: 1; filter: none; }
.rf-mach-metal { fill: #3b3140; }
.rf-mach-mc { fill: var(--mc); }
.rf-mach-arc { stroke: var(--mc); opacity: 0; }
.rf-mach-glow { fill: var(--mc); opacity: 0; filter: blur(14px); transition: opacity .4s; }
.rf-mach.t1 .rf-mach-glow { opacity: .12; }
.rf-mach.t2 .rf-mach-glow { opacity: .22; }
.rf-mach.t3 .rf-mach-glow { opacity: .34; animation: rf-hum 2.6s ease-in-out infinite; }
.rf-mach.t2 .rf-mach-arc, .rf-mach.t3 .rf-mach-arc { opacity: .8; }
@keyframes rf-hum { 50% { opacity: .5; } }
.rf-mach-dot { fill: #2a2330; stroke: #4a3f52; stroke-width: 1.5; }
.rf-mach-dot.on { fill: var(--mc); stroke: none; }
.rf-mach-new { animation: rf-flash-in 1.2s ease-out; }
@keyframes rf-flash-in { 0% { filter: brightness(3); } 100% { filter: none; } }

.rf-bench { margin-top: 14px; }
.rf-bench-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rf-bench-head h3 { font-family: var(--font-display); font-size: 18px; margin: 3px 0 0; }
.rf-shards { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.rf-shards b { font-family: var(--font-display); font-size: 20px; color: #9ff2e6; font-variant-numeric: tabular-nums; }
.rf-shard-ic { display: inline-block; width: .8em; height: .8em; transform: rotate(45deg); border-radius: 2px; vertical-align: -.05em;
  background: linear-gradient(135deg, #d9fff9, var(--rf-teal) 45%, #1f8f82); box-shadow: 0 0 6px rgba(56,224,204,.55); margin-right: .15em; }
.rf-ups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 820px) { .rf-ups { grid-template-columns: repeat(2, 1fr); } }
.rf-up { border: 1px solid var(--border); border-radius: 12px; padding: 11px; background: var(--hv-panel-2); display: flex; flex-direction: column; gap: 6px; transition: border-color .2s; }
.rf-up.owned { border-color: rgba(56,224,204,.28); }
.rf-up.rf-ping { animation: rf-ping 1.2s ease-out; }
@keyframes rf-ping { 0% { box-shadow: 0 0 0 0 rgba(56,224,204,.7); } 100% { box-shadow: 0 0 0 12px rgba(56,224,204,0); } }
.rf-up-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.rf-up-nm { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.rf-up-pips { display: inline-flex; gap: 3px; }
.rf-up-pips i { width: 10px; height: 5px; border-radius: 2px; background: rgba(255,255,255,.12); }
.rf-up-pips i.on { background: var(--rf-teal); box-shadow: 0 0 5px rgba(56,224,204,.6); }
.rf-up-desc { font-size: 11.5px; color: var(--text-3); }
.rf-up-fx { font-size: 11.5px; color: var(--text-2); line-height: 1.45; flex: 1; }
.rf-up-fx b { color: var(--text); font-weight: 600; }
.rf-up-buy, .rf-train { border: 1px solid rgba(56,224,204,.45); background: rgba(56,224,204,.1); color: #bff6ee; border-radius: 9px; padding: 8px 10px;
  font: 700 12px var(--font-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.rf-up-buy:hover:not(:disabled), .rf-train:hover:not(:disabled) { background: rgba(56,224,204,.2); }
.rf-up-buy:disabled, .rf-train:disabled { opacity: .45; cursor: not-allowed; }
.rf-up-buy b, .rf-train b { color: inherit; }
.rf-train { margin-top: 8px; }
.rf-bench-note { margin-top: 10px; font-size: 11.5px; color: var(--text-3); }
.rf-bench-note b { color: var(--text-2); }
.rf-bench-prev { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rf-bench-prev .rf-ghost { padding: 6px 10px; font-size: 12px; }
.rf-res-shards { color: #9ff2e6; }

/* ── the feed card when a Rift boss falls (rendered by community.js) ── */
.comm-act-rift { display: flex; align-items: center; justify-content: center; min-height: 62px; cursor: pointer;
  background: radial-gradient(circle at 50% 45%, rgba(226,54,79,.35), rgba(123,77,255,.15) 60%, rgba(255,255,255,.03)); }
.comm-act-rift img { width: 54px; height: 54px; image-rendering: pixelated; }
.comm-act-text [data-rift-link] { cursor: pointer; }
.comm-act-rift-crew { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.comm-act-rift-crew img { width: 20px; height: 20px; border-radius: 50%; background: #222; object-fit: cover; cursor: pointer; box-shadow: 0 0 0 1.5px rgba(245,181,24,.5); }

/* NEW pill (side rail, main.css's .nav-tag-new) and its phone-bar dot, both from
   topbar.js applyRiftNav — the Rundown's two-weeks-or-first-click rule. */
.mnav-item[data-rift-nav] { position: relative; }
.mnav-item.rf-new::after { content: ''; position: absolute; top: 6px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%;
  background: var(--rf-red, #e2364f); box-shadow: 0 0 5px #e2364f; }