/* THARKIRA — RITUAL OF EMBERS
   Production UI component. All selectors are namespaced with firstFlameRitual.
*/
:root {
  --firstFlameRitualBg:#06070a;
  --firstFlameRitualPanel:#0e1118;
  --firstFlameRitualGold:#d9ac5d;
  --firstFlameRitualFire:#f06d2e;
  --firstFlameRitualText:#efe5d4;
  --firstFlameRitualMuted:#a39382;
  --firstFlameRitualRare:#68c0ff;
  --firstFlameRitualEpic:#b176ff;
  --firstFlameRitualLegendary:#ffd76f;
  --firstFlameRitualMythic:#ff6b61;
}

html,
body {
  margin:0;
  min-width:100%;
  min-height:100%;
  background:transparent;
}

#firstFlameRitualRoot,
#firstFlameRitualRoot * { box-sizing:border-box; }

#firstFlameRitualRoot {
  position:fixed;
  inset:0;
  z-index:9999;
  color:var(--firstFlameRitualText);
  font-family:Georgia,"Times New Roman",serif;
}

#firstFlameRitualRoot[data-state="CLOSED"] { display:none; }

#firstFlameRitualRoot img { display:block; max-width:100%; }
#firstFlameRitualRoot .firstFlameRitualPixelArt { image-rendering:pixelated; }

.firstFlameRitualSrOnly {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.firstFlameRitualOverlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    max(12px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    max(12px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left));
  overflow:hidden;
  background:#020305;
}

.firstFlameRitualOverlay::before {
  content:"";
  position:absolute;
  inset:-12px;
  z-index:0;
  background:
    linear-gradient(rgba(0,2,5,.72),rgba(0,2,5,.72)),
    url("../../../../assets/generated/game-main/tavern-background-wolf-eyes-v305.webp?v=305-wolf-eyes") center/cover no-repeat;
  filter:blur(6px) saturate(.68) brightness(.58);
  transform:scale(1.025);
}

.firstFlameRitualShell {
  position:relative;
  width:min(
    1100px,
    calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),
    calc((100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.777778)
  );
  max-width:1100px;
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:26px;
  background:
    linear-gradient(180deg,rgba(9,11,16,.94),rgba(7,9,14,.96)),
    url("./assets/ritual-background.webp") center/cover no-repeat;
  border:1px solid rgba(216,172,88,.18);
  box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.03) inset;
  z-index:1;
}

.firstFlameRitualShell::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 78%,rgba(255,115,41,.09),transparent 26%),
    linear-gradient(180deg,rgba(7,9,13,.42),rgba(7,9,13,.18) 46%,rgba(7,9,13,.48));
  z-index:0;
}

.firstFlameRitualCloseButton,
.firstFlameRitualModalClose,
.firstFlameRitualSkipButton,
.firstFlameRitualNavButton,
.firstFlameRitualPullButton,
.firstFlameRitualTextButton,
.firstFlameRitualPrimaryButton,
.firstFlameRitualSecondaryButton,
.firstFlameRitualExchangeButton {
  font:inherit;
  min-width:44px;
  min-height:44px;
}

.firstFlameRitualCloseButton {
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  z-index:120;
  border-radius:13px;
  border:1px solid rgba(216,172,88,.22);
  background:linear-gradient(180deg,rgba(31,23,18,.96),rgba(13,15,21,.96));
  color:#f1d3a0;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

.firstFlameRitualCloseButton:hover { transform:translateY(-1px); color:#fff3d2; }

.firstFlameRitualApp {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:184px minmax(0,1fr) 252px;
}

.firstFlameRitualSidebar,
.firstFlameRitualRightbar {
  min-height:0;
  overflow:auto;
  padding:12px;
  background:linear-gradient(180deg,rgba(9,11,17,.78),rgba(8,10,15,.91));
  scrollbar-width:thin;
  scrollbar-color:rgba(216,172,88,.36) rgba(9,11,17,.2);
}

.firstFlameRitualSidebar { border-right:1px solid rgba(216,172,88,.12); display:flex; flex-direction:column; gap:9px; }
.firstFlameRitualRightbar { border-left:1px solid rgba(216,172,88,.12); display:flex; flex-direction:column; gap:10px; }

.firstFlameRitualLogoCard,
.firstFlameRitualPanel,
.firstFlameRitualArchiveItem,
.firstFlameRitualExchangeItem,
.firstFlameRitualHistoryRow,
.firstFlameRitualModalBox,
.firstFlameRitualMemoryCard {
  background:linear-gradient(180deg,rgba(17,20,29,.94),rgba(9,11,17,.94));
  border:1px solid rgba(216,172,88,.15);
  box-shadow:0 15px 38px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.02);
}

.firstFlameRitualLogoCard { padding:10px; border-radius:18px; overflow:hidden; }
.firstFlameRitualLogoCard img { width:100%; border-radius:12px; }

.firstFlameRitualNavTitle {
  color:#786c61;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:0 7px;
}

.firstFlameRitualNavButton {
  width:100%;
  text-align:left;
  padding:10px 11px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  color:#b7ab9a;
  cursor:pointer;
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.firstFlameRitualNavButton:hover {
  background:rgba(255,255,255,.025);
  border-color:rgba(216,172,88,.12);
  color:#ead9c3;
}

.firstFlameRitualNavButton.firstFlameRitualIsActive {
  background:linear-gradient(90deg,rgba(191,91,34,.28),rgba(34,24,19,.45));
  border-color:rgba(255,152,66,.34);
  color:#fff0ca;
  box-shadow:inset 3px 0 0 #ef8039,0 0 20px rgba(239,110,40,.09);
}

.firstFlameRitualSidebarQuote {
  margin-top:auto;
  padding:8px;
  text-align:center;
  color:#9c8d7d;
  font-size:13px;
  line-height:1.45;
  font-style:italic;
}

.firstFlameRitualSidebarFoot {
  text-align:center;
  color:#665d55;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.firstFlameRitualMain {
  min-width:0;
  min-height:0;
  padding:9px 10px;
  overflow:hidden;
}

.firstFlameRitualView { display:none; height:100%; }
.firstFlameRitualView.firstFlameRitualIsActive { display:block; animation:firstFlameRitualFadeIn .24s ease; }
#firstFlameRitualViewArchive,
#firstFlameRitualViewExchange,
#firstFlameRitualViewHistory { overflow:auto; padding:6px 4px 6px 2px; }

@keyframes firstFlameRitualFadeIn {
  from { opacity:0; transform:translateY(5px); }
  to { opacity:1; transform:none; }
}

.firstFlameRitualScene {
  position:relative;
  height:100%;
  overflow:hidden;
  border-radius:22px;
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(180deg,rgba(11,14,21,.72),rgba(10,11,16,.88)),
    url("./assets/ritual-background.webp") center/cover no-repeat;
  border:1px solid rgba(216,172,88,.14);
  box-shadow:0 16px 38px rgba(0,0,0,.38);
}

.firstFlameRitualScene::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,13,.54),rgba(7,9,13,.24) 38%,rgba(7,9,13,.54));
}

.firstFlameRitualScene > * { position:relative; z-index:1; }

.firstFlameRitualFireVoice {
  margin:0 auto 7px;
  max-width:590px;
  padding:7px 12px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(17,19,26,.94),rgba(11,13,18,.94));
  border:1px solid rgba(216,172,88,.16);
  text-align:center;
  color:#c9b398;
  font-size:14px;
  font-style:italic;
}

.firstFlameRitualFireStage {
  position:relative;
  flex:1;
  min-height:0;
  width:100%;
  max-width:700px;
  margin:0 auto;
}

.firstFlameRitualFireStage::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:76%;
  height:105px;
  transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,125,42,.24),rgba(203,71,28,.09) 42%,transparent 76%);
  filter:blur(16px);
  transition:.25s;
}

.firstFlameRitualHearthShell {
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:-74px auto -36px;
}

.firstFlameRitualHearthLogoFloating {
  position:absolute;
  left:50%;
  top:10px;
  transform:translateX(-50%);
  width:min(390px,68%);
  z-index:6;
  pointer-events:none;
}

.firstFlameRitualHearthLogoFloating img {
  width:100%;
  filter:drop-shadow(0 0 18px rgba(255,111,26,.2)) drop-shadow(0 9px 22px rgba(0,0,0,.46));
}

.firstFlameRitualHearthFrame {
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.firstFlameRitualHearthFrame > img {
  width:132%;
  max-width:none;
  transform:translateY(18px) scale(1.03);
  transform-origin:center;
  border-radius:17px;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.34));
}

.firstFlameRitualEmbersCanvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.firstFlameRitualPullRow {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:min(570px,100%);
  margin:3px auto 0;
  align-items:center;
}

.firstFlameRitualPullButton {
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  line-height:0;
  transition:transform .18s ease,filter .18s ease;
}

.firstFlameRitualPullButton img {
  width:100%;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 9px 15px rgba(0,0,0,.42));
}

.firstFlameRitualPullButton:hover:not(:disabled) {
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.08);
}

.firstFlameRitualPullButton:active:not(:disabled) { transform:scale(.985); }

/* V572: o preco saiu da arte e virou texto, alimentado pelo servidor. Fica no
   lugar exato onde a arte tinha o preco pintado, ao lado das moedas. */
.firstFlameRitualPullPrice {
  position:absolute;
  left:44.5%;
  top:58%;
  width:33%;
  height:16%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  line-height:1;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  font-size:clamp(13px,6.4cqw,34px);
  color:#f6ead2;
  letter-spacing:.01em;
  text-shadow:0 2px 0 #3a1a06,0 0 10px rgba(0,0,0,.65);
  white-space:nowrap;
  pointer-events:none;
}
.firstFlameRitualPullButton { container-type:inline-size; }
.firstFlameRitualPullBadge {
  position:absolute;
  left:50%;
  top:79%;
  transform:translateX(-50%);
  padding:2px 9px;
  border-radius:999px;
  background:rgba(20,10,4,.72);
  box-shadow:inset 0 0 0 1px rgba(240,190,110,.45);
  color:#ffd98a;
  font:700 11px/1.4 Georgia,"Times New Roman",serif;
  letter-spacing:.08em;
  white-space:nowrap;
  pointer-events:none;
}
.firstFlameRitualPullBadge[hidden] { display:none; }
.firstFlameRitualPullButton:disabled { opacity:.46; cursor:not-allowed; filter:saturate(.5) brightness(.74); }

.firstFlameRitualOddsLink { text-align:center; margin-top:2px; }
.firstFlameRitualTextButton {
  border:0;
  background:none;
  color:#d7bb93;
  cursor:pointer;
  font-size:10px;
  letter-spacing:.17em;
}
.firstFlameRitualTextButton:hover { color:#fff0cc; }

.firstFlameRitualBottomQuote {
  text-align:center;
  color:#947f6a;
  font-size:8px;
  letter-spacing:.25em;
  text-transform:uppercase;
}

.firstFlameRitualRightWallet {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.firstFlameRitualCurrency {
  min-width:0;
  padding:9px 10px;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(17,20,28,.95),rgba(9,11,16,.95));
  border:1px solid rgba(216,172,88,.18);
}

.firstFlameRitualCurrency small {
  display:block;
  color:#9c8c79;
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.firstFlameRitualCurrency strong {
  display:block;
  margin-top:3px;
  color:#f2ddbe;
  font-size:18px;
  line-height:1;
}

.firstFlameRitualPanel { padding:11px; border-radius:16px; }
.firstFlameRitualPanel h3 { margin:0 0 9px; color:#f2d6a5; font-size:15px; letter-spacing:.05em; }

.firstFlameRitualPity { display:grid; gap:10px; }
.firstFlameRitualPityRow { display:grid; gap:5px; }
.firstFlameRitualLabels,
.firstFlameRitualProgressHead { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.firstFlameRitualLabels strong,
.firstFlameRitualProgressHead span { color:#ead2ad; font-size:13px; }
.firstFlameRitualLabels span,
.firstFlameRitualProgressHead strong { color:#aa9b87; font-size:10px; }

.firstFlameRitualBar {
  position:relative;
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(8,10,16,.96),rgba(17,20,28,.96));
  border:1px solid rgba(216,172,88,.14);
}

.firstFlameRitualBar span {
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#f5c96f,#f07030);
  transition:width .25s ease;
}

.firstFlameRitualBar.firstFlameRitualIsRare span { background:linear-gradient(90deg,#4f8bd6,#7fd3ff); }
.firstFlameRitualBar.firstFlameRitualIsEpic span { background:linear-gradient(90deg,#8954ea,#cb8dff); }
.firstFlameRitualBar.firstFlameRitualIsLegendary span { background:linear-gradient(90deg,#d6a74f,#ffe48a); }

.firstFlameRitualHeroBox {
  margin-top:11px;
  padding:10px;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(14,17,25,.95),rgba(10,11,17,.95));
  border:1px solid rgba(216,172,88,.15);
}

.firstFlameRitualHeroHead { display:flex; align-items:center; gap:9px; }
.firstFlameRitualAvatar {
  width:46px;
  height:46px;
  flex:0 0 46px;
  overflow:hidden;
  border-radius:13px;
  background:#0b0f16;
  border:1px solid rgba(216,172,88,.18);
}
.firstFlameRitualAvatar img { width:100%; height:100%; object-fit:cover; }
.firstFlameRitualHeroHead strong { display:block; color:#f2ddbc; font-size:15px; }
.firstFlameRitualHeroHead small { display:block; margin-top:3px; color:#998b7b; font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.firstFlameRitualHeroProgress { margin-top:9px; }

.firstFlameRitualSectionTitle {
  margin:0;
  color:#f3deba;
  font-size:30px;
  letter-spacing:.05em;
}

.firstFlameRitualSectionSub {
  margin:6px 0 16px;
  color:#9c9084;
  font-size:13px;
  max-width:720px;
}

.firstFlameRitualArchiveGrid,
.firstFlameRitualExchangeGrid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:11px;
}

.firstFlameRitualHistoryList { display:grid; gap:9px; }

.firstFlameRitualArchiveItem,
.firstFlameRitualExchangeItem {
  padding:15px;
  border-radius:17px;
  text-align:center;
}

.firstFlameRitualArchiveIcon,
.firstFlameRitualExchangeIcon { font-size:32px; margin-bottom:8px; }
/* V573: arte real do item (peca, runa, selo, pet, skin, Arcane Sage). */
.firstFlameRitualHistoryIcon img { display:block; width:100%; height:100%; object-fit:contain; }
.firstFlameRitualExchangeIcon img { display:block; width:64px; height:64px; margin:0 auto; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 4px 8px rgba(0,0,0,.55)); }

.firstFlameRitualArchiveItem strong,
.firstFlameRitualExchangeItem strong { display:block; color:#f3e1c1; font-size:16px; }

.firstFlameRitualStatus {
  margin-top:7px;
  color:#a29180;
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.firstFlameRitualStatus.firstFlameRitualIsRemembered { color:#f3d18d; }

.firstFlameRitualCost { margin-top:7px; color:#e5c49a; font-size:13px; }

.firstFlameRitualExchangeButton {
  margin-top:10px;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(255,152,58,.28);
  cursor:pointer;
  background:linear-gradient(180deg,#271611,#11131b);
  color:#f5ddb7;
  font-size:9px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.firstFlameRitualExchangeButton:disabled { opacity:.45; cursor:not-allowed; }

.firstFlameRitualHistoryRow {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border-radius:15px;
}

.firstFlameRitualHistoryIcon {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:13px;
  font-size:23px;
  background:linear-gradient(180deg,rgba(20,24,34,.96),rgba(10,12,19,.95));
  border:1px solid rgba(255,255,255,.05);
}

.firstFlameRitualHistoryMain strong { display:block; color:#efdec3; font-size:15px; }
.firstFlameRitualHistoryMain small { display:block; margin-top:3px; color:#9f9284; font-size:10px; }

.firstFlameRitualRarityPill {
  padding:7px 9px;
  border-radius:999px;
  border:1px solid rgba(216,172,88,.16);
  font-size:8px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

[data-rarity="COMMON"] .firstFlameRitualRarityText,
.firstFlameRitualRarityPill[data-rarity="COMMON"] { color:#d8d1c4; }
[data-rarity="RARE"] .firstFlameRitualRarityText,
.firstFlameRitualRarityPill[data-rarity="RARE"] { color:var(--firstFlameRitualRare); }
[data-rarity="EPIC"] .firstFlameRitualRarityText,
.firstFlameRitualRarityPill[data-rarity="EPIC"] { color:var(--firstFlameRitualEpic); }
[data-rarity="LEGENDARY"] .firstFlameRitualRarityText,
.firstFlameRitualRarityPill[data-rarity="LEGENDARY"] { color:var(--firstFlameRitualLegendary); }
[data-rarity="MYTHIC"] .firstFlameRitualRarityText,
.firstFlameRitualRarityPill[data-rarity="MYTHIC"] { color:var(--firstFlameRitualMythic); }

.firstFlameRitualEmpty {
  padding:16px;
  border-radius:15px;
  color:#9a8e82;
  background:linear-gradient(180deg,rgba(15,18,27,.9),rgba(10,11,17,.92));
  border:1px solid rgba(216,172,88,.12);
}

.firstFlameRitualModal {
  position:absolute;
  inset:0;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(5,6,10,.82);
}
.firstFlameRitualModal.firstFlameRitualIsOpen { display:flex; }

.firstFlameRitualModalBox {
  position:relative;
  width:min(670px,94%);
  max-height:88%;
  overflow:auto;
  padding:22px 20px 20px;
  border-radius:21px;
}

.firstFlameRitualModalClose {
  position:absolute;
  top:11px;
  right:11px;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(216,172,88,.18);
  background:#11131b;
  color:#ecd6b2;
  cursor:pointer;
  font-size:22px;
}

.firstFlameRitualModalBox h2 { margin:0 0 8px; color:#f0ddb9; font-size:26px; }
.firstFlameRitualModalBox p { color:#a99986; line-height:1.55; font-size:13px; }

.firstFlameRitualTableScroller { overflow:auto; }
.firstFlameRitualOddsTable { width:100%; border-collapse:collapse; margin-top:12px; }
.firstFlameRitualOddsTable th,
.firstFlameRitualOddsTable td {
  padding:9px 8px;
  border-bottom:1px solid rgba(216,172,88,.10);
  text-align:left;
}
.firstFlameRitualOddsTable th {
  color:#dcbf90;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.firstFlameRitualOddsTable td { color:#e6d6bf; font-size:12px; }

.firstFlameRitualEyebrow {
  color:#866b4d;
  font-size:9px;
  letter-spacing:.3em;
  text-transform:uppercase;
}

.firstFlameRitualConfirmBox,
.firstFlameRitualErrorBox { text-align:center; width:min(500px,94%); }

.firstFlameRitualConfirmActions {
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:17px;
}

.firstFlameRitualPrimaryButton,
.firstFlameRitualSecondaryButton {
  padding:11px 18px;
  border-radius:13px;
  cursor:pointer;
  letter-spacing:.1em;
  font-size:10px;
}

.firstFlameRitualPrimaryButton {
  border:1px solid #795033;
  color:#f5ddb7;
  background:linear-gradient(180deg,#2c1a12,#11131b);
}

.firstFlameRitualSecondaryButton {
  border:1px solid rgba(216,172,88,.18);
  color:#bca98f;
  background:#10131a;
}

.firstFlameRitualSummonOverlay {
  position:absolute;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:auto;
  background:rgba(7,8,12,.30);
}

.firstFlameRitualSummonOverlay.firstFlameRitualIsOpen { display:flex; }
.firstFlameRitualSummonOverlay.firstFlameRitualIsMythic { background:rgba(0,0,0,.84); }

.firstFlameRitualSkipButton {
  position:absolute;
  top:14px;
  right:14px;
  z-index:5;
  padding:9px 13px;
  border-radius:12px;
  border:1px solid rgba(216,172,88,.22);
  background:rgba(15,16,22,.9);
  color:#dfc49b;
  cursor:pointer;
  letter-spacing:.12em;
  font-size:9px;
}

.firstFlameRitualWaitingMessage {
  position:absolute;
  bottom:18%;
  color:#c8b59c;
  font-size:16px;
  font-style:italic;
  text-shadow:0 2px 10px #000;
}

.firstFlameRitualWolfSpirit {
  position:absolute;
  left:50%;
  top:50%;
  width:min(330px,38%);
  opacity:0;
  z-index:3;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 22px rgba(255,100,35,.85)) drop-shadow(0 0 65px rgba(255,208,129,.34));
}

.firstFlameRitualWolfSpirit.firstFlameRitualIsLaunching {
  animation:firstFlameRitualWolfBurst .98s cubic-bezier(.18,.74,.18,1) forwards;
}

@keyframes firstFlameRitualWolfBurst {
  0% { opacity:0; transform:translate(calc(-50% + var(--firstFlameRitualStartX,0px)),calc(-50% + var(--firstFlameRitualStartY,0px))) scale(.10); }
  18% { opacity:1; }
  65% { opacity:1; transform:translate(-50%,-50%) scale(.72); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.28); }
}

.firstFlameRitualFlash {
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,4,0,0) 0%,rgba(51,8,0,.08) 18%,rgba(126,23,0,.32) 40%,rgba(216,67,9,.65) 63%,rgba(255,144,24,.92) 82%,rgba(255,231,148,.96) 100%),
    radial-gradient(circle at 26% 108%,rgba(255,231,145,.98) 0 7%,rgba(255,121,30,.9) 8% 16%,transparent 17%),
    radial-gradient(circle at 58% 108%,rgba(255,237,157,.98) 0 7%,rgba(255,116,28,.88) 8% 16%,transparent 17%),
    radial-gradient(circle at 89% 109%,rgba(255,237,157,.98) 0 7%,rgba(255,124,31,.88) 8% 16%,transparent 17%);
  filter:blur(6px) saturate(1.2);
}

.firstFlameRitualFlash.firstFlameRitualIsActive {
  animation:firstFlameRitualFireConsume 1.12s cubic-bezier(.16,.76,.18,1) forwards;
}

@keyframes firstFlameRitualFireConsume {
  0% { opacity:0; transform:translateY(22%) scaleY(.55); }
  22% { opacity:.95; transform:translateY(8%) scaleY(.8); }
  52% { opacity:1; transform:translateY(0) scaleY(1.05); }
  78% { opacity:.96; transform:translateY(-2%) scaleY(1.08); }
  100% { opacity:0; transform:translateY(-5%) scaleY(1.12); }
}

.firstFlameRitualFireStage.firstFlameRitualIsCharging::before { filter:blur(18px) brightness(1.35); transform:translateX(-50%) scale(1.08); }
.firstFlameRitualFireStage[data-rarity="RARE"]::before { background:radial-gradient(ellipse,rgba(128,198,255,.34),rgba(66,114,255,.14) 38%,transparent 76%); }
.firstFlameRitualFireStage[data-rarity="EPIC"]::before { background:radial-gradient(ellipse,rgba(199,130,255,.36),rgba(109,72,161,.16) 38%,transparent 76%); }
.firstFlameRitualFireStage[data-rarity="LEGENDARY"]::before { background:radial-gradient(ellipse,rgba(255,218,123,.45),rgba(255,151,59,.2) 38%,transparent 76%); }
.firstFlameRitualFireStage[data-rarity="MYTHIC"]::before { background:radial-gradient(ellipse,rgba(255,255,255,.28),rgba(255,90,66,.24) 32%,rgba(29,0,0,.3) 54%,transparent 76%); }

.firstFlameRitualResultOverlay {
  position:absolute;
  inset:0;
  z-index:110;
  display:none;
  padding:22px 16px;
  overflow:auto;
  background:rgba(0,0,0,.92);
}
.firstFlameRitualResultOverlay.firstFlameRitualIsOpen { display:block; }

.firstFlameRitualResultWrap {
  min-height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.firstFlameRitualResultWrap h2 {
  margin:6px 0 14px;
  color:#e2c69f;
  font-size:32px;
  letter-spacing:.13em;
  font-weight:500;
  text-align:center;
}

.firstFlameRitualResultGrid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,170px));
  justify-content:center;
  gap:10px;
  width:100%;
}

.firstFlameRitualResultGrid.firstFlameRitualIsSingle {
  grid-template-columns:minmax(0,210px);
}

.firstFlameRitualMemoryCard {
  min-height:136px;
  padding:12px 8px;
  border-radius:15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  animation:firstFlameRitualCardPop .32s both;
}

@keyframes firstFlameRitualCardPop {
  from { opacity:0; transform:translateY(9px) scale(.95); }
  to { opacity:1; transform:none; }
}

.firstFlameRitualMemoryIcon { height:34px; display:flex; justify-content:center; align-items:center; font-size:27px; }
.firstFlameRitualMemoryIcon img { width:34px; height:34px; object-fit:contain; }
.firstFlameRitualMemoryRarity { margin:6px 0 4px; font-size:8px; letter-spacing:.14em; }
.firstFlameRitualMemoryName { color:#ddd0bd; font-size:11px; }
.firstFlameRitualMemoryQuantity { margin-top:4px; color:#8b8177; font-size:9px; line-height:1.3; }

.firstFlameRitualMemoryCard[data-rarity="RARE"] { border-color:#345c82; }
.firstFlameRitualMemoryCard[data-rarity="EPIC"] { border-color:#654191; box-shadow:0 0 18px rgba(139,82,208,.12); }
.firstFlameRitualMemoryCard[data-rarity="LEGENDARY"] { border-color:#9c7629; box-shadow:0 0 24px rgba(255,190,52,.16); }
.firstFlameRitualMemoryCard[data-rarity="MYTHIC"] { border-color:#9b3d35; box-shadow:0 0 28px rgba(255,70,50,.21); }

.firstFlameRitualResultWrap > .firstFlameRitualPrimaryButton { margin-top:16px; }

.firstFlameRitualToast {
  position:absolute;
  left:50%;
  bottom:16px;
  z-index:140;
  transform:translateX(-50%) translateY(16px);
  opacity:0;
  pointer-events:none;
  padding:10px 14px;
  border:1px solid rgba(216,172,88,.18);
  border-radius:13px;
  background:#17120e;
  color:#d9c6ab;
  font-size:10px;
  transition:.2s;
  box-shadow:0 9px 28px rgba(0,0,0,.5);
}
.firstFlameRitualToast.firstFlameRitualIsShowing { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:900px) {
  .firstFlameRitualApp { grid-template-columns:136px minmax(0,1fr) 190px; }
  .firstFlameRitualSidebar { padding:8px; gap:6px; }
  .firstFlameRitualRightbar { padding:8px; gap:7px; }
  .firstFlameRitualLogoCard { padding:6px; }
  .firstFlameRitualNavButton { padding:7px 8px; min-height:44px; font-size:9px; }
  .firstFlameRitualSidebarQuote { font-size:10px; }
  .firstFlameRitualCurrency strong { font-size:14px; }
  .firstFlameRitualPanel h3 { font-size:12px; }
  .firstFlameRitualHeroHead small { display:none; }
  .firstFlameRitualHeroHead strong { font-size:12px; }
  .firstFlameRitualHearthLogoFloating { top:64px; width:min(270px,58%); }
  .firstFlameRitualResultGrid { grid-template-columns:repeat(5,minmax(0,130px)); }
}

@media (max-width:680px) {
  .firstFlameRitualApp { grid-template-columns:92px minmax(0,1fr); }
  .firstFlameRitualRightbar { display:none; }
  .firstFlameRitualLogoCard { display:none; }
  .firstFlameRitualNavTitle,
  .firstFlameRitualSidebarQuote,
  .firstFlameRitualSidebarFoot { display:none; }
  .firstFlameRitualNavButton { text-align:center; font-size:0; padding:4px; }
  .firstFlameRitualNavButton::first-letter { font-size:18px; }
  .firstFlameRitualHearthLogoFloating { top:56px; }
  .firstFlameRitualPullRow { width:92%; }
  .firstFlameRitualResultGrid { grid-template-columns:repeat(2,minmax(0,150px)); }
}

/* V498 — celular deitado (~390 px de altura): a moldura 16:9 cortava o topo
   (logo, contadores). Aqui ela ocupa a tela e rola, com o conteudo no tamanho
   de sempre, legivel. */
@media (orientation:landscape) and (max-height:520px) {
  .firstFlameRitualShell { width:calc(100vw - 12px); height:calc(100dvh - 12px); max-height:none; aspect-ratio:auto; overflow-y:auto; border-radius:14px; }
  .firstFlameRitualApp { height:auto; min-height:560px; }
}

@media (prefers-reduced-motion:reduce) {
  #firstFlameRitualRoot *,
  #firstFlameRitualRoot *::before,
  #firstFlameRitualRoot *::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

html.firstFlameRitualReduceMotionV315 #firstFlameRitualRoot *,
html.firstFlameRitualReduceMotionV315 #firstFlameRitualRoot *::before,
html.firstFlameRitualReduceMotionV315 #firstFlameRitualRoot *::after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important;
  scroll-behavior:auto!important;
}
html.firstFlameRitualReduceFlashesV315 .firstFlameRitualFlash{display:none!important}
html.firstFlameRitualReduceFlashesV315 .firstFlameRitualSummonOverlay{filter:brightness(.82)}

/* ==========================================================
   FINAL HEARTH COMPOSITION — approved visual reference
   Fireplace fills the complete center panel, zoomed, lowered,
   with title between wolf and hearth and summon buttons on floor.
   ========================================================== */
#firstFlameRitualViewRemember {
  position:relative;
  overflow:hidden;
}

#firstFlameRitualViewRemember .firstFlameRitualScene {
  position:relative;
  height:100%;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:#05070a;
}

#firstFlameRitualViewRemember .firstFlameRitualScene::after {
  z-index:2;
  background:
    linear-gradient(180deg,rgba(2,3,5,.08) 0%,rgba(2,3,5,0) 34%,rgba(3,4,6,.03) 56%,rgba(3,4,6,.22) 78%,rgba(3,4,6,.64) 100%),
    radial-gradient(ellipse at 50% 58%,transparent 0 48%,rgba(0,0,0,.10) 74%,rgba(0,0,0,.34) 100%);
}

#firstFlameRitualViewRemember .firstFlameRitualScene > * {
  position:absolute;
}

#firstFlameRitualViewRemember .firstFlameRitualFireVoice {
  display:none;
}

#firstFlameRitualViewRemember .firstFlameRitualFireStage {
  inset:0;
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  z-index:1;
}

#firstFlameRitualViewRemember .firstFlameRitualFireStage::before {
  left:50%;
  bottom:15%;
  width:60%;
  height:27%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(255,126,37,.22),rgba(215,72,21,.08) 44%,transparent 75%);
  filter:blur(22px);
}

#firstFlameRitualViewRemember .firstFlameRitualHearthShell {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  margin:0;
}

#firstFlameRitualViewRemember .firstFlameRitualHearthFrame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:20px;
}

#firstFlameRitualViewRemember .firstFlameRitualHearthFrame > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  border-radius:0;
  transform:translateY(4.6%) scale(1.19);
  transform-origin:center center;
  filter:saturate(1.04) contrast(1.03) brightness(.98);
}

#firstFlameRitualViewRemember .firstFlameRitualEmbersCanvas {
  z-index:3;
}

#firstFlameRitualViewRemember .firstFlameRitualHearthLogoFloating {
  left:50%;
  top:8.8%;
  width:min(470px,68%);
  transform:translateX(-50%);
  z-index:6;
}

#firstFlameRitualViewRemember .firstFlameRitualHearthLogoFloating img {
  width:100%;
  filter:
    drop-shadow(0 0 10px rgba(255,91,10,.42))
    drop-shadow(0 0 25px rgba(255,119,27,.22))
    drop-shadow(0 9px 18px rgba(0,0,0,.68));
}

#firstFlameRitualViewRemember .firstFlameRitualPullRow {
  left:50%;
  bottom:8.2%;
  width:min(660px,88%);
  margin:0;
  transform:translateX(-50%);
  grid-template-columns:1fr 1fr;
  gap:16px;
  z-index:8;
}

#firstFlameRitualViewRemember .firstFlameRitualPullButton img {
  width:100%;
  filter:
    drop-shadow(0 11px 16px rgba(0,0,0,.62))
    drop-shadow(0 0 8px rgba(255,115,25,.12));
}

#firstFlameRitualViewRemember .firstFlameRitualOddsLink {
  left:0;
  right:0;
  bottom:4.05%;
  margin:0;
  text-align:center;
  z-index:8;
}

#firstFlameRitualViewRemember .firstFlameRitualBottomQuote {
  left:0;
  right:0;
  bottom:1.75%;
  z-index:8;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}

@media (max-width:900px) {
  #firstFlameRitualViewRemember .firstFlameRitualHearthFrame > img {
    transform:translateY(4.8%) scale(1.20);
  }
  #firstFlameRitualViewRemember .firstFlameRitualHearthLogoFloating {
    top:9.4%;
    width:min(420px,70%);
  }
  #firstFlameRitualViewRemember .firstFlameRitualPullRow {
    bottom:8.4%;
    width:90%;
    gap:10px;
  }
}

@media (max-width:680px) {
  #firstFlameRitualViewRemember .firstFlameRitualHearthFrame > img {
    transform:translateY(5%) scale(1.23);
  }
  #firstFlameRitualViewRemember .firstFlameRitualHearthLogoFloating {
    top:10.2%;
    width:74%;
  }
  #firstFlameRitualViewRemember .firstFlameRitualPullRow {
    bottom:9%;
    width:94%;
    gap:5px;
  }
  #firstFlameRitualViewRemember .firstFlameRitualOddsLink { bottom:4.4%; }
  #firstFlameRitualViewRemember .firstFlameRitualBottomQuote { bottom:1.9%; }
}