/* Plugins > Walkers (owner 2026-10-11). Plugin-page shell (rank-pages.css + plugin-pages.css) plus this file.
   Accent: the walkers' glowing yellow-orange eyes. Never show walker stat numbers here (owner rule). */
.wk { --wk-eye: #ffb547; --wk-eye-hi: #ffd88a; --wk-eye-dim: rgba(255, 181, 71, 0.12); --wk-eye-line: rgba(255, 181, 71, 0.4); --wk-ok: #7dffb0; --wk-bad: #ff8a7a; }

/* ---------- hero: full-bleed key art, title over the dark left side ---------- */
/* --wk-overlap: how far the first content panels rise into the bottom of the image (owner 2026-10-11) */
.wk { --wk-page: #05070d; --wk-overlap: clamp(120px, 12vw, 200px); }
.wk-hero { position: relative; overflow: hidden; background: radial-gradient(60rem 30rem at 75% 40%, rgba(255, 140, 40, 0.16), transparent 70%), var(--wk-page); }
.wk-hero-art { position: absolute; inset: 0; }
.wk-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; display: block; }
/* left: dark for the title; bottom: a tall dissolve into the page background */
.wk-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 7, 13, 0.95) 0%, rgba(5, 7, 13, 0.88) 28%, rgba(5, 7, 13, 0.3) 55%, rgba(5, 7, 13, 0) 75%), linear-gradient(0deg, var(--wk-page) 0%, rgba(5, 7, 13, 0.92) 14%, rgba(5, 7, 13, 0.55) 30%, rgba(5, 7, 13, 0.18) 46%, rgba(5, 7, 13, 0) 60%); }
.wk-hero .container { position: relative; z-index: 2; }
.wk-hero-inner { min-height: clamp(460px, 44vw, 660px); display: flex; align-items: center; padding: 2rem 0 calc(var(--wk-overlap) + 1.25rem); }
/* the content pulled up over the faded bottom of the image; panels keep their solid backgrounds */
.wk-body { position: relative; z-index: 3; margin-top: calc(-1 * var(--wk-overlap)); }
.wk-body > .rk-section:first-child .rk-section-head h2 { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
.wk-hero-text { max-width: 34rem; }
.wk-hero .rk-title { font-size: clamp(2.8rem, 7vw, 5rem); letter-spacing: 0.02em; text-shadow: 0 0 40px rgba(255, 150, 40, 0.25); }
.wk-hero .rk-tagline { font-size: clamp(1.05rem, 2.2vw, 1.3rem); }
.wk-hero .rk-tagline em { font-style: normal; color: var(--wk-eye-hi); }
/* two glowing eyes beside the kicker, the walker's signature */
.wk-eyes { display: inline-flex; gap: 6px; margin-right: 0.55rem; vertical-align: middle; }
.wk-eyes i { width: 11px; height: 7px; border-radius: 50%; background: var(--wk-eye-hi); box-shadow: 0 0 6px 2px rgba(255, 181, 71, 0.9), 0 0 18px 6px rgba(255, 140, 40, 0.45); animation: wk-blink 6s infinite; }
@keyframes wk-blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(0.1); } }
.wk-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }
.wk-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(--wk-eye-line); font-size: 0.9rem; font-weight: 600; backdrop-filter: blur(4px); }
.wk-chips svg { width: 16px; height: 16px; color: var(--wk-eye); }
@media (max-width: 760px) {
  /* phones: the art becomes a band above the title, cropped toward the walker */
  .wk-hero-art { position: relative; height: 260px; }
  .wk-hero-art img { object-position: 78% 30%; }
  .wk { --wk-overlap: 1rem; }
  .wk-hero-art::after { background: linear-gradient(0deg, var(--wk-page) 0%, rgba(5, 7, 13, 0.6) 25%, rgba(5, 7, 13, 0) 60%); }
  .wk-hero-inner { min-height: 0; padding: 0 0 calc(var(--wk-overlap) + 1rem); margin-top: -0.8rem; }
}

/* ---------- section heads reuse rk-section-head; small lead under them ---------- */
/* the key fact under a section heading, as a statement card (owner 2026-10-11) */
.wk-lead { margin: -0.2rem 0 1.1rem; padding: 0.95rem 1.2rem; border-radius: 14px; background: linear-gradient(90deg, rgba(255, 181, 71, 0.13), rgba(255, 181, 71, 0.03) 70%); border: 1px solid rgba(255, 181, 71, 0.28); border-left: 4px solid var(--wk-eye); font-size: clamp(1.06rem, 2.2vw, 1.22rem); font-weight: 600; line-height: 1.45; color: #f1f3f8; }
.wk-lead a { color: var(--wk-eye-hi); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 216, 138, 0.5); text-underline-offset: 3px; }
.wk-lead a:hover, .wk-lead a:focus-visible { text-decoration-color: var(--wk-eye-hi); }

/* ---------- what is a walker: three tiles ---------- */
.wk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.wk-tile { position: relative; padding: 1.3rem 1.2rem 1.25rem; border-radius: 16px; background: linear-gradient(180deg, #1b1e28, #12141b); border: 1px solid #2c3040; overflow: hidden; }
.wk-tile::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 150, 40, 0.14), transparent 70%); }
.wk-tile svg { width: 34px; height: 34px; color: var(--wk-eye); }
.wk-tile h3 { margin: 0.6rem 0 0.35rem; font-family: "Cinzel", serif; font-size: 1.25rem; }
.wk-tile p { margin: 0; color: var(--muted, #b7becf); line-height: 1.5; }

/* behavior row and the server's chat announcement */
.wk-behave { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0.6rem; }
.wk-behave li { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: #151821; border: 1px solid #2c3040; font-weight: 600; font-size: 0.95rem; }
.wk-behave svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--wk-eye); }
.wk-shout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; margin: 1rem 0 0; padding: 0.75rem 1rem; border-radius: 10px; background: rgba(0, 0, 0, 0.45); border-left: 3px solid var(--wk-eye); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92rem; color: #e8e3d4; overflow-wrap: anywhere; }
.wk-shout span { font-family: "Inter", system-ui, sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wk-eye-hi); }
.wk-shout b { color: var(--wk-eye-hi); }
.wk-tags.is-risk span { background: rgba(255, 138, 122, 0.08); border-color: rgba(255, 138, 122, 0.35); color: #ffd2cb; }
.wk-nocopy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 12px; background: #151821; border: 1px dashed #3a4054; }
.wk-nocopy b { margin-right: 0.3rem; }
.wk-nocopy span { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: #b7becf; background: rgba(255, 255, 255, 0.04); border: 1px solid #3a4054; text-decoration: line-through; text-decoration-color: rgba(255, 138, 122, 0.7); }

/* ---------- when one rises: the playtime curve ---------- */
.wk-curve { padding: 1.2rem 1.2rem 0.9rem; border-radius: 16px; background: #10131a; border: 1px solid #2c3040; }
.wk-curve svg { display: block; width: 100%; height: auto; }
.wk-curve .ax { fill: none; stroke: #3a4054; stroke-width: 1.5; }
.wk-curve .grid { fill: none; stroke: #232837; stroke-width: 1; stroke-dasharray: 3 5; }
.wk-curve .t { fill: #aab4ca; font: 600 13px "Inter", system-ui, sans-serif; }
.wk-curve .t.c { text-anchor: middle; }
.wk-curve .t.e { text-anchor: end; }
.wk-curve .safe { fill: rgba(125, 255, 176, 0.22); }
.wk-curve .safe-t { fill: #7dffb0; font: 700 12px "Inter", system-ui, sans-serif; letter-spacing: 0.06em; }
.wk-curve .line { fill: none; stroke: url(#wkRamp); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 150, 40, 0.5)); }
.wk-curve .area { fill: url(#wkArea); }
.wk-curve .dot { fill: #ffd88a; stroke: #07080c; stroke-width: 3; }
.wk-curve .dot-t { fill: #ffd88a; font: 800 14px "Inter", system-ui, sans-serif; }
/* phones: a narrower chart with bigger text, so every label stays readable (>= 12 px at 320) */
.wk-curve .is-tall { display: none; overflow: visible; }
.wk-curve .is-tall .t { font-size: 16px; }
.wk-curve .is-tall .dot-t { font-size: 17px; }
.wk-curve .is-tall .safe-t { font-size: 15px; }
.wk-curve .is-tall .safe-t.is-sub { fill: #ffd88a; font-weight: 800; letter-spacing: 0; }
/* the tall chart up to 860 px: below that the wide chart's labels would drop under 12 px (capped and centered on tablets) */
@media (max-width: 860px) { .wk-curve .is-wide { display: none; } .wk-curve .is-tall { display: block; max-width: 520px; margin: 0 auto; } }
@media (max-width: 640px) { .wk-curve { margin: 0; padding: 0.9rem 0.7rem 0.8rem; } }
/* chart redraw (owner 2026-10-11): the immune first 4 hours sit flat at 0% in green, then the chance line rises */
.wk-curve .immune { fill: none; stroke: var(--wk-ok); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(125, 255, 176, 0.55)); }
.wk-curve .imm-t { fill: var(--wk-ok); font: 800 11.5px "Inter", system-ui, sans-serif; letter-spacing: 0.08em; text-anchor: middle; }
.wk-curve .brk { fill: none; stroke: #8a93a8; stroke-width: 1.6; stroke-linecap: round; }
.wk-curve .is-tall .imm-t { font-size: 14px; }
.wk-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.7rem 0 0.2rem; font-size: 0.88rem; font-weight: 600; color: #d6dbe7; }
.wk-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.wk-legend span::before { content: ""; width: 22px; height: 4px; border-radius: 2px; }
.wk-legend .is-immune::before { background: var(--wk-ok); box-shadow: 0 0 6px rgba(125, 255, 176, 0.6); }
.wk-legend .is-chance::before { background: linear-gradient(90deg, #ffd88a, #ff5a2e); }
.wk-curve figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--muted, #b7becf); }
.wk-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; margin-top: 1rem; }
.wk-rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 1.1rem 1.1rem; border-radius: 14px; background: #151821; border: 1px solid #2c3040; }
.wk-rule > svg { width: 40px; height: 40px; padding: 8px; border-radius: 12px; color: var(--wk-eye); background: var(--wk-eye-dim); }
.wk-rule.is-safe > svg { color: var(--wk-ok); background: rgba(125, 255, 176, 0.1); }
.wk-rule h3 { margin: 0 0 0.3rem; font-size: 1.08rem; }
.wk-rule p { margin: 0; color: var(--muted, #b7becf); line-height: 1.5; }
.wk-big { font: 800 1.6rem/1 "Inter", system-ui, sans-serif; color: var(--wk-eye-hi); margin-right: 0.3rem; }
.wk-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.wk-tags span { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; background: rgba(125, 255, 176, 0.08); border: 1px solid rgba(125, 255, 176, 0.3); color: #c9ffe0; }

/* ---------- how strong: the level ladder, no numbers but the cap ---------- */
.wk-ladder { position: relative; padding: 1.4rem 1.2rem 1.2rem; border-radius: 16px; background: #10131a; border: 1px solid #2c3040; }
.wk-bar { position: relative; height: 18px; border-radius: 999px; background: linear-gradient(90deg, #3d4a35 0%, #8a8a2e 35%, #d9822b 70%, #ff4d2e 100%); box-shadow: 0 0 24px rgba(255, 110, 40, 0.25); }
.wk-bar::after { content: ""; position: absolute; right: -4px; top: -7px; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, #ffd88a 0 30%, rgba(255, 110, 40, 0.6) 45%, transparent 70%); animation: wk-pulse 2.4s ease-in-out infinite; }
@keyframes wk-pulse { 50% { transform: scale(1.25); opacity: 0.75; } }
.wk-ends { display: flex; justify-content: space-between; margin-top: 0.55rem; font-weight: 700; font-size: 0.9rem; }
.wk-ends span:last-child { color: #ff9a6a; }
.wk-steps { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.wk-steps li { position: relative; padding: 0.9rem 0.9rem 0.95rem; border-radius: 12px; background: #151821; border: 1px solid #2c3040; border-top: 3px solid var(--c); }
.wk-steps b { display: block; font-family: "Cinzel", serif; font-size: 1.05rem; color: var(--c); }
.wk-steps span { display: block; margin-top: 0.3rem; font-size: 0.9rem; color: var(--muted, #b7becf); line-height: 1.45; }
.wk-skulls { display: flex; gap: 3px; margin-top: 0.55rem; }
.wk-skulls i { width: 14px; height: 14px; border-radius: 4px; background: #2c3040; }
.wk-skulls i.on { background: var(--c); box-shadow: 0 0 8px var(--c); }
@media (max-width: 760px) { .wk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .wk-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- what it mimics: callouts around a silhouette ---------- */
.wk-mimic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px) minmax(0, 1fr); gap: 1rem; align-items: center; }
.wk-mimic-col { display: grid; gap: 0.8rem; }
.wk-call { padding: 0.9rem 1rem; border-radius: 12px; background: #151821; border: 1px solid #2c3040; }
.wk-call > b { display: flex; align-items: center; gap: 0.5rem; font-size: 1.02rem; }
.wk-call > b svg { width: 20px; height: 20px; color: var(--wk-eye); flex: 0 0 auto; }
.wk-call span { display: block; margin-top: 0.25rem; color: var(--muted, #b7becf); font-size: 0.92rem; line-height: 1.45; }
.wk-fig { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(255, 150, 40, 0.18), transparent 60%), #0c0e14; border: 1px solid var(--wk-eye-line); }
.wk-fig img, .wk-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .wk-mimic { grid-template-columns: minmax(0, 1fr); } .wk-fig { max-width: 260px; margin: 0 auto; width: 100%; } }

/* ---------- loot ---------- */
/* five loot cards: one row above 960 px, 3 + 2 below, one column on phones, never a lone card (owner 2026-10-11) */
.wk-loot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
@media (max-width: 960px) { .wk-loot { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wk-loot span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 540px) { .wk-loot { grid-template-columns: minmax(0, 1fr); } }
.wk-loot a, .wk-loot div { display: flex; align-items: center; gap: 0.75rem; padding: 0.95rem 1rem; border-radius: 14px; background: #151821; border: 1px solid #2c3040; color: inherit; text-decoration: none; }
.wk-loot a:hover, .wk-loot a:focus-visible { border-color: var(--wk-eye-line); }
.wk-loot svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--c, var(--wk-eye)); }
.wk-loot b { display: block; }
.wk-loot small { display: block; color: var(--muted, #b7becf); font-size: 0.85rem; }

/* ---------- tips ---------- */
.wk-tips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0.8rem; counter-reset: wkt; }
.wk-tips li { counter-increment: wkt; position: relative; padding: 1rem 1rem 1rem 3.4rem; border-radius: 14px; background: #151821; border: 1px solid #2c3040; line-height: 1.45; }
.wk-tips li::before { content: counter(wkt); position: absolute; left: 0.9rem; top: 0.95rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--wk-eye); color: #1a1003; font: 800 0.95rem/1 "Inter", system-ui, sans-serif; }
.wk-tips b { display: block; }
.wk-tips span { color: var(--muted, #b7becf); font-size: 0.93rem; }

/* ---------- FAQ accordion ---------- */
.wk-faq { display: grid; gap: 0.6rem; }
.wk-faq details { border-radius: 12px; background: #151821; border: 1px solid #2c3040; }
.wk-faq details[open] { border-color: var(--wk-eye-line); }
.wk-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 1.1rem; cursor: pointer; font-weight: 700; list-style: none; }
.wk-faq summary::-webkit-details-marker { display: none; }
.wk-faq summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--wk-eye-dim); color: var(--wk-eye-hi); font-weight: 800; transition: transform 0.2s ease; }
.wk-faq details[open] summary::after { transform: rotate(45deg); }
.wk-faq summary:focus-visible { outline: 2px solid var(--wk-eye); outline-offset: 2px; border-radius: 12px; }
.wk-faq details p { margin: 0; padding: 0 1.1rem 1rem; color: var(--muted, #b7becf); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .wk-eyes i, .wk-bar::after { animation: none; }
  .wk-faq summary::after { transition: none; }
}
.wk-more { display: inline-block; margin-top: 0.5rem; font-weight: 700; font-size: 0.92rem; color: var(--wk-eye-hi); text-decoration: none; }
.wk-more:hover, .wk-more:focus-visible { text-decoration: underline; }

/* grace card: the Wraith exception (owner 2026-10-11) */
.wk-except { margin: 0.6rem 0 0; padding: 0.5rem 0.7rem; border-radius: 10px; background: rgba(255, 90, 58, 0.08); border: 1px solid rgba(255, 90, 58, 0.3); font-size: 0.9rem; line-height: 1.45; color: #ffd2cb; }
.wk-except b { color: #ffb4a6; }
.wk-except a { color: var(--wk-eye-hi); font-weight: 700; text-decoration: none; white-space: nowrap; }
.wk-except a:hover, .wk-except a:focus-visible { text-decoration: underline; }