/*
 * HELLFIRE FORGE — "Forge Plate", screen compositions (r547)
 * ---------------------------------------------------------------------------
 * Same language as theme-hellfire-app.css: welded 3px plate edges, notched
 * corners, stencil caps, hazard ribbons, rivets, ember light. Written screen
 * by screen — nothing is copied from Celestial Night or Frostfire Night.
 */

/* ── FRIENDS: an iron roster board ────────────────────────────────────── */
html[data-cosmetic-theme="hellfire"] #screen-friends .friends-book-head {
  padding: 10px 2px 9px;
  border-bottom: 3px solid #3d2b21;
}
html[data-cosmetic-theme="hellfire"] #screen-friends .friends-book-head h1 {
  font-family: var(--hf-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.2px;
  text-transform: uppercase;
}
html[data-cosmetic-theme="hellfire"] #screen-friends .friends-book-icon {
  border: 3px solid #6b4a36;
  border-radius: 2px;
  color: #ffb066;
  background: linear-gradient(180deg, #3a2418, #1a100b);
}
html[data-cosmetic-theme="hellfire"] #screen-friends #friends-list {
  border: 3px solid #3d2b21;
  border-radius: 2px;
  background: #0c0806;
  padding: 3px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .8);
}
html[data-cosmetic-theme="hellfire"] #screen-friends .friends-filters { gap: 6px; }
html[data-cosmetic-theme="hellfire"] #screen-friends .friends-filters button {
  border: 2px solid #3d2b21;
  border-radius: 2px;
  background: linear-gradient(180deg, #241a15, #100a08);
  font-family: var(--hf-ui);
  font-weight: 900;
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #b3927c;
}
html[data-cosmetic-theme="hellfire"] #screen-friends .friends-filters button[aria-pressed="true"] {
  background: linear-gradient(180deg, #ff9a3d, #c14a0d);
  border-color: #ffb066;
  color: #2a0c02;
}
html[data-cosmetic-theme="hellfire"] #screen-friends .refer-card,
html[data-cosmetic-theme="hellfire"] #screen-friends .friends-find {
  border: 3px solid #4a3327;
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 190, 140, .02) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2a1d16, #120c0a);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
html[data-cosmetic-theme="hellfire"] #screen-friends .fs-find-btn,
html[data-cosmetic-theme="hellfire"] #screen-friends .refer-bar-actions button {
  border: 3px solid #7c3a10;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff9a3d, #d1500c);
  color: #2a0c02;
  font-family: var(--hf-ui);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── EARN: a furnace gauge board ──────────────────────────────────────── */
html[data-cosmetic-theme="hellfire"] .earn-screen .earn-hero {
  position: relative;
  border: 3px solid #4a3327;
  border-radius: 2px;
  background:
    linear-gradient(100deg, rgba(6, 3, 2, .97), rgba(20, 8, 3, .55)),
    url('/images/cosmetics/theme-hellfire.webp') 82% 72% / cover no-repeat;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .75), 0 5px 0 #080504;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
html[data-cosmetic-theme="hellfire"] .earn-screen .earn-title {
  font-family: var(--hf-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.2px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #2a0c02;
}
html[data-cosmetic-theme="hellfire"] .earn-screen .earn-badge {
  border: 2px solid #ffb066;
  border-radius: 2px;
  background: rgba(255, 122, 26, .16);
  font-family: var(--hf-ui);
  font-weight: 900;
  font-size: 8px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ffc98f;
}
html[data-cosmetic-theme="hellfire"] .earn-screen .earn-card,
html[data-cosmetic-theme="hellfire"] .earn-screen .we-stat,
html[data-cosmetic-theme="hellfire"] .earn-screen .we-progress-card {
  border: 3px solid #3d2b21;
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 190, 140, .02) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #241a15, #0f0a08);
  box-shadow: 0 4px 0 #080504;
}
html[data-cosmetic-theme="hellfire"] .earn-screen .we-play {
  border: 3px solid #7c3a10;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff9a3d, #d1500c);
  color: #2a0c02;
  font-family: var(--hf-ui);
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
html[data-cosmetic-theme="hellfire"] .earn-screen .we-play:disabled {
  background: linear-gradient(180deg, #2a1d16, #150e0b);
  border-color: #3d2b21;
  color: #8f6f5a;
}
html[data-cosmetic-theme="hellfire"] .earn-screen .we-play-cta {
  font-family: var(--hf-display);
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* ── RANKS: podium plates bolted to the wall ──────────────────────────── */
html[data-cosmetic-theme="hellfire"] .lb-hero {
  border: 3px solid #4a3327;
  border-radius: 2px;
  background:
    linear-gradient(100deg, rgba(6, 3, 2, .96), rgba(18, 8, 3, .6)),
    url('/images/cosmetics/theme-hellfire.webp') 78% 50% / cover no-repeat;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .7), 0 5px 0 #080504;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
html[data-cosmetic-theme="hellfire"] .lb-title {
  font-family: var(--hf-display);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.4px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #2a0c02, 0 0 18px rgba(255, 110, 30, .35);
}
html[data-cosmetic-theme="hellfire"] .lb-kicker {
  border: 2px solid #ffb066;
  border-radius: 2px;
  background: rgba(255, 122, 26, .14);
  font-family: var(--hf-ui);
  font-weight: 900;
  font-size: 8px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ffc98f;
}
html[data-cosmetic-theme="hellfire"] .lb-pod:not(.lb-pod-1) {
  border: 3px solid #3d2b21;
  border-radius: 2px;
  background: linear-gradient(180deg, #241a15, #0f0a08);
  box-shadow: 0 4px 0 #080504;
}
html[data-cosmetic-theme="hellfire"] .lb-pod-1 {
  border: 3px solid #ffb066;
  border-radius: 2px;
  background: linear-gradient(180deg, #3a2418, #150d08);
  box-shadow: 0 0 26px rgba(255, 110, 30, .3), 0 5px 0 #080504;
}
html[data-cosmetic-theme="hellfire"] .lb-pod-base {
  border-radius: 1px;
  background: linear-gradient(180deg, #ff9a3d, #b4450a);
  color: #2a0c02;
  font-family: var(--hf-display);
  font-size: 15px;
}
html[data-cosmetic-theme="hellfire"] .lb-row {
  border: 2px solid #3d2b21;
  border-radius: 2px;
  background: #120c0a;
}

/* ── PROFILE: a personnel plate ───────────────────────────────────────── */
html[data-cosmetic-theme="hellfire"] .profile-hero {
  border: 3px solid #4a3327;
  border-radius: 2px;
  background: linear-gradient(180deg, #2a1d16, #0d0806 80%);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .7);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
html[data-cosmetic-theme="hellfire"] .profile-hero-bg { opacity: .3; filter: saturate(1.4) brightness(.9); }
html[data-cosmetic-theme="hellfire"] .psg-card,
html[data-cosmetic-theme="hellfire"] .pa-tile {
  border: 3px solid #3d2b21;
  border-radius: 2px;
  background: linear-gradient(180deg, #241a15, #0f0a08);
  box-shadow: 0 4px 0 #080504;
}
html[data-cosmetic-theme="hellfire"] #btn-open-gift-profile,
html[data-cosmetic-theme="hellfire"] .btn-app-download-card {
  border: 3px solid #7c3a10;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff9a3d, #c14a0d);
  color: #2a0c02;
  font-family: var(--hf-ui);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── PRIVACY: readable long-form on a steel page ──────────────────────── */
html[data-cosmetic-theme="hellfire"] #screen-privacy .screen-topbar {
  padding: 9px 11px;
  border: 3px solid #4a3327;
  border-radius: 2px;
  background: linear-gradient(180deg, #241a15, #120c0a);
}
html[data-cosmetic-theme="hellfire"] #privacy-screen-title {
  font-family: var(--hf-display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.2px;
  text-transform: uppercase;
}
html[data-cosmetic-theme="hellfire"] #btn-privacy-back,
html[data-cosmetic-theme="hellfire"] #screen-privacy .privacy-tab {
  border: 2px solid #3d2b21 !important;
  border-radius: 2px !important;
  background: #170f0b;
  font-family: var(--hf-ui);
  font-weight: 900;
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #b3927c;
}
html[data-cosmetic-theme="hellfire"] #screen-privacy .privacy-tab.active {
  background: linear-gradient(180deg, #ff9a3d, #c14a0d);
  border-color: #ffb066 !important;
  color: #2a0c02;
}
html[data-cosmetic-theme="hellfire"] #privacy-screen-content {
  border: 3px solid #3d2b21;
  border-radius: 2px;
  background: #0d0907;
}

/* ── LOBBY / PLAY: bolted selection plates ────────────────────────────── */
html[data-cosmetic-theme="hellfire"] #screen-lobby,
html[data-cosmetic-theme="hellfire"] #screen-play { overflow-y: auto; overscroll-behavior-y: contain; }
html[data-cosmetic-theme="hellfire"] #screen-lobby .mode-card,
html[data-cosmetic-theme="hellfire"] #screen-play .mode-card {
  min-height: 62px;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  gap: 9px;
  border: 3px solid #3d2b21;
  border-radius: 2px;
  background: linear-gradient(180deg, #241a15, #100a08);
  box-shadow: 0 4px 0 #080504;
}
html[data-cosmetic-theme="hellfire"] #screen-lobby .mode-card.active,
html[data-cosmetic-theme="hellfire"] #screen-play .mode-card.active,
html[data-cosmetic-theme="hellfire"] .room-pill.active {
  border-color: #ffb066;
  box-shadow: 0 0 20px rgba(255, 110, 30, .35), 0 4px 0 #080504;
  background: linear-gradient(180deg, #3a2418, #170e09);
}
html[data-cosmetic-theme="hellfire"] #screen-lobby .mc-info,
html[data-cosmetic-theme="hellfire"] #screen-play .mc-info { min-width: 0; align-items: flex-start; text-align: left; }
html[data-cosmetic-theme="hellfire"] #screen-lobby .mc-icon,
html[data-cosmetic-theme="hellfire"] #screen-play .mc-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 2px solid #6b4a36;
  border-radius: 2px;
  background: linear-gradient(180deg, #4a2a14, #24140a);
  color: #ffb066;
}
html[data-cosmetic-theme="hellfire"] #screen-lobby .mc-sub { text-align: left; line-height: 1.25; color: #b3927c; }

/* ── MATCH: the arena sits inside a welded frame with lit rivets ──────── */
html[data-cosmetic-theme="hellfire"] #screen-game[data-cosmetic-theme="hellfire"] .game-hud-bar,
html[data-cosmetic-theme="hellfire"] #screen-game .game-hud-bar {
  border: 3px solid #4a3327;
  border-radius: 2px;
  background: linear-gradient(180deg, #241a15, #0e0908);
  box-shadow: inset 0 1px 0 rgba(255, 205, 160, .18), 0 4px 0 #080504;
}
html[data-cosmetic-theme="hellfire"] #screen-game[data-cosmetic-theme="hellfire"] .board-arena-wrapper,
html[data-cosmetic-theme="hellfire"] #screen-game .board-arena-wrapper {
  position: relative;
  border: 3px solid #4a3327;
  border-radius: 2px;
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .6), 0 0 26px rgba(255, 96, 20, .16);
}
/* r558i — owner: "এই ডট বল সরাও"। বোর্ডের কোণে যে গোল ব্রোঞ্জ-ডট (rivet) ছিল,
   সেটাই স্ক্রিনে উড়ন্ত বলের মতো দেখাচ্ছিল — সম্পূর্ণ বাদ। */
html[data-cosmetic-theme="hellfire"] #screen-game .board-arena-wrapper::before,
html[data-cosmetic-theme="hellfire"] #screen-game .board-arena-wrapper::after {
  content: none;
  display: none;
}

/* ── result / wallet sheets ───────────────────────────────────────────── */
html[data-cosmetic-theme="hellfire"] .match-summary-card,
html[data-cosmetic-theme="hellfire"] .play-panel {
  border-radius: 2px;
  border: 3px solid #3d2b21;
  background: linear-gradient(180deg, #241a15, #0f0a08);
}

@media (max-width: 360px) {
  html[data-cosmetic-theme="hellfire"] .lb-title { font-size: 26px; }
  html[data-cosmetic-theme="hellfire"] .earn-screen .earn-title { font-size: 21px; }
}

/* ── EARN-এর স্পনসর-বার: হ্যাজার্ড রিবন, স্টেনসিল ক্যাপ ───────────────── */
html[data-cosmetic-theme="hellfire"] .earn-screen .earn-ad-strip,
html[data-cosmetic-theme="hellfire"] .earn-ad-strip.earn-ad-strip-solo {
  border: 2px solid #7c3a10;
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, rgba(255, 122, 26, .24) 0 9px, rgba(10, 6, 4, .92) 9px 18px);
}
html[data-cosmetic-theme="hellfire"] .earn-screen .earn-ad-strip-label {
  font-family: var(--hf-ui);
  font-weight: 900;
  font-size: 8px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #ffc98f;
}
html[data-cosmetic-theme="hellfire"] .earn-screen .earn-ad-strip-value,
html[data-cosmetic-theme="hellfire"] .earn-screen .earn-ad-strip-value b { color: #fff2e2; font-family: var(--hf-ui); font-weight: 900; }
html[data-cosmetic-theme="hellfire"] .earn-screen .monetag-banner-slot {
  border: 2px solid #3d2b21;
  border-top: 0;
  border-radius: 2px;
  background: #0e0908;
}
html[data-cosmetic-theme="hellfire"] .earn-screen .we-stat-k,
html[data-cosmetic-theme="hellfire"] .earn-screen .we-stat-s {
  font-family: var(--hf-ui);
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #b98f72;
}