/* Fix skins (owner 2026-10-11): reset Rust's downloaded Workshop skins when items show the wrong icons.
   Plugin-page shell (rank-pages.css + plugin-pages.css) plus this file. Players do not read: steps stay one action each.
   Accent: the gold repair wave in the art. */
.fs { --fs-acc: #ffd964; --fs-acc-hi: #ffeaa3; --fs-acc-dim: rgba(255, 217, 100, 0.12); --fs-acc-line: rgba(255, 217, 100, 0.4); --fs-page: #05070d; --fs-overlap: clamp(110px, 11vw, 180px); }

/* ---------- hero: full-bleed art, title over the dark left side ---------- */
.fs-hero { position: relative; overflow: hidden; background: radial-gradient(60rem 30rem at 75% 40%, rgba(255, 217, 100, 0.14), transparent 70%), radial-gradient(40rem 24rem at 90% 80%, rgba(255, 120, 90, 0.1), transparent 70%), var(--fs-page); }
.fs-hero-art { position: absolute; inset: 0; }
.fs-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }
.fs-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 7, 13, 0.95) 0%, rgba(5, 7, 13, 0.85) 30%, rgba(5, 7, 13, 0.25) 58%, rgba(5, 7, 13, 0) 78%), linear-gradient(0deg, var(--fs-page) 0%, rgba(5, 7, 13, 0) 45%); }
.fs-hero .container { position: relative; z-index: 2; }
.fs-hero-inner { min-height: clamp(420px, 40vw, 600px); display: flex; align-items: center; padding: 2rem 0 calc(var(--fs-overlap) + 1.25rem); }
.fs-hero-text { max-width: 34rem; }
.fs-hero .rk-title { font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: 0.02em; text-shadow: 0 0 40px rgba(255, 217, 100, 0.22); }
.fs-hero .rk-tagline { font-size: clamp(1.1rem, 2.4vw, 1.4rem); }
.fs-hero .rk-tagline em { font-style: normal; color: var(--fs-acc-hi); }
.fs-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }
.fs-chips span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.85rem; border-radius: 999px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--fs-acc-line); font-size: 0.9rem; font-weight: 600; }
.fs-chips svg { width: 16px; height: 16px; color: var(--fs-acc); }
.fs-body { position: relative; z-index: 3; margin-top: calc(-1 * var(--fs-overlap)); }
.fs-body > .rk-section:first-child .rk-section-head h2 { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
@media (max-width: 760px) {
  .fs-hero-art { position: relative; height: 220px; }
  .fs-hero-art::after { background: linear-gradient(0deg, var(--fs-page) 0%, rgba(5, 7, 13, 0.6) 25%, rgba(5, 7, 13, 0) 60%); }
  .fs { --fs-overlap: 1rem; }
  .fs-hero-inner { min-height: 0; padding: 0 0 calc(var(--fs-overlap) + 1rem); margin-top: -0.8rem; }
}

/* ---------- the steps: one big card each. A glance gives the action: huge number, the action as the headline,
   the how in chips under it, the details small and quiet (owner 2026-10-11: players do not read) ---------- */
.fs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 1.1rem; }
.fs-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 1.25rem; align-items: start; padding: 1.7rem 1.6rem 1.75rem; border-radius: 18px; background: linear-gradient(180deg, #1a1f29, #11141b); border: 1px solid #2c3040; overflow: hidden; }
.fs-step::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 217, 100, 0.12), transparent 70%); pointer-events: none; }
.fs-num { font-family: "Cinzel", serif; font-weight: 800; font-size: 4.8rem; line-height: 0.8; color: var(--fs-acc); text-shadow: 0 0 26px rgba(255, 217, 100, 0.4); min-width: 3rem; text-align: center; }
.fs-text { min-width: 0; }
.fs-do { margin: 0; font-family: "Inter", system-ui, sans-serif; font-weight: 800; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.8rem); line-height: 1.15; letter-spacing: -0.01em; color: #fff; }
.fs-how { margin: 0.75rem 0 0; font-size: 1.08rem; line-height: 1.5; color: var(--text, #eef1f8); }
.fs-how b { color: #fff; }
.fs-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--fs-acc-dim); border: 1px solid var(--fs-acc-line); }
.fs-ico img { width: 28px; height: 28px; display: block; }
.fs-small { margin: 0.6rem 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--muted, #9aa3b8); }
.fs-small b { color: var(--fs-acc-hi); font-weight: 600; }
/* menu path chips: Steam > Exit */
.fs-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; vertical-align: middle; }
.fs-path kbd, .fs-key { font: 700 1rem/1 "Inter", system-ui, sans-serif; padding: 0.42rem 0.7rem; border-radius: 8px; background: #0b0e14; border: 1px solid #3a4154; border-bottom-width: 2px; color: #fff; white-space: nowrap; }
.fs-path i { font-style: normal; font-size: 1.1rem; color: var(--fs-acc); }
@media (min-width: 1000px) { .fs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: number beside the headline, icon dropped so the headline gets the room; the rest runs full width */
@media (max-width: 560px) {
  .fs-step { grid-template-columns: auto minmax(0, 1fr); gap: 0 0.9rem; padding: 1.5rem 1.15rem 1.6rem; }
  .fs-num { font-size: 3.8rem; min-width: 2.3rem; }
  .fs-ico { display: none; }
  .fs-path kbd { font-size: 0.95rem; }
}
/* the narrowest phones: a long menu label may wrap inside its chip instead of running to the card edge */
@media (max-width: 380px) { .fs-path kbd { white-space: normal; line-height: 1.25; } }

/* ---------- folder and file landmarks: shown to recognize, not to copy (every drive is different) ---------- */
.fs-mark { margin: 0.6rem 0 0; }
.fs-mark code { display: inline-block; max-width: 100%; padding: 0.5rem 0.75rem; border-radius: 8px; background: #07090e; border: 1px solid var(--fs-acc-line); font: 700 1rem/1.35 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--fs-acc-hi); overflow-wrap: break-word; }

/* ---------- the tip after the steps: one complete command, so it gets a copy button ---------- */
.fs-tip { margin-top: 1.1rem; padding: 1.5rem 1.6rem 1.6rem; border-radius: 18px; background: linear-gradient(90deg, rgba(255, 217, 100, 0.12), rgba(255, 217, 100, 0.03) 70%); border: 1px dashed var(--fs-acc-line); }
.fs-copy { display: flex; align-items: stretch; max-width: 30rem; margin-top: 0.85rem; border-radius: 10px; background: #07090e; border: 1px solid var(--fs-acc-line); overflow: hidden; }
.fs-copy code { flex: 1 1 auto; min-width: 0; padding: 0.7rem 0.9rem; font: 700 1.05rem/1.35 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--fs-acc-hi); overflow-wrap: break-word; user-select: all; }
.fs-copy button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 1rem; border: 0; border-left: 1px solid var(--fs-acc-line); background: var(--fs-acc-dim); color: var(--fs-acc-hi); font: 700 0.9rem/1 "Inter", system-ui, sans-serif; cursor: pointer; transition: background 0.2s ease; }
.fs-copy button:hover, .fs-copy button:focus-visible { background: rgba(255, 217, 100, 0.24); }
.fs-copy button svg { width: 16px; height: 16px; }
.fs-copy button.is-done { background: rgba(125, 255, 176, 0.18); color: #c9ffdf; }
/* phones: the command keeps the full width, the button sits under it */
@media (max-width: 560px) { .fs-tip { padding: 1.35rem 1.15rem 1.4rem; } .fs-copy { flex-direction: column; } .fs-copy button { justify-content: center; padding: 0.7rem 1rem; border-left: 0; border-top: 1px solid var(--fs-acc-line); } }

/* ---------- does / does not strip ---------- */
.fs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0.75rem; }
.fs-fact { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.95rem 1rem; border-radius: 14px; background: #151821; border: 1px solid #2c3040; }
.fs-fact svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 0.1rem; }
.fs-fact.is-yes svg { color: #7dffb0; }
.fs-fact.is-no svg { color: #ff8a7a; }
.fs-fact.is-wait svg { color: #ffd36b; }
.fs-fact b { display: block; margin-bottom: 0.15rem; }
.fs-fact span { color: var(--muted, #b7becf); line-height: 1.45; font-size: 0.95rem; }
.fs-honest { margin: 0.9rem 0 0; color: var(--muted, #b7becf); font-size: 0.92rem; }

/* ---------- still broken ---------- */
.fs-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.4rem; border-radius: 16px; background: linear-gradient(90deg, rgba(88, 101, 242, 0.22), rgba(88, 101, 242, 0.06)); border: 1px solid rgba(124, 136, 255, 0.45); }
.fs-help h2 { margin: 0; font-family: "Cinzel", serif; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.fs-help p { margin: 0.25rem 0 0; color: var(--muted, #b7becf); }
.fs-help a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.2rem; border-radius: 12px; background: #5865f2; color: #fff; font-weight: 700; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; }
.fs-help a:hover, .fs-help a:focus-visible { background: #6d78ff; transform: translateY(-1px); }
.fs-help a svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) { .fs-help a, .fs-copy button { transition: none; } .fs-help a:hover { transform: none; } }