/*
 * FROSTFIRE NIGHT — "Frosted Glass", screen compositions (r547)
 * ---------------------------------------------------------------------------
 * Same design language as theme-frostfire-app.css (mono type, hairlines,
 * clipped corners, frosted glass) applied screen by screen. This file exists
 * separately so the shell can load before the screens. Nothing here is shared
 * with Celestial Night or Hellfire Forge — no selector block is copied.
 */

/* ── FRIENDS: a ruled directory, not a carved book ─────────────────────── */
html[data-cosmetic-theme="frostfire"] #screen-friends .friends-book-head {
  padding: 10px 2px 8px;
  border-bottom: 1px solid rgba(178, 228, 250, .26);
}
html[data-cosmetic-theme="frostfire"] #screen-friends .friends-book-head h1 {
  font-family: var(--ff-mono);
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
html[data-cosmetic-theme="frostfire"] #screen-friends .friends-book-icon {
  border: 1px solid rgba(214, 245, 255, .5);
  border-radius: 0;
  color: #e8f8ff;
  background: rgba(190, 240, 255, .1);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
html[data-cosmetic-theme="frostfire"] #screen-friends #friends-list {
  border: 1px solid rgba(178, 228, 250, .18);
  border-radius: 0;
  background: rgba(150, 214, 240, .04);
  padding: 4px;
}
html[data-cosmetic-theme="frostfire"] #screen-friends .friends-filters {
  gap: 0;
  border: 1px solid rgba(178, 228, 250, .2);
  border-radius: 0;
  overflow: hidden;
}
html[data-cosmetic-theme="frostfire"] #screen-friends .friends-filters button {
  border-radius: 0;
  border-right: 1px solid rgba(178, 228, 250, .16);
  font-family: var(--ff-mono);
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: transparent;
}
html[data-cosmetic-theme="frostfire"] #screen-friends .friends-filters button[aria-pressed="true"] {
  background: linear-gradient(180deg, #d9f6ff, #9fd4ec);
  color: #04141f;
}
html[data-cosmetic-theme="frostfire"] #screen-friends .refer-card,
html[data-cosmetic-theme="frostfire"] #screen-friends .friends-find {
  border: 1px solid rgba(178, 228, 250, .22);
  border-radius: 0;
  background: rgba(150, 214, 240, .06);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
html[data-cosmetic-theme="frostfire"] #screen-friends .fs-find-btn,
html[data-cosmetic-theme="frostfire"] #screen-friends .refer-bar-actions button {
  border-radius: 0;
  border: 1px solid rgba(214, 245, 255, .5);
  background: rgba(214, 245, 255, .9);
  color: #04141f;
  font-family: var(--ff-mono);
  letter-spacing: .8px;
}

/* ── EARN: an instrument read-out with a measured bar ──────────────────── */
html[data-cosmetic-theme="frostfire"] .earn-screen .earn-hero {
  position: relative;
  border: 1px solid rgba(178, 228, 250, .26);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(190, 240, 255, .1), rgba(6, 20, 30, .72)),
    repeating-linear-gradient(0deg, rgba(190, 240, 255, .05) 0 1px, transparent 1px 26px);
  box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
html[data-cosmetic-theme="frostfire"] .earn-screen .earn-title {
  font-family: var(--ff-mono);
  font-size: 15px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
html[data-cosmetic-theme="frostfire"] .earn-screen .earn-badge {
  border: 1px solid rgba(214, 245, 255, .55);
  border-radius: 0;
  background: transparent;
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 1.4px;
  color: #bfeaff;
}
html[data-cosmetic-theme="frostfire"] .earn-screen .earn-card,
html[data-cosmetic-theme="frostfire"] .earn-screen .we-stat,
html[data-cosmetic-theme="frostfire"] .earn-screen .we-progress-card {
  border: 1px solid rgba(178, 228, 250, .2);
  border-radius: 0;
  background: rgba(150, 214, 240, .05);
  box-shadow: none;
}
html[data-cosmetic-theme="frostfire"] .earn-screen .we-play {
  border: 1px solid rgba(214, 245, 255, .5);
  border-radius: 0;
  background: rgba(214, 245, 255, .9);
  color: #04141f;
  font-family: var(--ff-mono);
  letter-spacing: 1px;
}
html[data-cosmetic-theme="frostfire"] .earn-screen .we-play:disabled {
  background: rgba(150, 214, 240, .1);
  color: #8fb4c8;
  border-color: rgba(178, 228, 250, .22);
}
html[data-cosmetic-theme="frostfire"] .earn-screen .we-play-cta {
  font-family: var(--ff-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── RANKS: a data table with hairline pods ───────────────────────────── */
html[data-cosmetic-theme="frostfire"] .lb-hero {
  border: 1px solid rgba(178, 228, 250, .24);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(190, 240, 255, .09), rgba(6, 20, 30, .6));
  box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
html[data-cosmetic-theme="frostfire"] .lb-title {
  font-family: var(--ff-mono);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
html[data-cosmetic-theme="frostfire"] .lb-kicker {
  border: 1px solid rgba(214, 245, 255, .5);
  border-radius: 0;
  background: transparent;
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 1.4px;
  color: #bfeaff;
}
html[data-cosmetic-theme="frostfire"] .lb-pod:not(.lb-pod-1) {
  border: 1px solid rgba(178, 228, 250, .2);
  border-radius: 0;
  background: rgba(150, 214, 240, .05);
  box-shadow: none;
}
html[data-cosmetic-theme="frostfire"] .lb-pod-1 {
  border: 1px solid rgba(214, 245, 255, .55);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(214, 245, 255, .16), rgba(6, 20, 30, .55));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
html[data-cosmetic-theme="frostfire"] .lb-pod-base {
  border-radius: 0;
  background: rgba(8, 24, 36, .85);
  border-top: 1px solid rgba(214, 245, 255, .45);
  font-family: var(--ff-mono);
}
html[data-cosmetic-theme="frostfire"] .lb-row {
  border: 1px solid rgba(178, 228, 250, .16);
  border-radius: 0;
  background: rgba(150, 214, 240, .04);
}

/* ── PROFILE: an ID plate full of hairlines, no parchment ─────────────── */
html[data-cosmetic-theme="frostfire"] .profile-hero {
  border: 1px solid rgba(178, 228, 250, .24);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(190, 240, 255, .08), rgba(6, 18, 28, .7));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
html[data-cosmetic-theme="frostfire"] .profile-hero-bg { opacity: .18; filter: saturate(.6) brightness(1.1); }
html[data-cosmetic-theme="frostfire"] .psg-card,
html[data-cosmetic-theme="frostfire"] .pa-tile {
  border: 1px solid rgba(178, 228, 250, .18);
  border-radius: 0;
  background: rgba(150, 214, 240, .05);
  box-shadow: none;
}
html[data-cosmetic-theme="frostfire"] #btn-open-gift-profile,
html[data-cosmetic-theme="frostfire"] .btn-app-download-card {
  border: 1px solid rgba(214, 245, 255, .45);
  border-radius: 0;
  background: rgba(190, 240, 255, .1);
  color: #e8f8ff;
  font-family: var(--ff-mono);
  letter-spacing: .8px;
}

/* ── PRIVACY: readable long-form on ruled glass ───────────────────────── */
html[data-cosmetic-theme="frostfire"] #screen-privacy .screen-topbar {
  padding: 9px 11px;
  border: 1px solid rgba(178, 228, 250, .26);
  border-radius: 0;
  background: rgba(8, 24, 36, .9);
}
html[data-cosmetic-theme="frostfire"] #privacy-screen-title {
  font-family: var(--ff-mono);
  font-size: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
html[data-cosmetic-theme="frostfire"] #btn-privacy-back,
html[data-cosmetic-theme="frostfire"] #screen-privacy .privacy-tab {
  border-radius: 0 !important;
  border: 1px solid rgba(178, 228, 250, .22);
  font-family: var(--ff-mono);
  font-size: 8.5px;
  letter-spacing: 1px;
  background: transparent;
}
html[data-cosmetic-theme="frostfire"] #screen-privacy .privacy-tab.active {
  background: linear-gradient(180deg, #d9f6ff, #9fd4ec);
  color: #04141f;
}
html[data-cosmetic-theme="frostfire"] #privacy-screen-content {
  border: 1px solid rgba(178, 228, 250, .18);
  border-radius: 0;
  background: rgba(150, 214, 240, .04);
}

/* ── LOBBY / PLAY: shop-window rows, everything left aligned ──────────── */
html[data-cosmetic-theme="frostfire"] #screen-lobby,
html[data-cosmetic-theme="frostfire"] #screen-play { overflow-y: auto; overscroll-behavior-y: contain; }
html[data-cosmetic-theme="frostfire"] #screen-lobby .mode-card,
html[data-cosmetic-theme="frostfire"] #screen-play .mode-card {
  min-height: 60px;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  gap: 9px;
  border-radius: 0;
  border: 1px solid rgba(178, 228, 250, .2);
  background: rgba(150, 214, 240, .05);
  box-shadow: none;
}
html[data-cosmetic-theme="frostfire"] #screen-lobby .mode-card.active,
html[data-cosmetic-theme="frostfire"] #screen-play .mode-card.active,
html[data-cosmetic-theme="frostfire"] .room-pill.active {
  border-color: rgba(214, 245, 255, .6);
  box-shadow: inset 0 0 0 1px rgba(214, 245, 255, .25);
  background: rgba(190, 240, 255, .12);
}
html[data-cosmetic-theme="frostfire"] #screen-lobby .mc-info,
html[data-cosmetic-theme="frostfire"] #screen-play .mc-info { min-width: 0; align-items: flex-start; text-align: left; }
html[data-cosmetic-theme="frostfire"] #screen-lobby .mc-icon,
html[data-cosmetic-theme="frostfire"] #screen-play .mc-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 245, 255, .4);
  border-radius: 0;
  background: rgba(190, 240, 255, .1);
}
html[data-cosmetic-theme="frostfire"] #screen-lobby .mc-sub { text-align: left; line-height: 1.25; color: #8fb4c8; }

/* ── MATCH: thin frame with four corner brackets (no arch, no glow) ───── */
html[data-cosmetic-theme="frostfire"] #screen-game[data-cosmetic-theme="frostfire"] .game-hud-bar,
html[data-cosmetic-theme="frostfire"] #screen-game .game-hud-bar {
  border: 1px solid rgba(178, 228, 250, .3);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(10, 28, 40, .98), rgba(5, 14, 22, .98));
  box-shadow: none;
}
html[data-cosmetic-theme="frostfire"] #screen-game[data-cosmetic-theme="frostfire"] .board-arena-wrapper,
html[data-cosmetic-theme="frostfire"] #screen-game .board-arena-wrapper {
  position: relative;
  border: 1px solid rgba(178, 228, 250, .3);
  border-radius: 0;
  box-shadow: none;
}
/* corner brackets only — the board, grid and pawns themselves are untouched */
html[data-cosmetic-theme="frostfire"] #screen-game .board-arena-wrapper::before,
html[data-cosmetic-theme="frostfire"] #screen-game .board-arena-wrapper::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  border-color: rgba(214, 245, 255, .75);
  border-style: solid;
}
html[data-cosmetic-theme="frostfire"] #screen-game .board-arena-wrapper::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}
html[data-cosmetic-theme="frostfire"] #screen-game .board-arena-wrapper::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 2px 2px 0;
}

/* ── wallet / result sheets ───────────────────────────────────────────── */
html[data-cosmetic-theme="frostfire"] .match-summary-card,
html[data-cosmetic-theme="frostfire"] .play-panel {
  border-radius: 0;
  border: 1px solid rgba(178, 228, 250, .22);
  background: rgba(150, 214, 240, .05);
}

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

/* ── EARN-এর স্পনসর-বার: হেয়ারলাইন, অ্যাম্বার নয় ───────────────────── */
html[data-cosmetic-theme="frostfire"] .earn-screen .earn-ad-strip,
html[data-cosmetic-theme="frostfire"] .earn-ad-strip.earn-ad-strip-solo {
  border: 1px solid rgba(178, 228, 250, .26);
  border-radius: 0;
  background: rgba(190, 240, 255, .07);
}
html[data-cosmetic-theme="frostfire"] .earn-screen .earn-ad-strip-label {
  font-family: var(--ff-mono);
  font-size: 8.5px;
  letter-spacing: 1.6px;
  color: #8fb4c8;
}
html[data-cosmetic-theme="frostfire"] .earn-screen .earn-ad-strip-value,
html[data-cosmetic-theme="frostfire"] .earn-screen .earn-ad-strip-value b { color: #e8f8ff; font-family: var(--ff-mono); }
html[data-cosmetic-theme="frostfire"] .earn-screen .monetag-banner-slot {
  border: 1px solid rgba(178, 228, 250, .2);
  border-top: 0;
  border-radius: 0;
  background: rgba(150, 214, 240, .04);
}
html[data-cosmetic-theme="frostfire"] .earn-screen .we-stat-k,
html[data-cosmetic-theme="frostfire"] .earn-screen .we-stat-s {
  font-family: var(--ff-mono);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #8fb4c8;
}