/* ReviewPulse "Arcade HUD" theme. Loaded last; restyles every screen without touching the markup.
   Idea: the pulse in the logo is the motif. Steam's heartbeat runs through the hero, the panels are HUD
   readouts with a lit notch, figures glow like a scoreboard, meters fill like XP bars.
   Dark is the home of the look; light keeps the shapes and drops the glow. */

:root, :root[data-theme="dark"] {
  --frame: #05050a; --sheet: transparent; --card: #0c0c15; --raised: #141422; --active: #1d1d2f;
  --border: #23233a; --rule: #1a1a2b; --control: #34345a;
  --text: #f4f4fb; --muted: #b0b2c8; --faint: #8e90ab;
  --accent: #ffb547; --accent-ink: #ffd08a; --accent-soft: rgba(255, 181, 71, .13);
  --cyan: #4de1ff; --cyan-soft: rgba(77, 225, 255, .12); --magenta: #ff4fa3;
  --comp: #6f7fb0; --grid: #1a1a2c; --base: #3a3a5a; --dot-peer: #0c0c15;
  --glass: rgba(12, 12, 21, .72);
  --glow: 0 0 24px rgba(255, 181, 71, .35);
  --scrim: linear-gradient(0deg, #05050a 0%, rgba(5, 5, 10, .82) 38%, rgba(5, 5, 10, .25) 100%);
}
:root[data-theme="light"] {
  --frame: #eef0f6; --card: #ffffff; --raised: #f4f5fa; --active: #e5e7f0; --border: #dcdfea; --rule: #e8eaf2; --control: #c6cadb;
  --text: #0b0b14; --muted: #4f5268; --faint: #63667e;
  --accent: #b45f00; --accent-ink: #7a4100; --accent-soft: #fdf0dc; --cyan: #0083a8; --cyan-soft: #def5fb; --magenta: #c4206f;
  --comp: #8a93b8; --glass: rgba(255, 255, 255, .78); --glow: none;
  --scrim: linear-gradient(0deg, #eef0f6 0%, rgba(238, 240, 246, .85) 40%, rgba(238, 240, 246, .25) 100%);
}
:root {
  --cut: 14px; --cut-s: 8px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --btn-notch: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
  /* a lit edge along the notch of every panel */
  --notch-edge: linear-gradient(225deg, transparent 0 calc(var(--cut) * .7071 - 1px), rgba(255, 181, 71, .85) 0 calc(var(--cut) * .7071 + .6px), transparent 0) top right / calc(var(--cut) + 1px) calc(var(--cut) + 1px) no-repeat;
}

/* ---------- the world behind the screens ---------- */
html { background: var(--frame); }
#main.sheet { overflow-x: clip; }
body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(255, 181, 71, .10), transparent 60%),
    radial-gradient(800px 700px at 100% 20%, rgba(124, 77, 255, .12), transparent 60%),
    radial-gradient(700px 500px at 60% 110%, rgba(77, 225, 255, .08), transparent 60%),
    var(--frame); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
:root[data-theme="light"] body::before { background: radial-gradient(900px 600px at 8% -10%, rgba(255, 181, 71, .16), transparent 60%), radial-gradient(800px 700px at 100% 20%, rgba(124, 77, 255, .08), transparent 60%), var(--frame); }
:root[data-theme="light"] body::after { background-image: radial-gradient(rgba(20, 20, 60, .08) 1px, transparent 1.2px); }
#fx-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }
::selection { background: rgba(255, 181, 71, .35); color: #fff; }

/* ---------- shell ---------- */
.side { background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-right: 1px solid var(--border); }
.top { background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--border); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 181, 71, .5) 30%, rgba(77, 225, 255, .45) 70%, transparent); opacity: .7; }
.brand { font-size: 19px; letter-spacing: .02em; }
.brand svg { filter: drop-shadow(0 0 10px rgba(255, 181, 71, .55)); }
.brand svg path { stroke-dasharray: 40; stroke-dashoffset: 0; }
.brand .rp-w { display: inline-flex; }
.brand .rp-w b { font-weight: 700; background: linear-gradient(90deg, var(--accent), #ffd98f); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .brand svg { filter: none; }

.nav a { position: relative; border-radius: 8px; transition: background-color 180ms ease, color 180ms ease, transform 240ms var(--ease-out); }
.nav a:hover { background: linear-gradient(90deg, var(--raised), transparent); transform: translateX(2px); }
.nav a[aria-current="page"] { background: linear-gradient(90deg, rgba(255, 181, 71, .18), rgba(255, 181, 71, .02) 80%); color: var(--text); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.nav a[aria-current="page"] > svg:first-child { filter: drop-shadow(0 0 6px rgba(255, 181, 71, .7)); }
.nav-group { text-transform: uppercase; letter-spacing: .12em; font: 600 10.5px/14px var(--display); color: var(--faint); display: flex; align-items: center; gap: 8px; }
.nav-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.scope { background: linear-gradient(180deg, var(--raised), var(--card)); border-color: var(--border); border-radius: 10px; transition: border-color 180ms ease, transform 240ms var(--ease-out); }
.scope:hover { border-color: rgba(255, 181, 71, .5); transform: translateY(-1px); }
.plan { border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); border: 0; background: linear-gradient(160deg, rgba(255, 181, 71, .14), rgba(124, 77, 255, .10) 70%), var(--card); box-shadow: inset 0 0 0 1px var(--border); }

/* ---------- controls ---------- */
.search input { border-radius: 10px; background: rgba(255, 255, 255, .03); border-color: var(--control); transition: border-color 180ms ease, box-shadow 240ms var(--ease-out), background-color 180ms ease; }
:root[data-theme="light"] .search input { background: #fff; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 28px rgba(255, 181, 71, .18); }
.suggest { border-radius: 12px; background: var(--card); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }

.btn { border-radius: 8px; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out), box-shadow 240ms ease; }
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(.97); }
.btn.xp, .btn.primary { position: relative; overflow: hidden; border: 0; border-radius: 0; clip-path: var(--btn-notch); font-family: var(--display); font-weight: 600; letter-spacing: .03em; }
.btn.xp { background: linear-gradient(135deg, #ffcf7a, var(--accent) 55%, #ff9f2e); color: #140a00; }
.btn.primary { background: linear-gradient(135deg, #ffffff, #dfe3f3); color: #0b0b14; }
:root[data-theme="light"] .btn.primary { background: linear-gradient(135deg, #1a1a2e, #0b0b14); color: #fff; }
.btn.xp::after, .btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-20deg); transition: left 600ms var(--ease-out); pointer-events: none; }
.btn.xp:hover, .btn.primary:hover { opacity: 1; box-shadow: none; filter: brightness(1.06); }
.btn.xp:hover::after, .btn.primary:hover::after { left: 130%; }
.link-btn { transition: color 180ms ease; }
.seg { border-radius: 10px; }
.seg button { border-radius: 8px; transition: background-color 180ms ease, color 180ms ease; }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255, 181, 71, .25), rgba(255, 181, 71, .1)); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .45); }
.pill { border-radius: 4px; height: 22px; font-weight: 600; font-size: 11.5px; letter-spacing: .02em; }
.pill.pos { box-shadow: inset 0 0 0 1px rgba(63, 192, 122, .35); }
.pill.neg { box-shadow: inset 0 0 0 1px rgba(229, 86, 111, .35); }
.pill.accent { box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .4); }
.badge { border-radius: 3px; }
.field input, .mk-filters input:not([type="checkbox"]), .mk-filters select, .cm-ta { border-radius: 8px; }

/* ---------- panels: HUD readouts ---------- */
.card, .kpi, .boss, .locked, .lay-col, .mk-idea, .cm-paste {
  --mx: -999px; --my: -999px;
  background:
    var(--notch-edge),
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 181, 71, .09), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 120px),
    var(--card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055), inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root[data-theme="light"] .card, :root[data-theme="light"] .kpi, :root[data-theme="light"] .boss, :root[data-theme="light"] .mk-idea { box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(20, 20, 60, .04); }
.mk-idea, .cm-paste { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); border: 0; border-radius: 0; }
.card { padding: 22px; }
.card-h h2 { font-size: 18px; letter-spacing: .01em; display: flex; align-items: center; gap: 10px; }
.card-h h2::before { content: ""; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 10px var(--accent); flex: none; }
:root[data-theme="light"] .card-h h2::before { box-shadow: none; }

/* KPIs: scoreboard figures */
.kpis { gap: 10px; }
.kpi { padding: 16px 18px 18px; position: relative; }
.kpi .l { text-transform: uppercase; letter-spacing: .1em; font: 600 10.5px/14px var(--display); color: var(--faint); }
.kpi .v { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
.kpi.lead .v { font-size: 38px; background: linear-gradient(180deg, #ffe0a6, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255, 181, 71, .35)); }
:root[data-theme="light"] .kpi.lead .v { background: none; color: var(--accent); filter: none; }
.kpi.lead { background: var(--notch-edge), linear-gradient(160deg, rgba(255, 181, 71, .16), rgba(255, 181, 71, .02) 70%), var(--card); }
.kpi::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0; transform: scaleX(.3); transform-origin: left; transition: opacity 240ms ease, transform 400ms var(--ease-out); }
.kpi:hover::after { opacity: .8; transform: none; }

/* meters: XP bars with ticks and a gloss */
.bar { height: 10px; border-radius: 2px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
:root[data-theme="light"] .bar { background: var(--active); }
.bar i { background: linear-gradient(90deg, #ff9f2e, var(--accent) 60%, #ffd98f); box-shadow: 0 0 12px rgba(255, 181, 71, .45); }
.bar i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .35) 9px 11px), linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 55%); }
.bar.grey i { background: linear-gradient(90deg, #4a5a8c, var(--comp)); box-shadow: none; }
.bar.neg i { background: linear-gradient(90deg, #b8304a, var(--negative)); box-shadow: 0 0 10px rgba(229, 86, 111, .35); }
:root[data-theme="light"] .bar i { box-shadow: none; }

/* tables */
.tbl th { text-transform: uppercase; letter-spacing: .1em; font: 600 10.5px/14px var(--display); color: var(--faint); }
.tbl tbody tr { transition: background-color 180ms ease; }
.tbl tbody tr:hover td { background: rgba(255, 181, 71, .04); }
.tbl tr.you td { background: linear-gradient(90deg, rgba(255, 181, 71, .16), rgba(255, 181, 71, .03)); }
.game-cell img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); transition: transform 300ms var(--ease-out), box-shadow 300ms ease; }
.game-cell:hover img { transform: scale(1.04); box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(255, 181, 71, .35); }
.findings .dot { box-shadow: 0 0 8px currentColor; }

/* ---------- game hero: a title screen ---------- */
.hero { min-height: 360px; padding-top: 110px; padding-bottom: 70px; border-bottom: 0; }
.hero::before { background: var(--scrim), linear-gradient(90deg, rgba(5, 5, 10, .85), transparent 65%); }
:root[data-theme="light"] .hero::before { background: var(--scrim), linear-gradient(90deg, rgba(238, 240, 246, .9), transparent 65%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); opacity: .35; mix-blend-mode: multiply; }
:root[data-theme="light"] .hero::after { display: none; }
.hero-art { will-change: transform; }
.hero h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.02; font-weight: 700; letter-spacing: -0.015em; text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
:root[data-theme="light"] .hero h1 { text-shadow: none; }
.hero .title-row .sub { font-size: 16px; line-height: 24px; max-width: 720px; }
.hero > svg.hero-pulse { position: absolute; z-index: 1; left: 0; right: 0; bottom: 4px; width: 100%; height: 52px; z-index: 2; pointer-events: none; opacity: .9; }
.hero > svg.hero-pulse path { fill: none; stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 6px var(--accent)); }

.tier { width: 74px; height: 84px; clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%); background: linear-gradient(160deg, #ffe2a8, var(--accent) 45%, #e8861a); color: #1a0d00; position: relative; overflow: hidden; filter: drop-shadow(0 0 18px rgba(255, 181, 71, .5)); }
.tier b { font-size: 42px; line-height: 42px; font-weight: 700; }
.tier span { text-transform: uppercase; letter-spacing: .14em; font-size: 9.5px; }
.tier::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent); transform: skewX(-18deg); animation: holo 1600ms var(--ease-out) 700ms both; }
.tier:hover::after { animation: holo 900ms var(--ease-out) both; }
@keyframes holo { from { left: -80%; } to { left: 140%; } }
.tier.t-A { background: linear-gradient(160deg, #a8ffd0, var(--positive) 50%, #1f8f55); color: #022010; filter: drop-shadow(0 0 16px rgba(63, 192, 122, .45)); }
.tier.t-B { background: linear-gradient(160deg, #e9f8ff, var(--cyan) 50%, #1aa4c4); color: #021821; filter: drop-shadow(0 0 16px rgba(77, 225, 255, .4)); }
.tier.t-C, .tier.t-D { background: linear-gradient(160deg, #3a3a58, #24243a); color: var(--text); filter: none; }
.tier.t-F { background: linear-gradient(160deg, #ff9fb0, var(--negative) 50%, #a8233b); color: #fff; }
.fresh .live { box-shadow: 0 0 10px var(--positive); }

/* community + market banners */
.cm-teaser { border-radius: 0 !important; clip-path: var(--btn-notch); background: linear-gradient(90deg, rgba(255, 181, 71, .16), rgba(124, 77, 255, .10)) !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .35); }

/* ---------- home ---------- */
.home2 { position: relative; }
.hero2 { position: relative; }
.home2 h1.split { font-weight: 700; font-size: clamp(40px, 4.6vw, 68px); letter-spacing: -0.025em; line-height: 1; }
.home2 h1.split em { font-style: normal; background: linear-gradient(90deg, #ffd98f, var(--accent) 40%, #ff7a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .home2 h1.split em { background: none; color: var(--accent); }
.rp-roles { display: inline-flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 10px; align-self: flex-start; }
:root[data-theme="light"] .rp-roles { background: #fff; }
.rp-roles button { border: 0; background: none; color: var(--muted); height: 34px; padding: 0 14px; border-radius: 7px; cursor: pointer; font: 600 13px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; transition: color 180ms ease, background-color 180ms ease; }
.rp-roles button:hover { color: var(--text); }
.rp-roles button[aria-pressed="true"] { color: #140a00; background: linear-gradient(135deg, #ffcf7a, var(--accent)); box-shadow: 0 0 18px rgba(255, 181, 71, .35); }
.rp-roles i { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); opacity: .7; }
.rp-swap { display: block; }
.rp-doors { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-doors a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; color: var(--text); font-weight: 500; font-size: 14px; background: rgba(255, 255, 255, .04); clip-path: var(--btn-notch); box-shadow: inset 0 0 0 1px var(--border); transition: background-color 180ms ease, color 180ms ease; }
:root[data-theme="light"] .rp-doors a { background: #fff; }
.rp-doors a:hover { text-decoration: none; background: rgba(255, 181, 71, .14); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .5); }
.rp-doors a svg { width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hstats b { font-weight: 700; text-shadow: 0 0 22px rgba(255, 181, 71, .35); }
:root[data-theme="light"] .hstats b { text-shadow: none; }
.hstats.rp-live { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 36px; }
.hstats.rp-live b { font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hstats.rp-live > div { min-width: 0; }
.hstats .rp-src { grid-column: 1 / -1; }
.hstats .rp-src { flex-basis: 100%; font-size: 12px; color: var(--faint); }

/* the wall becomes a tilted arcade cabinet screen over a neon floor */
.h2-art { perspective: 1400px; }
.wall { border-radius: 18px; transform: rotateY(-10deg) rotateX(5deg) rotateZ(1deg); transform-origin: 60% 50%; box-shadow: 0 0 0 1px rgba(255, 181, 71, .25), 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(124, 77, 255, .18); transition: transform 900ms var(--ease-expo); animation: wallIn2 1300ms var(--ease-expo) 150ms both; }
@keyframes wallIn2 { from { opacity: 0; transform: rotateY(-30deg) rotateX(12deg) translateZ(-120px); } to { opacity: 1; transform: rotateY(-10deg) rotateX(5deg) rotateZ(1deg); } }
.h2-art:hover .wall { transform: rotateY(-6deg) rotateX(3deg); }
.wall::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .10), transparent 30%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px); }
.wall-cap { border-radius: 6px; }
.rp-floor { position: absolute; left: -10%; right: -10%; bottom: -70px; height: 220px; z-index: -1; pointer-events: none; transform: perspective(500px) rotateX(62deg); transform-origin: bottom; background-image: linear-gradient(rgba(255, 181, 71, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 77, 255, .35) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 80%); mask-image: linear-gradient(0deg, #000 0%, transparent 80%); }
:root[data-theme="light"] .rp-floor { opacity: .35; }

/* the pulse under the headline: the signature moment */
.rp-pulse { display: block; width: min(560px, 100%); height: 48px; margin: -6px 0 -8px; overflow: visible; }
.rp-pulse path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rp-pulse .p-base { stroke: var(--border); }
.rp-pulse .p-live { stroke: url(#rpPulseGrad); filter: drop-shadow(0 0 6px rgba(255, 181, 71, .8)); }
:root[data-theme="light"] .rp-pulse .p-live { filter: none; }

/* live ticker: the one marquee */
.rp-ticker { position: relative; margin: 8px calc(-1 * 32px) 0; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(255, 181, 71, .06), rgba(124, 77, 255, .06)); overflow: hidden; display: flex; align-items: center; gap: 0; }
.rp-ticker-h { flex: none; z-index: 2; position: relative; box-shadow: 18px 0 18px var(--frame); display: flex; align-items: center; gap: 8px; padding: 0 18px 0 32px; font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); background: var(--frame); align-self: stretch; margin: -14px 0; }
.rp-ticker-h .live { width: 8px; height: 8px; border-radius: 50%; background: var(--negative); box-shadow: 0 0 10px var(--negative); }
.rp-track { display: flex; gap: 34px; width: max-content; animation: tick 60s linear infinite; padding-left: 12px; }
.rp-ticker:hover .rp-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.rp-track a { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; white-space: nowrap; }
.rp-track a:hover { color: var(--accent); text-decoration: none; }
.rp-track b { font: 700 13px/1 var(--display); color: var(--accent); }
.rp-track span { color: var(--faint); font-size: 12px; }

/* home sections */
.hsec h2, .feat-l h2 { font-weight: 700; letter-spacing: -0.015em; }
.home2 .capsule { border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transform-style: preserve-3d; }
.home2 .capsule .meta { background: transparent; }
.home2 .capsule:hover { box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .6), 0 0 30px rgba(255, 181, 71, .12); }
.feat-list li { border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); background: linear-gradient(90deg, rgba(255, 255, 255, .03), transparent), var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); transition: background-color 180ms ease, transform 300ms var(--ease-out); }
.feat-list li:hover { transform: translateX(6px); background: linear-gradient(90deg, rgba(255, 181, 71, .12), transparent 70%), var(--card); }
.feat-list em { border-radius: 3px; }
.band { border-radius: 0; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .07) 0 14px, transparent 14px 28px), linear-gradient(120deg, #ffcf7a, var(--accent) 45%, #ff7a3c); color: #140a00; }
.band-btn { border-radius: 0; clip-path: var(--btn-notch); background: #0b0b14; color: var(--accent); border: 0; }
.band-ghost { border-radius: 0; clip-path: var(--btn-notch); border: 0; box-shadow: inset 0 0 0 2px rgba(20, 10, 0, .7); color: #140a00; }
.lay-col { border-radius: 0; }
.peek { border-radius: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .35), 0 24px 60px rgba(0, 0, 0, .6); background: var(--card); }

/* market pages */
.mk-word { border-radius: 4px; }
.mk-filters { border-radius: 0; }

/* footer */
.foot { border-top: 0; position: relative; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 181, 71, .5), rgba(124, 77, 255, .3), transparent); }

/* ---------- motion helpers (ui.js) ---------- */
.rp-tilt { transition: transform 400ms var(--ease-out); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .wall { animation: none; transform: none; }
  .tier::after { animation: none; display: none; }
  .rp-track { animation: none; }
  .rp-ticker { overflow-x: auto; }
  .nav a:hover, .feat-list li:hover { transform: none; }
  .btn.xp::after, .btn.primary::after { display: none; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .wall { transform: rotateY(-8deg) rotateX(4deg); }
  @keyframes wallIn2 { from { opacity: 0; } to { opacity: 1; transform: rotateY(-8deg) rotateX(4deg); } }
}
@media (max-width: 960px) {
  .side { background: var(--frame); }
  .rp-ticker { margin: 8px -16px 0; }
  .rp-ticker-h { padding-left: 16px; }
  .hero { min-height: 280px; padding-top: 90px; }
}
@media (max-width: 640px) {
  .kpi .v { font-size: 24px; line-height: 30px; }
  .kpi.lead .v { font-size: 28px; }
  .tier { width: 58px; height: 66px; }
  .tier b { font-size: 32px; line-height: 32px; }
  .rp-roles { width: 100%; }
  .rp-roles button { flex: 1; justify-content: center; padding: 0 8px; font-size: 12px; }
  .wall { transform: none; animation: none; }
  .rp-floor { display: none; }
}
@media print {
  body::before, body::after, #fx-sky, .hero-pulse, .rp-ticker, .rp-floor { display: none !important; }
  .card, .kpi { background: #fff !important; box-shadow: inset 0 0 0 1px #ddd !important; }
  .kpi.lead .v { background: none; color: #a85d00; filter: none; }
}

/* page titles outside a game */
.title-row h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; }
.title-row h1::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 12px; background: linear-gradient(90deg, var(--accent), var(--cyan)); box-shadow: 0 0 12px rgba(255, 181, 71, .5); }
.hero .title-row h1::after { display: none; }
:root[data-theme="light"] .title-row h1::after { box-shadow: none; }
@media (max-width: 640px) {
  .hstats.rp-live { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; }
  .hstats.rp-live > div:nth-child(3) { grid-column: 1 / -1; }
  .hstats.rp-live b { font-size: 26px; line-height: 30px; }
  .hero { padding-bottom: 56px; }
  .hero > svg.hero-pulse { height: 40px; opacity: .6; }
}