/* Homepage announcement modal (pop-up ad).
   NOTE: class names deliberately avoid "ad"/"popup" — cosmetic ad-blocker
   filters hide elements matching those patterns. */
.kfx-notice-backdrop{
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.74); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:18px;
}
/* `both` so a throttled/interrupted animation can never leave it at opacity 0 */
/* Visibility must never depend on an animation: CSS animations are frozen
   in a backgrounded tab, which would leave this stuck at opacity 0. */
.kfx-notice-backdrop.show{ display:flex; opacity:1; }

.kfx-notice{
  position:relative; width:min(560px,100%); max-height:88vh; overflow-y:auto;
  border-radius:20px; border:1px solid rgba(245,158,11,.28);
  background:linear-gradient(180deg, rgba(20,18,14,.98), rgba(10,10,12,.98));
  box-shadow:0 30px 90px rgba(0,0,0,.6); padding:24px 24px 20px; color:#fff;
  animation:kfxNoticeIn .25s cubic-bezier(.2,.9,.3,1.2);
}
/* transform only — no opacity, so a frozen animation can't hide the card */
@keyframes kfxNoticeIn{ from{ transform:translateY(14px) scale(.97) } to{ transform:none } }

.kfx-notice-x{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.45); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.kfx-notice-x svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round;
}
.kfx-notice-x:hover{ background:rgba(0,0,0,.75); }

.kfx-notice-title{
  margin:0 34px 12px 0; font-family:var(--kx-display,inherit);
  font-size:clamp(20px,4vw,26px); font-weight:900; line-height:1.2;
  color:rgba(252,211,77,.98);
}
.kfx-notice-body{ color:rgba(255,255,255,.85); font-size:14.5px; line-height:1.7; }
.kfx-notice-body p{ margin:0 0 10px; }
.kfx-notice-body ul, .kfx-notice-body ol{ margin:0 0 10px; padding-left:20px; }
.kfx-notice-body li{ margin:3px 0; }
.kfx-notice-body a{ color:rgba(252,211,77,.95); text-decoration:underline; }
.kfx-notice-body strong{ color:#fff; }
.kfx-notice-body img{ max-width:100%; height:auto; border-radius:10px; margin:8px 0; }

.kfx-notice-actions{
  margin-top:18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.kfx-notice-cta{
  flex:1 1 auto; text-align:center; text-decoration:none;
  border-radius:14px; padding:12px 18px; font-weight:950; font-size:15px;
  border:1px solid rgba(245,158,11,.35);
  background:linear-gradient(180deg, rgba(252,211,77,.95), rgba(245,158,11,.95));
  color:#111;
}
.kfx-notice-cta:hover{ filter:brightness(1.05); }
.kfx-notice-later{
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.75); border-radius:14px; padding:12px 16px;
  font-weight:700; font-size:13.5px; cursor:pointer; white-space:nowrap;
}
.kfx-notice-later:hover{ background:rgba(255,255,255,.09); color:#fff; }

@media (max-width:520px){
  .kfx-notice{ padding:20px 18px 16px; }
  .kfx-notice-actions{ flex-direction:column; align-items:stretch; }
  .kfx-notice-later{ width:100%; }
}