/*
 * Hellfire Forge — LIVE layer (r546)
 * ---------------------------------------------------------------------------
 * The theme's signature is motion: embers actually rise over the whole app, the
 * forge breathes, molten light flows along the card edges and a hot sheen
 * crosses the main buttons. Nothing here touches layout, the board, pawns,
 * dice faces, coin values or any interaction — only paint + transform.
 *
 * Rules:
 *   · every rule is scoped to html[data-cosmetic-theme="hellfire"];
 *   · only transform / opacity / background-position / filter animate
 *     (no layout thrash, no JS timers, nothing to clean up);
 *   · pointer-events: none on every decorative layer;
 *   · prefers-reduced-motion ⇒ everything freezes, the palette stays hot.
 */

/* ── ১) উঠন্ত তাপ: পুরো অ্যাপজুড়ে গরম আলোর রেখা উপরে ওঠে ──────────────────
   r550 (owner): "ছোট বল এর মত উড়ে কেন" — বিন্দু-ভরা ফুলকির স্তর বাদ। এখন
   চলাচল করে আলো: লম্বা, নরম তাপ-রেখা (কোনো গোল দাগ নেই)। */
html[data-cosmetic-theme="hellfire"] body::before,
html[data-cosmetic-theme="hellfire"] body::after {
  content: '';
  position: fixed;
  left: -8%;
  right: -8%;
  bottom: -14%;
  height: 132vh;
  z-index: 9998;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  /* নিচ থেকে উপরে গরম আলো + সরু তাপ-রেখা */
  background-image:
    linear-gradient(2deg, rgba(255, 108, 28, .26), rgba(255, 108, 28, 0) 46%),
    repeating-linear-gradient(94deg, rgba(255, 150, 70, .10) 0 1.5px, transparent 1.5px 40px),
    repeating-linear-gradient(86deg, rgba(255, 196, 130, .07) 0 1px, transparent 1px 66px);
  background-size: 100% 100%, 100% 280px, 100% 460px;
  background-repeat: no-repeat, repeat, repeat;
  animation: hf-heat-rise 20s linear infinite, hf-heat-flicker 5.4s ease-in-out infinite;
}
/* দ্বিতীয় স্তর: আরও ধীর, আরও নরম */
html[data-cosmetic-theme="hellfire"] body::after {
  opacity: .34;
  background-image:
    linear-gradient(358deg, rgba(255, 132, 44, .20), rgba(255, 132, 44, 0) 38%),
    repeating-linear-gradient(88deg, rgba(255, 168, 96, .07) 0 1px, transparent 1px 92px);
  background-size: 100% 100%, 100% 620px;
  animation: hf-heat-rise-slow 31s linear infinite, hf-heat-flicker 7.5s ease-in-out infinite reverse;
}

@keyframes hf-heat-rise {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-10px, -102vh, 0); }
}
@keyframes hf-heat-rise-slow {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(14px, -78vh, 0); }
}
@keyframes hf-heat-flicker {
  0%, 100% { opacity: .40; }
  35%      { opacity: .58; }
  70%      { opacity: .32; }
}

/* ── ২) ফোরজের নিঃশ্বাস: হোম হিরো গরম হয়ে ওঠে, আবার নিভে যায় ─────────── */
html[data-cosmetic-theme="hellfire"] .home-welcome-card {
  animation: hf-forge-breathe 7.5s ease-in-out infinite;
}
@keyframes hf-forge-breathe {
  0%, 100% {
    box-shadow: 0 20px 34px rgba(10, 3, 1, .6), inset 0 1px rgba(255, 224, 190, .16),
      0 0 0 3px rgba(255, 120, 40, .05), 0 0 26px rgba(255, 96, 24, .16);
  }
  50% {
    box-shadow: 0 20px 40px rgba(10, 3, 1, .66), inset 0 1px rgba(255, 236, 205, .26),
      0 0 0 3px rgba(255, 150, 60, .12), 0 0 46px rgba(255, 120, 40, .34);
  }
}

/* শিখার ওপর দিয়ে আলোর ঝলক (শুধু আলো, কিছু ঢাকে না) */
html[data-cosmetic-theme="hellfire"] .home-welcome-card .home-welcome-copy h1 {
  animation: hf-title-glow 5.5s ease-in-out infinite;
}
@keyframes hf-title-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 120, 40, .18); }
  50%      { text-shadow: 0 0 20px rgba(255, 150, 60, .45); }
}

/* ── ৩) গলিত আলো কার্ডের কিনারা ধরে বয়ে যায় ─────────────────────────── */
html[data-cosmetic-theme="hellfire"] .home-mode-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 138, 46, .75) 42%,
    rgba(255, 206, 150, .9) 50%, rgba(255, 96, 24, .65) 58%, transparent 82%);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .75;
  animation: hf-edge-flow 6.5s linear infinite;
}
html[data-cosmetic-theme="hellfire"] .home-mode-card:nth-child(2)::after { animation-delay: -2.6s; }
@keyframes hf-edge-flow {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* ── ৪) বাটনে গরম ঝলক (Play / Friends) ───────────────────────────────── */
html[data-cosmetic-theme="hellfire"] .btn-play-hero,
html[data-cosmetic-theme="hellfire"] .home-mode-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html[data-cosmetic-theme="hellfire"] .btn-play-hero::after,
html[data-cosmetic-theme="hellfire"] .home-mode-cta::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  width: 42%;
  left: -60%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 205, .55), transparent);
  transform: skewX(-18deg);
  animation: hf-sheen 5.2s ease-in-out infinite;
}
@keyframes hf-sheen {
  0%, 62% { transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 0; }
  70%     { opacity: .9; }
  100%    { transform: translate3d(340%, 0, 0) skewX(-18deg); opacity: 0; }
}

/* ── ৫) নিচের নেভ: সক্রিয় ট্যাবের আগুন কাঁপে ─────────────────────────── */
html[data-cosmetic-theme="hellfire"] .b-tab.active .bt-icon {
  animation: hf-nav-ember 3.4s ease-in-out infinite;
}
@keyframes hf-nav-ember {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 140, 50, .3), 0 0 12px rgba(255, 110, 30, .22); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 176, 90, .55), 0 0 20px rgba(255, 130, 40, .45); }
}

/* ── ৬) হোমের স্ট্যাট স্ট্রিপে মৃদু তাপ-কম্পন ────────────────────────── */
html[data-cosmetic-theme="hellfire"] .home-stats-strip {
  animation: hf-heat 8s ease-in-out infinite;
}
@keyframes hf-heat {
  0%, 100% { filter: saturate(1) brightness(1); }
  50%      { filter: saturate(1.12) brightness(1.06); }
}

/* ── ৭) STORE/Vault-এর Hellfire কার্ড: আগুনের গতিশীল আভা ─────────────── */
html[data-cosmetic-theme="hellfire"] .shop-theme-card[data-item-id="theme-hellfire"] .shop-theme-art {
  background-size: cover, cover;
  animation: hf-art-breathe 9s ease-in-out infinite;
}
@keyframes hf-art-breathe {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.12) saturate(1.1); }
}
html[data-cosmetic-theme="hellfire"] .shop-theme-card[data-item-id="theme-hellfire"] {
  animation: hf-card-rim 6s ease-in-out infinite;
}
@keyframes hf-card-rim {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 130, 45, .18), 0 12px 26px rgba(10, 3, 1, .45); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 165, 80, .42), 0 16px 32px rgba(120, 34, 6, .5); }
}

/* ── ৮) গেম স্ক্রিন: ম্যাচ চলাকালীন শুধু HUD-এর আলো নিঃশ্বাস নেয় ─────── */
html[data-cosmetic-theme="hellfire"] #screen-game[data-cosmetic-theme="hellfire"] .game-hud-bar,
html[data-cosmetic-theme="hellfire"] #screen-game .game-hud-bar {
  animation: hf-hud-breathe 6s ease-in-out infinite;
}
@keyframes hf-hud-breathe {
  0%, 100% { box-shadow: 0 7px 18px rgba(8, 2, 1, .45), inset 0 1px rgba(255, 226, 196, .14); }
  50%      { box-shadow: 0 7px 22px rgba(8, 2, 1, .5), inset 0 1px rgba(255, 236, 205, .24), 0 0 22px rgba(255, 110, 30, .22); }
}

/* ── ৮খ) ম্যাচ চলাকালীন ফুলকি কমে যায় — পিপ/বোর্ড ঢাকা পড়ে না ────────── */
@supports selector(:has(*)) {
  html[data-cosmetic-theme="hellfire"]:has(#screen-game.active) body::before,
  html[data-cosmetic-theme="hellfire"]:has(#screen-game.active) body::after {
    opacity: .16;
    animation-duration: 30s, 8s;
  }
}

/* ── ৯) গতি কমাতে চাইলে: সব স্থির, শুধু রং গরম ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-cosmetic-theme="hellfire"] body::before,
  html[data-cosmetic-theme="hellfire"] body::after,
  html[data-cosmetic-theme="hellfire"] .home-welcome-card,
  html[data-cosmetic-theme="hellfire"] .home-welcome-copy h1,
  html[data-cosmetic-theme="hellfire"] .home-mode-card::after,
  html[data-cosmetic-theme="hellfire"] .btn-play-hero::after,
  html[data-cosmetic-theme="hellfire"] .home-mode-cta::after,
  html[data-cosmetic-theme="hellfire"] .b-tab.active .bt-icon,
  html[data-cosmetic-theme="hellfire"] .home-stats-strip,
  html[data-cosmetic-theme="hellfire"] .shop-theme-card[data-item-id="theme-hellfire"],
  html[data-cosmetic-theme="hellfire"] .shop-theme-card[data-item-id="theme-hellfire"] .shop-theme-art,
  html[data-cosmetic-theme="hellfire"] #screen-game .game-hud-bar {
    animation: none !important;
  }
  /* ফুলকি থেমে যায় কিন্তু হালকা আভা থাকে */
  html[data-cosmetic-theme="hellfire"] body::before,
  html[data-cosmetic-theme="hellfire"] body::after { opacity: .22; transform: none; }
}