/* ================================================================
   BLACKFALL AMBIENT MOTION
   Intentionally restrained. This layer does not replace the site's
   existing palette or layout; it only adds subtle movement and signal
   details so the interface feels alive.
================================================================ */

/* Calm scroll movement: fade and a small lift, with no heavy blur/scale. */
.scroll-fx .reveal,
.scroll-fx .scroll-reveal{
  filter:none !important;
  transform:translate3d(0,12px,0) !important;
  transition:
    opacity .68s ease,
    transform .78s cubic-bezier(.16,1,.3,1) !important;
  transition-delay:var(--reveal-delay,0ms) !important;
}

.scroll-fx .reveal.visible,
.scroll-fx .scroll-reveal.visible{
  filter:none !important;
  transform:translate3d(0,0,0) !important;
}

/* Very slow environmental drift. No colour or brightness changes. */
.hero-bg{
  animation:bfHeroDrift 24s ease-in-out infinite alternate;
  will-change:transform;
}

.page-hero-bg{
  animation:bfPageBackdropDrift 28s ease-in-out infinite alternate;
  will-change:transform;
}

.announcement-hero-bg,
.announcements-stage-bg,
.lore-stage-bg,
.guides-stage-bg,
.rules-stage-bg,
.leaderboard-stage-bg,
.faq-stage-bg{
  animation:bfPanelBackdropDrift 28s ease-in-out infinite alternate;
  will-change:transform;
}

@keyframes bfHeroDrift{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.045) translate3d(-.35%,.2%,0)}
}

@keyframes bfPageBackdropDrift{
  from{transform:scale(1.01) translate3d(0,0,0)}
  to{transform:scale(1.03) translate3d(-.25%,.15%,0)}
}

@keyframes bfPanelBackdropDrift{
  from{transform:scale(1.015) translate3d(0,0,0)}
  to{transform:scale(1.035) translate3d(-.25%,.15%,0)}
}

/* Small breathing glow on major titles. Uses the existing text colour. */
.hero h1,
.page-hero-copy h1,
.announcement-hero h1,
.lore-shell-head h1,
.guides-shell-head h1,
.rules-shell-head h1,
.leaderboard-shell-head h1,
.faq-shell-head h1{
  animation:bfTitleBreath 7.5s ease-in-out infinite;
}

@keyframes bfTitleBreath{
  0%,100%{text-shadow:0 0 0 rgba(232,232,226,0)}
  50%{text-shadow:0 0 18px rgba(232,232,226,.055)}
}

/* Buttons and links respond without changing the site's palette. */
.discord-cta,
.text-link,
.section-end-link a,
.announcement-primary,
.announcements-toolbar-actions a,
.announcements-toolbar-actions button,
.leaderboard-shell-controls button{
  transition:
    transform .22s ease,
    letter-spacing .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    opacity .22s ease !important;
}

.discord-cta:hover,
.text-link:hover,
.section-end-link a:hover,
.announcement-primary:hover,
.announcements-toolbar-actions a:hover,
.announcements-toolbar-actions button:hover,
.leaderboard-shell-controls button:hover{
  transform:translateY(-1px);
  letter-spacing:.14em;
}

/* Information gets a tiny amount of depth on interaction. */
.photo,
.guide-card,
.lore-entry,
.discord-message,
.simple-leaderboard-row{
  transition:
    transform .26s ease,
    background-color .26s ease,
    border-color .26s ease,
    box-shadow .26s ease !important;
}

.photo:hover,
.guide-card:hover,
.lore-entry:hover,
.discord-message:hover,
.simple-leaderboard-row:hover{
  transform:translateY(-2px);
}

/* Important information gets the existing BlackFall warning colour only. */
.bf-critical{
  color:var(--alert-bright,#d8a09a) !important;
  font-weight:600;
}

/* A faint scan passes through contained system panels every so often. */
.ambient-scanline{
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  top:-8%;
  height:1px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(220,220,214,.10),transparent);
  animation:bfPanelScan 12s linear infinite;
}

@keyframes bfPanelScan{
  0%,24%{top:-8%;opacity:0}
  28%{opacity:.32}
  44%{opacity:.16}
  52%,100%{top:108%;opacity:0}
}

/* Small looping encrypted transmission. Fixed so it never changes layout. */
.ambient-terminal{
  position:fixed;
  z-index:45;
  right:24px;
  bottom:18px;
  max-width:min(420px,calc(100vw - 48px));
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:none;
  user-select:none;
  color:#666c66;
  font:500 8px/1.4 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.72;
  animation:bfTerminalFloat 8s ease-in-out infinite;
}

.ambient-terminal::before{
  content:"";
  width:5px;
  height:5px;
  flex:0 0 auto;
  border-radius:50%;
  background:#747a74;
  box-shadow:0 0 7px rgba(200,204,197,.14);
  animation:bfTerminalPulse 2.8s ease-in-out infinite;
}

.ambient-terminal::after{
  content:"";
  position:absolute;
  left:14px;
  right:0;
  bottom:-5px;
  height:1px;
  opacity:.25;
  background:linear-gradient(90deg,rgba(199,194,181,.34),transparent 75%);
  transform-origin:left;
  animation:bfSignalLine 4.8s ease-in-out infinite;
}

.ambient-terminal-prefix{
  color:#7d827c;
  white-space:nowrap;
}

.ambient-terminal-code{
  display:inline-block;
  min-width:195px;
  color:#747a74;
  white-space:nowrap;
}

.ambient-terminal-code.is-scrambling{
  color:#9a9f98;
}

@keyframes bfTerminalFloat{
  0%,100%{transform:translate3d(0,0,0);opacity:.62}
  50%{transform:translate3d(-3px,-1px,0);opacity:.78}
}

@keyframes bfTerminalPulse{
  0%,100%{opacity:.42;transform:scale(.88)}
  50%{opacity:.9;transform:scale(1.08)}
}

@keyframes bfSignalLine{
  0%,100%{transform:scaleX(.18);opacity:.12}
  50%{transform:scaleX(1);opacity:.32}
}

/* The active nav link gets a quiet signal pulse, not a new colour. */
.nav a.active{
  position:relative;
}

.nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:1px;
  background:currentColor;
  opacity:.24;
  transform-origin:left;
  animation:bfNavSignal 5s ease-in-out infinite;
}

@keyframes bfNavSignal{
  0%,100%{transform:scaleX(.28);opacity:.16}
  50%{transform:scaleX(1);opacity:.34}
}

@media(max-width:760px){
  .ambient-terminal{display:none}
  .photo:hover,
  .guide-card:hover,
  .lore-entry:hover,
  .discord-message:hover,
  .simple-leaderboard-row:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .hero-bg,
  .page-hero-bg,
  .announcement-hero-bg,
  .announcements-stage-bg,
  .lore-stage-bg,
  .guides-stage-bg,
  .rules-stage-bg,
  .leaderboard-stage-bg,
  .faq-stage-bg,
  .hero h1,
  .page-hero-copy h1,
  .announcement-hero h1,
  .lore-shell-head h1,
  .guides-shell-head h1,
  .rules-shell-head h1,
  .leaderboard-shell-head h1,
  .faq-shell-head h1,
  .ambient-scanline,
  .ambient-terminal,
  .ambient-terminal::before,
  .ambient-terminal::after,
  .nav a.active::after{
    animation:none !important;
  }

  .scroll-fx .reveal,
  .scroll-fx .scroll-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ================================================================
   BLACKFALL QUALITY OF LIFE MOTION
   Small interface responses that make the site feel alive without
   changing the underlying design or adding distracting movement.
================================================================ */

:root{
  --bf-washed-red:#d8a09a;
  --bf-washed-red-rgb:216,160,154;
}

/* One consistent washed red across the site. */
:root{
  --alert:var(--bf-washed-red);
  --alert-bright:var(--bf-washed-red);
  --bf-red:var(--bf-washed-red);
  --bf-red-bright:var(--bf-washed-red);
  --bf-red-soft:rgba(var(--bf-washed-red-rgb),.10);
  --bf-red-line:rgba(var(--bf-washed-red-rgb),.42);
  --polish-red:var(--bf-washed-red);
  --polish-red-soft:var(--bf-washed-red);
  --polish-red-faint:rgba(var(--bf-washed-red-rgb),.10);
}

.bf-critical,
.lore-panel-page .lore-entry-number,
.guides-panel-page .guide-tag,
.rules-panel-page .rules-list summary span,
.leaderboard-page .simple-value,
.announcements-panel-page .discord-message-content strong,
.lore-panel-page .lore-accent,
.lore-panel-page .lore-accent-short,
.guides-panel-page .guide-copy li strong,
.leaderboard-page .simple-leaderboard-row.top-1 .simple-rank,
.leaderboard-page .simple-leaderboard-row.top-2 .simple-rank,
.leaderboard-page .simple-leaderboard-row.top-3 .simple-rank{
  color:var(--bf-washed-red) !important;
}

/* Tiny page reading signal. Useful, but almost invisible until scrolling. */
.bf-scroll-progress{
  position:fixed;
  z-index:120;
  top:0;
  left:0;
  width:100%;
  height:1px;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,
    rgba(var(--bf-washed-red-rgb),.22),
    rgba(var(--bf-washed-red-rgb),.72),
    rgba(var(--bf-washed-red-rgb),.36));
  box-shadow:0 0 8px rgba(var(--bf-washed-red-rgb),.12);
  opacity:.8;
}

/* Navigation feels responsive without becoming a big animated menu. */
.nav a{
  position:relative;
  transition:color .22s ease,opacity .22s ease,transform .22s ease;
}
.nav a::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:1px;
  background:currentColor;
  opacity:.18;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .28s ease;
}
.nav a:hover::before{
  transform:scaleX(1);
  opacity:.36;
}
.nav a:hover{
  transform:translateY(-1px);
}

/* Contained pages have a very soft periodic interface pulse. */
.announcements-shell,
.lore-shell,
.guides-shell,
.rules-shell,
.leaderboard-shell,
.faq-shell{
  animation:bfShellBreath 12s ease-in-out infinite;
}
@keyframes bfShellBreath{
  0%,100%{box-shadow:0 20px 70px rgba(0,0,0,.18)}
  50%{box-shadow:0 22px 74px rgba(0,0,0,.24),0 0 0 1px rgba(232,232,226,.008)}
}

/* Small interaction line on content blocks. */
.guide-card,
.lore-entry,
.discord-message,
.simple-leaderboard-row,
.rules-list details,
.photo{
  position:relative;
}
.guide-card::after,
.lore-entry::after,
.discord-message::after,
.simple-leaderboard-row::after,
.rules-list details::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--bf-washed-red-rgb),.62),transparent);
  transition:width .38s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  opacity:.55;
}
.guide-card:hover::after,
.lore-entry:hover::after,
.discord-message:hover::after,
.simple-leaderboard-row:hover::after,
.rules-list details:hover::after,
.rules-list details[open]::after{
  width:min(180px,42%);
}

/* Accordions open with a short settle rather than snapping into place. */
.rules-list details[open] .rule-copy{
  animation:bfDetailsIn .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes bfDetailsIn{
  from{opacity:0;transform:translate3d(0,-5px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.rules-list summary{
  transition:padding-left .24s ease,color .24s ease,background-color .24s ease;
}
.rules-list details[open] summary{
  padding-left:4px;
}

/* Media occasionally catches a faint horizontal interference pass. */
.guide-media,
.photo,
.video-frame{
  overflow:hidden;
}
.guide-media::after,
.photo::after,
.video-frame::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  left:-38%;
  width:24%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(235,235,228,.045),transparent);
  transform:skewX(-12deg);
  animation:bfMediaSignal 14s ease-in-out infinite;
}
@keyframes bfMediaSignal{
  0%,68%{left:-38%;opacity:0}
  72%{opacity:.22}
  86%{opacity:.10}
  92%,100%{left:118%;opacity:0}
}

/* Links get a tiny directional cue when hovered. */
.text-link,
.section-end-link a,
.server-links a,
.lore-shell-toolbar a,
.guides-shell-toolbar a,
.rules-shell-toolbar a,
.faq-shell-toolbar a{
  transition:transform .22s ease,letter-spacing .22s ease,color .22s ease,border-color .22s ease;
}
.text-link:hover,
.section-end-link a:hover,
.server-links a:hover,
.lore-shell-toolbar a:hover,
.guides-shell-toolbar a:hover,
.rules-shell-toolbar a:hover,
.faq-shell-toolbar a:hover{
  transform:translateX(2px);
}

/* Tags and small system labels gently wake up with their parent. */
.guide-card .guide-tag,
.lore-entry .lore-entry-number,
.rules-list summary span,
.discord-message .discord-message-author{
  transition:opacity .25s ease,text-shadow .25s ease,letter-spacing .25s ease;
}
.guide-card:hover .guide-tag,
.lore-entry:hover .lore-entry-number,
.rules-list details:hover summary span,
.discord-message:hover .discord-message-author{
  opacity:1;
  letter-spacing:.145em;
  text-shadow:0 0 9px rgba(var(--bf-washed-red-rgb),.16);
}

/* The terminal gets a quiet cursor blink to sell the recovered-system feel. */
.ambient-terminal-code::after{
  content:"";
  display:inline-block;
  width:5px;
  height:9px;
  margin-left:6px;
  vertical-align:-1px;
  background:rgba(210,214,207,.46);
  animation:bfTerminalCursor 1.15s steps(1,end) infinite;
}
@keyframes bfTerminalCursor{
  0%,48%{opacity:.72}
  49%,100%{opacity:.08}
}

/* Keyboard users get a visible focus state without changing the design. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:1px solid rgba(var(--bf-washed-red-rgb),.66);
  outline-offset:4px;
}

@media(max-width:760px){
  .announcements-shell,
  .lore-shell,
  .guides-shell,
  .rules-shell,
  .leaderboard-shell,
  .faq-shell{animation:none}
}

@media(prefers-reduced-motion:reduce){
  .bf-scroll-progress,
  .announcements-shell,
  .lore-shell,
  .guides-shell,
  .rules-shell,
  .leaderboard-shell,
  .faq-shell,
  .guide-media::after,
  .photo::after,
  .video-frame::after,
  .ambient-terminal-code::after{
    animation:none !important;
  }
}
.guide-media{position:relative}

/* ================================================================
   EXTRA ENCRYPTED SIGNALS
   Small looping system readouts. These use the existing palette and
   stay deliberately quiet so they feel like recovered interface data.
================================================================ */

:root{
  --bf-deep-red:#b62f28;
  --bf-deep-red-bright:#d84a3f;
}

/* The continuously decrypting word directly beneath BLACKFALL is the
   one deliberate deep-red signal on the home hero. */
.hero .cipher-cycle{
  color:var(--bf-deep-red) !important;
  text-shadow:0 0 12px rgba(182,47,40,.16);
  transition:color .22s ease,text-shadow .22s ease;
}
.hero .cipher-cycle.is-scrambling{
  color:var(--bf-deep-red-bright) !important;
  text-shadow:0 0 15px rgba(216,74,63,.20);
}

.bf-cipher-feed{
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin-top:13px;
  color:#6e746e;
  font:500 8px/1.45 var(--mono);
  letter-spacing:.15em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:.56;
  user-select:none;
}
.bf-cipher-feed::before{
  content:"";
  width:4px;
  height:4px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--bf-washed-red,#d8a09a);
  box-shadow:0 0 7px rgba(var(--bf-washed-red-rgb,216,160,154),.18);
  animation:bfCipherFeedPulse 3.4s ease-in-out infinite;
}
.bf-cipher-feed-text{
  display:inline-block;
  min-width:205px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bf-cipher-feed-text.is-scrambling{
  color:#8b918a;
}
@keyframes bfCipherFeedPulse{
  0%,100%{opacity:.28;transform:scale(.86)}
  50%{opacity:.82;transform:scale(1.05)}
}

/* A second, tiny encrypted readout in the footer gives long pages a
   little life without adding another large visual element. */
.bf-footer-cipher{
  color:#565c56;
  font:500 8px/1.4 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.68;
  white-space:nowrap;
}
.bf-footer-cipher.is-scrambling{color:#777d77}

@media(max-width:760px){
  .bf-cipher-feed{white-space:normal;width:auto;line-height:1.6}
  .bf-cipher-feed-text{min-width:0}
  .bf-footer-cipher{display:none}
}

@media(prefers-reduced-motion:reduce){
  .bf-cipher-feed::before{animation:none !important}
}

/* Periodic decrypt motion for normal page copy. The washed BlackFall red is
   used only while letters are resolving, so static copy keeps its normal tone. */
.bf-live-cipher{
  transition:color .24s ease,text-shadow .24s ease,opacity .24s ease;
}
.bf-live-cipher.is-live-scrambling{
  color:#d8a09a !important;
  text-shadow:0 0 10px rgba(216,160,154,.16);
  opacity:.96;
}
@media (prefers-reduced-motion:reduce){
  .bf-live-cipher{transition:none!important}
}

/* ================================================================
   BLACKFALL CLICK TO FOCUS
   Direct card interaction. Uses the site's existing washed red accent.
================================================================ */
body.bf-focus-open{overflow:hidden}

.bf-focusable{
  position:relative;
  cursor:pointer;
  outline:none;
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    border-color .28s ease,
    background-color .28s ease,
    box-shadow .28s ease;
}

.bf-focusable::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(115deg,transparent 18%,rgba(216,160,154,.032) 49%,transparent 76%);
  transition:opacity .28s ease;
}

.bf-focusable:hover,
.bf-focusable:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(216,160,154,.26) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.15),inset 0 0 0 1px rgba(216,160,154,.035);
}

.bf-focusable:hover::after,
.bf-focusable:focus-visible::after{opacity:1}

.line-list .bf-focusable:hover,
.scavenge-list .bf-focusable:hover,
.word-columns .bf-focusable:hover{
  background:linear-gradient(90deg,rgba(216,160,154,.035),transparent 62%);
}

/* Full-screen reader. The backdrop itself is the close target. */
.bf-focus-layer{
  position:fixed;
  z-index:1200;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,52px);
  background:rgba(3,4,4,.62);
  -webkit-backdrop-filter:blur(15px) brightness(.42) saturate(.7);
  backdrop-filter:blur(15px) brightness(.42) saturate(.7);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .32s ease,visibility .32s ease;
}

.bf-focus-layer.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.bf-focus-panel{
  position:relative;
  width:min(920px,100%);
  max-height:min(84svh,900px);
  overflow:auto;
  padding:clamp(30px,5vw,56px);
  border:1px solid rgba(216,160,154,.22);
  background:
    linear-gradient(180deg,rgba(13,14,14,.99),rgba(7,8,8,.995) 32%),
    #080909;
  box-shadow:0 42px 110px rgba(0,0,0,.74),0 0 40px rgba(216,160,154,.045),inset 0 1px 0 rgba(255,255,255,.025);
  transform:translateY(16px) scale(.987);
  transition:transform .38s cubic-bezier(.16,1,.3,1);
  scrollbar-width:thin;
  scrollbar-color:#343934 transparent;
}

.bf-focus-layer.open .bf-focus-panel{transform:none}

.bf-focus-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,160,154,.78),transparent);
  background-size:220% 100%;
  animation:bfFocusSignal 4.5s ease-in-out infinite;
}

@keyframes bfFocusSignal{
  0%,100%{background-position:0 0;opacity:.22}
  50%{background-position:100% 0;opacity:.72}
}

.bf-focus-kicker{
  display:block;
  margin:0 60px 13px 0;
  color:#8d817f;
  font:600 8px var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.bf-focus-kicker.is-scrambling{
  color:var(--bf-washed-red,#d8a09a);
  text-shadow:0 0 9px rgba(216,160,154,.14);
}

.bf-focus-title{
  margin:0 58px 24px 0;
  color:#efeee9;
  font:700 clamp(40px,6vw,72px)/.94 var(--display);
  text-transform:uppercase;
}

.bf-focus-body{
  color:#979d97;
  font-size:14px;
  line-height:1.86;
}

.bf-focus-body p{color:#979d97;line-height:1.86}
.bf-focus-body h1,
.bf-focus-body h2,
.bf-focus-body h3,
.bf-focus-body strong{color:#e8e8e2}

.bf-focus-body img{
  width:100%;
  max-height:52svh;
  object-fit:contain;
  margin:0 0 24px;
  border:1px solid rgba(199,194,181,.14);
  background:#040505;
}

.bf-focus-body .rule-copy{
  padding:0;
  max-width:none;
  columns:1;
}

.bf-focus-body .faq-answer{
  padding:0;
  max-width:none;
}

.bf-focus-body .guide-media,
.bf-focus-body .guide-media-stack{margin-bottom:26px}

.bf-focus-body .lore-entry-number,
.bf-focus-body .guide-tag,
.bf-focus-body .discord-message-index,
.bf-focus-body .discord-message-jump,
.bf-focus-body summary{display:none !important}

.bf-focus-close{
  position:absolute;
  top:20px;
  right:20px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(216,160,154,.20);
  border-radius:50%;
  background:rgba(8,9,9,.80);
  color:#a8ada7;
  font:500 16px var(--mono);
  cursor:pointer;
  transition:transform .25s ease,color .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;
}

.bf-focus-close:hover,
.bf-focus-close:focus-visible{
  transform:rotate(90deg);
  color:#fff;
  border-color:rgba(216,160,154,.55);
  background:rgba(216,160,154,.06);
  box-shadow:0 0 18px rgba(216,160,154,.08);
  outline:none;
}

.bf-focus-code{
  display:block;
  margin-top:30px;
  padding-top:14px;
  border-top:1px solid rgba(216,160,154,.10);
  color:#5d635d;
  font:500 7px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}

@media(max-width:760px){
  .bf-focus-layer{padding:11px}
  .bf-focus-panel{max-height:91svh;padding:34px 21px 27px}
  .bf-focus-title{margin-right:46px;font-size:40px}
  .bf-focus-close{top:14px;right:14px}
}

@media(prefers-reduced-motion:reduce){
  .bf-focus-panel::before{animation:none !important}
  .bf-focus-layer,
  .bf-focus-panel,
  .bf-focusable,
  .bf-focusable::after{transition:none !important}
  .bf-focusable:hover,
  .bf-focusable:focus-visible{transform:none}
}


/* ================================================================
   BLACKFALL DISCORD ACTIONS
   Shared Discord CTAs with the LIVE badge feeling.
================================================================ */
.bf-discord-button{
  --discord-ink: #f0ece6;
  --discord-alert: rgba(88,101,242,.96);
  --discord-alert-soft: rgba(88,101,242,.42);
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px 0 16px;
  border-radius: 999px !important;
  border: 1px solid rgba(88,101,242,.26) !important;
  background: rgba(88,101,242,.08) !important;
  color: var(--discord-ink) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.015),
    0 0 16px rgba(88,101,242,.08);
  text-shadow: 0 0 7px rgba(255,255,255,.05);
  font: 600 10px var(--mono) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease !important;
  animation: bfDiscordBadgeFlicker 3s infinite steps(1,end);
}

.bf-discord-button::before{
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #5865f2;
  box-shadow:
    0 0 0 1px rgba(88,101,242,.14),
    0 0 8px rgba(88,101,242,.58),
    0 0 14px rgba(88,101,242,.26);
  animation: bfDiscordDotPulse 1.4s ease-in-out infinite;
}

.bf-discord-button::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 45%),
    linear-gradient(90deg, transparent, rgba(88,101,242,.10), transparent);
  opacity: .45;
  mix-blend-mode: screen;
}

.bf-discord-button:hover,
.bf-discord-button:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(112,123,255,.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 20px rgba(88,101,242,.12),
    0 0 0 1px rgba(88,101,242,.05);
}

.bf-discord-button:active{
  transform: translateY(0);
}

.nav-discord-link{
  position: relative;
}

.nav-discord-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88,101,242,.92), transparent);
  transform: scaleX(.35);
  transform-origin: center;
  opacity: .5;
  transition: transform .24s ease, opacity .24s ease;
}

.nav-discord-link:hover::after,
.nav-discord-link:focus-visible::after{
  transform: scaleX(1);
  opacity: 1;
}

.hero .bf-discord-button{
  min-width: 0;
}

.announcements-toolbar-actions .bf-discord-button,
.faq-shell-toolbar .bf-discord-button,
.community-section .bf-discord-button,
.rules-shell-toolbar .bf-discord-button,
.page-toolbar .bf-discord-button,
.section-copy .bf-discord-button{
  min-width: 0;
}

@keyframes bfDiscordDotPulse{
  0%,100%{
    transform:scale(1);
    opacity:.92;
    box-shadow:
      0 0 0 1px rgba(88,101,242,.14),
      0 0 8px rgba(88,101,242,.58),
      0 0 14px rgba(88,101,242,.26);
  }
  50%{
    transform:scale(1.08);
    opacity:1;
    box-shadow:
      0 0 0 1px rgba(88,101,242,.20),
      0 0 10px rgba(88,101,242,.82),
      0 0 18px rgba(88,101,242,.34);
  }
}

@keyframes bfDiscordBadgeFlicker{
  0%, 7%, 11%, 20%, 24%, 33%, 45%, 52%, 66%, 78%, 100%{
    opacity:1;
    color:#ece8df;
    text-shadow:
      0 0 5px rgba(255,255,255,.04),
      0 0 11px rgba(88,101,242,.10);
  }
  8%, 21%{
    opacity:.36;
    color:#b9b2ab;
    text-shadow:none;
  }
  34%{
    opacity:.74;
  }
  53%{
    opacity:.88;
  }
  79%{
    opacity:.58;
  }
}

@media (max-width: 760px){
  .bf-discord-button{
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    letter-spacing: .16em !important;
  }
}


/* ================================================================
   CENTRED TOP NAVIGATION
   More visible, but still restrained and in-world.
================================================================ */
@media (min-width: 901px){
  .site-header{
    justify-content:center !important;
  }

  .site-header .nav{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    margin:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:27px;
    padding:10px 20px;
    border:1px solid rgba(199,194,181,.10);
    border-radius:999px;
    background:rgba(7,8,8,.38);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018),
      0 8px 28px rgba(0,0,0,.12);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    overflow:hidden;
    isolation:isolate;
    animation:bfNavArrive .9s cubic-bezier(.16,1,.3,1) both;
  }

  .site-header.scrolled .nav{
    background:rgba(7,8,8,.64);
    border-color:rgba(199,194,181,.14);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.022),
      0 10px 32px rgba(0,0,0,.22);
  }

  .site-header .nav::before{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(216,160,154,.23),transparent);
    opacity:.5;
    animation:bfNavSignalLine 6.8s ease-in-out infinite;
    pointer-events:none;
    z-index:-1;
  }

  .site-header .nav a{
    position:relative;
    color:#aeb2ac;
    font-weight:600;
    font-size:10px;
    letter-spacing:.14em;
    text-shadow:0 0 8px rgba(255,255,255,.018);
    transition:
      color .2s ease,
      transform .22s ease,
      letter-spacing .22s ease,
      text-shadow .22s ease;
  }

  .site-header .nav a:hover,
  .site-header .nav a:focus-visible{
    color:#f0efea;
    transform:translateY(-1px);
    letter-spacing:.17em;
    text-shadow:0 0 11px rgba(216,160,154,.09);
    animation:bfNavTextFlicker .46s steps(1,end) 1;
  }

  .site-header .nav a.active{
    color:#f0efea;
  }

  .site-header .nav a.active::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;
    width:18px;
    height:1px;
    transform:translateX(-50%);
    background:#d8a09a;
    box-shadow:0 0 8px rgba(216,160,154,.26);
    opacity:.78;
    animation:bfActiveNavPulse 4.2s steps(1,end) infinite;
  }

  .site-header .nav .nav-discord-link{
    color:#aeb5f7;
  }

  .site-header .nav .nav-discord-link:hover,
  .site-header .nav .nav-discord-link:focus-visible{
    color:#dfe3ff;
    text-shadow:0 0 12px rgba(88,101,242,.20);
  }

  .site-header .nav .nav-discord-link::after{
    bottom:-8px;
    background:linear-gradient(90deg,transparent,rgba(88,101,242,.95),transparent);
  }
}

@keyframes bfNavArrive{
  from{opacity:0;transform:translate(-50%,calc(-50% - 8px));filter:blur(3px)}
  to{opacity:1;transform:translate(-50%,-50%);filter:none}
}

@keyframes bfNavSignalLine{
  0%,100%{opacity:.22;transform:scaleX(.35)}
  45%{opacity:.52;transform:scaleX(1)}
  52%{opacity:.18;transform:scaleX(.68)}
  57%{opacity:.48;transform:scaleX(.94)}
}

@keyframes bfNavTextFlicker{
  0%,100%{opacity:1}
  22%{opacity:.58}
  30%{opacity:1}
  47%{opacity:.76}
  55%{opacity:1}
}

@keyframes bfActiveNavPulse{
  0%,65%,72%,100%{opacity:.78}
  66%{opacity:.22}
  68%{opacity:1}
  70%{opacity:.42}
}

@media (max-width: 900px){
  .site-header .nav{
    transform:none !important;
    animation:none !important;
    border-radius:0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .site-header .nav::before{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header .nav,
  .site-header .nav::before,
  .site-header .nav a,
  .site-header .nav a::before{
    animation:none !important;
  }
}

/* ================================================================
   NAV ACTIVE STATE CLEANUP
   Prevent the legacy active underline from stacking with the newer
   centred navigation marker.
================================================================ */
@media (min-width: 901px){
  .site-header .nav a.active::after{
    content:none !important;
    display:none !important;
    animation:none !important;
  }

  .site-header .nav a.active::before{
    bottom:-8px;
    width:20px;
    opacity:.78;
    animation:bfActiveNavBreath 3.6s ease-in-out infinite !important;
  }
}

@keyframes bfActiveNavBreath{
  0%,100%{
    opacity:.58;
    box-shadow:0 0 5px rgba(216,160,154,.16);
  }
  50%{
    opacity:.92;
    box-shadow:0 0 9px rgba(216,160,154,.30);
  }
}


/* ================================================================
   BLACKFALL PAYPAL SUPPORT
   Compact site-wide support controls using PayPal blue as a signal.
================================================================ */
.nav-paypal-link{
  position:relative;
  color:#9da7bd !important;
}

.nav-paypal-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,156,222,.9),transparent);
  transform:scaleX(.3);
  opacity:.45;
  transition:transform .24s ease,opacity .24s ease;
}

.nav-paypal-link:hover,
.nav-paypal-link:focus-visible{
  color:#e8edf7 !important;
}

.nav-paypal-link:hover::after,
.nav-paypal-link:focus-visible::after{
  transform:scaleX(1);
  opacity:1;
}

.paypal-float{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:70;
  display:flex;
  align-items:center;
  gap:0;
  width:46px;
  height:46px;
  padding:0 13px;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(0,156,222,.28);
  background:rgba(8,10,13,.9);
  color:#eef5ff;
  box-shadow:
    0 12px 32px rgba(0,0,0,.34),
    0 0 18px rgba(0,156,222,.06),
    inset 0 0 0 1px rgba(255,255,255,.015);
  backdrop-filter:blur(9px);
  transition:
    width .32s cubic-bezier(.16,1,.3,1),
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}

.paypal-float::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 18%,rgba(0,156,222,.08) 48%,transparent 76%);
  transform:translateX(-120%);
  animation:bfPaypalSweep 6s ease-in-out infinite;
}

.paypal-mark{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  flex:0 0 20px;
  width:20px;
  height:20px;
  border-radius:6px;
  background:linear-gradient(145deg,#003087,#009cde);
  color:#fff;
  font:700 13px/1 var(--body);
  box-shadow:0 0 12px rgba(0,156,222,.18);
}

.paypal-label{
  position:relative;
  z-index:1;
  max-width:0;
  margin-left:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  color:#dce7f4;
  font:600 9px var(--mono);
  letter-spacing:.16em;
  transition:max-width .3s ease,margin-left .3s ease,opacity .22s ease;
}

.paypal-float:hover,
.paypal-float:focus-visible{
  width:118px;
  transform:translateY(-2px);
  border-color:rgba(0,156,222,.48);
  box-shadow:
    0 16px 36px rgba(0,0,0,.4),
    0 0 24px rgba(0,156,222,.12),
    inset 0 0 0 1px rgba(255,255,255,.02);
}

.paypal-float:hover .paypal-label,
.paypal-float:focus-visible .paypal-label{
  max-width:70px;
  margin-left:9px;
  opacity:1;
}

@keyframes bfPaypalSweep{
  0%,68%,100%{transform:translateX(-120%);opacity:0}
  74%{opacity:.7}
  88%{transform:translateX(120%);opacity:0}
}

@media(max-width:760px){
  .paypal-float{
    right:14px;
    bottom:14px;
    width:42px;
    height:42px;
    padding:0 11px;
    border-radius:11px;
  }
  .paypal-float:hover,
  .paypal-float:focus-visible{width:108px}
}

@media(prefers-reduced-motion:reduce){
  .paypal-float::before{animation:none !important}
}


/* ================================================================
   HOMEPAGE PAYPAL SUPPORT
   More visible than the old floating control, but still secondary.
================================================================ */
.paypal-float{display:none !important}

.hero-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-top:22px;
}

.hero-actions .discord-cta{
  margin-top:0 !important;
}

.hero-paypal-support{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:38px;
  padding:0 17px;
  border:1px solid rgba(0,112,186,.34);
  border-radius:999px;
  background:rgba(0,112,186,.08);
  color:#dfefff;
  box-shadow:0 0 18px rgba(0,112,186,.07);
  font:600 9px var(--mono);
  letter-spacing:.15em;
  text-transform:uppercase;
  overflow:hidden;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.hero-paypal-support::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-120%);
  animation:bfHeroPaypalSweep 5.8s ease-in-out infinite;
  pointer-events:none;
}

.hero-paypal-mark{
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  border-radius:50%;
  background:#0070ba;
  color:white;
  font:700 11px/1 Arial,sans-serif;
  box-shadow:0 0 10px rgba(0,112,186,.24);
}

.hero-paypal-support:hover,
.hero-paypal-support:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(0,112,186,.58);
  background:rgba(0,112,186,.13);
  box-shadow:0 0 24px rgba(0,112,186,.12);
}

@keyframes bfHeroPaypalSweep{
  0%,68%,100%{transform:translateX(-120%);opacity:0}
  75%{opacity:.4}
  88%{transform:translateX(120%);opacity:.22}
  92%{opacity:0}
}

@media(max-width:760px){
  .hero-actions{width:min(100%,320px)}
  .hero-actions .discord-cta,
  .hero-paypal-support{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .hero-paypal-support::after{animation:none !important}
}


/* ================================================================
   LEADERBOARD POLISH
   Matches the contained BlackFall panels used by Rules/Guides/FAQ.
================================================================ */
.leaderboard-stage-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.15;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(216,160,154,.014) 0,
      rgba(216,160,154,.014) 1px,
      transparent 1px,
      transparent 6px
    );
}

.leaderboard-shell{
  overflow:hidden;
  border-radius:8px;
  transition:
    border-color .24s ease,
    box-shadow .28s ease,
    transform .28s cubic-bezier(.16,1,.3,1) !important;
  will-change:transform;
}

.scroll-fx .leaderboard-shell.reveal.visible:hover{
  transform:translate3d(0,-4px,0) scale(1.002) !important;
  border-color:rgba(216,160,154,.28);
  box-shadow:
    0 42px 105px rgba(0,0,0,.58),
    0 0 0 1px rgba(216,160,154,.035),
    0 0 28px rgba(216,160,154,.045),
    inset 0 1px 0 rgba(255,255,255,.022);
}

.leaderboard-shell-head{
  padding:34px 36px 28px;
}

.leaderboard-shell-controls{
  padding:18px 36px 20px;
  gap:12px;
  background:rgba(255,255,255,.007);
}

.leaderboard-shell-controls label > span{
  display:block;
  margin-bottom:8px;
  color:#626862;
  font:500 8px var(--mono);
  letter-spacing:.16em;
}

.leaderboard-shell-controls .simple-search input,
.leaderboard-shell-controls .simple-select select{
  height:44px;
  border-radius:7px;
  border:1px solid rgba(199,194,181,.14);
  background:rgba(8,9,9,.90);
  color:#d8d9d4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.012),
    0 0 0 rgba(216,160,154,0);
  outline:none;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}

.leaderboard-shell-controls .simple-search input:hover,
.leaderboard-shell-controls .simple-select select:hover{
  transform:translateY(-1px);
  border-color:rgba(216,160,154,.25);
  background:rgba(11,12,12,.96);
}

.leaderboard-shell-controls .simple-search input:focus,
.leaderboard-shell-controls .simple-select select:focus{
  transform:translateY(-1px);
  border-color:rgba(216,160,154,.38);
  box-shadow:
    0 0 0 1px rgba(216,160,154,.04),
    0 0 18px rgba(216,160,154,.065);
}

.leaderboard-shell-controls .simple-refresh{
  position:relative;
  min-width:126px;
  height:44px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(216,160,154,.22);
  background:rgba(216,160,154,.055);
  color:#ddd9d3;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  font:600 9px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.012),
    0 0 15px rgba(216,160,154,.045);
  animation:bfLeaderboardButtonFlicker 4.6s infinite steps(1,end);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease !important;
}

.leaderboard-shell-controls .simple-refresh::before{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background:#d8a09a;
  box-shadow:
    0 0 6px rgba(216,160,154,.54),
    0 0 12px rgba(216,160,154,.20);
  animation:bfLeaderboardDot 1.8s ease-in-out infinite;
}

.leaderboard-shell-controls .simple-refresh::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(216,160,154,.08),transparent);
  transform:translateX(-120%);
  animation:bfLeaderboardSweep 5.4s ease-in-out infinite;
}

.leaderboard-shell-controls .simple-refresh{
  padding-left:29px;
}

.leaderboard-shell-controls .simple-refresh:hover,
.leaderboard-shell-controls .simple-refresh:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(216,160,154,.38);
  background:rgba(216,160,154,.075);
  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    0 0 20px rgba(216,160,154,.075),
    inset 0 1px 0 rgba(255,255,255,.02);
}

.leaderboard-shell-controls .simple-refresh:active{
  transform:translateY(0);
}

.leaderboard-shell-controls .simple-refresh:disabled{
  opacity:.42;
  cursor:wait;
  animation:none;
}

.leaderboard-box-table .simple-leaderboard-head,
.leaderboard-box-table .simple-leaderboard-row{
  padding-left:36px;
  padding-right:36px;
}

.leaderboard-box-table .simple-leaderboard-row{
  position:relative;
  transition:
    transform .2s cubic-bezier(.16,1,.3,1),
    background-color .2s ease,
    box-shadow .2s ease !important;
}

.leaderboard-box-table .simple-leaderboard-row:hover{
  transform:translateX(4px) translateY(-1px);
  background:linear-gradient(90deg,rgba(216,160,154,.075),rgba(255,255,255,.007) 62%,transparent);
  box-shadow:inset 2px 0 0 rgba(216,160,154,.34);
}

.leaderboard-box-table .simple-leaderboard-row.top-1:hover{
  box-shadow:
    inset 2px 0 0 rgba(216,160,154,.68),
    0 7px 20px rgba(0,0,0,.08);
}

@keyframes bfLeaderboardButtonFlicker{
  0%,7%,11%,29%,33%,58%,62%,100%{opacity:1;text-shadow:0 0 7px rgba(216,160,154,.055)}
  8%,30%,59%{opacity:.68;text-shadow:none}
  9%,31%{opacity:.92}
}

@keyframes bfLeaderboardDot{
  0%,100%{opacity:.72;transform:translateY(-50%) scale(.92)}
  50%{opacity:1;transform:translateY(-50%) scale(1.08);box-shadow:0 0 9px rgba(216,160,154,.68),0 0 15px rgba(216,160,154,.24)}
}

@keyframes bfLeaderboardSweep{
  0%,70%,100%{transform:translateX(-120%);opacity:0}
  76%{opacity:.42}
  88%{transform:translateX(120%);opacity:.18}
  92%{opacity:0}
}

@media(max-width:640px){
  .leaderboard-shell-head,
  .leaderboard-shell-controls{
    padding-left:21px;
    padding-right:21px;
  }

  .leaderboard-box-table .simple-leaderboard-head,
  .leaderboard-box-table .simple-leaderboard-row{
    padding-left:21px;
    padding-right:21px;
  }

  .leaderboard-shell-controls .simple-refresh{
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  .scroll-fx .leaderboard-shell.reveal.visible:hover,
  .leaderboard-shell-controls .simple-search input:hover,
  .leaderboard-shell-controls .simple-select select:hover,
  .leaderboard-shell-controls .simple-refresh:hover,
  .leaderboard-box-table .simple-leaderboard-row:hover{
    transform:none !important;
  }

  .leaderboard-shell-controls .simple-refresh,
  .leaderboard-shell-controls .simple-refresh::before,
  .leaderboard-shell-controls .simple-refresh::after{
    animation:none !important;
  }
}

/* ================================================================
   FOCUS READER + RULE INTERACTION FIXES
   Keep cloned lore content readable and make rule hover behaviour
   consistent after scroll-reveal styles have finished.
================================================================ */

/* Lore entries are two-column on the page (number + copy). The number is
   intentionally hidden in the secure reader, so collapse that cloned grid
   to a normal article instead of leaving the copy inside the 52px number
   column. */
.bf-focus-body .lore-entry{
  display:block !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  transform:none !important;
}

.bf-focus-body .lore-entry::before,
.bf-focus-body .lore-entry::after{
  display:none !important;
}

.bf-focus-body .lore-entry-copy{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

.bf-focus-body .lore-entry-copy p{
  width:auto !important;
  max-width:760px !important;
  margin:0 0 16px !important;
  color:#979d97 !important;
  font-size:14px !important;
  line-height:1.86 !important;
}

.bf-focus-body .lore-entry-copy p:last-child{
  margin-bottom:0 !important;
}

.bf-focus-body .lore-accent{
  color:var(--alert-bright,#d8a09a) !important;
}

.bf-focus-body .lore-final-lines{
  margin-top:24px;
}

/* main.css uses a more specific scroll-reveal transform, which was
   overriding the generic focusable hover on rule sections. Match that
   specificity here so every visible rule behaves the same. */
.scroll-fx .rules-panel-page .rules-list details.scroll-reveal.visible{
  transition:
    transform .24s cubic-bezier(.16,1,.3,1),
    border-color .24s ease,
    background-color .24s ease,
    box-shadow .24s ease !important;
}

.scroll-fx .rules-panel-page .rules-list details.scroll-reveal.visible:hover,
.scroll-fx .rules-panel-page .rules-list details.scroll-reveal.visible:focus-within{
  transform:translateY(-2px) !important;
  background:linear-gradient(90deg,rgba(216,160,154,.035),transparent 68%) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.13) !important;
}

.rules-panel-page .rules-list details:hover > summary{
  padding-left:8px;
  background:linear-gradient(90deg,rgba(216,160,154,.07),transparent 65%);
}

.rules-panel-page .rules-list details[open]:hover > summary{
  padding-left:10px;
}

@media(max-width:760px){
  .bf-focus-body .lore-entry-copy p{
    max-width:none !important;
    font-size:13px !important;
    line-height:1.78 !important;
  }
}

/* ================================================================
   BLACKFALL SHARED LIVING INTERACTIONS
   One restrained hover language across every content page.
================================================================ */
:root{
  --bf-alive-backdrop: rgba(216,160,154,.032);
  --bf-alive-backdrop-strong: rgba(216,160,154,.052);
  --bf-alive-edge: rgba(216,160,154,.20);
  --bf-alive-edge-soft: rgba(216,160,154,.11);
  --bf-alive-shadow: 0 14px 34px rgba(0,0,0,.18);
}

/* Main contained pages all react the same way. */
.announcements-shell,
.lore-shell,
.guides-shell,
.rules-shell,
.faq-shell,
.leaderboard-shell{
  transition:
    transform .32s cubic-bezier(.16,1,.3,1),
    border-color .28s ease,
    box-shadow .32s ease !important;
}

.scroll-fx .announcements-shell.reveal.visible:hover,
.scroll-fx .lore-shell.reveal.visible:hover,
.scroll-fx .guides-shell.reveal.visible:hover,
.scroll-fx .rules-shell.reveal.visible:hover,
.scroll-fx .faq-shell.reveal.visible:hover,
.scroll-fx .leaderboard-shell.reveal.visible:hover,
.announcements-shell:hover,
.lore-shell:hover,
.guides-shell:hover,
.rules-shell:hover,
.faq-shell:hover,
.leaderboard-shell:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(216,160,154,.25) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.28),
    0 0 0 1px rgba(216,160,154,.025),
    0 0 34px rgba(216,160,154,.035) !important;
}

/* Major page headings wake up slightly with the panel. */
.announcements-shell:hover .announcements-shell-head h1,
.lore-shell:hover .lore-shell-head h1,
.guides-shell:hover .guides-shell-head h1,
.rules-shell:hover .rules-shell-head h1,
.faq-shell:hover .faq-shell-head h1,
.leaderboard-shell:hover .leaderboard-shell-head h1{
  text-shadow:0 0 20px rgba(232,232,226,.055);
}

/* Shared content lift. */
.guide-card,
.lore-entry,
.rules-list details,
.faq-list details,
.discord-message,
.simple-leaderboard-row,
.photo,
.line-list article,
.word-columns article,
.scavenge-list article,
.server-wrap dl > div,
.ways article{
  transition:
    transform .24s cubic-bezier(.16,1,.3,1),
    background-color .24s ease,
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    opacity .24s ease !important;
  will-change:transform;
}

/* Reveal rules normally own transform; these selectors deliberately win
   only once the item is visible. */
.scroll-fx .guide-card.scroll-reveal.visible:hover,
.scroll-fx .lore-entry.scroll-reveal.visible:hover,
.scroll-fx .rules-list details.scroll-reveal.visible:hover,
.scroll-fx .faq-list details.scroll-reveal.visible:hover,
.scroll-fx .discord-message.scroll-reveal.visible:hover,
.scroll-fx .simple-leaderboard-row.scroll-reveal.visible:hover,
.scroll-fx .photo.scroll-reveal.visible:hover,
.scroll-fx .line-list article.scroll-reveal.visible:hover,
.scroll-fx .word-columns article.scroll-reveal.visible:hover,
.scroll-fx .scavenge-list article.scroll-reveal.visible:hover,
.scroll-fx .server-wrap dl > div.scroll-reveal.visible:hover,
.scroll-fx .ways article.scroll-reveal.visible:hover,
.guide-card:hover,
.lore-entry:hover,
.rules-list details:hover,
.faq-list details:hover,
.discord-message:hover,
.simple-leaderboard-row:hover,
.photo:hover,
.line-list article:hover,
.word-columns article:hover,
.scavenge-list article:hover,
.server-wrap dl > div:hover,
.ways article:hover{
  transform:translateY(-2px) !important;
  background:
    linear-gradient(105deg,var(--bf-alive-backdrop-strong),rgba(255,255,255,.005) 42%,transparent 78%);
  box-shadow:var(--bf-alive-shadow);
}

/* Rows and accordion items get a quiet edge rather than a boxed outline. */
.rules-list details:hover,
.faq-list details:hover,
.discord-message:hover,
.simple-leaderboard-row:hover,
.line-list article:hover,
.scavenge-list article:hover,
.server-wrap dl > div:hover{
  box-shadow:
    inset 2px 0 0 var(--bf-alive-edge),
    0 10px 28px rgba(0,0,0,.12);
}

/* Cards and media can carry a little more depth. */
.guide-card:hover,
.photo:hover,
.word-columns article:hover,
.ways article:hover{
  box-shadow:
    0 16px 38px rgba(0,0,0,.20),
    0 0 0 1px var(--bf-alive-edge-soft);
}

/* Lore stays readable and non-click-to-focus, but now feels responsive. */
.lore-entry:hover{
  box-shadow:
    inset 2px 0 0 rgba(216,160,154,.30),
    0 12px 30px rgba(0,0,0,.14);
}

/* Small labels react with their parent to reinforce the interface feel. */
.guide-card:hover .guide-tag,
.lore-entry:hover .lore-entry-number,
.rules-list details:hover summary > span,
.faq-list details:hover summary > span,
.discord-message:hover .discord-message-index,
.simple-leaderboard-row:hover .simple-rank,
.line-list article:hover > span,
.scavenge-list article:hover > span{
  color:#d8a09a !important;
  text-shadow:0 0 9px rgba(216,160,154,.12);
}

/* World/home imagery keeps its existing zoom and gains a quiet frame glow. */
.photo:hover img{
  border-color:rgba(216,160,154,.26);
  box-shadow:0 0 20px rgba(216,160,154,.035);
}

/* Search/select fields subtly wake up when the user enters them. */
input:hover,
select:hover,
input:focus,
select:focus{
  border-color:rgba(216,160,154,.24) !important;
  box-shadow:inset 0 0 0 1px rgba(216,160,154,.025),0 0 18px rgba(216,160,154,.025);
}

@media(max-width:760px){
  /* Touch layouts should not jump when tapped. */
  .announcements-shell:hover,
  .lore-shell:hover,
  .guides-shell:hover,
  .rules-shell:hover,
  .faq-shell:hover,
  .leaderboard-shell:hover,
  .guide-card:hover,
  .lore-entry:hover,
  .rules-list details:hover,
  .faq-list details:hover,
  .discord-message:hover,
  .simple-leaderboard-row:hover,
  .photo:hover,
  .line-list article:hover,
  .word-columns article:hover,
  .scavenge-list article:hover,
  .server-wrap dl > div:hover,
  .ways article:hover{
    transform:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .announcements-shell,
  .lore-shell,
  .guides-shell,
  .rules-shell,
  .faq-shell,
  .leaderboard-shell,
  .guide-card,
  .lore-entry,
  .rules-list details,
  .faq-list details,
  .discord-message,
  .simple-leaderboard-row,
  .photo,
  .line-list article,
  .word-columns article,
  .scavenge-list article,
  .server-wrap dl > div,
  .ways article{
    transition:none !important;
  }

  .announcements-shell:hover,
  .lore-shell:hover,
  .guides-shell:hover,
  .rules-shell:hover,
  .faq-shell:hover,
  .leaderboard-shell:hover,
  .guide-card:hover,
  .lore-entry:hover,
  .rules-list details:hover,
  .faq-list details:hover,
  .discord-message:hover,
  .simple-leaderboard-row:hover,
  .photo:hover,
  .line-list article:hover,
  .word-columns article:hover,
  .scavenge-list article:hover,
  .server-wrap dl > div:hover,
  .ways article:hover{
    transform:none !important;
  }
}