/* GENERATED by tools/maintenance/build-ui.cjs. Edit ui/styles sources. */

/* SOURCE: ui/styles/foundation/styles.css */
:root {
  color-scheme: dark;
  --bg: #151619;
  --panel: #20232a;
  --panel-2: #292d36;
  --line: #3b414e;
  --text: #f3f4f8;
  --muted: #c4cad6;
  --coin: #f5c55a;
  --red: #f06d6d;
  --green: #6ee7a0;
  --cyan: #6ad6ff;
  --violet: #b896ff;
  --orange: #ff9b63;
  --cell: #171a20;
  --empty: #242933;
  --ui-panel-blue: url("assets/vendor/kenney_ui_rpg/PNG/panel_blue.png");
  --ui-panel-brown: url("assets/vendor/kenney_ui_rpg/PNG/panel_brown.png");
  --ui-panel-beige: url("assets/vendor/kenney_ui_rpg/PNG/panel_beige.png");
  --ui-button-blue: url("assets/vendor/kenney_ui_rpg/PNG/buttonLong_blue.png");
  --ui-button-brown: url("assets/vendor/kenney_ui_rpg/PNG/buttonLong_brown.png");
  --ui-button-grey: url("assets/vendor/kenney_ui_rpg/PNG/buttonLong_grey.png");
  --ui-button-beige: url("assets/vendor/kenney_ui_rpg/PNG/buttonLong_beige.png");
  --ui-button-square-blue: url("assets/vendor/kenney_ui_rpg/PNG/buttonSquare_blue.png");
  --ui-button-square-brown: url("assets/vendor/kenney_ui_rpg/PNG/buttonSquare_brown.png");
  --ui-panel-inset-blue: url("assets/vendor/kenney_ui_rpg/PNG/panelInset_blue.png");
  --ui-panel-inset-brown: url("assets/vendor/kenney_ui_rpg/PNG/panelInset_brown.png");
  --tile-grass: url("assets/vendor/kenney_tiny_battle/Tiles/tile_0000.png");
  --tile-flower: url("assets/vendor/kenney_tiny_battle/Tiles/tile_0002.png");
  --tile-hill: url("assets/vendor/kenney_tiny_battle/Tiles/tile_0005.png");
  --tile-tower: url("assets/vendor/kenney_tiny_battle/Tiles/tile_0008.png");
  font-family:
    "Pretendard", "Noto Sans KR", "Malgun Gothic", Inter, ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 18, 0.08), rgba(6, 8, 12, 0.82)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
    radial-gradient(circle at top left, rgba(106, 214, 255, 0.2), transparent 27rem),
    radial-gradient(circle at bottom right, rgba(245, 197, 90, 0.16), transparent 28rem),
    #101821;
  color: var(--text);
  display: grid;
  place-items: center;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
}

.status-strip,
.chance-strip,
.combat-panel,
.panel,
.tabs,
.item-info-card,
.reward-modal-card,
.end-card,
.pull-reveal-card {
  text-shadow: none;
}

.main-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(4, 3, 9, 0.1), rgba(7, 4, 13, 0.58) 68%, rgba(4, 3, 8, 0.92)),
    url("assets/generated/main-menu-abyss.png") center / cover no-repeat,
    #07050d;
}

body:not(.menu-open) .main-menu {
  display: none;
}

body.menu-open .phone-shell,
body.menu-open .reward-panel,
body.menu-open .end-panel,
body.menu-open .item-info-panel,
body.menu-open .pull-reveal,
body.menu-open .fusion-effect {
  display: none;
}

.menu-scene {
  width: min(100%, 430px);
  height: min(100dvh, 760px);
  min-height: 620px;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(4, 3, 9, 0), rgba(5, 3, 8, 0.05) 44%, rgba(5, 3, 9, 0.52) 72%, rgba(3, 2, 6, 0.96)),
    url("assets/generated/main-menu-abyss.png") center top / auto 68% no-repeat,
    radial-gradient(circle at 50% 32%, rgba(255, 198, 74, 0.18), transparent 18rem),
    radial-gradient(circle at 82% 42%, rgba(120, 43, 190, 0.48), transparent 17rem),
    radial-gradient(circle at 14% 38%, rgba(91, 36, 145, 0.42), transparent 16rem),
    #07050d;
  box-shadow:
    inset 0 -150px 120px rgba(0, 0, 0, 0.74),
    inset 0 90px 100px rgba(12, 5, 24, 0.62);
}

.menu-scene::before,
.menu-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.menu-scene::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 211, 106, 0.12), transparent 9rem),
    radial-gradient(circle at 82% 44%, rgba(174, 67, 255, 0.22), transparent 12rem),
    linear-gradient(90deg, rgba(4, 3, 8, 0.44), transparent 18%, transparent 82%, rgba(4, 3, 8, 0.44));
  opacity: 0.82;
}

.menu-scene::after {
  inset: auto 0 0;
  height: 42%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(9, 5, 14, 0.72) 28%, rgba(4, 3, 7, 0.96) 100%);
}

.menu-title {
  position: absolute;
  z-index: 7;
  top: max(16px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: block;
  padding: 0 28px;
  text-align: center;
  pointer-events: none;
}

.menu-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: #9ee8ff;
  font-size: 11px;
  font-weight: 1000;
}

.menu-title h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1;
  color: #fff7d6;
  text-shadow:
    0 2px 0 #4b2613,
    0 0 16px rgba(255, 188, 72, 0.42),
    0 10px 22px rgba(0, 0, 0, 0.64);
}

.menu-title p {
  margin-top: 12px;
  color: #d8e1ef;
  font-size: 15px;
  font-weight: 900;
}

.menu-characters {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.menu-characters::before {
  display: none;
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 192px;
  height: 192px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 42%, rgba(255, 211, 106, 0.26) 43% 45%, transparent 46% 58%, rgba(255, 211, 106, 0.34) 59% 61%, transparent 62%),
    conic-gradient(from 18deg, transparent 0 8%, rgba(255, 211, 106, 0.42) 8% 9%, transparent 9% 16%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 16px rgba(255, 193, 70, 0.25));
}

.menu-characters::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 78%;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.18) 55%, transparent 72%);
  transform: translateX(-50%);
  opacity: 0.82;
}

.menu-party,
.menu-final-boss {
  position: absolute;
  z-index: 3;
  object-fit: contain;
  pointer-events: none;
  image-rendering: auto;
}

.menu-party {
  display: block;
  left: -18px;
  bottom: 142px;
  width: 190px;
  height: auto;
  filter:
    drop-shadow(0 0 12px rgba(255, 208, 119, 0.16))
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.58));
}

.menu-final-boss {
  display: block;
  right: -48px;
  bottom: 132px;
  width: 230px;
  height: auto;
  filter:
    drop-shadow(0 0 16px rgba(166, 72, 255, 0.34))
    drop-shadow(0 22px 24px rgba(0, 0, 0, 0.64));
}

.menu-capsules {
  display: none;
}

.menu-capsules::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 211, 106, 0.34);
  box-shadow:
    inset 0 0 18px rgba(255, 211, 106, 0.12),
    0 0 28px rgba(255, 178, 67, 0.16);
}

.menu-capsules::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5c5, #ffb735 56%, transparent 62%);
  box-shadow: 0 0 18px rgba(255, 194, 82, 0.65);
  transform: translate(-50%, -50%);
}

.menu-capsule {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.22)),
    rgba(16, 10, 25, 0.68);
  font-size: 10px;
  font-weight: 1000;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.42),
    0 0 14px color-mix(in srgb, currentColor 34%, transparent);
  transform: translate(-50%, -50%);
}

.menu-capsule:nth-child(1) {
  transform: translate(-50%, -50%) translateY(-58px);
}

.menu-capsule:nth-child(2) {
  transform: translate(-50%, -50%) translate(50px, -25px);
}

.menu-capsule:nth-child(3) {
  transform: translate(-50%, -50%) translate(50px, 32px);
}

.menu-capsule:nth-child(4) {
  transform: translate(-50%, -50%) translateY(60px);
}

.menu-capsule:nth-child(5) {
  transform: translate(-50%, -50%) translate(-50px, 32px);
}

.menu-capsule:nth-child(6) {
  transform: translate(-50%, -50%) translate(-50px, -25px);
}

.menu-card {
  position: absolute;
  z-index: 6;
  left: 42px;
  right: 42px;
  bottom: max(24px, env(safe-area-inset-bottom));
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(10, 6, 18, 0), rgba(10, 6, 18, 0));
  box-shadow: none;
  overflow: visible;
  min-width: 0;
}

.menu-panel {
  display: none;
}

.menu-panel.active {
  display: grid;
  gap: 8px;
  max-height: 392px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
}

.menu-button,
.menu-setting-button,
.menu-back-button {
  border: 1px solid rgba(129, 196, 255, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 46%, rgba(0, 0, 0, 0.22)),
    linear-gradient(135deg, #2b415b 0%, #162233 56%, #111823 100%);
  color: #f7fbff;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.menu-button {
  height: 38px;
  font-size: 14px;
  letter-spacing: 0;
}

#menuHomePanel {
  align-content: center;
  justify-items: center;
}

#menuHomePanel .menu-button {
  width: min(230px, 100%);
}

/* Lobby companion/attendance consolidation and guide tabs 1790000000000. */

#menuLobbyPanel .lobby-tool-button {
  min-width: 0;
}

#menuLobbyPanel .lobby-tool-button strong {
  font-size: clamp(7px, 1.95vw, 9px);
  white-space: nowrap;
}

#menuLobbyPanel #lobbyCompanionButton img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: drop-shadow(0 0 7px rgba(255, 218, 91, 0.62));
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  position: relative;
  inset: auto;
  box-sizing: border-box;
  width: 116px;
  min-height: 42px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 5px 7px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png") center / 100% 100% no-repeat;
  color: #e9f7ff;
  text-align: left;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.48));
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer {
  grid-template-columns: minmax(0, 1fr) auto;
}

.lobby-side-actions button small {
  color: #7feaff;
  font-size: 7px;
  font-weight: 950;
}

.lobby-side-actions button strong,
.menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
  color: #fff1b5;
  font-size: 9px;
  font-weight: 1000;
  white-space: nowrap;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer b {
  font-size: 8px;
}

.menu-sub-panel .menu-panel-head::after {
  grid-column: 1;
  justify-self: start;
}

#menuRecipePanel.active {
  grid-template-rows: auto 42px minmax(0, 1fr) !important;
  overflow: hidden;
}

.guide-tabbar button,
.companion-menu-tabs button {
  min-height: 38px;
  border: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center / 100% 100% no-repeat;
  color: #afc9d8;
  font-size: 11px;
  font-weight: 1000;
}

.guide-tabbar button.active,
.companion-menu-tabs button.active {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png");
  color: #fff0ad;
}

#guideRecipeView.active {
  grid-template-rows: minmax(220px, 0.95fr) minmax(210px, 1.05fr);
  gap: 8px;
}

#guideRecipeView .menu-unlock-list,
#guideRecipeView .menu-recipe-box,
#guideRecipeView .menu-recipe-body,
#guideRecipeView .menu-recipe-list {
  min-height: 0;
}

.companion-menu-panel.active {
  background:
    linear-gradient(180deg, rgba(2, 8, 18, 0.08), rgba(2, 8, 18, 0.92) 42%),
    url("assets/generated/companion_attendance_ui/companion-sanctuary.png") center top / 100% auto no-repeat !important;
}

.companion-concept-banner {
  min-height: 118px;
  border-radius: 8px;
  background: url("assets/generated/companion_attendance_ui/companion-sanctuary.png") center 57% / cover no-repeat;
  box-shadow: inset 0 0 18px rgba(2, 7, 18, 0.72), 0 5px 12px rgba(0, 0, 0, 0.35);
}

.attendance-menu-panel.active {
  background: linear-gradient(180deg, rgba(4, 10, 22, 0.78), rgba(4, 8, 18, 0.96)) !important;
}

.attendance-board-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 7px;
  padding: 16px 13px 18px;
  background: url("assets/generated/companion_attendance_ui/attendance-board.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

@media (max-width: 370px), (max-height: 760px) {
  .lobby-side-actions {
    right: 5px;
    width: 106px;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
    width: 106px;
  }

  #menuLobbyPanel .lobby-tool-button strong {
    font-size: 6.8px;
  }

  .companion-concept-banner {
    min-height: 92px;
  }
}

/* 2026-08-12 tutorial guide rebuild: one authored frame, one readable text bay,
   and a centered bottom action rail. Keep every control inside the painting. */
.tutorial-panel,
.tutorial-panel[class*="tutorial-step-"],
.tutorial-panel[class*="tutorial-"] {
  box-sizing: border-box !important;
  width: min(354px, calc(100vw - 10px)) !important;
  max-width: calc(100vw - 10px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 2098 / 749 !important;
  display: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) 26px !important;
  align-items: stretch !important;
  align-content: stretch !important;
  gap: 4px !important;
  padding: 17px 20px 10px !important;
  overflow: hidden !important;
  background: transparent url("assets/generated/tutorial_item_ui_1790165000000/tutorial-guide-panel-v2.png") center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tutorial-panel > div:first-child {
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: center !important;
  overflow: hidden !important;
}

.tutorial-panel p {
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #d7e8f2 !important;
  font-size: 9.1px !important;
  font-weight: 760 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.025em !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

.tutorial-actions,
.tutorial-panel.tutorial-single-action .tutorial-actions,
.tutorial-panel.tutorial-final-actions .tutorial-actions {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 26px !important;
  min-height: 26px !important;
  align-self: center !important;
  display: grid !important;
  grid-template-columns: repeat(2, 86px) !important;
  grid-template-rows: 26px !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 7px !important;
  overflow: visible !important;
}

.tutorial-actions button,
.tutorial-actions button:first-child,
.tutorial-actions button:last-child,
.tutorial-panel.tutorial-single-action .tutorial-actions button:not([hidden]),
.tutorial-panel.tutorial-final-actions .tutorial-actions button {
  box-sizing: border-box !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat !important;
  color: #e8f5ff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 26px !important;
  text-align: center !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: none !important;
}

/* Constellation Echo companion picker */
.run-prep-section.companion-section {
  margin-bottom: 9px; padding: 9px; border: 1px solid rgba(130, 190, 255, 0.3); border-radius: 13px;
  background: linear-gradient(180deg, rgba(14, 23, 58, 0.9), rgba(28, 14, 62, 0.94));
}
.companion-equipped-slot {
  width: 100%; min-height: 76px; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; margin: 7px 0; padding: 7px 10px; color: #f4f3ff; text-align: left;
  border: 1px solid rgba(242, 207, 111, 0.58); border-radius: 12px;
  background: radial-gradient(circle at 12% 50%, rgba(74, 142, 255, 0.26), transparent 34%), rgba(7, 12, 35, 0.78);
}
.companion-equipped-slot.empty { opacity: 0.72; border-style: dashed; }
.companion-slot-image, .companion-roster-icon {
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 178, 255, 0.25), rgba(18, 16, 49, 0.9) 68%);
  box-shadow: inset 0 0 0 1px rgba(181, 215, 255, 0.28);
}
.companion-slot-image { width: 60px; height: 60px; }
.companion-slot-image img { width: 58px; height: 58px; object-fit: contain; }
.companion-equipped-slot > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.companion-equipped-slot strong { font-size: 14px; color: #fff4c4; }
.companion-equipped-slot small { font-size: 11px; line-height: 1.35; color: #cbd8f5; }
.companion-equipped-slot em { font-size: 10px; color: #9fcaff; font-style: normal; }
.companion-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px; }
.companion-roster-item {
  min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 7px; align-items: center;
  position: relative; padding: 6px 7px; color: #eef4ff; text-align: left; border-radius: 10px;
  border: 1px solid rgba(116, 170, 238, 0.32); background: rgba(10, 18, 48, 0.82);
}
.companion-roster-item.active { border-color: #f6d66e; box-shadow: 0 0 0 1px rgba(246, 214, 110, 0.35), 0 0 14px rgba(88, 153, 255, 0.25); }
.companion-roster-item.locked { filter: grayscale(0.78); opacity: 0.55; }
.companion-roster-icon { width: 46px; height: 46px; }
.companion-roster-icon img { width: 44px; height: 44px; object-fit: contain; }
.companion-roster-item > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.companion-roster-item strong { font-size: 11px; color: #fff1ba; }
.companion-roster-item small { font-size: 9px; line-height: 1.25; color: #b9c9e8; }
.companion-roster-item em { position: absolute; top: 4px; right: 5px; font-size: 8px; font-style: normal; color: #8fd6ff; }
.companion-section-note { margin: 7px 2px 0; color: #aebddb; font-size: 9px; line-height: 1.35; }

/* Abyss Little Stars: summon, collection, and attendance */
.lobby-tool-glyph { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 3px; border-radius: 50%; background: radial-gradient(circle, #fff7bd 0 12%, #7766d8 35%, #24184b 72%); color: #fff8b8; font-size: 18px; box-shadow: 0 0 12px rgba(135, 113, 255, .55); }
.lobby-tool-button { position: relative; }
.lobby-tool-badge { position: absolute; top: 4px; right: 7px; width: 17px; height: 17px; border-radius: 50%; background: #ff647e; color: white; font: 800 11px/17px sans-serif; font-style: normal; box-shadow: 0 0 8px rgba(255, 65, 105, .8); }
.companion-menu-panel, .attendance-menu-panel { overflow-y: auto; padding-bottom: 28px; }
.companion-currency-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 10px; }
.companion-currency-bar span { padding: 8px 4px; border: 1px solid rgba(145, 168, 230, .28); border-radius: 9px; background: rgba(9, 13, 36, .7); color: #b9c9ea; text-align: center; font-size: 10px; }
.companion-currency-bar b { display: block; margin-top: 2px; color: #fff0a9; font-size: 14px; }
.companion-menu-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.companion-menu-tabs button { padding: 9px; border: 1px solid rgba(126, 151, 220, .35); border-radius: 9px; background: #111a3a; color: #aab9da; font-weight: 800; }
.companion-menu-tabs button.active { border-color: #e5c86b; color: #fff0a7; background: linear-gradient(180deg, #41386b, #241d47); }
.companion-tab-view { display: none; }
.companion-tab-view.active { display: block; }
.companion-summon-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.companion-summon-card { min-height: 150px; padding: 13px; border: 1px solid #6179b8; border-radius: 14px; background: radial-gradient(circle at 50% 12%, rgba(99, 128, 230, .3), transparent 45%), linear-gradient(180deg, #182653, #0b1129); color: #e7efff; }
.companion-summon-card.premium { border-color: #d5a451; background: radial-gradient(circle at 50% 12%, rgba(204, 91, 213, .3), transparent 48%), linear-gradient(180deg, #37234f, #160f2b); }
.companion-summon-card strong { color: #fff2ae; font-size: 16px; }
.companion-summon-card p { margin: 8px 0 4px; color: #d7e1fa; font-size: 11px; line-height: 1.45; }
.companion-summon-card small { display: block; min-height: 30px; color: #9fb1d7; font-size: 9px; }
.companion-summon-card div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
.companion-summon-card button, .attendance-claim-button { min-height: 37px; border: 1px solid #d7bc65; border-radius: 8px; background: linear-gradient(180deg, #6f5fba, #3c3477); color: white; font-weight: 800; font-size: 10px; }
.companion-summon-card .summon-store-link { width: 100%; min-height: 31px; margin-top: 6px; border-color: rgba(255, 216, 105, .55); background: rgba(25, 18, 52, .86); color: #ffe594; }
.companion-summon-notice { margin: 9px 0; color: #c8d4ef; text-align: center; font-size: 10px; }
.companion-summon-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.summon-result, .companion-collection-card { display: flex; align-items: center; gap: 8px; min-width: 0; border: 1px solid #52638f; border-radius: 10px; background: rgba(8, 13, 33, .86); color: white; }
.summon-result { padding: 6px; }
.summon-result img, .companion-collection-card img { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; }
.summon-result span, .companion-collection-card span { min-width: 0; display: grid; gap: 2px; }
.summon-result small, .companion-collection-card small { color: #9fb1d7; font-size: 9px; }
.summon-result em { margin-left: auto; color: #ffe685; font-style: normal; font-size: 10px; }
.companion-collection-summary { margin: 4px 2px 9px; color: #bdcbea; font-size: 10px; }
.companion-collection-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.companion-collection-card { position: relative; padding: 6px; text-align: left; }
.companion-collection-card > b { margin-left: auto; color: #ffe58a; font-size: 9px; }
.companion-collection-card em { color: #d4def3; font-style: normal; font-size: 9px; line-height: 1.25; }
.companion-collection-card.locked { filter: grayscale(1); opacity: .48; }
.companion-collection-card.active { border-color: #ffe073; box-shadow: inset 0 0 0 1px rgba(255, 224, 115, .35), 0 0 12px rgba(255, 204, 83, .2); }
.rarity-novice { border-color: #777a72; }.rarity-rare { border-color: #50bcec; }.rarity-hero { border-color: #a568ed; }.rarity-legendary { border-color: #e8a345; }.rarity-mythic { border-color: #f05f9c; box-shadow: inset 0 0 14px rgba(238, 74, 150, .13); }
.attendance-summary { display: flex; justify-content: space-between; padding: 10px 12px; margin: 8px 0; border: 1px solid #6877a8; border-radius: 10px; background: rgba(11, 17, 43, .82); color: #dce6ff; }
.attendance-claim-button { width: 100%; min-height: 43px; margin-bottom: 10px; font-size: 12px; }
.attendance-claim-button:disabled { filter: grayscale(.8); opacity: .58; }
.attendance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.attendance-day { position: relative; min-height: 68px; padding: 7px 5px; border: 1px solid #43547d; border-radius: 9px; background: rgba(8, 14, 34, .85); text-align: center; }
.attendance-day b { display: block; color: #fff1ad; font-size: 10px; }.attendance-day span { display: block; margin-top: 5px; color: #c1cdea; font-size: 8px; line-height: 1.25; }
.attendance-day em { position: absolute; inset: auto 3px 3px; color: #74e5aa; font-style: normal; font-size: 8px; }
.attendance-day.claimed { opacity: .6; background: rgba(19, 52, 49, .65); }.attendance-day.today { border-color: #f4d66e; box-shadow: 0 0 10px rgba(244, 214, 110, .25); }
.attendance-note { margin: 10px 3px; color: #97a8c9; font-size: 9px; line-height: 1.4; }
@media (max-width: 430px) { .companion-summon-cards, .companion-collection-list { grid-template-columns: 1fr; } .companion-currency-bar { grid-template-columns: repeat(2, 1fr); } }
.main-menu[data-panel="companions"] .menu-scene,
.main-menu[data-panel="attendance"] .menu-scene { width: min(100%, 430px); height: 100dvh; min-height: 0; max-height: none; }
.main-menu[data-panel="companions"] .menu-card,
.main-menu[data-panel="attendance"] .menu-card { top: max(8px, env(safe-area-inset-top)); bottom: auto; left: 18px; right: 18px; }
#menuCompanionPanel.active,
#menuAttendancePanel.active { box-sizing: border-box; width: 100%; height: min(790px, calc(100dvh - 16px)); min-height: 0; max-height: min(790px, calc(100dvh - 16px)); padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); overflow-y: auto; border: 1px solid rgba(109, 192, 231, .28); border-radius: 12px; background: radial-gradient(circle at 50% 4%, rgba(83, 66, 156, .25), transparent 31%), linear-gradient(180deg, rgba(10, 22, 42, .99), rgba(4, 9, 20, .99)); box-shadow: inset 0 0 0 1px rgba(255, 218, 128, .08), 0 16px 34px rgba(0, 0, 0, .54); }
#menuCompanionPanel .menu-panel-head,
#menuAttendancePanel .menu-panel-head { position: sticky; top: -12px; z-index: 5; min-height: 48px; padding: 5px 10px 6px 17px; background: linear-gradient(180deg, rgba(24, 45, 77, .99), rgba(8, 18, 34, .99)); }
@media (max-width: 370px), (max-height: 700px) { .main-menu[data-panel="companions"] .menu-card, .main-menu[data-panel="attendance"] .menu-card { left: 8px; right: 8px; } #menuCompanionPanel.active, #menuAttendancePanel.active { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); padding: max(9px, env(safe-area-inset-top)) 9px max(9px, env(safe-area-inset-bottom)); } }
@media (max-width: 430px) {
  .companion-roster { grid-template-columns: 1fr; max-height: 172px; }
}

.menu-story-panel.active {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  max-height: none;
  overflow: visible;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 8%, rgba(111, 54, 186, 0.2), transparent 18rem),
    radial-gradient(circle at 50% 100%, rgba(255, 197, 90, 0.1), transparent 16rem),
    linear-gradient(180deg, #080511 0%, #05040a 58%, #030207 100%);
}

.main-menu[data-panel="story"] .menu-title,
.main-menu[data-panel="story"] .menu-characters {
  display: none;
}

.story-stage {
  position: relative;
  width: min(430px, calc(100vw - 24px));
  min-height: 0;
  overflow: hidden;
  padding: 12px 12px 16px;
  border: 1px solid rgba(255, 221, 128, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 52%, rgba(0, 0, 0, 0.28)),
    rgba(8, 6, 15, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 46px rgba(0, 0, 0, 0.58);
}

.story-stage::after {
  display: none;
}

.story-art {
  position: relative;
  height: clamp(206px, 38dvh, 286px);
  min-height: 0;
  margin: -2px -2px 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 154, 0.18);
  border-radius: 13px;
  background: rgba(4, 3, 8, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 12px 20px rgba(0, 0, 0, 0.26);
}

.story-art::before {
  display: none;
  content: "";
  position: absolute;
  inset: 18px 14px 2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 226, 143, 0.17), transparent 34%),
    radial-gradient(circle at 20% 76%, rgba(106, 214, 255, 0.1), transparent 25%),
    radial-gradient(circle at 82% 72%, rgba(184, 150, 255, 0.15), transparent 28%);
  filter: blur(0.2px);
}

.story-art img {
  position: absolute;
  object-fit: contain;
  image-rendering: auto;
  filter:
    drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 10px rgba(255, 220, 120, 0.12));
}

.story-art .story-illustration {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.03) brightness(0.94);
}

#mainMenu[data-story-mode="post30"] .story-art {
  height: clamp(224px, 42dvh, 310px);
}

#mainMenu[data-story-mode="post30"] .story-art .story-illustration {
  object-fit: contain;
  filter: saturate(1.06) contrast(1.05) brightness(0.9);
}

#mainMenu[data-story-mode="post30"] .story-stage strong {
  color: #fff0b5;
  font-size: 19px;
}

#mainMenu[data-story-mode="post30"] .story-step-label {
  color: #ffe9a8;
}

#mainMenu[data-story-mode="ending"] .story-art {
  height: clamp(224px, 42dvh, 310px);
  background: #090711;
}

#mainMenu[data-story-mode="ending"] .story-art .story-illustration {
  object-fit: contain;
  filter: saturate(1.04) contrast(1.03) brightness(0.96);
}

#mainMenu[data-story-mode="ending"] .story-stage {
  border-color: rgba(255, 224, 137, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 244, 197, 0.09), rgba(111, 70, 148, 0.035) 54%, rgba(0, 0, 0, 0.3)),
    rgba(8, 6, 15, 0.97);
}

#mainMenu[data-story-mode="ending"] .story-stage strong {
  color: #fff0b5;
  font-size: 19px;
}

#mainMenu[data-story-mode="ending"] .story-step-label {
  color: #fff1bd;
  background: rgba(255, 211, 106, 0.16);
}

.story-art .story-hero {
  left: 7px;
  bottom: 10px;
  width: 96px;
  height: 96px;
  z-index: 3;
}

.story-art .story-main {
  left: 50%;
  bottom: 3px;
  width: 132px;
  height: 132px;
  z-index: 4;
  transform: translateX(-50%);
}

.story-art .story-side-a {
  left: 14px;
  bottom: 16px;
  width: 82px;
  height: 82px;
  z-index: 2;
}

.story-art .story-side-b {
  right: 12px;
  bottom: 15px;
  width: 86px;
  height: 86px;
  z-index: 2;
}

.story-art .story-boss {
  left: 50%;
  bottom: -3px;
  width: 150px;
  height: 150px;
  z-index: 4;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 0 16px rgba(150, 86, 255, 0.34))
    drop-shadow(0 16px 12px rgba(0, 0, 0, 0.58));
}

.story-art .story-token {
  width: 56px;
  height: 56px;
  top: 22px;
  z-index: 5;
}

.story-art .story-token.story-piece-0 {
  left: 28px;
}

.story-art .story-token.story-piece-1 {
  left: 86px;
  top: 8px;
}

.story-art .story-token.story-piece-2 {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.story-art .story-token.story-piece-3 {
  right: 86px;
  top: 8px;
}

.story-art .story-token.story-piece-4 {
  right: 28px;
}

.story-step-label {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 211, 106, 0.12);
  color: #ffe396;
  font-size: 10px;
  font-weight: 1000;
}

.story-stage strong {
  display: block;
  margin-bottom: 7px;
  color: #fff4c8;
  font-size: 18px;
  line-height: 1.15;
  text-shadow: 0 2px 0 rgba(31, 15, 7, 0.54);
}

.story-stage p {
  margin: 0;
  color: #dbe5f6;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.5;
}

.story-actions {
  display: grid;
  width: min(430px, calc(100vw - 24px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.story-actions .menu-button,
.story-actions .menu-back-button {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding-inline: 7px;
  border-color: #ffd36a;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 244, 188, 0.22), rgba(255, 196, 80, 0.08) 45%, rgba(0, 0, 0, 0.24)),
    linear-gradient(135deg, #d69b34 0%, #8a4f13 52%, #342313 100%);
  color: #fff7d8;
  font-size: 14px;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(35, 18, 5, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 18px rgba(255, 190, 78, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.35);
}

.menu-lobby-panel.active {
  gap: 9px;
  max-height: min(560px, calc(100dvh - 104px));
  padding: 2px 2px 4px;
}

.lobby-head {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 12px 64px 12px 12px;
  border: 1px solid rgba(255, 211, 106, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 233, 156, 0.12), rgba(255, 255, 255, 0.03) 42%, rgba(0, 0, 0, 0.2)),
    rgba(12, 9, 20, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.28);
}

.lobby-head span {
  color: #ffe39a;
  font-size: 11px;
  font-weight: 1000;
}

.lobby-head p {
  margin: 0;
  color: #dce8f8;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.42;
}

.lobby-story-link {
  position: absolute;
  top: 9px;
  right: 9px;
  height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(129, 196, 255, 0.44);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, #2d4c66 0%, #172839 100%);
  color: #eaf7ff;
  font-size: 10px;
  font-weight: 1000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 12px rgba(0, 0, 0, 0.22);
}

.lobby-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.lobby-status-grid div,
.lobby-tool-button {
  border: 1px solid rgba(129, 196, 255, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 48%, rgba(0, 0, 0, 0.22)),
    rgba(16, 23, 34, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 8px 16px rgba(0, 0, 0, 0.22);
}

.lobby-status-grid div {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 6px 4px;
  text-align: center;
}

.lobby-status-grid span,
.lobby-tool-button span {
  color: #bac8da;
  font-size: 10px;
  font-weight: 900;
}

.lobby-status-grid strong {
  color: #9ee8ff;
  font-size: 14px;
  font-weight: 1000;
}

.lobby-mark-board[hidden] {
  display: none;
}

.lobby-mark-board {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(255, 211, 106, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 222, 126, 0.11), rgba(255, 255, 255, 0.025) 42%, rgba(0, 0, 0, 0.24)),
    rgba(17, 13, 24, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 9px 18px rgba(0, 0, 0, 0.24);
}

.lobby-mark-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.lobby-mark-head div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.lobby-mark-head span {
  color: #ffe39a;
  font-size: 10px;
  font-weight: 1000;
}

.lobby-mark-head strong {
  color: #fff7d0;
  font-size: 13px;
  font-weight: 1000;
}

.lobby-mark-head p {
  margin: 0;
  color: #bfcce0;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.25;
  text-align: right;
}

.lobby-mark-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.lobby-mark-slot {
  min-width: 0;
  min-height: 66px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 3px 2px 4px;
  border: 1px solid rgba(123, 142, 166, 0.28);
  border-radius: 8px;
  background: rgba(5, 8, 14, 0.7);
  overflow: hidden;
}

.lobby-mark-slot img {
  display: block;
  width: min(48px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
}

.lobby-mark-slot strong {
  max-width: 100%;
  color: #e7edf7;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}

.lobby-mark-slot.locked img {
  filter: grayscale(1) brightness(0.42);
  opacity: 0.42;
}

.lobby-mark-slot.locked strong {
  color: #79879a;
}

.lobby-mark-slot.collected {
  border-color: rgba(255, 211, 106, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 222, 126, 0.12), rgba(255, 255, 255, 0.02)),
    rgba(19, 16, 25, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 12px rgba(255, 197, 77, 0.1);
}

.lobby-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.lobby-tool-button {
  min-width: 0;
  min-height: 58px;
  padding: 8px 9px;
  display: grid;
  gap: 3px;
  align-content: center;
  text-align: left;
  color: #ffffff;
  font: inherit;
}

.lobby-tool-button strong {
  color: #ffe39a;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1.1;
}

.lobby-tool-button.wide {
  grid-column: 1 / -1;
  min-height: 50px;
}

.main-menu[data-panel="lobby"] .menu-card {
  top: max(72px, env(safe-area-inset-top));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 14px;
  right: 14px;
}

.main-menu[data-panel="lobby"] .menu-characters {
  opacity: 0.24;
  filter: saturate(1.08) brightness(1.18);
}

.main-menu[data-panel="lobby"] .menu-scene::after {
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(3, 3, 9, 0.68));
}

.menu-lobby-panel.active {
  align-content: start;
  gap: 8px;
  max-height: 100%;
  padding: 0 2px 3px;
  overflow-y: auto;
  scrollbar-width: none;
}

.menu-lobby-panel.active::-webkit-scrollbar {
  display: none;
}

.lobby-command {
  position: relative;
  min-height: 158px;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 140, 0.72);
  border-radius: 14px;
  background: #25183b;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 12px 24px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(246, 199, 95, 0.13);
}

.lobby-command::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(19, 10, 31, 0.04) 18%, rgba(13, 8, 23, 0.2) 48%, rgba(7, 5, 14, 0.94) 100%),
    linear-gradient(90deg, rgba(5, 3, 12, 0.28), transparent 46%, rgba(27, 8, 41, 0.16));
  pointer-events: none;
}

.lobby-command-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 43%;
  filter: saturate(1.12) contrast(1.04) brightness(1.08);
}

.lobby-head {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 11px;
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lobby-head span {
  color: #9ee8ff;
  font-size: 10px;
}

.lobby-head strong {
  color: #fff4c2;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78);
}

.lobby-head p {
  color: #f3f7ff;
  font-size: 10px;
  line-height: 1.35;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.92);
}

.lobby-story-link {
  z-index: 3;
  top: 9px;
  right: 9px;
  height: 28px;
  border-color: rgba(255, 230, 159, 0.72);
  background: rgba(20, 12, 31, 0.82);
  color: #fff3c4;
  backdrop-filter: blur(5px);
}

.lobby-status-grid {
  gap: 5px;
}

.lobby-status-grid div {
  grid-template-columns: 27px minmax(0, 1fr);
  grid-template-rows: auto auto;
  place-items: initial;
  align-items: center;
  min-height: 54px;
  padding: 6px 7px;
  border: 8px solid transparent;
  border-image-source: url("assets/vendor/kenney_ui_rpg/PNG/panel_blue.png");
  border-image-slice: 12 fill;
  border-image-width: 8px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: rgba(16, 40, 56, 0.88);
  text-align: left;
  box-shadow: 0 7px 13px rgba(0, 0, 0, 0.22);
}

.lobby-status-grid img {
  grid-row: 1 / 3;
  width: 25px;
  height: 25px;
  object-fit: contain;
  image-rendering: pixelated;
}

.lobby-status-grid span {
  align-self: end;
  color: #d4e7f7;
  font-size: 8px;
  line-height: 1;
}

.lobby-status-grid strong {
  align-self: start;
  color: #fff2ae;
  font-size: 13px;
  line-height: 1.05;
}

.lobby-mark-board {
  gap: 5px;
  padding: 7px;
  border-color: rgba(255, 213, 106, 0.54);
  background: rgba(19, 14, 29, 0.88);
}

.lobby-mark-slot {
  min-height: 54px;
}

.lobby-mark-slot img {
  width: min(38px, 100%);
}

.lobby-start-button {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 5px 18px;
  border: 12px solid transparent;
  border-image-source: url("assets/vendor/kenney_ui_rpg/PNG/buttonLong_brown.png");
  border-image-slice: 12 fill;
  border-image-width: 12px;
  border-image-repeat: stretch;
  background: #a76819;
  color: #fff8dc;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34));
}

.lobby-start-button img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}

.lobby-start-button > span {
  display: grid;
  gap: 1px;
  text-align: left;
}

.lobby-start-button strong {
  font-size: 17px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(66, 31, 7, 0.58);
}

.lobby-start-button small {
  color: #ffedb6;
  font-size: 9px;
  font-weight: 900;
}

.lobby-tools {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.lobby-tool-button,
.lobby-tool-button.wide {
  grid-column: auto;
  min-width: 0;
  min-height: 62px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 3px 1px;
  border: 9px solid transparent;
  border-image-source: url("assets/vendor/kenney_ui_rpg/PNG/buttonSquare_blue.png");
  border-image-slice: 9 fill;
  border-image-width: 9px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: #27445e;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);
}

.lobby-tool-button img {
  display: block;
  width: 29px;
  height: 29px;
  object-fit: contain;
  image-rendering: pixelated;
}

.lobby-tool-button strong {
  color: #f4f9ff;
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

.lobby-start-button:active,
.lobby-tool-button:active {
  transform: translateY(1px);
  filter: brightness(1.1);
}

@media (max-height: 720px) {
  .main-menu[data-panel="lobby"] .menu-card {
    top: max(58px, env(safe-area-inset-top));
  }

  .lobby-command {
    min-height: 126px;
  }

  .lobby-head p {
    display: none;
  }

  .lobby-mark-slot {
    min-height: 48px;
  }
}

.menu-sub-panel.active {
  gap: 9px;
  max-height: min(680px, calc(100dvh - 76px));
  padding: 12px;
  border: 1px solid rgba(255, 211, 106, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 235, 168, 0.08), rgba(255, 255, 255, 0.025) 36%, rgba(0, 0, 0, 0.22)),
    rgba(9, 10, 18, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 36px rgba(0, 0, 0, 0.46);
}

.main-menu[data-panel="growth"] .menu-card,
.main-menu[data-panel="recipes"] .menu-card,
.main-menu[data-panel="elements"] .menu-card,
.main-menu[data-panel="codex"] .menu-card,
.main-menu[data-panel="ranking"] .menu-card,
.main-menu[data-panel="store"] .menu-card {
  top: max(46px, env(safe-area-inset-top));
  bottom: auto;
  left: 18px;
  right: 18px;
}

.main-menu[data-panel="growth"] .menu-panel.active,
.main-menu[data-panel="recipes"] .menu-panel.active,
.main-menu[data-panel="elements"] .menu-panel.active,
.main-menu[data-panel="codex"] .menu-panel.active,
.main-menu[data-panel="ranking"] .menu-panel.active,
.main-menu[data-panel="store"] .menu-panel.active {
  min-height: min(620px, calc(100dvh - 88px));
}

.menu-ranking-panel.active {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
}

.lobby-ranking-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lobby-ranking-meta .ranking-scope-summary {
  margin: 0;
}

.menu-ranking-panel .game-ranking-list {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.story-actions .menu-button:disabled,
.story-actions .menu-back-button:disabled {
  opacity: 0.48;
  filter: grayscale(0.35);
}

.menu-button.primary {
  height: 40px;
  background:
    linear-gradient(180deg, rgba(255, 244, 188, 0.22), rgba(255, 196, 80, 0.08) 45%, rgba(0, 0, 0, 0.24)),
    linear-gradient(135deg, #d69b34 0%, #8a4f13 52%, #342313 100%);
  border-color: #ffd36a;
  color: #fff7d8;
  font-size: 15px;
  text-shadow: 0 2px 0 rgba(35, 18, 5, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 18px rgba(255, 190, 78, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.35);
}

.menu-button.google {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03)),
    linear-gradient(135deg, #475569 0%, #263242 58%, #171e2b 100%);
  border-color: rgba(230, 237, 247, 0.6);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.login-choice {
  display: grid;
  gap: 8px;
}

#menuLoginPanel.naming #googleLoginButton,
#menuLoginPanel.naming #guestLoginButton {
  display: none;
}

.guest-name-panel {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 211, 106, 0.35);
  background: rgba(8, 5, 14, 0.72);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.guest-name-panel[hidden] {
  display: none;
}

.guest-name-panel label,
.guest-name-panel span {
  color: #ffe7a3;
  font-size: 11px;
  font-weight: 900;
}

.guest-name-panel input {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255, 224, 154, 0.42);
  border-radius: 9px;
  background: rgba(8, 10, 17, 0.88);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  outline: none;
}

.guest-name-panel input:focus {
  border-color: #ffdc73;
  box-shadow: 0 0 0 3px rgba(255, 220, 115, 0.14);
}

.menu-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  color: #fff7d6;
}

.menu-panel-head strong {
  font-size: 18px;
}

.menu-back-button {
  height: 30px;
  padding-inline: 12px;
  font-size: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, #2b415b 0%, #162233 56%, #111823 100%);
}

.menu-back-button:disabled,
.menu-button:disabled,
.lobby-tool-button:disabled,
.lobby-story-link:disabled {
  border-color: rgba(142, 152, 168, 0.35);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(15, 20, 28, 0.08)),
    var(--ui-button-grey) center / 100% 100% no-repeat,
    #28303b;
  color: rgba(233, 238, 246, 0.62);
}

.menu-setting-button {
  min-height: 50px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.menu-setting-button span {
  color: #cbd5e4;
  font-size: 12px;
}

.menu-setting-button strong {
  color: #9ee8ff;
}

.menu-recipe-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 211, 106, 0.22);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 230, 150, 0.06), rgba(0, 0, 0, 0.12)),
    #151b25;
}

.menu-feature-box {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(69, 84, 108, 0.92);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    #151b25;
}

#menuRecipePanel .menu-recipe-box,
#menuCodexPanel .menu-feature-box {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 20px rgba(0, 0, 0, 0.22);
}

.menu-account-box,
.menu-recipe-head,
.menu-feature-head,
.menu-recipe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.menu-account-box {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #344154;
  border-radius: 10px;
  background: #171d27;
  flex-wrap: wrap;
}

.menu-account-box span {
  color: #cbd5e4;
  font-size: 12px;
  font-weight: 900;
}

.menu-account-box strong {
  min-width: 0;
  color: #f7fbff;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-cloud-box {
  display: grid;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(74, 94, 121, 0.9);
  border-radius: 10px;
  background: #151b25;
}

.menu-cloud-box span {
  color: #c9d6e8;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.menu-cloud-box div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.menu-meta-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(112, 91, 180, 0.72);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(173, 126, 255, 0.1), rgba(0, 0, 0, 0.08)),
    #171827;
}

.meta-progress-head,
.meta-progress-summary,
.meta-upgrade-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.meta-progress-head span {
  color: #fff0b7;
  font-size: 12px;
  font-weight: 1000;
}

.meta-progress-head strong,
.meta-upgrade-card em {
  color: #ffdc73;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
}

.meta-progress-summary {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.meta-progress-summary span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #dfe8f7;
  font-size: 10px;
  font-weight: 900;
}

.meta-next-unlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 220, 115, 0.18);
  border-radius: 8px;
  background: rgba(6, 8, 15, 0.38);
  min-width: 0;
}

.meta-next-unlock span {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.meta-next-unlock img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}

.meta-next-unlock strong {
  color: #fff3be;
  font-size: 11px;
  font-weight: 1000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-next-unlock em {
  color: #9ee8ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
}

.meta-progress-track {
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 115, 0.24);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
}

.meta-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  background: url("assets/generated/ui/progress-fill.png") center / 100% 100% no-repeat;
}

.menu-meta-box p,
.menu-unlock-note {
  margin: 0;
  color: #c8d3e6;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 800;
}

.meta-upgrade-list {
  display: grid;
  gap: 6px;
}

.meta-upgrade-card {
  width: 100%;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid rgba(166, 190, 232, 0.22);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(0, 0, 0, 0.12)),
    #1b2230;
  text-align: left;
}

.meta-upgrade-card strong {
  display: block;
  color: #f7fbff;
  font-size: 11px;
  line-height: 1.2;
}

.meta-upgrade-card small {
  display: block;
  margin-top: 2px;
  color: #b9c6da;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
}

.meta-upgrade-card:disabled {
  cursor: default;
  opacity: 0.58;
}

.meta-activation-list {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.meta-activation-list > strong {
  color: #d7c5ff;
  font-size: 11px;
  font-weight: 1000;
}

.meta-activation-card {
  width: 100%;
  min-height: 54px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(196, 169, 255, 0.3);
  border-radius: 8px;
  background: #191827;
  color: #f7fbff;
  text-align: left;
}

.meta-activation-card img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}

.meta-activation-card span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.meta-activation-card strong,
.meta-activation-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-activation-card strong {
  color: #fff3c2;
  font-size: 10px;
}

.meta-activation-card small {
  color: #bfc8d9;
  font-size: 8px;
  font-weight: 800;
}

.meta-activation-card em {
  color: #cdb9ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
  white-space: nowrap;
}

.meta-activation-card:disabled {
  opacity: 0.56;
}

.menu-element-box {
  display: grid;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid rgba(74, 94, 121, 0.9);
  border-radius: 10px;
  background: #151b25;
}

.element-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.element-rule-head span,
.element-rule-row strong {
  color: #fff0b7;
  font-size: 13px;
  font-weight: 1000;
}

.element-rule-head strong {
  color: #9ee8ff;
  font-size: 13px;
  font-weight: 1000;
}

.menu-element-box p {
  margin: 0;
  color: #c9d6e8;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
}

.element-rule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.element-rule-row {
  display: grid;
  grid-template-columns: 48px 1fr 1fr;
  gap: 7px;
  align-items: center;
  min-height: 28px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.element-rule-row span,
.element-rule-row em {
  min-width: 0;
  color: #dce7f8;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.element-rule-row em {
  color: #aeb9c8;
}

.menu-small-button {
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(130, 178, 228, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.18)),
    #26374c;
  color: #f7fbff;
  font-size: 12px;
  font-weight: 1000;
}

.menu-small-button.ghost {
  border-color: rgba(155, 165, 181, 0.44);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)),
    #202733;
  color: #dce6f5;
}

.menu-small-button:disabled {
  opacity: 0.48;
}

.menu-feature-head,
.menu-recipe-head {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.menu-feature-head::after,
.menu-recipe-head::after {
  content: var(--i18n-css-open, "열기");
  color: #9ee8ff;
  font-size: 10px;
  font-weight: 1000;
}

.menu-feature-head.open::after,
.menu-recipe-head.open::after {
  content: var(--i18n-css-close, "닫기");
}

.menu-recipe-head span,
.menu-feature-head span,
.menu-recipe-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.menu-feature-head strong,
.menu-recipe-head strong {
  color: #ffdc73;
  font-size: 12px;
}

.menu-feature-body,
.menu-recipe-body {
  display: none;
  gap: 8px;
}

.menu-feature-body.open,
.menu-recipe-body.open {
  display: grid;
  max-height: 154px;
  overflow-y: auto;
  padding-right: 2px;
}

#menuRecipePanel .menu-recipe-body {
  display: grid;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.menu-recipe-list {
  display: grid;
  gap: 6px;
  max-height: 92px;
  overflow-y: auto;
  padding-right: 2px;
}

#menuRecipePanel .menu-recipe-list {
  max-height: 164px;
}

.menu-recipe-row {
  min-height: 40px;
  padding: 8px 9px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(0, 0, 0, 0.08)),
    rgba(34, 43, 58, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.055);
}

.menu-recipe-row.locked {
  opacity: 0.58;
}

.menu-recipe-row strong {
  min-width: 0;
  color: #f7fbff;
  font-size: 11px;
  line-height: 1.25;
}

.codex-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.codex-row.locked {
  opacity: 0.52;
  filter: grayscale(0.5);
}

.codex-row img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35));
}

.codex-row strong,
.daily-card strong {
  display: block;
  color: #fff7d6;
  font-size: 11px;
  line-height: 1.2;
}

.codex-row span,
.daily-card span,
.daily-card p {
  display: block;
  margin-top: 2px;
  color: #c9d4e5;
  font-size: 10px;
  line-height: 1.25;
}

.ranking-row {
  min-height: 32px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.ranking-row strong {
  color: #ffdc73;
  font-size: 12px;
}

.ranking-row span {
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.ranking-row em {
  grid-column: 2;
  color: #9ee8ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.daily-card {
  padding: 10px;
  border-radius: 9px;
  background:
    radial-gradient(circle at top right, rgba(255, 211, 106, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 211, 106, 0.18);
}

.daily-card.cleared {
  border-color: rgba(110, 231, 160, 0.55);
  box-shadow: inset 0 0 16px rgba(110, 231, 160, 0.08);
}

.menu-recipe-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.menu-unlock-list {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(79, 199, 255, 0.26);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(12, 42, 69, 0.86), rgba(4, 20, 38, 0.92)),
    radial-gradient(circle at 50% 0%, rgba(77, 201, 255, 0.13), transparent 58%);
  box-shadow: inset 0 0 18px rgba(31, 148, 222, 0.08);
}

.menu-unlock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.menu-unlock-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.menu-unlock-head strong {
  color: #ffdc73;
  font-size: 12px;
  min-width: 0;
}

.menu-unlock-head.subtle {
  margin-top: 2px;
}

.unlock-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.unlock-scroll {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.unlock-group {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

.unlock-group > strong {
  display: grid;
  gap: 1px;
  color: #ffdc73;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.25;
}

.unlock-group > strong small {
  color: #9ee8ff;
  font-size: 9px;
  font-weight: 1000;
}

.unlock-pill {
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f7fbff;
  font-size: 10px;
  font-weight: 900;
  overflow: hidden;
  display: grid;
  gap: 1px;
}

.unlock-pill b,
.unlock-pill small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unlock-pill small {
  color: rgba(226, 232, 243, 0.72);
  font-size: 8px;
  font-weight: 800;
}

.unlock-pill.locked {
  color: #aeb7c8;
  background: rgba(255, 255, 255, 0.035);
}

.unlock-pill.candidate {
  color: #c9d2e3;
  background: rgba(255, 255, 255, 0.045);
  border-style: dashed;
  opacity: 0.82;
}

.credits-box {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px 10px;
  padding: 12px;
  border-radius: 12px;
  background: #171d27;
  border: 1px solid #333e50;
}

.credits-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.credits-box strong {
  color: #f7fbff;
  overflow-wrap: anywhere;
}

body.effects-lite .slash-fx,
body.effects-lite .impact-fx {
  opacity: 0.45;
}

.unlock-pill.activation {
  color: #e4d7ff;
  background: rgba(126, 87, 196, 0.14);
  border-color: rgba(199, 173, 255, 0.34);
}

body.hide-damage .damage-float {
  display: none;
}

@media (max-height: 680px) {
  .menu-scene {
    min-height: 0;
    height: calc(100dvh - 24px);
  }

  .menu-title {
    padding-top: 22px;
  }

  .menu-title h1 {
    font-size: 36px;
  }

  .menu-characters {
    inset: 0;
  }

  .menu-party {
    left: -16px;
    bottom: 126px;
    width: 166px;
    height: auto;
  }

  .menu-final-boss {
    right: -48px;
    bottom: 116px;
    width: 204px;
    height: auto;
  }

  .menu-capsules {
    width: 150px;
    height: 150px;
  }

  .menu-capsule {
    width: 34px;
    height: 40px;
    font-size: 10px;
  }

  .menu-capsule:nth-child(1) {
    transform: translate(-50%, -50%) translateY(-55px);
  }

  .menu-capsule:nth-child(2) {
    transform: translate(-50%, -50%) translate(47px, -24px);
  }

  .menu-capsule:nth-child(3) {
    transform: translate(-50%, -50%) translate(47px, 31px);
  }

  .menu-capsule:nth-child(4) {
    transform: translate(-50%, -50%) translateY(56px);
  }

  .menu-capsule:nth-child(5) {
    transform: translate(-50%, -50%) translate(-47px, 31px);
  }

  .menu-capsule:nth-child(6) {
    transform: translate(-50%, -50%) translate(-47px, -24px);
  }

  .menu-card {
    min-height: 132px;
    bottom: 12px;
  }
}

.phone-shell {
  position: relative;
  width: min(100vw, 430px);
  max-width: 100vw;
  height: 100dvh;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(22, 25, 31, 0.88), rgba(8, 10, 14, 0.97)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 12px),
    #11161d;
  border: 2px solid #6f7890;
  border-radius: 28px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    inset 0 -18px 42px rgba(0, 0, 0, 0.26),
    0 22px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.topbar,
.status-strip,
.combat-panel,
.tabs,
.panel,
.log-panel {
  margin-inline: 14px;
}

.topbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 6px;
  margin-bottom: 4px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(12, 17, 24, 0.42)),
    var(--ui-panel-brown) center / 100% 100% no-repeat;
  border: 1px solid rgba(255, 231, 167, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.24);
}

.topbar > div:first-child {
  min-width: 0;
  max-width: 44%;
}

.top-menu-button {
  position: relative;
  z-index: 2;
  justify-self: end;
  margin-left: auto;
  width: 42px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(65, 38, 16, 0.08)),
    var(--ui-button-square-brown) center / 100% 100% no-repeat,
    #654524;
  border: 1px solid #d7b873;
  color: #fff4c9;
  font-size: 10px;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.62);
}

.eyebrow,
.label {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 16px;
  line-height: 1.05;
}

h2 {
  font-size: 15px;
}

.round-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: 52px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
    var(--ui-button-brown) center / 100% 100% no-repeat;
  border: 1px solid rgba(255, 231, 167, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-weight: 900;
  padding-inline: 8px;
}

.round-chip span {
  font-size: 15px;
}

.round-chip small {
  color: var(--muted);
  margin-left: 1px;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}

.status-strip div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.08)),
    var(--ui-panel-inset-blue) center / 100% 100% no-repeat;
  border: 1px solid #526274;
  border-radius: 7px;
  padding: 2px 4px;
  min-height: 24px;
}

.status-strip .label {
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.status-strip strong {
  display: inline;
  font-size: 12px;
  margin-top: 0;
  line-height: 1;
}

.chance-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 6px;
}

.tutorial-panel {
  display: none;
  position: fixed;
  left: 8px;
  top: 8px;
  bottom: auto;
  z-index: 160;
  width: min(322px, calc(100vw - 16px));
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255, 211, 106, 0.62);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 235, 164, 0.14), rgba(0, 0, 0, 0.14)),
    #242030;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 12px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
}

.tutorial-panel.active {
  display: grid;
}

.tutorial-panel::after {
  display: none;
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 0;
  background: transparent;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #242030;
  transform: translateX(-50%);
}

.tutorial-step-0::after,
.tutorial-step-1::after,
.tutorial-step-2::after,
.tutorial-step-3::after {
  top: -8px;
  bottom: auto;
  border-top: 0;
  border-bottom: 8px solid #242030;
  transform: translateX(-50%);
}

.tutorial-step-0 {
  bottom: 238px;
}

.tutorial-step-1 {
  bottom: 292px;
}

.tutorial-tab-target {
  top: 336px;
  bottom: auto;
}

.tutorial-board-target {
  bottom: 228px;
}

.tutorial-bag-target {
  bottom: 292px;
}

.tutorial-battle-target {
  top: 232px;
  bottom: auto;
}

.tutorial-step-2 {
  top: 232px;
  bottom: auto;
}

.tutorial-step-3 {
  bottom: 96px;
}

.tutorial-step-4 {
  bottom: 116px;
}

.tutorial-step-4::after {
  display: none;
}

.tutorial-target {
  position: relative;
  z-index: 30;
  outline: 2px solid rgba(255, 220, 115, 0.92) !important;
  box-shadow: 0 0 0 4px rgba(255, 220, 115, 0.14), 0 0 20px rgba(255, 220, 115, 0.28) !important;
}

.tutorial-panel strong {
  display: block;
  color: #ffe7a3;
  font-size: 12px;
  margin-bottom: 2px;
}

.tutorial-panel p {
  color: #edf3ff;
  font-size: 11px;
  line-height: 1.35;
}

.tutorial-actions {
  display: grid;
  gap: 5px;
  min-width: 58px;
}

.tutorial-actions button {
  min-height: 25px;
  border-radius: 8px;
  border: 1px solid rgba(255, 220, 115, 0.62);
  background: #4b3517;
  color: #fff2c4;
  font-size: 10px;
  font-weight: 1000;
}

.tutorial-actions button:last-child {
  border-color: rgba(147, 158, 177, 0.5);
  background: #202837;
  color: #dce7f8;
}

.panel .chance-strip {
  margin: 5px 0 7px;
}

.chance-button {
  min-height: 33px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.22)),
    linear-gradient(135deg, #27384f 0%, #172334 58%, #101722 100%);
  border: 1px solid rgba(113, 160, 202, 0.58);
  color: var(--text);
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 4px 5px;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 9px rgba(0, 0, 0, 0.22);
}

.chance-button span {
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.05;
  color: #ffffff;
}

.chance-button small {
  color: #d5dbe7;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.05;
}

.chance-button.premium {
  background:
    linear-gradient(180deg, rgba(255, 225, 128, 0.2), rgba(255, 177, 62, 0.08) 45%, rgba(0, 0, 0, 0.24)),
    linear-gradient(135deg, #865b1d 0%, #3f2f1c 100%);
  border-color: rgba(255, 205, 104, 0.72);
}

.chance-button.premium small {
  color: #ffd36a;
}

.mission-panel {
  min-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #17221d;
  border: 1px solid #315846;
}

.mission-panel strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

.mission-panel span:last-child {
  flex-shrink: 0;
  color: #9cffbf;
  font-size: 12px;
  font-weight: 900;
}

.combat-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 38%),
    var(--ui-panel-blue) center / 100% 100% no-repeat,
    linear-gradient(180deg, #252933, #181b21);
  border: 1px solid #75869d;
  border-radius: 12px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
  min-height: 138px;
  margin-bottom: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 4px 0 rgba(0, 0, 0, 0.24);
}

.combat-side {
  display: none;
  gap: 5px;
}

.unit-name {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.trait-chip {
  justify-self: start;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 235, 160, 0.18), rgba(0, 0, 0, 0.18)),
    #312717;
  border: 1px solid rgba(245, 197, 90, 0.78);
  color: #ffe08b;
  font-size: 10.5px;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(245, 197, 90, 0.18);
}

.enemy-side {
  text-align: right;
}

.enemy-side .trait-chip {
  justify-self: end;
}

.hpbar {
  height: 8px;
  background: #111318;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #323844;
}

.hpbar span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #43d17d, #9cffbf);
  transition: width 280ms ease;
}

.hpbar.enemy span {
  background: linear-gradient(90deg, #ff836e, #ffd36a);
}

.battle-core {
  position: relative;
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
}

.battle-text-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.primary-button {
  width: 94px;
  height: 30px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 244, 190, 0.22), rgba(255, 191, 76, 0.08) 48%, rgba(0, 0, 0, 0.24)),
    linear-gradient(135deg, #d69b34 0%, #6b4217 54%, #2a2118 100%);
  border: 1px solid rgba(255, 211, 106, 0.74);
  color: #fff9dd;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 15px rgba(245, 197, 90, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.32);
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 8;
  transform: translateX(-50%);
}

.primary-button:disabled,
.skill-button:disabled,
.skip-button:disabled,
.chance-button:disabled,
.mini-button:disabled {
  opacity: 0.68;
  cursor: default;
  filter: grayscale(0.18);
}

.primary-button.needs-item {
  background:
    linear-gradient(135deg, rgba(137, 211, 255, 0.3), rgba(119, 170, 255, 0.18)),
    linear-gradient(135deg, #25415f, #152234);
  color: #e8f7ff;
  text-shadow: 0 1px 0 rgba(12, 22, 36, 0.45);
}

.skill-button {
  width: 86px;
  min-height: 22px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.08)),
    var(--ui-button-blue) center / 100% 100% no-repeat;
  color: #9ee8ff;
  border: 1px solid #3e6978;
  font-size: 10px;
  font-weight: 900;
}

.skill-button.ready {
  background: linear-gradient(135deg, #5dd6ff, #9cffbf);
  color: #0e1a1e;
  box-shadow: 0 0 18px rgba(106, 214, 255, 0.28);
}

.skip-button {
  width: 48px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #303b4a 0%, #151c27 100%);
  border: 1px solid #556477;
  color: #d8e4f2;
  font-size: 9px;
  font-weight: 900;
}

.wave-preview {
  grid-column: 1 / -1;
  min-height: 30px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: #171d26;
  border: 1px solid #485567;
  color: #f3f7ff;
  text-align: left;
}

.wave-preview span,
.wave-preview strong,
.wave-preview small {
  min-width: 0;
}

.wave-preview span {
  padding: 3px 6px;
  border-radius: 999px;
  background: #253246;
  color: #ffffff;
  font-size: 10px;
  font-weight: 1000;
  white-space: nowrap;
}

.wave-preview strong {
  color: #ffdc73;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.wave-preview small {
  color: #d8deea;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combat-stats-mini {
  width: min(100%, 364px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 2px;
}

.combat-stats-mini span {
  min-width: 0;
  padding: 3px 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)), #151d27;
  border: 1px solid #3e4b5c;
  color: #b8c8d8;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.combat-stats-mini strong {
  color: #fff2b8;
  font-size: 11px;
}

.wave-preview .boss-warning {
  border-color: #7b5132;
  color: #ffd36a;
}

.battle-summary {
  grid-column: 1 / -1;
  display: none;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(17, 22, 31, 0.92);
  border: 1px solid rgba(139, 151, 171, 0.38);
  color: #e7edf7;
  font-size: 10px;
  line-height: 1.3;
  max-height: 40px;
  overflow: hidden;
}

.battle-summary.active {
  display: block;
}

.fight-stage {
  position: relative;
  width: min(100%, 364px);
  height: 146px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(245, 197, 90, 0.16), transparent 42%),
    linear-gradient(180deg, #26364b 0%, #1d2633 48%, #171713 49%, #262016 100%),
    repeating-linear-gradient(90deg, rgba(255, 222, 156, 0.06) 0 18px, rgba(0, 0, 0, 0.04) 18px 36px),
    #1b1d22;
  border: 2px solid #445162;
  box-shadow:
    inset 0 -14px 26px rgba(0, 0, 0, 0.26),
    0 8px 20px rgba(0, 0, 0, 0.24);
}

.fight-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 30%, rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px);
  opacity: 0.86;
  pointer-events: none;
  z-index: 0;
}

.fight-stage::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 31px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(8, 14, 13, 0.56), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.stage-hud {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 2px;
  width: 112px;
  pointer-events: none;
}

.player-stage-hud {
  left: 12px;
  bottom: 3px;
  text-align: left;
}

.enemy-stage-hud {
  right: 12px;
  bottom: 3px;
  width: 124px;
  justify-items: end;
  text-align: right;
}

.stage-hud .unit-name,
.stage-hud .stage-hp-text {
  font-size: 9px;
  line-height: 1;
  color: #ffffff;
  text-shadow: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-hud .trait-chip {
  padding: 2px 6px;
  font-size: 8.5px;
}

.board-passive-badges {
  position: absolute;
  top: 6px;
  left: 7px;
  z-index: 8;
  display: none;
  max-width: 118px;
  grid-template-columns: repeat(4, 28px);
  gap: 3px;
  pointer-events: auto;
}

.board-passive-badges.active {
  display: grid;
}

.board-passive-badge {
  width: 28px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  align-items: center;
  padding: 2px;
  border: 1px solid rgba(159, 226, 255, 0.58);
  border-radius: 8px;
  color: #f2fbff;
  background:
    linear-gradient(180deg, rgba(32, 53, 74, 0.9), rgba(13, 22, 32, 0.86)),
    url("assets/generated/ui/popup-row.png?v=1781815000000");
  background-size: cover;
  box-shadow:
    0 0 10px rgba(91, 198, 255, 0.16),
    0 4px 8px rgba(0, 0, 0, 0.3);
  font-family: inherit;
  cursor: pointer;
}

.board-passive-badge img {
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 5px rgba(141, 226, 255, 0.42));
}

.board-passive-badge span {
  display: none;
}

.board-passive-badge small {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  min-width: 14px;
  padding: 1px 2px;
  border-radius: 999px;
  color: #1a1010;
  background: #ffe28a;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.board-passive-badge:active {
  transform: translateY(1px);
}

.enemy-stage-hud .trait-chip {
  display: none;
}

.stage-hud .hpbar {
  width: 100%;
  height: 7px;
}

.fight-feedback-slot {
  position: absolute;
  left: 50%;
  bottom: 3px;
  z-index: 9;
  width: min(176px, 46vw);
  min-height: 39px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

.combat-element-pill {
  width: 34px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(28, 34, 44, 0.82);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  color: #ffffff;
}

.combat-element-pill i,
.combat-element-pill b {
  font-style: normal;
  line-height: 1;
}

.combat-element-pill i {
  font-size: 8px;
}

.combat-element-pill b {
  font-size: 7.5px;
}

.stage-controls {
  position: absolute;
  left: 50%;
  top: 38px;
  z-index: 8;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
}

.stage-controls .skill-button {
  width: 76px;
  min-height: 20px;
  font-size: 9px;
}

.stage-controls .skip-button {
  width: 42px;
  height: 20px;
}

.fight-stage.fighting {
  border-color: #5a6a7a;
  box-shadow: inset 0 0 18px rgba(255, 211, 106, 0.1);
}

.fight-stage.slash-hit {
  animation: stageShake 280ms ease;
}

.fight-stage.burst-hit {
  animation: stageShake 380ms ease;
  box-shadow:
    inset 0 0 22px rgba(156, 255, 191, 0.18),
    0 0 22px rgba(158, 232, 255, 0.18);
}

.fight-stage.crit-hit {
  animation: stageShake 320ms ease;
  box-shadow:
    inset 0 0 20px rgba(255, 211, 106, 0.16),
    0 0 18px rgba(255, 211, 106, 0.15);
}

.fight-stage.boss-encounter {
  border-color: rgba(255, 211, 106, 0.28);
  box-shadow:
    inset 0 -22px 48px rgba(0, 0, 0, 0.32),
    inset 0 0 24px rgba(111, 78, 155, 0.18);
}

.fight-stage.fighting.boss-encounter::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 142px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(26, 18, 39, 0.86), rgba(49, 37, 76, 0.44) 48%, transparent 72%);
  transform: translateX(-50%) scale(0.7);
  opacity: 0;
  animation: bossRiftIn 680ms ease-out forwards;
}

.fight-stage.boss-alert {
  animation: bossStagePulse 760ms ease;
  border-color: rgba(255, 211, 106, 0.64);
  box-shadow:
    inset 0 0 26px rgba(255, 211, 106, 0.2),
    inset 0 -22px 48px rgba(0, 0, 0, 0.36),
    0 0 24px rgba(139, 92, 246, 0.28);
}

.fight-stage.fighting.final-boss-encounter::before {
  width: 168px;
  background:
    radial-gradient(ellipse, rgba(10, 8, 18, 0.94), rgba(66, 38, 83, 0.5) 48%, transparent 74%);
}

.fighter {
  position: absolute;
  bottom: 18px;
  width: 110px;
  height: 110px;
  transition: transform 100ms ease, filter 120ms ease;
  z-index: 2;
  filter: drop-shadow(0 9px 5px rgba(0, 0, 0, 0.36));
}

.fighter img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  translate: 0 var(--fighter-frame-anchor-y, 0%);
  transform: scale(0.92);
  transform-origin: center bottom;
  pointer-events: none;
}

.player-fighter {
  left: 23px;
  animation: combatIdle 1600ms ease-in-out infinite;
}

.fight-stage:not(.fighting) .player-fighter {
  filter:
    brightness(1.07)
    saturate(1.08)
    drop-shadow(0 9px 5px rgba(0, 0, 0, 0.36));
}

.player-fighter img {
  transform: translateX(0) translateY(3%) scale(1.14);
}

.player-fighter.anim-attack img {
  transform: translateX(0) translateY(3%) scale(1.14);
}

.player-fighter.anim-hurt img,
.player-fighter.anim-idle img {
  transform: translateX(0) translateY(3%) scale(1.14);
}

.player-fighter.anim-victory img {
  transform: translateX(0) translateY(3%) scale(1.14);
}

.player-fighter.anim-dead img {
  transform: translateX(0) translateY(3%) scale(1.14);
}

#playerFighter.anim-idle img,
#playerFighter.anim-attack img,
#playerFighter.anim-hurt img,
#playerFighter.anim-victory img,
#playerFighter.anim-dead img {
  transform: translateX(0) translateY(3%) scale(1.14) !important;
}

.enemy-fighter {
  right: 25px;
  animation: combatIdle 1500ms ease-in-out infinite reverse;
}

.enemy-fighter img {
  transform: scale(1.02);
}

.fighter.defeated {
  animation: none !important;
  filter: grayscale(0.2) brightness(0.78) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.42));
}

.player-fighter.defeated {
  transform: none;
}

.enemy-fighter.defeated {
  transform: translateY(8px) rotate(4deg);
}

.enemy-slime {
  bottom: 19px;
  right: 23px;
  width: 108px;
  height: 104px;
}

.enemy-slime img {
  transform: translateX(-8%) translateY(4%) scale(1.18);
}

.enemy-plant {
  bottom: 18px;
  width: 104px;
  height: 110px;
  right: 26px;
}

.enemy-plant img {
  transform: scale(1);
}

.enemy-zombie {
  bottom: 18px;
  width: 104px;
  height: 110px;
  right: 26px;
}

.enemy-zombie img {
  transform: translateY(1%) scale(1.04);
}

.enemy-ghost {
  bottom: 18px;
  width: 100px;
  height: 108px;
  right: 28px;
}

.enemy-ghost img {
  transform: scale(1);
}

.enemy-drone {
  bottom: 16px;
  width: 106px;
  height: 112px;
  right: 26px;
}

.enemy-drone img {
  transform: scale(0.92);
}

.enemy-fighter.enemy-drawn-imp {
  right: 27px;
  bottom: 17px;
  width: 106px;
  height: 108px;
}

.enemy-fighter.enemy-drawn-imp img {
  transform: translateY(2%) scale(1.1);
}

.enemy-fighter.enemy-drawn-wraith {
  right: 25px;
  bottom: 16px;
  width: 112px;
  height: 114px;
}

.enemy-fighter.enemy-drawn-wraith img {
  transform: translateY(1%) scale(1.08);
}

.enemy-fighter.enemy-drawn-rune {
  right: 24px;
  bottom: 15px;
  width: 114px;
  height: 116px;
}

.enemy-fighter.enemy-drawn-rune img {
  transform: translateY(1%) scale(1.04);
}

.enemy-fighter.enemy-drawn-mantid {
  right: 24px;
  bottom: 15px;
  width: 114px;
  height: 116px;
}

.enemy-fighter.enemy-drawn-mantid img {
  transform: translateY(2%) scale(1.08);
}

.enemy-fighter.enemy-drawn-marrow {
  right: 22px;
  bottom: 17px;
  width: 112px;
  height: 104px;
}

.enemy-fighter.enemy-drawn-marrow img {
  transform: translateY(4%) scale(1.12);
}

.enemy-boss {
  bottom: 14px;
  right: 17px;
  width: 118px;
  height: 122px;
}

.enemy-boss img {
  transform: scale(0.96);
}

.enemy-oga-boss {
  bottom: 10px;
  right: 16px;
  width: 124px;
  height: 124px;
}

.enemy-fighter.enemy-drawn-priest {
  right: 0;
  bottom: 6px;
  width: 154px;
  height: 132px;
}

.enemy-fighter.enemy-drawn-priest img {
  transform: translateY(1%) scale(1.04) scaleX(-1);
}

.enemy-fighter.enemy-drawn-dragon {
  right: -2px;
  bottom: 6px;
  width: 158px;
  height: 134px;
}

.enemy-fighter.enemy-drawn-dragon img {
  transform: translateY(1%) scale(1.04) scaleX(-1);
}

.enemy-fighter.enemy-drawn-titan {
  right: -2px;
  bottom: 6px;
  width: 158px;
  height: 134px;
}

.enemy-fighter.enemy-drawn-titan img {
  transform: translateY(1%) scale(1.04) scaleX(-1);
}

.enemy-fighter.enemy-boss.enemy-drawn-boss {
  right: -2px;
  bottom: 6px;
  width: 158px;
  height: 134px;
}

.enemy-fighter.enemy-boss.enemy-cobra-queen,
.enemy-fighter.enemy-boss.enemy-golem-king {
  right: -6px;
  width: 166px;
  height: 138px;
}

.enemy-oga-boss::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 104px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 203, 99, 0.28), rgba(128, 54, 255, 0.08) 54%, transparent 72%);
  transform: translateX(-50%);
  z-index: -1;
}

.enemy-oga-boss::after {
  display: none;
}

.enemy-oga-boss img {
  transform: translateY(4%) scale(0.98) scaleX(-1);
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.52));
}

.enemy-final-boss {
  right: 12px;
  bottom: 6px;
  width: 136px;
  height: 132px;
}

.enemy-final-boss::before {
  width: 132px;
  height: 30px;
  background: radial-gradient(ellipse, rgba(255, 68, 120, 0.36), rgba(128, 54, 255, 0.16) 56%, transparent 74%);
}

.enemy-final-boss::after {
  display: none;
}

.enemy-final-boss img {
  transform: translateY(5%) scale(0.96) scaleX(-1);
  filter:
    drop-shadow(0 0 10px rgba(255, 72, 128, 0.35))
    drop-shadow(0 12px 9px rgba(0, 0, 0, 0.58));
}

.enemy-oga-boss-4 img,
.enemy-oga-boss-9 img {
  transform: translateY(6%) scale(1.08) scaleX(-1);
}

.enemy-oga-boss-1 img,
.enemy-oga-boss-12 img {
  transform: translateY(5%) scale(1.02) scaleX(-1);
}

.enemy-slime-gel img {
  filter: none;
}

.enemy-slime-iron img {
  filter: none;
}

.enemy-mushroom-green img {
  filter: none;
}

.enemy-mushroom-brain img {
  filter: none;
}

.enemy-mushroom-armor img {
  filter: none;
}

.enemy-mushroom-acid img {
  filter: none;
}

.enemy-plant-snap img {
  filter: none;
}

.enemy-plant-boss img {
  filter: none;
}

.enemy-plant-ancient img {
  filter: none;
}

.enemy-ghost-cloth img {
  filter: none;
}

.enemy-ghost-noise img {
  filter: none;
}

.enemy-ghost-crown img {
  filter: none;
}

.enemy-drone-scout img {
  filter: none;
}

.enemy-drone-zap img {
  filter: none;
}

.enemy-drone-overheat img {
  filter: none;
}

.enemy-drone-emperor img {
  filter: none;
}

.player-ready {
  filter: drop-shadow(0 0 14px rgba(156, 255, 191, 0.22)) drop-shadow(0 9px 5px rgba(0, 0, 0, 0.36));
}

.player-elite {
  filter: drop-shadow(0 0 18px rgba(245, 197, 90, 0.34)) drop-shadow(0 9px 5px rgba(0, 0, 0, 0.36));
}

.gear-fx {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.gear-piece {
  position: absolute;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid rgba(255, 239, 154, 0.55);
  opacity: 0.96;
  background: rgba(10, 15, 20, 0.72);
  box-shadow:
    0 0 10px rgba(255, 220, 115, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.26);
}

.gear-piece img {
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}

.gear-piece.weapon {
  background: rgba(72, 36, 25, 0.78);
}

.gear-piece.guard {
  background: rgba(31, 64, 91, 0.78);
}

.gear-piece.tech {
  background: rgba(55, 82, 34, 0.72);
}

.gear-piece.focus {
  background: rgba(62, 48, 104, 0.74);
}

.gear-piece.support {
  background: rgba(43, 88, 59, 0.72);
}

.gear-piece:nth-child(1) {
  left: 50% !important;
  top: -4px !important;
  transform: translateX(-50%);
}

.gear-piece:nth-child(2) {
  left: 35% !important;
  top: 4px !important;
  transform: translateX(-50%) scale(0.94);
}

.gear-piece:nth-child(3) {
  left: 65% !important;
  top: 4px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) scale(0.94);
}

.gear-piece:nth-child(4) {
  left: 55px !important;
  top: 17px !important;
}

.gear-piece.boost,
.gear-piece.skill {
  background: rgba(47, 39, 84, 0.78);
}

.gear-piece small {
  position: absolute;
  right: -4px;
  bottom: -3px;
  min-width: 13px;
  padding: 1px 2px;
  border-radius: 999px;
  background: rgba(10, 12, 18, 0.88);
  border: 1px solid rgba(255, 216, 106, 0.62);
  color: #ffd86a;
  font-size: 6px;
  font-weight: 1000;
  line-height: 1;
}

.gear-weapon::before,
.gear-guard::before,
.gear-tech::before,
.gear-focus::before,
.gear-support::before,
.gear-skill::before {
  content: "";
  position: absolute;
  inset: 20px 22px 16px 22px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.42;
}

.gear-weapon::before {
  box-shadow: 16px 0 22px rgba(255, 132, 77, 0.58);
}

.gear-guard::before {
  box-shadow: -10px 4px 24px rgba(118, 199, 255, 0.55);
}

.gear-tech::before {
  box-shadow: 12px 18px 22px rgba(156, 255, 191, 0.58);
}

.gear-focus::before {
  box-shadow: -16px 18px 22px rgba(178, 151, 255, 0.58);
}

.gear-support::before {
  box-shadow: 0 -12px 24px rgba(121, 255, 166, 0.42);
}

.gear-skill::before {
  box-shadow: 0 -4px 25px rgba(184, 150, 255, 0.5);
}

.enemy-normal {
  filter: drop-shadow(0 9px 5px rgba(0, 0, 0, 0.36));
}

.enemy-armor {
  filter: drop-shadow(0 9px 5px rgba(0, 0, 0, 0.36));
}

.enemy-bleed {
  filter: drop-shadow(0 9px 5px rgba(0, 0, 0, 0.36));
}

.enemy-jammer {
  filter: drop-shadow(0 9px 5px rgba(0, 0, 0, 0.36));
}

.enemy-surge {
  filter: drop-shadow(0 9px 5px rgba(0, 0, 0, 0.36));
}

.enemy-boss {
  transform: none;
  filter:
    drop-shadow(0 0 12px rgba(255, 211, 106, 0.16))
    drop-shadow(0 11px 8px rgba(0, 0, 0, 0.56));
}

.enemy-fighter.enemy-boss.enemy-oga-boss {
  filter:
    drop-shadow(0 0 12px rgba(255, 211, 106, 0.18))
    drop-shadow(0 11px 8px rgba(0, 0, 0, 0.56));
}

.enemy-fighter.enemy-boss.enemy-oga-boss img {
  animation: none;
}

.enemy-fighter.enemy-boss.enemy-final-boss {
  filter:
    drop-shadow(0 0 16px rgba(109, 82, 156, 0.36))
    drop-shadow(0 13px 10px rgba(0, 0, 0, 0.62));
}

.enemy-fighter.enemy-drawn-imp,
.enemy-fighter.enemy-drawn-wraith,
.enemy-fighter.enemy-drawn-rune,
.enemy-fighter.enemy-drawn-mantid,
.enemy-fighter.enemy-drawn-marrow,
.enemy-fighter.enemy-drawn-wolf,
.enemy-fighter.enemy-drawn-wisp,
.enemy-fighter.enemy-drawn-shroom {
  filter: drop-shadow(0 9px 5px rgba(0, 0, 0, 0.42));
}

.enemy-fighter.enemy-boss.enemy-drawn-priest,
.enemy-fighter.enemy-boss.enemy-drawn-dragon,
.enemy-fighter.enemy-boss.enemy-drawn-titan,
.enemy-fighter.enemy-boss.enemy-drawn-boss {
  filter:
    drop-shadow(0 0 12px rgba(255, 211, 106, 0.18))
    drop-shadow(0 11px 8px rgba(0, 0, 0, 0.56));
}

.enemy-fighter.enemy-drawn-imp img,
.enemy-fighter.enemy-drawn-wraith img,
.enemy-fighter.enemy-drawn-rune img,
.enemy-fighter.enemy-drawn-mantid img,
.enemy-fighter.enemy-drawn-marrow img,
.enemy-fighter.enemy-drawn-wolf img,
.enemy-fighter.enemy-drawn-wisp img,
.enemy-fighter.enemy-drawn-shroom img,
.enemy-fighter.enemy-drawn-boss img {
  filter: none;
}

.enemy-fighter img {
  filter: none !important;
}

.enemy-fighter.enemy-drawn-wolf {
  right: 4px;
  bottom: 8px;
  width: 154px;
  height: 130px;
}

.enemy-fighter.enemy-drawn-wolf img {
  transform: translateY(1%) scale(0.96) scaleX(-1);
}

.enemy-fighter.enemy-drawn-wisp {
  right: 24px;
  bottom: 20px;
  width: 110px;
  height: 108px;
}

.enemy-fighter.enemy-drawn-wisp img {
  transform: translateY(1%) scale(1.02) scaleX(-1);
}

.enemy-fighter.enemy-drawn-shroom {
  right: 20px;
  bottom: 10px;
  width: 124px;
  height: 116px;
}

.enemy-fighter.enemy-drawn-shroom img {
  transform: translateY(1%) scale(1.02) scaleX(-1);
}

.enemy-fighter.enemy-drawn-goblin img {
  transform: translateY(1%) scale(1.02) scaleX(-1);
}

.enemy-fighter.enemy-new-high {
  right: 13px;
  bottom: 8px;
  width: 140px;
  height: 134px;
  filter:
    drop-shadow(0 0 12px rgba(109, 230, 220, 0.14))
    drop-shadow(0 10px 7px rgba(0, 0, 0, 0.5));
}

.enemy-fighter.enemy-new-high img {
  image-rendering: auto;
  transform: translateY(1%) scale(1.02);
}

.enemy-fighter.enemy-boss.enemy-king-high {
  right: 4px;
  bottom: 2px;
  width: 156px;
  height: 150px;
  filter:
    drop-shadow(0 0 14px rgba(255, 218, 112, 0.2))
    drop-shadow(0 12px 9px rgba(0, 0, 0, 0.52));
}

.enemy-fighter.enemy-boss.enemy-king-high img {
  image-rendering: auto;
  transform: translateY(1%) scale(1.03);
}

/* The cauldron king's source art has a smaller painted area than its canvas. */
.enemy-fighter.enemy-boss[data-sprite="kingEvolvedCauldronMimic"] {
  width: 132px;
  height: 127px;
  right: 16px;
  bottom: 2px;
}

.enemy-fighter.enemy-boss.enemy-drawn-priest img {
  transform: translateY(1%) scale(1.04) scaleX(-1);
}

.enemy-fighter.enemy-boss.enemy-drawn-dragon img {
  transform: translateY(1%) scale(1.04) scaleX(-1);
}

.enemy-fighter.enemy-boss.enemy-drawn-titan img {
  transform: translateY(1%) scale(1.04) scaleX(-1);
}

.enemy-fighter.enemy-boss.enemy-drawn-boss img {
  transform: translateY(1%) scale(1.04) scaleX(-1);
}

.item-visual-0 .item-icon,
.item-visual-0 .tray-icon,
.item-visual-0 .inline-item-icon {
  background: radial-gradient(circle, rgba(255, 132, 77, 0.28), rgba(255, 255, 255, 0.08));
}

.item-visual-1 .item-icon,
.item-visual-1 .tray-icon,
.item-visual-1 .inline-item-icon {
  background: radial-gradient(circle, rgba(118, 199, 255, 0.3), rgba(255, 255, 255, 0.08));
}

.item-visual-2 .item-icon,
.item-visual-2 .tray-icon,
.item-visual-2 .inline-item-icon {
  background: radial-gradient(circle, rgba(156, 255, 191, 0.28), rgba(255, 255, 255, 0.08));
}

.item-visual-3 .item-icon,
.item-visual-3 .tray-icon,
.item-visual-3 .inline-item-icon {
  background: radial-gradient(circle, rgba(184, 150, 255, 0.3), rgba(255, 255, 255, 0.08));
}

.item-visual-4 .item-icon,
.item-visual-4 .tray-icon,
.item-visual-4 .inline-item-icon {
  background: radial-gradient(circle, rgba(245, 197, 90, 0.3), rgba(255, 255, 255, 0.08));
}

.item-visual-5 .item-icon,
.item-visual-5 .tray-icon,
.item-visual-5 .inline-item-icon {
  background: radial-gradient(circle, rgba(240, 109, 109, 0.28), rgba(255, 255, 255, 0.08));
}

.item-visual-6 .item-icon,
.item-visual-6 .tray-icon,
.item-visual-6 .inline-item-icon {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26), rgba(106, 214, 255, 0.08));
}

.item-visual-7 .item-icon,
.item-visual-7 .tray-icon,
.item-visual-7 .inline-item-icon {
  background: radial-gradient(circle, rgba(255, 155, 99, 0.24), rgba(184, 150, 255, 0.1));
}

.player-fighter.strike {
  animation: playerStrike 420ms ease-out;
}

.player-fighter.crit-strike {
  animation: playerCritStrike 520ms cubic-bezier(0.2, 0.8, 0.18, 1);
}

.player-fighter.skill-strike {
  animation: playerSkillStrike 620ms cubic-bezier(0.2, 0.8, 0.18, 1);
}

.enemy-fighter.strike {
  animation: enemyStrike 420ms ease-out;
}

.fighter.hit {
  filter: brightness(1.45) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.status-fx-img {
  position: absolute;
  z-index: 8;
  display: block;
  pointer-events: none;
  object-fit: contain;
  image-rendering: auto;
  opacity: 0;
  filter: saturate(0.72) brightness(0.86);
}

.status-fx-img.active {
  opacity: 0.92;
}

.fighter .status-fx-img {
  left: 50%;
  top: -16px;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
}

.fighter .status-fx-img.status-stun {
  top: -15px;
  width: 26px;
  height: 26px;
}

.fighter .status-fx-img.status-sleep {
  top: -15px;
  width: 28px;
  height: 28px;
}

.fighter .status-fx-img.status-root {
  top: -15px;
  width: 28px;
  height: 28px;
}

.fighter .status-fx-img.status-bubble {
  top: -15px;
  width: 28px;
  height: 28px;
}

.fighter .status-fx-img.status-time {
  top: -15px;
  width: 28px;
  height: 28px;
}

.fighter .status-fx-img.status-seal {
  top: -15px;
  width: 28px;
  height: 28px;
}

.fighter .status-fx-img.status-reflect {
  top: -15px;
  width: 26px;
  height: 26px;
}

.fighter .status-fx-img.status-block,
.fighter .status-fx-img.status-boost,
.fighter .status-fx-img.status-heal,
.fighter .status-fx-img.status-warning,
.fighter .status-fx-img.status-impact {
  top: -15px;
  width: 28px;
  height: 28px;
}

.fighter .status-fx-img.status-shield {
  top: -15px;
  width: 28px;
  height: 28px;
}

.stage-status-fx {
  left: 50%;
  top: 27%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
}

.stage-status-fx.status-warning {
  left: 50%;
  top: 27%;
  width: 28px;
  height: 28px;
}

.stage-status-fx.status-impact,
.stage-status-fx.status-reflect {
  left: 50%;
  top: 27%;
  width: 30px;
  height: 30px;
}

.item-tile.drop-target {
  outline: 2px solid var(--coin);
  box-shadow:
    inset 0 0 0 1px rgba(245, 197, 90, 0.5),
    0 0 14px rgba(245, 197, 90, 0.28);
}

.slash-fx,
.impact-fx {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

.slash-fx {
  width: 94px;
  height: 50px;
  border-top: 5px solid #fff1b8;
  border-right: 5px solid rgba(255, 141, 91, 0.95);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-18deg) scale(0.45);
  filter: drop-shadow(0 0 8px rgba(255, 211, 106, 0.8));
}

.slash-fx.active {
  animation: slashSweep 460ms ease-out;
}

.slash-fx.burst {
  width: 116px;
  border-top-color: #9ee8ff;
  border-right-color: #9cffbf;
  filter: drop-shadow(0 0 12px rgba(106, 214, 255, 0.9));
}

.impact-fx {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffd36a;
  box-shadow:
    0 0 0 9px rgba(255, 211, 106, 0.25),
    0 0 28px rgba(255, 141, 91, 0.9);
  transform: translate(-50%, -50%) scale(0.3);
}

.impact-fx.active {
  animation: impactPop 460ms ease-out;
}

.skill-fx {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 106px;
  height: 88px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  --skill-main: #9ee8ff;
  --skill-glow: rgba(106, 214, 255, 0.58);
}

.skill-fx::before,
.skill-fx::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.skill-fx::before {
  inset: 12px;
  border: 2px solid var(--skill-main);
  box-shadow:
    0 0 18px var(--skill-glow),
    inset 0 0 16px var(--skill-glow);
}

.skill-fx::after {
  inset: 25px;
  background: radial-gradient(circle, var(--skill-glow), transparent 68%);
}

.skill-fx img {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px var(--skill-main));
}

.skill-fx span {
  position: absolute;
  left: 50%;
  bottom: -3px;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 72px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(12, 16, 23, 0.82);
  border: 1px solid var(--skill-main);
  color: #f8fbff;
  font-size: 9px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.skill-fx.active {
  animation: skillBurst 720ms ease-out;
}

.skill-fx.skill-strike {
  --skill-main: #ffd36a;
  --skill-glow: rgba(255, 131, 91, 0.58);
}

.skill-fx.skill-guard {
  --skill-main: #9ee8ff;
  --skill-glow: rgba(102, 175, 255, 0.62);
}

.skill-fx.skill-heal {
  --skill-main: #8dffb8;
  --skill-glow: rgba(110, 231, 160, 0.62);
}

.skill-fx.skill-haste {
  --skill-main: #ffe96e;
  --skill-glow: rgba(255, 226, 80, 0.58);
}

.skill-fx.skill-mark {
  --skill-main: #ff7ee7;
  --skill-glow: rgba(255, 87, 206, 0.52);
}

.skill-fx.skill-pierce {
  --skill-main: #b8f7ff;
  --skill-glow: rgba(120, 231, 255, 0.66);
}

.skill-fx.skill-moon {
  --skill-main: #c5a8ff;
  --skill-glow: rgba(152, 105, 255, 0.62);
}

.skill-fx.skill-seraph {
  --skill-main: #fff1b8;
  --skill-glow: rgba(255, 241, 184, 0.76);
}

.boss-cutin {
  position: absolute;
  left: 50%;
  top: 20px;
  z-index: 9;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "icon kind"
    "icon title"
    "icon text";
  align-items: center;
  width: min(330px, calc(100% - 28px));
  min-height: 70px;
  padding: 10px 18px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -14px) scale(0.96);
  background: url("assets/generated/ui/popup-result-card.png?v=1781815000000") center / 100% 100% no-repeat;
  color: #fff7d6;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.42));
}

.boss-cutin img {
  grid-area: icon;
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(255, 220, 132, 0.54));
}

.boss-cutin span {
  grid-area: kind;
  color: #f5d574;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1.1;
}

.boss-cutin strong {
  grid-area: title;
  color: #fff7d6;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.12;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.boss-cutin small {
  grid-area: text;
  color: #dbe7f7;
  overflow: hidden;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boss-cutin.active {
  animation: bossCutinIn 1250ms ease both;
}

.boss-cutin.cutin-moon img {
  filter:
    drop-shadow(0 0 8px rgba(197, 168, 255, 0.72))
    drop-shadow(0 0 14px rgba(126, 87, 255, 0.4));
}

.boss-cutin.cutin-seraph img {
  filter:
    drop-shadow(0 0 8px rgba(255, 241, 184, 0.85))
    drop-shadow(0 0 16px rgba(255, 199, 76, 0.46));
}

.boss-cutin.cutin-strike img {
  filter:
    drop-shadow(0 0 8px rgba(255, 131, 91, 0.78))
    drop-shadow(0 0 14px rgba(255, 82, 63, 0.36));
}

.boss-cutin.cutin-mark img {
  filter:
    drop-shadow(0 0 8px rgba(255, 126, 231, 0.72))
    drop-shadow(0 0 14px rgba(160, 92, 246, 0.42));
}

.fight-stage.final-phase {
  filter:
    saturate(1.12)
    drop-shadow(0 0 18px rgba(255, 211, 106, 0.15));
}

.fight-stage.final-phase .enemy-fighter {
  filter:
    drop-shadow(0 0 10px rgba(255, 210, 110, 0.38))
    drop-shadow(0 16px 14px rgba(0, 0, 0, 0.5));
}

.clash-mark {
  position: relative;
  left: auto;
  top: auto;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.78);
  opacity: 0;
  min-width: 48px;
  height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffeaa2, #d8932f),
    #f5c55a;
  color: #17110a;
  font-size: 11.5px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  border: 1px solid rgba(255, 245, 184, 0.82);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 10px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  overflow: hidden;
}

.clash-mark.flash {
  animation: clashFlash 260ms ease;
}

.clash-mark.burst {
  background: #9ee8ff;
}

.clash-mark.critical {
  width: 92px;
  min-width: 92px;
  height: 35px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/ui/critical-badge.png?v=1785800000000") center / 100% 100% no-repeat;
  color: #fff3bc;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 #351407,
    0 0 7px rgba(255, 232, 137, 0.92);
  box-shadow: none;
  filter:
    drop-shadow(0 0 9px rgba(255, 194, 74, 0.66))
    drop-shadow(0 3px 7px rgba(0, 0, 0, 0.42));
}

.critical-mark {
  position: absolute;
  left: 50%;
  top: -8px;
  z-index: 10;
  width: 92px;
  height: 35px;
  display: grid;
  place-items: center;
  background: url("assets/ui/critical-badge.png?v=1785800000000") center / 100% 100% no-repeat;
  color: #fff3bc;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 2px 0 #351407,
    0 0 7px rgba(255, 232, 137, 0.92);
  filter:
    drop-shadow(0 0 9px rgba(255, 194, 74, 0.66))
    drop-shadow(0 3px 7px rgba(0, 0, 0, 0.42));
  opacity: 0;
  transform: translateX(-50%) scale(0.72);
  pointer-events: none;
}

.critical-mark.show {
  animation: playerCriticalFlash 620ms cubic-bezier(0.18, 0.9, 0.28, 1);
}

.clash-mark.critical.flash {
  animation: criticalClashFlash 520ms cubic-bezier(0.18, 0.9, 0.28, 1);
}

.clash-mark.boss {
  top: auto;
  min-width: 82px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 225, 138, 0.74);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 240, 174, 0.34), transparent 60%),
    linear-gradient(180deg, #5d2d86, #201326);
  color: #ffe28a;
  font-size: 12px;
  letter-spacing: 0;
  text-align: center;
  box-shadow:
    0 0 16px rgba(255, 211, 106, 0.42),
    0 0 28px rgba(139, 92, 246, 0.34);
}

.clash-mark.boss.flash {
  animation: bossClashFlash 1250ms ease;
}

.damage-float {
  position: absolute;
  right: 22px;
  top: 5px;
  z-index: 5;
  opacity: 0;
  color: #ffd36a;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 2px 0 #101318;
  pointer-events: none;
}

.damage-float.enemy-damage {
  right: 74px;
  top: 36px;
  color: #ffdc73;
}

.damage-float.critical-damage {
  right: 62px;
  color: #fff1a8;
  font-size: 13px;
  text-shadow:
    0 2px 0 #351407,
    0 0 8px rgba(255, 211, 106, 0.86);
}

.damage-float.player-damage,
.player-damage-float {
  right: auto;
  left: calc(clamp(12px, 5vw, 24px) + clamp(49px, 14vw, 58px));
  top: calc(100% - 21px - clamp(98px, 28vw, 116px) + 4px);
  z-index: 12;
  min-width: 42px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 177, 116, 0.72);
  border-radius: 999px;
  background: rgba(37, 11, 14, 0.84);
  color: #ffc39a;
  font-size: 13px;
  text-align: center;
  text-shadow:
    0 2px 0 #2a0c0a,
    0 0 8px rgba(255, 130, 82, 0.62);
  box-shadow:
    0 0 11px rgba(255, 96, 67, 0.25),
    0 4px 10px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
}

.damage-float.show {
  animation: damageRise 620ms ease;
}

.damage-float.heal {
  border-color: rgba(128, 255, 177, 0.68);
  background: rgba(8, 35, 24, 0.84);
  color: #6ee7a0;
}

.damage-float.evade {
  border-color: rgba(158, 232, 255, 0.68);
  background: rgba(8, 25, 39, 0.84);
  color: #9ee8ff;
}

.player-damage-float.show {
  animation: playerValueRise 680ms ease;
}

body.qa-float-freeze .player-damage-float.show {
  opacity: 1;
  animation: none;
}

body.qa-float-heal .player-damage-float.show {
  border-color: rgba(128, 255, 177, 0.68);
  background: rgba(8, 35, 24, 0.84);
  color: #6ee7a0;
}

@keyframes combatIdle {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes bossRiftIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.55);
    filter: blur(4px);
  }
  48% {
    opacity: 0.95;
    transform: translateX(-50%) scale(1.08);
    filter: blur(0);
  }
  100% {
    opacity: 0.62;
    transform: translateX(-50%) scale(1);
    filter: blur(0);
  }
}

@keyframes bossStagePulse {
  0% {
    filter: brightness(0.86) saturate(1.1);
    transform: scale(0.992);
  }
  42% {
    filter: brightness(1.24) saturate(1.22);
    transform: scale(1.006);
  }
  100% {
    filter: none;
    transform: scale(1);
  }
}

@keyframes bossEnter {
  0% {
    opacity: 0;
    transform: translateY(12%) scale(0.82) scaleX(-1);
    filter: brightness(0.25);
  }
  58% {
    opacity: 1;
    transform: translateY(1%) scale(1.04) scaleX(-1);
    filter: brightness(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(4%) scale(0.98) scaleX(-1);
    filter: brightness(1);
  }
}

@keyframes stageShake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-2px);
  }
  40% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes unlockCardIn {
  to {
    transform: translateY(0) scale(1);
  }
}

@keyframes portalSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes portalSpinReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes unlockIconPop {
  0% {
    transform: translateY(48px) scale(0.35);
    opacity: 0;
  }
  58% {
    transform: translateY(-10px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes playerStrike {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(2px) translateY(-1px);
  }
  55% {
    transform: translateX(6px) translateY(-1px) scale(1.01);
  }
  72% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes playerCritStrike {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(3px) translateY(-2px) rotate(-1deg) scale(1.01);
  }
  55% {
    transform: translateX(9px) translateY(-3px) rotate(2deg) scale(1.03);
  }
  76% {
    transform: translateX(4px) rotate(1deg) scale(1.01);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes playerSkillStrike {
  0% {
    transform: translateX(0) translateY(0) scale(1);
  }
  24% {
    transform: translateX(2px) translateY(-3px) rotate(-2deg) scale(1.02);
  }
  52% {
    transform: translateX(8px) translateY(-4px) rotate(2deg) scale(1.04);
  }
  78% {
    transform: translateX(4px) rotate(1deg) scale(1.02);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes enemyStrike {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-5px) translateY(-1px) scale(1.02);
  }
  55% {
    transform: translateX(-16px) translateY(-1px) scale(1.04);
  }
  72% {
    transform: translateX(-8px) translateY(0) scale(1.02);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes clashFlash {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  45% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes criticalClashFlash {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(-3deg);
    filter: brightness(1.25);
  }
  18% {
    opacity: 1;
    transform: scale(1.16) rotate(2deg);
    filter: brightness(1.35);
  }
  58% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.08) translateY(-4px);
    filter: brightness(1);
  }
}

@keyframes playerCriticalFlash {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(4px) scale(0.62) rotate(-3deg);
    filter: brightness(1.25);
  }
  18% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.08) rotate(2deg);
    filter: brightness(1.35);
  }
  62% {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px) scale(0.96) rotate(0deg);
    filter: brightness(1.05);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(1.02);
    filter: brightness(1);
  }
}

@keyframes bossClashFlash {
  0% {
    opacity: 0;
    transform: translateY(-7px) scale(0.72);
  }
  18% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  74% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-2px) scale(1.06);
  }
}

@keyframes damageRise {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes playerValueRise {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.9);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -14px) scale(0.98);
  }
}

@keyframes skillBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42) rotate(-12deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.32) rotate(10deg);
  }
}

@keyframes bossCutinIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.92);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.98);
  }
}

@keyframes slashSweep {
  0% {
    opacity: 0;
    transform: translate(-62%, -44%) rotate(-24deg) scale(0.35);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-12deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-34%, -58%) rotate(10deg) scale(1.15);
  }
}

@keyframes impactPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.65);
  }
}

@keyframes fusionPop {
  0% {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.78);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.08);
  }
  42% {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -24px) scale(0.94);
  }
}

@keyframes fusionCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes absorbLeft {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  62% {
    opacity: 1;
    transform: translateX(calc(100% + 8px)) scale(0.72);
  }
  100% {
    opacity: 0;
    transform: translateX(calc(100% + 8px)) scale(0.18);
  }
}

@keyframes absorbCenter {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  62% {
    opacity: 1;
    transform: translateY(0) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(0.16);
  }
}

@keyframes absorbRight {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  62% {
    opacity: 1;
    transform: translateX(calc(-100% - 8px)) scale(0.72);
  }
  100% {
    opacity: 0;
    transform: translateX(calc(-100% - 8px)) scale(0.18);
  }
}

@keyframes fusionCorePulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  44% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.85);
  }
  76% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.45);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

@keyframes resultPop {
  0%,
  64% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes rareRevealCard {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rareRevealPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 239, 154, 0.18),
      0 0 18px rgba(255, 220, 115, 0.18);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 239, 154, 0.38),
      0 0 34px rgba(255, 220, 115, 0.34);
  }
}

@keyframes rareRevealSpin {
  to {
    transform: rotate(360deg);
  }
}

.fusion-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  place-items: center;
  padding: 18px;
  background: rgba(5, 7, 10, 0.68);
  backdrop-filter: blur(7px);
}

.fusion-panel.active {
  display: grid;
}

.fusion-card {
  width: min(390px, 100%);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 220, 115, 0.2), transparent 36%),
    #1f252c;
  border: 1px solid #d7aa48;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
  display: grid;
  gap: 10px;
  text-align: center;
  animation: fusionCardIn 260ms ease both;
}

.fusion-panel.secret-fusion .fusion-card {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 239, 171, 0.32), transparent 30%),
    radial-gradient(circle at 50% 58%, rgba(184, 150, 255, 0.2), transparent 42%),
    #211d2b;
  border-color: #ffe39a;
  box-shadow:
    0 0 0 1px rgba(255, 227, 154, 0.18),
    0 0 34px rgba(184, 150, 255, 0.28),
    0 24px 70px rgba(0, 0, 0, 0.56);
}

.fusion-card > strong {
  color: #ffdc73;
  font-size: 21px;
  line-height: 1.15;
}

.fusion-absorb {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  min-height: 104px;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.fusion-material,
.fusion-result-pop {
  position: relative;
  z-index: 2;
  min-height: 74px;
  border: 1px solid currentColor;
  border-radius: 8px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 5px;
  background: #171b22;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}

.fusion-material img,
.fusion-result-pop img {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  object-fit: contain;
  padding: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.fusion-material span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.05;
}

.fusion-material small,
.fusion-result-pop span {
  color: currentColor;
  font-size: 9px;
  font-weight: 1000;
}

.fusion-panel.active .material-0 {
  animation: absorbLeft 980ms ease-in-out both;
}

.fusion-panel.active .material-1 {
  animation: absorbCenter 980ms ease-in-out both;
}

.fusion-panel.active .material-2 {
  animation: absorbRight 980ms ease-in-out both;
}

.fusion-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 248, 196, 0.95), rgba(255, 220, 115, 0.36) 45%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  filter: blur(0.2px);
}

.fusion-panel.active .fusion-core {
  animation: fusionCorePulse 1080ms ease-out both;
}

.fusion-panel.secret-fusion .fusion-core {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(255, 220, 115, 0.62) 34%, rgba(184, 150, 255, 0.35) 58%, transparent 74%);
  filter: drop-shadow(0 0 16px rgba(255, 220, 115, 0.72));
}

.fusion-result-pop {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 74px;
  min-height: 74px;
  transform: translate(-50%, -50%) scale(0);
}

.fusion-panel.active .fusion-result-pop {
  animation: resultPop 1120ms ease both;
}

.fusion-result {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
}

.fusion-result-icon {
  width: 58px;
  height: 58px;
  box-sizing: border-box;
  object-fit: contain;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 220, 115, 0.55);
}

.fusion-panel.secret-fusion .fusion-result-icon {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(184, 150, 255, 0.16)),
    rgba(0, 0, 0, 0.22);
  border-color: #ffe39a;
  box-shadow: 0 0 18px rgba(255, 220, 115, 0.28);
}

.fusion-result h2 {
  margin: 2px 0 3px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}

.fusion-result p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.fusion-result-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.fusion-result-stats span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 220, 115, 0.14);
  color: #ffe39a;
  font-size: 11px;
  font-weight: 900;
}

.reward-panel,
.item-info-panel,
.end-panel,
.enemy-info-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 78;
  place-items: center;
  padding: 18px;
  background: rgba(5, 7, 10, 0.66);
  backdrop-filter: blur(6px);
}

.item-info-panel {
  z-index: 84;
}

.enemy-info-panel {
  z-index: 86;
}

.reward-panel.active,
.item-info-panel.active,
.end-panel.active,
.enemy-info-panel.active {
  display: grid;
}

.run-prep-panel,
.board-passive-choice-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 275;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
  background: rgba(4, 5, 10, 0.78);
  backdrop-filter: blur(7px);
}

.run-prep-panel.active,
.board-passive-choice-panel.active {
  display: grid;
}

.run-prep-card,
.board-passive-choice-card {
  width: min(420px, calc(100vw - 18px));
  min-height: 470px;
  padding: 44px 38px 34px;
  display: grid;
  align-content: center;
  gap: 10px;
  overflow: hidden;
  background: url("assets/generated/ui/popup-reward-card.png?v=1781815000000") center / 100% 100% no-repeat;
}

.run-prep-head,
.board-passive-choice-card > div:first-child {
  display: grid;
  place-items: center;
  gap: 3px;
  text-align: center;
}

.run-prep-head > strong,
.board-passive-choice-card > div:first-child > strong {
  color: #fff3c2;
  font-size: 17px;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.52);
}

.run-prep-head small,
.board-passive-choice-card > div:first-child > small {
  color: #d7deed;
  font-size: 10px;
  font-weight: 900;
}

.run-prep-head b {
  color: #b9a2ff;
}

.run-prep-options,
.board-passive-choice-list {
  display: grid;
  gap: 7px;
}

.run-prep-option,
.board-passive-choice {
  width: 100%;
  min-height: 72px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  border: 0;
  color: #f7f3e7;
  background: url("assets/generated/ui/popup-choice.png?v=1781815000000") center / 100% 100% no-repeat;
  overflow: hidden;
}

.run-prep-option > span,
.board-passive-choice > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.run-prep-option strong,
.board-passive-choice strong {
  color: #fff2bd;
  font-size: 12px;
  line-height: 1.15;
}

.run-prep-option small,
.board-passive-choice small,
.board-passive-choice em {
  color: #d2d9e7;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.run-prep-option > em {
  color: #c9b4ff;
  font-size: 13px;
  font-style: normal;
  font-weight: 1000;
  text-align: center;
}

.run-prep-option input {
  width: 18px;
  height: 18px;
  accent-color: #9b72e8;
}

.run-prep-option:has(input:checked) {
  filter: brightness(1.13) saturate(1.12);
}

.run-prep-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  color: #d8deeb;
  font-size: 11px;
  font-weight: 900;
}

.run-prep-total strong {
  color: #ffdc73;
}

.run-prep-card > p {
  min-height: 28px;
  margin: 0;
  color: #cbd3e2;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.run-prep-actions {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 8px;
}

.run-prep-actions .mini-button {
  min-width: 0;
}

.board-passive-choice-card {
  min-height: 458px;
}

.board-clear-supply-preview {
  min-height: 58px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 2px 14px;
}

.board-clear-supply-preview:empty {
  display: none;
}

/* Modern lobby and expedition-prep surfaces use raster UI plates. */
.lobby-start-button {
  min-height: 60px;
  padding: 8px 30px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34));
}

.lobby-start-button img {
  width: 35px;
  height: 35px;
  image-rendering: auto;
  filter: drop-shadow(0 0 7px rgba(106, 218, 255, 0.45));
}

.lobby-start-button strong {
  color: #f8fbff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.82);
}

.lobby-start-button small {
  color: #aeeaff;
}

.lobby-tool-button,
.lobby-tool-button.wide {
  min-height: 67px;
  padding: 7px 4px 6px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-tool.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
}

.lobby-tool-button img {
  width: 31px;
  height: 31px;
  image-rendering: auto;
  filter: drop-shadow(0 0 6px rgba(117, 222, 255, 0.4));
}

.lobby-tool-button strong {
  color: #f7fbff;
  font-size: 10px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.run-prep-panel {
  padding: max(8px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom));
  background: rgba(2, 5, 12, 0.86);
}

.run-prep-card {
  width: min(410px, calc(100vw - 12px));
  min-height: 0;
  aspect-ratio: 1005 / 1530;
  padding: 58px 44px 48px;
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 7px;
  background: url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png") center / 100% 100% no-repeat;
}

.run-prep-head {
  align-content: center;
  gap: 3px;
  min-height: 46px;
}

.run-prep-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.run-prep-meta small {
  padding-left: 9px;
  border-left: 1px solid rgba(143, 223, 255, 0.38);
}

.run-prep-kicker {
  color: #8fdfff;
  font-size: 9px;
  font-weight: 1000;
}

.run-prep-head > strong {
  color: #fff2bf;
  font-size: 20px;
  letter-spacing: 0;
}

.run-prep-head small {
  color: #d6e5f5;
  font-size: 10px;
}

.run-prep-head b {
  color: #d2bcff;
  font-size: 12px;
}

.run-prep-options {
  align-content: center;
  gap: 5px;
}

.run-prep-option {
  position: relative;
  min-height: 74px;
  padding: 10px 20px;
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  gap: 7px;
  border: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
  filter: saturate(0.72) brightness(0.8);
  cursor: pointer;
}

.run-prep-option > img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(115, 218, 255, 0.35));
}

.run-prep-option > span {
  gap: 3px;
}

.run-prep-option strong {
  color: #f8fbff;
  font-size: 12px;
}

.run-prep-option small {
  color: #b9cde1;
  font-size: 8px;
  line-height: 1.25;
}

.run-prep-option > em {
  display: grid;
  place-items: center;
  gap: 0;
  color: #e7d7ff;
  line-height: 1;
}

.run-prep-option > em b {
  font-size: 15px;
}

.run-prep-option > em small {
  color: #9fb2c8;
  font-size: 7px;
}

.run-prep-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.run-prep-option.selected,
.run-prep-option:has(input:checked) {
  filter: saturate(1.12) brightness(1.16) drop-shadow(0 0 8px rgba(79, 198, 255, 0.26));
}

.run-prep-option.unavailable {
  cursor: not-allowed;
  filter: grayscale(0.72) brightness(0.56);
}

.run-prep-option.unavailable > em b {
  color: #8592a4;
}

.run-prep-check {
  display: none;
  position: absolute;
  top: 7px;
  right: 17px;
  color: #7fe7ff;
  font-size: 7px;
  font-style: normal;
  font-weight: 1000;
}

.run-prep-option.selected .run-prep-check {
  display: block;
}

.run-prep-total {
  padding: 3px 15px;
  color: #c5d2e2;
  font-size: 10px;
}

.run-prep-total strong {
  color: #ffe392;
  font-size: 12px;
}

.run-prep-card > p {
  min-height: 22px;
  padding: 0 8px;
  color: #b8c9dc;
  font-size: 8px;
}

.run-prep-actions {
  gap: 7px;
  padding: 0 7px;
}

.run-prep-actions .mini-button {
  min-height: 40px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
  color: #dce8f6;
  box-shadow: none;
}

.run-prep-actions .mini-button.accent {
  color: #fff3bd;
  filter: brightness(1.13) saturate(1.12);
}

@media (max-height: 680px) {
  .run-prep-card {
    width: min(365px, calc(100vw - 10px));
    padding: 50px 39px 42px;
  }

  .run-prep-option {
    min-height: 64px;
  }
}

.board-clear-supply-preview img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.52));
}

.board-clear-supply-preview span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.board-clear-supply-preview em,
.board-clear-supply-preview small {
  color: #d6dce9;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.board-clear-supply-preview strong {
  color: #fff0b5;
  font-size: 13px;
  line-height: 1.15;
}

.board-clear-supply-preview[data-quality="rare"] strong {
  color: #83cfff;
}

.board-clear-supply-preview[data-quality="epic"] strong {
  color: #d6a1ff;
}

.board-clear-supply-preview[data-quality="jackpot"] strong {
  color: #ffd35f;
  text-shadow: 0 0 8px rgba(255, 178, 47, 0.62);
}

.board-passive-choice {
  min-height: 82px;
  grid-template-columns: 44px minmax(0, 1fr);
  cursor: pointer;
}

.board-passive-choice img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.44));
}

.board-passive-choice em {
  color: #ffdc73;
}

.board-passive-choice:active {
  transform: translateY(1px);
  filter: brightness(1.16);
}

.item-info-card,
.end-card,
.enemy-info-card {
  width: min(390px, 100%);
  background: #1f252c;
  border: 1px solid #60735c;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
  display: grid;
  gap: 10px;
}

.item-info-card {
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.reward-modal-card {
  width: min(430px, calc(100vw - 18px));
  min-height: 520px;
  padding: 44px 39px 32px;
  background: url("assets/generated/ui/popup-reward-card.png?v=1781815000000") center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 8px;
  overflow: hidden;
}

.reward-modal-card > div:first-child {
  min-height: 47px;
  display: grid;
  place-items: center;
  gap: 3px;
  text-align: center;
  transform: none;
}

.reward-panel.boss-reward .reward-modal-card {
  min-height: 548px;
  background-image: url("assets/generated/ui/popup-boss-reward-card.png?v=1781815000000");
}

.reward-panel.boss-reward .reward-card,
.reward-panel.boss-reward .reward-riskCoins,
.reward-panel.boss-reward .reward-riskPurge,
.reward-panel.boss-reward .reward-riskOverclock {
  background: url("assets/generated/ui/popup-choice.png?v=1781815000000") center / 100% 100% no-repeat;
  min-height: 82px;
  padding: 9px 10px;
  grid-template-columns: 30px minmax(0, 1fr);
}

.reward-panel.boss-reward .reward-riskCoins,
.reward-panel.boss-reward .reward-riskPurge,
.reward-panel.boss-reward .reward-riskOverclock,
.reward-panel.boss-reward .reward-ad-reroll {
  background-image: url("assets/generated/ui/popup-choice-risk.png?v=1781815000000");
}

.unlock-showcase {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  place-items: center;
  pointer-events: none;
  background: rgba(4, 7, 12, 0.68);
}

.unlock-showcase.active {
  display: grid;
  pointer-events: auto;
}

.unlock-card {
  position: relative;
  width: min(88vw, 360px);
  min-height: 286px;
  display: grid;
  place-items: center;
  grid-template-rows: 70px auto auto 36px;
  align-content: center;
  gap: 5px;
  padding: 30px 34px 26px;
  overflow: hidden;
  border: 0;
  background: url("assets/generated/ui/popup-unlock-card.png?v=1781815000000") center / 100% 100% no-repeat;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
  transform: translateY(10px) scale(0.96);
  animation: unlockCardIn 420ms cubic-bezier(0.2, 1.25, 0.3, 1) forwards;
}

.unlock-portal {
  display: none;
}

.portal-a {
  animation: portalSpin 1.8s linear infinite;
}

.portal-b {
  width: 145px;
  height: 145px;
  animation: portalSpinReverse 1.4s linear infinite;
}

.unlock-chest {
  display: none;
}

.unlock-chest img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.unlock-icon {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(255, 211, 106, 0.58))
    drop-shadow(0 10px 10px rgba(0, 0, 0, 0.48));
  animation: unlockIconPop 720ms cubic-bezier(0.2, 1.45, 0.22, 1) forwards;
}

.unlock-card .label {
  position: relative;
  z-index: 2;
  margin-top: 2px;
  color: #9ee8ff;
  font-size: 11px;
  font-weight: 1000;
}

.unlock-card strong {
  position: relative;
  z-index: 2;
  color: #fff7d6;
  max-width: 260px;
  font-size: 19px;
  line-height: 1.12;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
}

.unlock-card p {
  position: relative;
  z-index: 2;
  max-width: 260px;
  max-height: 62px;
  margin: 2px 0 0;
  color: #dbe7f7;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  overflow: hidden;
}

.unlock-confirm-button {
  position: relative;
  z-index: 2;
  min-width: 118px;
  min-height: 36px;
  margin-top: 2px;
  border: 0;
  background: url("assets/generated/ui/popup-button.png?v=1781815000000") center / 100% 100% no-repeat;
  color: #fff8d8;
  font-size: 14px;
  font-weight: 1000;
  opacity: 1;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.8),
    0 0 8px rgba(255, 232, 150, 0.45);
  filter:
    brightness(1.18)
    saturate(1.12)
    drop-shadow(0 4px 0 rgba(38, 19, 6, 0.48))
    drop-shadow(0 0 10px rgba(255, 216, 102, 0.28));
  cursor: pointer;
}

.unlock-confirm-button:hover {
  filter:
    brightness(1.28)
    saturate(1.16)
    drop-shadow(0 4px 0 rgba(38, 19, 6, 0.5))
    drop-shadow(0 0 12px rgba(255, 226, 126, 0.4));
}

.unlock-confirm-button:active {
  transform: translateY(1px);
  filter:
    brightness(1.08)
    saturate(1.08)
    drop-shadow(0 2px 0 rgba(38, 19, 6, 0.5))
    drop-shadow(0 0 7px rgba(255, 216, 102, 0.26));
}

.unlock-confirm-button:focus-visible {
  outline: 2px solid #ffe08a;
  outline-offset: 2px;
}

.unlock-showcase.boss .unlock-card {
  width: min(88vw, 350px);
  min-height: 286px;
  grid-template-rows: 76px auto auto 36px;
  align-content: center;
  gap: 4px;
  padding: 30px 34px 28px;
  background-image: url("assets/generated/ui/popup-result-card.png?v=1781815000000");
  box-shadow: none;
}

.unlock-showcase.boss-discovery .unlock-card,
.unlock-showcase.boss-cache .unlock-card,
.unlock-showcase.boss-cache-jackpot .unlock-card,
.unlock-showcase.boss-relic .unlock-card,
.unlock-showcase.deep-gate .unlock-card,
.unlock-showcase.reward-result .unlock-card,
.unlock-showcase.board-clear .unlock-card {
  width: min(88vw, 350px);
  min-height: 286px;
  grid-template-rows: 76px auto auto 36px;
  gap: 4px;
  padding: 30px 34px 28px;
  background-image: url("assets/generated/ui/popup-result-card.png?v=1781815000000");
  box-shadow: none;
}

.unlock-showcase.daily .unlock-card,
.unlock-showcase.item-unlock .unlock-card {
  min-height: 286px;
  grid-template-rows: 70px auto auto 36px;
  align-content: center;
  gap: 5px;
  padding: 30px 34px 26px;
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.58);
}

.unlock-showcase.boss .unlock-portal,
.unlock-showcase.boss .unlock-chest {
  display: none !important;
}

.unlock-showcase.boss-discovery .unlock-portal,
.unlock-showcase.boss-cache .unlock-portal,
.unlock-showcase.boss-cache-jackpot .unlock-portal,
.unlock-showcase.boss-relic .unlock-portal,
.unlock-showcase.deep-gate .unlock-portal,
.unlock-showcase.reward-result .unlock-portal,
.unlock-showcase.board-clear .unlock-portal,
.unlock-showcase.daily .unlock-portal {
  display: none;
}

.unlock-showcase.boss-discovery .unlock-chest,
.unlock-showcase.daily .unlock-chest {
  display: none;
}

.unlock-showcase.boss-discovery .unlock-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 0;
  filter:
    drop-shadow(0 0 10px rgba(245, 197, 90, 0.18))
    drop-shadow(0 12px 12px rgba(0, 0, 0, 0.5));
  animation: unlockIconPop 480ms cubic-bezier(0.2, 1.1, 0.22, 1) forwards;
}

.unlock-showcase.boss-cache .unlock-icon,
.unlock-showcase.boss-cache-jackpot .unlock-icon,
.unlock-showcase.boss-relic .unlock-icon,
.unlock-showcase.deep-gate .unlock-icon,
.unlock-showcase.reward-result .unlock-icon,
.unlock-showcase.board-clear .unlock-icon,
.unlock-showcase.daily .unlock-icon {
  width: 74px;
  height: 74px;
  margin-top: -2px;
  margin-bottom: 0;
  filter:
    drop-shadow(0 0 8px rgba(245, 197, 90, 0.28))
    drop-shadow(0 8px 8px rgba(0, 0, 0, 0.42));
}

.unlock-showcase.boss-cache-jackpot .unlock-card {
  background-image: url("assets/generated/ui/popup-result-card.png?v=1781815000000");
}

.unlock-showcase.boss-cache-jackpot .unlock-icon {
  width: 76px;
  height: 76px;
  filter:
    drop-shadow(0 0 14px rgba(255, 223, 109, 0.52))
    drop-shadow(0 9px 9px rgba(0, 0, 0, 0.45));
}

.unlock-showcase.boss .unlock-card .label {
  margin-top: 0;
  color: #f5d574;
}

.unlock-showcase.boss .unlock-card strong {
  font-size: 19px;
  line-height: 1.12;
}

.unlock-showcase.boss .unlock-card p {
  max-width: 246px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.32;
}

.unlock-showcase.boss-discovery .unlock-card .label,
.unlock-showcase.boss-cache .unlock-card .label,
.unlock-showcase.boss-cache-jackpot .unlock-card .label,
.unlock-showcase.boss-relic .unlock-card .label,
.unlock-showcase.deep-gate .unlock-card .label,
.unlock-showcase.reward-result .unlock-card .label,
.unlock-showcase.board-clear .unlock-card .label,
.unlock-showcase.daily .unlock-card .label,
.unlock-showcase.item-unlock .unlock-card .label {
  margin-top: 2px;
  color: #f5d574;
}

.unlock-showcase.boss-cache .unlock-card p,
.unlock-showcase.boss-cache-jackpot .unlock-card p,
.unlock-showcase.boss-relic .unlock-card p,
.unlock-showcase.deep-gate .unlock-card p,
.unlock-showcase.reward-result .unlock-card p,
.unlock-showcase.board-clear .unlock-card p,
.unlock-showcase.daily .unlock-card p,
.unlock-showcase.item-unlock .unlock-card p {
  max-width: 260px;
  margin-top: 4px;
}

.unlock-showcase.board-clear .unlock-card {
  width: min(90vw, 370px);
  min-height: 300px;
}

.unlock-showcase.board-clear .unlock-icon {
  width: 78px;
  height: 78px;
  filter:
    drop-shadow(0 0 14px rgba(158, 232, 255, 0.36))
    drop-shadow(0 10px 10px rgba(0, 0, 0, 0.46));
}

.unlock-showcase.board-clear .unlock-card strong {
  color: #fff1b5;
}

.unlock-showcase.board-clear .unlock-card p {
  max-width: 285px;
  max-height: 112px;
  color: #edf6ff;
  font-size: 12px;
  line-height: 1.38;
}

.end-panel:is(.defeat, .victory) {
  background: rgba(5, 7, 10, 0.78);
}

.end-panel.clear {
  background: rgba(5, 7, 10, 0.78);
}

.end-card {
  position: relative;
  overflow: hidden;
  width: min(430px, calc(100vw - 18px));
  max-height: calc(100dvh - 22px);
  min-height: 528px;
  padding: 48px 42px 34px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui/popup-end-defeat-card.png?v=1781815000000") center / 100% 100% no-repeat;
  transform-origin: center;
  overflow-y: auto;
  scrollbar-width: thin;
}

.end-card::before {
  content: none;
  position: absolute;
  right: -8px;
  top: 12px;
  z-index: 0;
  color: rgba(255, 255, 255, 0.06);
  font-size: 46px;
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 0.9;
  pointer-events: none;
}

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

.end-panel:is(.defeat, .victory) .end-card {
  background-image: url("assets/generated/ui/popup-end-defeat-card.png?v=1781815000000");
  box-shadow: none;
  animation: endDefeatEnter 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.end-panel.clear .end-card {
  background-image: url("assets/generated/ui/popup-end-clear-card.png?v=1781815000000");
  box-shadow: none;
  animation: endClearEnter 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.end-panel.clear .end-card::before {
  content: none;
}

.enemy-info-card {
  max-height: calc(100dvh - 34px);
  overflow: auto;
  text-align: left;
}

.enemy-info-list {
  display: grid;
  gap: 8px;
}

.enemy-info-row {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 8px;
  background: #151b23;
  border: 1px solid #3b4658;
}

.enemy-info-row.boss {
  border-color: #8e6831;
  background: #211b18;
}

.enemy-info-row div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.enemy-info-row strong {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.2;
}

.enemy-info-row span {
  flex: 0 0 auto;
  color: #ffdc73;
  font-size: 11px;
  font-weight: 900;
}

.enemy-info-row p,
.enemy-info-row small {
  color: #d8deea;
  font-size: 12px;
  line-height: 1.35;
}

.enemy-info-row small {
  color: #9ee8ff;
  font-weight: 900;
}

.end-text {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #eef1f7;
  font-size: 13px;
  line-height: 1.38;
}

.run-result-hero {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 70px;
  padding: 10px 12px;
  background: url("assets/generated/ui/popup-list.png") center / 100% 100% no-repeat;
  border: 0;
}

.run-result-hero img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.38));
}

.run-result-hero b {
  display: block;
  color: #fff5c6;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1.08;
}

.run-result-hero small {
  display: block;
  margin-top: 3px;
  color: #dfe8f7;
  font-size: 12px;
  font-weight: 900;
}

.result-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.result-mini-card {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 8px 6px;
  border: 0;
  background: url("assets/generated/ui/popup-stat.png") center / 100% 100% no-repeat;
  text-align: center;
  overflow: hidden;
}

.result-mini-card small {
  color: #9fb0c7;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.result-mini-card strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 1000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-progress {
  display: grid;
  gap: 6px;
  min-height: 54px;
  padding: 9px 11px;
  border: 0;
  background: url("assets/generated/ui/popup-list.png") center / 100% 100% no-repeat;
  overflow: hidden;
}

.result-progress > span {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 7px;
}

.result-progress img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  image-rendering: pixelated;
}

.result-progress strong {
  min-width: 0;
  color: #ffe69c;
  font-size: 12px;
  font-weight: 1000;
}

.result-progress em {
  color: #9ee8ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
}

.result-progress small {
  color: #c8d3e6;
  font-size: 10px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.result-progress-track {
  display: none;
}

.result-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  background: url("assets/generated/ui/progress-fill.png") center / 100% 100% no-repeat;
}

.result-unlock-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 11px;
  border: 0;
  background: url("assets/generated/ui/popup-list.png") center / 100% 100% no-repeat;
  overflow: hidden;
}

.result-unlock-list > strong {
  flex: 0 0 100%;
  color: #9ee8ff;
  font-size: 11px;
  font-weight: 1000;
}

.result-unlock-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 4px;
  padding: 4px 6px;
  background: transparent;
  color: #edf5ff;
  font-size: 10px;
  font-weight: 900;
}

.result-unlock-chip img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  image-rendering: pixelated;
}

.result-unlock-chip b {
  color: #ffdc73;
}

.result-unlock-chip span {
  display: grid;
  gap: 1px;
}

.result-unlock-chip small {
  display: block;
  color: #9ee8ff;
  font-size: 9px;
  line-height: 1.1;
}

.result-line {
  display: block;
  min-height: 36px;
  padding: 9px 11px;
  background: url("assets/generated/ui/popup-row.png") center / 100% 100% no-repeat;
  border: 0;
  overflow-wrap: anywhere;
}

.result-line.result-cause {
  color: #ffd3d3;
  background: url("assets/generated/ui/popup-row-danger.png") center / 100% 100% no-repeat;
}

.result-best-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 12px;
  background: url("assets/generated/ui/popup-row.png") center / 100% 100% no-repeat;
  color: #edf5ff;
}

.result-best-item img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
}

.result-best-item span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.result-best-item small,
.result-best-item em {
  color: #9ee8ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.result-best-item strong {
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-best-item.empty {
  color: #c8d3e6;
}

.result-badge {
  justify-self: start;
  min-width: 86px;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 0;
  background: url("assets/generated/ui/popup-button-danger.png?v=1781815000000") center / 100% 100% no-repeat;
  color: #fff3c2;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0;
}

.end-panel.clear .result-badge {
  background-image: url("assets/generated/ui/popup-button.png?v=1781815000000");
  color: #fff3c2;
}

.result-upgrade-hint {
  display: block;
  min-height: 36px;
  padding: 9px 11px;
  background: url("assets/generated/ui/popup-row.png") center / 100% 100% no-repeat;
  color: #cfe0f8;
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.result-upgrade-hint {
  border: 0;
  background-image: url("assets/generated/ui/popup-row-success.png");
  color: #b8ffd0;
}

.end-card > h2,
.end-card > strong {
  overflow-wrap: anywhere;
}

.end-card > strong {
  justify-self: center;
  width: 100%;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.46);
}

.button-row.end-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  justify-content: stretch;
  gap: 6px;
  padding: 0 4px 2px;
}

.end-actions .mini-button {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 36px;
  white-space: normal;
  line-height: 1.15;
}

.end-actions .mini-button[hidden] {
  display: none;
}

.end-actions #endShardBonusButton,
.end-actions #endRestartButton {
  grid-column: 1 / -1;
}

.end-actions #endStoneReviveButton {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.end-actions #endStoneReviveButton::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: url("assets/generated/ui/revive-stone-v1.png") center / contain no-repeat;
}

.end-actions #endStoneReviveButton:disabled::before {
  filter: grayscale(1) brightness(0.7);
}

.end-actions #endStoneReviveButton[hidden] {
  display: none;
}

@keyframes endDefeatEnter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.92) rotate(-0.8deg);
  }
  45% {
    transform: translateY(0) scale(1.02) rotate(0.5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes endClearEnter {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  60% {
    transform: translateY(0) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.item-info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.item-info-icon {
  width: 42px;
  height: 42px;
  padding: 6px;
  border-radius: 10px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.13), transparent 62%),
    #151a20;
  border: 1px solid #4b5565;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35));
}

.item-info-head strong {
  display: block;
  margin-top: 3px;
  font-size: 18px;
}

.item-info-card p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  margin: 4px 0 0;
}

.item-info-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.item-info-stats span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 6px 7px;
  border-radius: 7px;
  background: #151a20;
  border: 1px solid #343b48;
  color: var(--text);
  text-align: left;
}

.item-info-stats span small {
  color: #95a4ba;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
}

.item-info-stats span strong {
  min-width: 0;
  color: #f2f6ff;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.item-info-stats .active-effect-chip {
  grid-column: 1 / -1;
  background: rgba(34, 40, 52, 0.82);
  border-color: rgba(147, 158, 177, 0.35);
  color: #dce7f8;
}

.item-info-stats .active-effect-chip.boosted {
  background: rgba(22, 99, 60, 0.74);
  border-color: rgba(110, 231, 160, 0.48);
  color: #b6ffc9;
}

.item-info-stats .active-effect-chip.boosted small,
.item-info-stats .active-effect-chip.placement-active small {
  color: #bfffd0;
}

.item-info-stats .active-effect-chip.boosted strong,
.item-info-stats .active-effect-chip.placement-active strong {
  color: #effff2;
}

.item-info-stats .active-effect-chip.placement-chip {
  grid-column: 1 / -1;
  background: rgba(45, 52, 68, 0.9);
  border-color: rgba(147, 158, 177, 0.42);
  color: #dce7f8;
  line-height: 1.25;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  padding-block: 6px;
}

.item-info-stats .active-effect-chip.placement-active {
  background: rgba(43, 50, 65, 0.94);
  border-color: rgba(255, 214, 111, 0.58);
  color: #f5efd2;
  box-shadow: 0 0 12px rgba(255, 214, 111, 0.16);
}

.item-info-stats .active-effect-chip.inactive {
  opacity: 1;
  color: #aeb8c8;
}

.item-info-stats .active-effect-chip.placement-chip.inactive {
  background: rgba(34, 40, 52, 0.82);
  border-color: rgba(147, 158, 177, 0.35);
  color: #aeb8c8;
  box-shadow: none;
}

.item-info-stats .active-effect-chip.inactive small,
.item-info-stats .active-effect-chip.placement-chip.inactive small {
  color: #7f8da3;
}

.item-info-stats .active-effect-chip.inactive strong,
.item-info-stats .active-effect-chip.placement-chip.inactive strong {
  color: #bdc7d8;
}

.item-info-actions {
  justify-content: stretch;
}

.item-info-actions .mini-button {
  flex: 1;
  min-width: 0;
}

.run-summary {
  display: none;
  margin: 0 14px 10px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, #233124, #171d1a);
  border: 1px solid #527248;
}

.run-summary.active {
  display: grid;
  gap: 8px;
}

.run-summary h2 {
  font-size: 18px;
}

.run-summary p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.pull-reveal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  place-items: center;
  padding: 18px;
  background: rgba(5, 7, 10, 0.68);
  backdrop-filter: blur(6px);
}

.pull-reveal.active {
  display: grid;
}

.pull-reveal.high-rarity {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 239, 154, 0.22), transparent 34%),
    rgba(5, 7, 10, 0.74);
}

.pull-reveal-card {
  width: min(390px, 100%);
  padding: 14px;
  border-radius: 14px;
  background: #20252d;
  border: 1px solid #667285;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.pull-reveal.high-rarity .pull-reveal-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 239, 154, 0.24), transparent 36%),
    linear-gradient(180deg, #302436, #171a22 72%);
  border-color: #ffdc73;
  box-shadow:
    0 0 0 1px rgba(255, 239, 154, 0.24),
    0 26px 80px rgba(0, 0, 0, 0.58),
    0 0 42px rgba(255, 220, 115, 0.22);
  animation: rareRevealCard 360ms ease both;
}

.pull-reveal-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.reveal-item {
  min-height: 104px;
  border-radius: 8px;
  background: #151a20;
  border: 2px solid currentColor;
  display: grid;
  align-content: center;
  text-align: center;
  padding: 8px 6px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  gap: 4px;
  color: inherit;
}

.rare-showcase {
  min-height: 238px;
  position: relative;
  overflow: hidden;
  padding: 18px 12px;
  border-width: 2px;
  animation: rareRevealPulse 1300ms ease-in-out infinite;
}

.rare-showcase::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(from 0deg, transparent, rgba(255, 239, 154, 0.48), transparent, rgba(255, 159, 184, 0.34), transparent);
  opacity: 0.45;
  animation: rareRevealSpin 1800ms linear infinite;
}

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

.rare-kicker {
  color: #fff1a8;
  font-size: 12px;
  font-weight: 1000;
}

.rare-reveal-icon {
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  object-fit: contain;
  margin: 4px auto;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 239, 154, 0.5);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.38));
}

.rare-showcase .name {
  font-size: 18px;
  line-height: 1.15;
}

.rare-showcase .stats {
  color: #ffe39a;
  font-size: 12px;
  font-weight: 900;
}

.rare-showcase .hint {
  color: #dfe7f5;
  font-size: 11px;
  line-height: 1.35;
}

.reveal-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 3px;
}

.reveal-card-actions .mini-button {
  min-width: 0;
  height: 24px;
  padding-inline: 4px;
  font-size: 10px;
}

.inline-reveal-item .reveal-card-actions {
  width: 58px;
  margin-top: 0;
}

.inline-reveal-item .reveal-card-actions.single {
  grid-template-columns: 1fr;
}

.inline-reveal-item .reveal-card-actions .mini-button {
  height: 30px;
  padding-inline: 5px;
  font-size: 11px;
}

.reveal-item.selected {
  box-shadow: 0 0 0 3px rgba(245, 197, 90, 0.68);
}

.reveal-item .name {
  color: var(--text);
  font-size: 12px;
}

.reveal-item .stats,
.reveal-item .hint {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.reveal-actions {
  justify-content: center;
}

.reveal-actions .mini-button {
  flex: 0 0 auto;
  width: min(172px, 100%);
  min-width: 0;
}

.fusion-card > .mini-button,
.unlock-card > .mini-button,
.pull-reveal-card > .button-row .mini-button {
  justify-self: center;
  width: min(172px, 100%);
  min-width: 0;
}

.reward-panel strong {
  display: block;
  margin-top: 0;
  color: #fff3c2;
  font-size: 15px;
  line-height: 1.15;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.46);
}

.reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 3px;
}

.reward-card {
  min-height: 88px;
  padding: 10px 11px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui/popup-choice.png?v=1781815000000") center / 100% 100% no-repeat;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  text-align: left;
  box-shadow: none;
  min-width: 0;
  overflow: hidden;
}

.reward-riskCoins,
.reward-riskPurge,
.reward-riskOverclock,
.reward-ad-reroll {
  background-image: url("assets/generated/ui/popup-choice-risk.png?v=1781815000000");
}

.reward-ad-reroll {
  grid-column: 1 / -1;
  min-height: 54px;
  width: min(356px, 100%);
  justify-self: center;
  padding: 9px 16px;
  background: url("assets/generated/ui/popup-wide-button.png?v=1781815000000") center / 100% 100% no-repeat;
  grid-template-columns: 28px minmax(0, 1fr);
}

.reward-ad-reroll .reward-icon {
  width: 27px;
  height: 27px;
}

.reward-panel .reward-ad-reroll,
.reward-panel.boss-reward .reward-ad-reroll {
  background: url("assets/generated/ui/popup-wide-button.png?v=1781815000000") center / 100% 100% no-repeat;
}

.reward-ad-reroll .reward-copy strong {
  font-size: 11px;
}

.reward-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.34));
  justify-self: center;
}

.reward-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.reward-copy em {
  color: #ffd66f;
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1.1;
}

.reward-copy strong {
  color: #f2f7e8;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.14;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-copy small {
  color: #cfd6df;
  font-size: 9.5px;
  line-height: 1.18;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.reward-copy b {
  color: #ffdc73;
  font-size: 8.5px;
  font-weight: 1000;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-panel.boss-reward .reward-copy b {
  white-space: normal;
  overflow: visible;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: url("assets/generated/ui/tab-shell.png?v=1782363000000") center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  padding: 9px 10px;
  gap: 6px;
  margin-bottom: 7px;
}

.tab-button {
  min-width: 0;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui/tab-button.png?v=1782363000000") center / 100% 100% no-repeat;
  color: #d7e5ff;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.82),
    0 0 7px rgba(86, 134, 205, 0.32);
}

.tab-button.active {
  color: #fff2bd;
  background: url("assets/generated/ui/tab-button-active.png?v=1782363000000") center / 100% 100% no-repeat;
  text-shadow:
    0 2px 0 rgba(43, 19, 0, 0.75),
    0 0 9px rgba(255, 210, 90, 0.54);
}

.fusion-effect {
  position: fixed;
  left: 50%;
  top: 48%;
  z-index: 92;
  min-width: 190px;
  max-width: min(320px, calc(100vw - 36px));
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffdc73, #9ee8ff);
  color: #14120a;
  font-size: 18px;
  font-weight: 1000;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px) scale(0.82);
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.44));
}

.fusion-effect.active {
  animation: fusionPop 1050ms ease both;
}

.panel {
  display: none;
  background:
    linear-gradient(180deg, rgba(18, 23, 31, 0.72), rgba(18, 23, 31, 0.94)),
    var(--ui-panel-blue) center / 100% 100% no-repeat,
    var(--panel);
  border: 1px solid #73839b;
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 6px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 4px 0 rgba(0, 0, 0, 0.22);
}

.panel.active {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

#bagPanel.active {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#capsulesPanel.active {
  position: relative;
  overflow: hidden;
}

.game-ranking-list {
  display: grid;
  gap: 7px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.ranking-scope-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 6px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(8, 12, 18, 0.48);
  border: 1px solid rgba(145, 166, 204, 0.22);
}

.ranking-scope-button {
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd6e8;
  font-size: 11px;
  font-weight: 900;
}

.ranking-scope-button.active {
  color: #1d1608;
  background: linear-gradient(180deg, #ffeaa2, #d89b3c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 2px 8px rgba(245, 197, 90, 0.18);
}

.ranking-scope-summary {
  margin: -1px 0 6px;
  color: #b7c7df;
  font-size: 10.5px;
  font-weight: 800;
}

.game-ranking-row {
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 92px;
  gap: 7px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid rgba(145, 166, 204, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.1)),
    rgba(14, 19, 29, 0.78);
}

.game-ranking-row.me {
  border-color: rgba(255, 220, 115, 0.72);
  box-shadow: inset 0 0 16px rgba(255, 220, 115, 0.12);
}

.game-ranking-row strong {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 220, 115, 0.18);
  color: #ffdc73;
  font-size: 12px;
}

.game-ranking-row span {
  min-width: 0;
  color: #f7fbff;
  font-size: 12px;
  font-weight: 1000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-ranking-row span i,
.game-ranking-row span small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.game-ranking-row span small {
  margin-top: 2px;
  color: #94a7bf;
  font-size: 9.5px;
  font-weight: 800;
}

.game-ranking-row em,
.game-ranking-row b {
  color: #9ee8ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.game-ranking-row .game-ranking-stats {
  min-width: 88px;
  display: grid;
  justify-items: end;
  gap: 3px;
  overflow: visible;
  color: inherit;
  text-align: right;
  white-space: normal;
}

.game-ranking-row .game-ranking-stats em,
.game-ranking-row .game-ranking-stats b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-ranking-row .game-ranking-stats b {
  color: #ffdc73;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}

.panel-head p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 3px;
}

.panel-head.compact {
  margin-bottom: 8px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.mini-button {
  min-width: 58px;
  height: 30px;
  padding-inline: 10px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui/popup-button.png?v=1781815000000") center / 100% 100% no-repeat;
  color: #fff4c5;
  font-size: 11.5px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  box-shadow: none;
}

.mini-button.accent {
  color: #f8fdff;
}

.mini-button.danger {
  background-image: url("assets/generated/ui/popup-button-danger.png?v=1781815000000");
  color: #ffd1d1;
}

.icon-close-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  background: url("assets/generated/ui/popup-close-button.png?v=1781815000000") center / 100% 100% no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.selected-info {
  display: none;
  min-height: 24px;
  margin-bottom: 5px;
  padding: 5px 7px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(7, 10, 14, 0.14)),
    var(--ui-panel-inset-blue) center / 100% 100% no-repeat;
  border: 1px solid #46566b;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.selected-info.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-height: 46px;
  padding: 7px 9px;
  border-color: rgba(91, 198, 244, 0.64);
  background:
    radial-gradient(circle at 12% 0%, rgba(79, 194, 245, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(9, 37, 58, 0.98), rgba(3, 15, 27, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(150, 224, 255, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.28);
}

.selected-info.active strong {
  color: #fff0ad;
  font-size: 11px;
}

.selected-info.active span {
  color: #f3f8ff;
  font-size: 10px;
  font-weight: 950;
}

.selected-info.active small {
  color: #8edfff;
  font-size: 9px;
  font-weight: 850;
}

.selected-info.active.success {
  border-color: rgba(112, 229, 172, 0.7);
  background:
    radial-gradient(circle at 12% 0%, rgba(88, 224, 158, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(8, 43, 39, 0.98), rgba(3, 20, 24, 0.98));
}

.selected-info.active.success small {
  color: #86f2bd;
}

.bag-effect-summary {
  min-width: 0;
  align-self: start;
  max-height: none;
  padding: 5px;
  border: 1px solid #4a5b70;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(7, 10, 14, 0.2)),
    var(--ui-panel-inset-blue) center / 100% 100% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 3px 0 rgba(0, 0, 0, 0.16);
  overflow: visible;
}

.bag-effect-summary.is-empty {
  padding-block: 6px;
}

.effect-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 5px;
}

.bag-effect-summary.is-empty .effect-summary-head {
  margin-bottom: 0;
}

.effect-summary-head strong {
  color: #f8f1d8;
  font-size: 9.5px;
  line-height: 1;
  white-space: nowrap;
}

.effect-summary-head small {
  color: #9fb0c3;
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1;
}

.effect-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 26px);
  justify-content: start;
  gap: 4px;
  max-height: none;
  overflow: visible;
}

.effect-summary-chip {
  min-width: 0;
  width: 26px;
  height: 26px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid rgba(121, 153, 188, 0.52);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(30, 41, 58, 0.88), rgba(13, 17, 24, 0.92)),
    url("assets/generated/ui/popup-row.png?v=1781815000000") center / cover no-repeat;
  color: #e4edf8;
  font-family: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 2px 0 rgba(0, 0, 0, 0.22);
}

/* Popup-specific composition repair 1790113000000. */

@media (max-height: 760px) {
}

.effect-summary-chip img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 5px rgba(156, 214, 255, 0.26));
}

.effect-summary-chip span {
  min-width: 0;
  display: none;
}

.effect-summary-chip em,
.effect-summary-chip small {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.effect-summary-chip em {
  display: none;
  color: #8ed8ff;
  font-size: 7.5px;
  font-weight: 900;
}

.effect-summary-chip strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 9px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
}

.effect-summary-chip small {
  display: none;
  color: #bfccdc;
  font-size: 7.5px;
  font-weight: 800;
}

.effect-summary-chip.complete {
  border-color: rgba(255, 220, 112, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 166, 0.13),
    0 0 12px rgba(255, 211, 106, 0.22);
}

.effect-summary-chip.complete em,
.effect-summary-chip.passive em {
  color: #ffe28a;
}

.effect-summary-chip.placement,
.effect-summary-chip.boost {
  border-color: rgba(108, 231, 166, 0.56);
}

.effect-summary-chip.placement em,
.effect-summary-chip.boost em {
  color: #8dffb0;
}

.effect-summary-chip.elementGood {
  border-color: rgba(99, 207, 255, 0.58);
}

.effect-summary-chip.elementBad {
  border-color: rgba(255, 139, 112, 0.56);
}

.effect-summary-chip.elementBad em {
  color: #ffb19f;
}

.effect-element-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 4px;
}

.effect-element-pill {
  min-width: 42px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  background: rgba(25, 31, 42, 0.86);
  font-family: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 8px rgba(0, 0, 0, 0.18);
}

.effect-element-pill span,
.effect-element-pill b {
  line-height: 1;
}

.effect-element-pill span {
  font-size: 8.5px;
  font-weight: 900;
}

.effect-element-pill b {
  font-size: 8px;
  font-weight: 900;
}

.effect-summary-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: #aeb9c8;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.35;
}

.combat-element-pill.element-wood,
.effect-element-pill.element-wood {
  background: linear-gradient(180deg, #47b864, #1e6f3c);
  border-color: rgba(173, 255, 185, 0.5);
}

.combat-element-pill.element-fire,
.effect-element-pill.element-fire {
  background: linear-gradient(180deg, #e86342, #943021);
  border-color: rgba(255, 198, 147, 0.52);
}

.combat-element-pill.element-earth,
.effect-element-pill.element-earth {
  background: linear-gradient(180deg, #c99a4a, #735127);
  border-color: rgba(255, 228, 160, 0.5);
}

.combat-element-pill.element-metal,
.effect-element-pill.element-metal {
  background: linear-gradient(180deg, #b5c0d0, #596677);
  border-color: rgba(235, 246, 255, 0.48);
}

.combat-element-pill.element-water,
.effect-element-pill.element-water {
  background: linear-gradient(180deg, #45a7ff, #1d5798);
  border-color: rgba(171, 222, 255, 0.55);
}

.combat-element-pill.element-light,
.effect-element-pill.element-light {
  background: linear-gradient(180deg, #ffe576, #a97816);
  border-color: rgba(255, 240, 150, 0.58);
  color: #241507;
}

.combat-element-pill.element-dark,
.effect-element-pill.element-dark {
  background: linear-gradient(180deg, #8d62e9, #33216d);
  border-color: rgba(210, 183, 255, 0.55);
}

.item-detail {
  display: none;
  min-height: 42px;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(7, 10, 14, 0.16)),
    var(--ui-panel-inset-blue) center / 100% 100% no-repeat;
  border: 1px solid #46566b;
}

.item-detail.active {
  display: block;
}

#bagPanel.compact-bag .item-detail.active {
  display: none;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.detail-chip {
  padding: 5px 6px;
  border-radius: 6px;
  background: #202733;
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.bag-guide {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 8px;
}

#bagPanel.compact-bag .bag-guide {
  display: none;
}

.bag-guide div {
  min-height: 52px;
  padding: 8px;
  border-radius: 8px;
  background: #151b22;
  border: 1px solid #34414f;
}

.bag-guide strong {
  display: block;
  font-size: 11px;
  margin-bottom: 4px;
}

.bag-guide p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.item-detail strong {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.item-detail p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.capsule-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  overflow: visible;
}

.capsule-board.board-size-16 {
  width: min(100%, 258px);
  margin-inline: auto;
  gap: 5px;
}

.capsule-board.board-size-20 {
  width: min(100%, 292px);
  margin-inline: auto;
  gap: 5px;
}

.capsule-board.board-size-24 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: min(100%, 318px);
  margin-inline: auto;
  gap: 5px;
}

.capsule-board.board-sss {
  animation: sssBoardPulse 1200ms ease-in-out 2;
  filter: drop-shadow(0 0 14px rgba(255, 220, 115, 0.28));
}

.board-info-actions {
  display: flex;
  gap: 6px;
  margin: 6px 0 8px;
}

.board-info-actions .mini-button {
  flex: 1;
}

.board-info-actions .mini-button.active {
  border-color: #ffdc73;
  color: #fff7d6;
  background: linear-gradient(180deg, #4a3a19, #251c10);
}

.board-info-panel {
  display: none;
  margin: 0 0 8px;
  padding: 8px;
  border: 1px solid rgba(158, 232, 255, 0.22);
  border-radius: 8px;
  background: rgba(12, 16, 23, 0.72);
}

.board-info-panel.active {
  display: grid;
  gap: 7px;
}

.board-info-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.board-info-title strong {
  color: #f7fbff;
  font-size: 12px;
}

.board-info-title span {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.board-pool-list,
.recipe-hint-list {
  display: grid;
  gap: 5px;
  max-height: 104px;
  overflow: auto;
  padding-right: 2px;
}

.pool-chip {
  min-height: 30px;
  display: grid;
  grid-template-columns: 20px 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #f7fbff;
  font-size: 11px;
  font-weight: 900;
}

.pool-chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.pool-chip small {
  color: var(--muted);
  font-size: 10px;
}

.pool-chip.bonus {
  border-color: rgba(255, 220, 115, 0.32);
  background: rgba(255, 220, 115, 0.08);
}

.recipe-hint-row,
.recipe-hint-empty {
  display: grid;
  gap: 2px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: #f7fbff;
}

.recipe-hint-row.discovered {
  border: 1px solid rgba(255, 220, 115, 0.4);
  background: rgba(255, 220, 115, 0.1);
}

.recipe-hint-row strong {
  font-size: 11px;
}

.recipe-hint-row small,
.recipe-hint-empty {
  color: var(--muted);
  font-size: 10px;
}

.item-secret-recipe-hint {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(113, 211, 255, 0.38);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 0%, rgba(52, 153, 216, 0.18), transparent 58%),
    rgba(7, 20, 34, 0.92);
  box-shadow: inset 0 0 0 1px rgba(7, 12, 22, 0.72);
}

.item-secret-recipe-hint > small {
  color: #9fdfff;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.04em;
}

.secret-recipe-hint-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.secret-recipe-hint-node {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 40px;
  padding: 4px 6px;
  border: 1px solid rgba(132, 182, 218, 0.28);
  border-radius: 8px;
  background: rgba(5, 12, 22, 0.72);
}

.secret-recipe-hint-node img,
.secret-recipe-hint-node i {
  width: 32px;
  height: 32px;
  object-fit: contain;
  align-self: center;
  justify-self: center;
}

.secret-recipe-hint-node img {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.72));
}

.secret-recipe-hint-node i {
  display: grid;
  place-items: center;
  border: 1px solid rgba(130, 207, 255, 0.28);
  border-radius: 50%;
  color: #caeaff;
  background: radial-gradient(circle, rgba(55, 151, 211, 0.28), rgba(6, 15, 28, 0.88));
  font-size: 19px;
  font-style: normal;
  font-weight: 1000;
}

.secret-recipe-hint-node strong {
  min-width: 0;
  overflow: hidden;
  color: #f2f8ff;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secret-recipe-hint-node.unknown strong {
  color: #a9bfd4;
  letter-spacing: 0.08em;
}

.secret-recipe-hint-plus {
  color: #76d6ff;
  font-size: 17px;
  text-align: center;
  text-shadow: 0 0 8px rgba(77, 192, 255, 0.7);
}

.codex-detail-relations > .item-secret-recipe-hint {
  width: 100%;
}

@keyframes sssBoardPulse {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.018);
  }
}

.pull-inline-panel {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(158, 232, 255, 0.24);
}

.pull-inline-panel.active {
  display: flex;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 12;
  min-height: 0;
  max-height: 190px;
  flex-direction: column;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(146, 183, 222, 0.62);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(31, 39, 55, 0.96), rgba(13, 17, 25, 0.98)),
    var(--ui-panel-inset-blue) center / 100% 100% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 -8px 22px rgba(0, 0, 0, 0.34);
}

.pull-inline-list {
  display: grid;
  gap: 6px;
  max-height: 128px;
  overflow: auto;
  padding: 1px 2px 4px 0;
  overscroll-behavior: contain;
}

body.tutorial-locked .pull-inline-panel.active .inline-reveal-item:not(:last-child) {
  display: none;
}

.inline-reveal-item {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12)),
    var(--ui-panel-inset-brown) center / 100% 100% no-repeat;
  border: 1px solid currentColor;
  min-width: 0;
  overflow: visible;
}

.inline-reveal-main {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.inline-reveal-main strong {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 1000;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-item-icon,
.tray-icon,
.item-icon,
.item-info-icon {
  image-rendering: pixelated;
  object-fit: contain;
  flex: 0 0 auto;
}

.inline-item-icon {
  width: 24px;
  height: 24px;
  padding: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}

.reveal-grade {
  color: #ffd86a;
  font-weight: 1000;
}

.inline-reveal-main small {
  color: #d2d8e5;
  font-size: 9px;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capsule {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0 45%, rgba(0, 0, 0, 0.14) 46% 100%),
    #313846;
  border: 2px solid #677386;
  display: grid;
  place-items: center;
  color: #cfd6e4;
  font-weight: 900;
  font-size: 13px;
  position: relative;
  transition:
    transform 160ms ease,
    opacity 160ms ease;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.22);
}

.capsule:not(.opened):active {
  transform: scale(0.92);
}

.capsule.opened {
  opacity: 0.2;
}

.capsule.peeked:not(.opened) {
  opacity: 0.92;
  transform: scale(1.03);
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.16),
    0 0 0 2px rgba(255, 211, 106, 0.32),
    0 5px 10px rgba(255, 211, 106, 0.16);
}

.capsule.purged {
  opacity: 0.72;
  border-color: #ff8f8f;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 45%),
    #35252a;
  color: #ffd1d1;
  font-size: 9px;
}

.capsule.opened::after {
  content: none;
}

.rarity-SSS {
  border-color: #b8fbff;
  color: #eaffff;
  box-shadow: 0 0 22px rgba(93, 231, 255, 0.58), inset 0 0 10px rgba(191, 132, 255, 0.2);
}

.rarity-SS {
  border-color: #ff9fb8;
  color: #ffb7c9;
  box-shadow: 0 0 16px rgba(255, 159, 184, 0.32);
}

.rarity-S {
  border-color: #ffdc73;
  color: #ffdc73;
  box-shadow: 0 0 14px rgba(255, 220, 115, 0.28);
}

.rarity-A {
  border-color: var(--violet);
  color: var(--violet);
}

.rarity-B {
  border-color: var(--cyan);
  color: var(--cyan);
}

.rarity-C {
  border-color: #4ade80;
  color: #8dffb0;
}

.rarity-D {
  border-color: #60a5fa;
  color: #9cc7ff;
}

.rarity-F {
  border-color: #a87956;
  color: #d2a07a;
}

.item-tile.rarity-SSS,
.tray-item.rarity-SSS,
.inline-reveal-item.rarity-SSS,
.fusion-material.rarity-SSS,
.fusion-result-pop.rarity-SSS {
  color: #eaffff;
  background:
    radial-gradient(circle at 18% 12%, rgba(157, 247, 255, 0.46), transparent 38%),
    linear-gradient(145deg, #173f55, #281a48 68%);
}

.item-tile.rarity-SS,
.tray-item.rarity-SS,
.inline-reveal-item.rarity-SS,
.fusion-material.rarity-SS,
.fusion-result-pop.rarity-SS {
  color: #ffb7c9;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 183, 201, 0.3), transparent 36%),
    linear-gradient(145deg, #4d2336, #241727 70%);
}

.item-tile.rarity-S,
.tray-item.rarity-S,
.inline-reveal-item.rarity-S,
.fusion-material.rarity-S,
.fusion-result-pop.rarity-S {
  color: #ffdc73;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 220, 115, 0.3), transparent 34%),
    linear-gradient(145deg, #493611, #1f1d16 72%);
}

.item-tile.rarity-A,
.tray-item.rarity-A,
.inline-reveal-item.rarity-A,
.fusion-material.rarity-A,
.fusion-result-pop.rarity-A {
  color: #bfa3ff;
  background: linear-gradient(145deg, #34285d, #171b2c 72%);
}

.item-tile.rarity-B,
.tray-item.rarity-B,
.inline-reveal-item.rarity-B,
.fusion-material.rarity-B,
.fusion-result-pop.rarity-B {
  color: #6ad6ff;
  background: linear-gradient(145deg, #163c4b, #14212b 72%);
}

.item-tile.rarity-C,
.tray-item.rarity-C,
.inline-reveal-item.rarity-C,
.fusion-material.rarity-C,
.fusion-result-pop.rarity-C {
  color: #8dffb0;
  background:
    radial-gradient(circle at 18% 12%, rgba(74, 222, 128, 0.22), transparent 36%),
    linear-gradient(145deg, #17432b, #151f21 74%);
}

.item-tile.rarity-D,
.tray-item.rarity-D,
.inline-reveal-item.rarity-D,
.fusion-material.rarity-D,
.fusion-result-pop.rarity-D {
  color: #9cc7ff;
  background:
    radial-gradient(circle at 18% 12%, rgba(96, 165, 250, 0.2), transparent 36%),
    linear-gradient(145deg, #1b355d, #171d28 74%);
}

.item-tile.rarity-F,
.tray-item.rarity-F,
.inline-reveal-item.rarity-F,
.fusion-material.rarity-F,
.fusion-result-pop.rarity-F {
  color: #d2a07a;
  background:
    radial-gradient(circle at 18% 12%, rgba(168, 121, 86, 0.22), transparent 34%),
    linear-gradient(145deg, #34271f, #181919 74%);
}

.bag-grid {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  grid-template-rows: repeat(3, 34px);
  gap: 4px;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.14)),
    var(--ui-panel-inset-brown) center / 100% 100% no-repeat;
  border: 1px solid #6d604f;
  border-radius: 10px;
  padding: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 185, 0.08),
    0 4px 0 rgba(0, 0, 0, 0.18);
}

.bag-cell {
  border: 1px solid #303743;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    #151922;
  border-radius: 7px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.bag-cell.available {
  outline: 2px solid rgba(106, 214, 255, 0.55);
}

.bag-cell.recommended {
  background: #18231c;
  outline: 2px solid rgba(110, 231, 160, 0.78);
}

.bag-cell.best {
  background: #29230f;
  outline: 3px solid rgba(245, 197, 90, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 157, 0.35);
}

.bag-cell.drop-target {
  outline: 2px solid var(--coin);
  background: #242114;
}

.bag-cell.touch-target {
  outline: 3px solid var(--green);
  background: #15251c;
}

.bag-cell.filled {
  border-color: transparent;
  background: #0f1319;
}

.item-tile {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  text-align: center;
  padding: 4px;
  border: 2px solid currentColor;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.12)),
    var(--ui-panel-inset-blue) center / 100% 100% no-repeat;
  color: #d7dde9;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
  user-select: none;
  touch-action: none;
  position: relative;
  z-index: 2;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 14px color-mix(in srgb, currentColor 22%, transparent);
}

.item-tile.element-wood {
  box-shadow:
    inset 0 0 0 1px rgba(208, 255, 172, 0.22),
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 16px rgba(87, 218, 103, 0.38);
}

.bag-board-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
  margin-bottom: 7px;
  min-height: 0;
}

.bag-board-row .bag-grid {
  margin-inline: 0;
}

.item-tile.element-fire {
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 135, 0.18),
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 15px rgba(255, 86, 54, 0.32);
}

.item-tile.element-earth {
  box-shadow:
    inset 0 0 0 1px rgba(255, 225, 168, 0.2),
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 16px rgba(194, 137, 66, 0.36);
}

.item-tile.element-metal {
  box-shadow:
    inset 0 0 0 1px rgba(232, 236, 246, 0.24),
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 16px rgba(180, 196, 224, 0.36);
}

.item-tile.element-water {
  box-shadow:
    inset 0 0 0 1px rgba(220, 244, 255, 0.18),
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 15px rgba(96, 190, 255, 0.34);
}

.item-tile.element-light {
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 180, 0.22),
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 16px rgba(255, 210, 78, 0.38);
}

.item-tile.element-dark {
  box-shadow:
    inset 0 0 0 1px rgba(225, 185, 255, 0.18),
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 16px rgba(156, 80, 255, 0.36);
}

.item-tile.element-neutral {
  box-shadow:
    inset 0 0 0 1px rgba(220, 224, 232, 0.14),
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 12px rgba(210, 218, 228, 0.18);
}

.item-tile.element-frost,
.item-tile.element-holy,
.item-tile.element-shadow,
.item-tile.element-nature,
.item-tile.element-lightning {
  box-shadow:
    inset 0 0 0 1px rgba(214, 229, 255, 0.2),
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 14px rgba(160, 176, 210, 0.24);
}

.item-tile::before,
.tray-item::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.item-tile::after,
.tray-item::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  pointer-events: none;
}

.item-icon {
  width: min(28px, 72%);
  height: min(28px, 72%);
  box-sizing: border-box;
  object-fit: contain;
  padding: 2px;
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 62%),
    rgba(0, 0, 0, 0.18);
  margin-top: 2px;
  filter:
    saturate(1.18)
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 7px color-mix(in srgb, currentColor 38%, transparent));
}

.placed-item .item-icon {
  width: clamp(24px, 48%, 38px);
  height: clamp(24px, 48%, 38px);
  margin-top: 0;
  align-self: center;
}

.item-tile.item-art-bow .item-icon {
  width: min(46px, 92%);
  height: min(30px, 74%);
  padding: 1px;
  transform: translateY(1px) rotate(-8deg) scale(1.08);
  transform-origin: center;
}

.placed-item.item-art-bow .item-icon {
  width: clamp(38px, 86%, 74px);
  height: clamp(20px, 58%, 34px);
  transform: translateY(0) rotate(-8deg) scale(1.12);
}

.tray-item.item-art-bow .tray-icon {
  width: 31px;
  height: 22px;
  padding: 1px;
  transform: rotate(-8deg) scale(1.06);
}

.item-tile.item-art-badge .item-icon {
  width: min(32px, 76%);
  height: min(32px, 76%);
  padding: 2px;
  transform: translateY(0) scale(1.02);
}

.placed-item.item-art-badge .item-icon {
  width: clamp(25px, 62%, 42px);
  height: clamp(25px, 62%, 42px);
  transform: translateY(0) scale(1.06);
}

.tray-item.item-art-badge .tray-icon {
  width: 25px;
  height: 25px;
  transform: scale(1.04);
}

.placed-item .item-name {
  display: none;
}

.item-role,
.tray-role {
  position: absolute;
  right: 3px;
  top: 3px;
  max-width: calc(100% - 6px);
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.36);
  color: var(--text);
  font-size: 6px;
  font-weight: 1000;
  line-height: 1.1;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-name {
  display: block;
  max-width: 100%;
  padding-top: 0;
  align-self: end;
  overflow: hidden;
  text-shadow: none;
}

.role-weapon {
  color: #ffd0a3;
}

.role-guard {
  color: #bdd2ff;
}

.role-support {
  color: #9ff0ba;
}

.role-tile-support {
  box-shadow:
    inset 0 0 0 1px rgba(111, 231, 160, 0.24),
    0 0 14px rgba(111, 231, 160, 0.12);
  background:
    radial-gradient(circle at 18% 16%, rgba(111, 231, 160, 0.24), transparent 38%),
    linear-gradient(145deg, rgba(72, 122, 83, 0.3), rgba(0, 0, 0, 0.08));
}

.role-tile-support .item-role,
.role-tile-support .tray-role {
  background: rgba(34, 92, 54, 0.88);
  color: #d8ffe4;
}

.role-tech {
  color: #8fe7ff;
}

.role-focus {
  color: #e0c3ff;
}

.role-boost {
  color: #ffdf82;
}

.item-tile.secret-item,
.tray-item.secret-item {
  border-color: #ffe39a;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 239, 171, 0.28), transparent 42%),
    radial-gradient(circle at 22% 76%, rgba(184, 150, 255, 0.2), transparent 48%),
    var(--ui-panel-inset-blue) center / 100% 100% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255, 227, 154, 0.22),
    0 0 16px rgba(255, 220, 115, 0.24);
}

.secret-badge {
  position: absolute;
  left: 3px;
  top: 3px;
  z-index: 3;
  max-width: calc(100% - 6px);
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(255, 220, 115, 0.2);
  border: 1px solid rgba(255, 220, 115, 0.55);
  color: #ffe39a;
  font-size: 6px;
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
}

.tray-item .secret-badge {
  left: auto;
  right: 5px;
  top: 5px;
  font-size: 8px;
}

.item-tile.selected {
  box-shadow: 0 0 0 3px rgba(245, 197, 90, 0.65);
}

.item-tile.bonus-active {
  box-shadow:
    inset 0 0 0 2px currentColor,
    inset 0 0 14px rgba(255, 230, 145, 0.16),
    0 0 11px currentColor,
    0 0 18px rgba(255, 220, 115, 0.2);
}

.item-tile.set-active {
  box-shadow:
    inset 0 0 0 2px currentColor,
    inset 0 0 0 4px rgba(118, 205, 255, 0.22),
    inset 0 0 18px rgba(118, 205, 255, 0.22),
    0 0 11px currentColor,
    0 0 20px rgba(118, 205, 255, 0.28);
}

.placed-item.bonus-active {
  animation: activePlacementPulse 1150ms ease-in-out infinite alternate;
}

.placed-item.set-active {
  animation: linkedSetPulse 1450ms ease-in-out infinite alternate;
}

.placed-item.bonus-active::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 238, 172, 0.46), rgba(110, 231, 160, 0.18) 42%, transparent 72%);
  opacity: 0.86;
  pointer-events: none;
  z-index: 0;
}

.placed-item.bonus-active .item-icon {
  position: relative;
  z-index: 1;
  filter:
    brightness(1.08)
    saturate(1.34)
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 10px rgba(156, 255, 191, 0.58))
    drop-shadow(0 0 16px rgba(255, 220, 115, 0.16));
}

.placed-item.set-active::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 48%, rgba(132, 212, 255, 0.44), rgba(160, 116, 255, 0.14) 44%, transparent 74%);
  opacity: 0.82;
  pointer-events: none;
  z-index: 0;
}

.placed-item.set-active .item-icon {
  position: relative;
  z-index: 1;
  filter:
    brightness(1.08)
    saturate(1.28)
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 10px rgba(132, 212, 255, 0.62))
    drop-shadow(0 0 18px rgba(160, 116, 255, 0.22));
}

@keyframes activePlacementPulse {
  from {
    box-shadow:
      inset 0 0 0 2px currentColor,
      inset 0 0 12px rgba(255, 230, 145, 0.12),
      0 0 8px currentColor,
      0 0 12px rgba(255, 220, 115, 0.12);
  }
  to {
    box-shadow:
      inset 0 0 0 2px currentColor,
      inset 0 0 18px rgba(255, 230, 145, 0.2),
      0 0 13px currentColor,
      0 0 22px rgba(255, 220, 115, 0.24);
  }
}

@keyframes linkedSetPulse {
  from {
    box-shadow:
      inset 0 0 0 2px currentColor,
      inset 0 0 0 4px rgba(118, 205, 255, 0.16),
      inset 0 0 13px rgba(118, 205, 255, 0.14),
      0 0 9px currentColor,
      0 0 14px rgba(118, 205, 255, 0.16);
  }
  to {
    box-shadow:
      inset 0 0 0 2px currentColor,
      inset 0 0 0 4px rgba(118, 205, 255, 0.26),
      inset 0 0 20px rgba(118, 205, 255, 0.22),
      0 0 13px currentColor,
      0 0 24px rgba(118, 205, 255, 0.28);
  }
}

.item-tile.bonus-active::after {
  content: var(--i18n-css-effect, "효과");
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(110, 231, 160, 0.2);
  border: 1px solid rgba(110, 231, 160, 0.5);
  color: #9cffbf;
  font-size: 6px;
  font-weight: 1000;
  line-height: 1;
}

.item-tile.bonus-active::after {
  content: none !important;
  display: none !important;
}

.placed-item.bonus-active::after {
  display: none;
}

.item-tile.dragging,
.inventory-card.dragging {
  opacity: 0.45;
}

.pointer-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: 54px;
  height: 54px;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  z-index: 100;
}

.boss-warning {
  color: #ffdc73;
}

.inventory-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  min-height: 112px;
  max-height: 168px;
  overflow: auto;
}

.inventory-card {
  min-height: 74px;
  background: #171b22;
  border: 1px solid #343b48;
  border-radius: 8px;
  padding: 7px;
  display: grid;
  gap: 5px;
  align-content: center;
  text-align: center;
  touch-action: none;
}

.inventory-card.selected {
  border-color: var(--coin);
  box-shadow: inset 0 0 0 1px var(--coin);
}

.inventory-card .name {
  font-size: 12px;
  font-weight: 900;
}

.inventory-card .meta {
  color: var(--muted);
  font-size: 10px;
}

.bag-sell-bar {
  display: grid;
  grid-template-columns: minmax(86px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 7px 8px;
  border: 1px solid rgba(118, 205, 255, 0.72);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(45, 119, 170, 0.24), rgba(4, 15, 28, 0.16)),
    var(--ui-panel-inset-blue) center / 100% 100% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 14px rgba(30, 159, 255, 0.12);
}

.bag-sell-bar[hidden] {
  display: none;
}

.bag-sell-bar > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bag-sell-bar strong {
  color: #fff0aa;
  font-size: 12px;
}

.bag-sell-bar small {
  color: #bcdff3;
  font-size: 9px;
  line-height: 1.2;
}

.bag-sell-actions {
  display: grid;
  grid-template-columns: 0.95fr 1.2fr 0.72fr;
  gap: 4px;
}

.bag-sell-actions .mini-button {
  min-width: 0;
  min-height: 30px;
  padding-inline: 3px;
  font-size: 9px;
}

#bagPanel.sell-mode .selected-info,
#bagPanel.sell-mode .item-detail {
  display: none;
}

#bagMultiSellButton.active {
  color: #fff0aa;
  border-color: #75cfff;
  box-shadow: inset 0 0 10px rgba(39, 159, 240, 0.25);
}

.item-tile.sell-selected,
.tray-item.sell-selected {
  outline: 2px solid #fff0aa;
  outline-offset: -3px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 224, 111, 0.52),
    0 0 16px rgba(255, 218, 84, 0.5);
}

.item-tile.sell-selected::before,
.tray-item.sell-selected::before {
  content: var(--i18n-css-sell, "판매");
  inset: auto 3px 3px auto;
  width: auto;
  height: auto;
  padding: 2px 4px;
  border: 0;
  border-radius: 5px;
  background: #f3c84d;
  color: #17130a;
  font-size: 7px;
  font-weight: 1000;
  line-height: 1;
  z-index: 5;
}

.bag-tray {
  margin-top: 5px;
  padding: 5px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.13)),
    var(--ui-panel-blue) center / 100% 100% no-repeat;
  border: 1px solid #526274;
}

.bag-tray.drop-target,
.bag-tray.touch-target {
  border-color: var(--coin);
  background: #242114;
  box-shadow: inset 0 0 0 1px rgba(245, 197, 90, 0.38);
}

#bagPanel.active .bag-tray {
  display: flex;
  min-height: 74px;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.bag-tray.is-empty {
  display: flex;
  min-height: 86px;
}

#bagPanel.active .bag-tray.is-empty {
  display: flex;
  min-height: 86px;
}

.tray-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.tray-head strong {
  font-size: 12px;
}

.tray-head span {
  display: none;
}

.bag-tray-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 54px;
  align-content: start;
  gap: 3px;
  min-height: 44px;
  max-height: none;
  flex: 1;
  overflow: auto;
  padding-right: 2px;
}

.tray-item {
  min-height: 58px;
  border-radius: 8px;
  border: 2px solid currentColor;
  color: inherit;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0;
  padding: 13px 3px 4px;
  position: relative;
  text-align: center;
  touch-action: none;
  cursor: grab;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -5px 0 rgba(0, 0, 0, 0.18),
    0 3px 0 rgba(0, 0, 0, 0.25),
    0 0 12px color-mix(in srgb, currentColor 14%, transparent);
}

.tray-icon {
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  object-fit: contain;
  padding: 2px;
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 62%),
    rgba(0, 0, 0, 0.18);
  margin-bottom: 1px;
  filter:
    saturate(1.18)
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 6px color-mix(in srgb, currentColor 34%, transparent));
}

.tray-item.selected {
  box-shadow: 0 0 0 2px rgba(245, 197, 90, 0.78);
  background-blend-mode: screen;
  outline: 1px solid rgba(245, 197, 90, 0.5);
}

.tray-name {
  display: -webkit-box;
  color: var(--text);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.05;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-shadow: none;
}

.tray-grade {
  position: absolute;
  top: 3px;
  left: 4px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  color: #ffffff;
  font-size: 7px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
}

.tray-role {
  top: 2px;
  right: 4px;
  max-width: 24px;
  font-size: 6px;
  opacity: 0.72;
}

.tray-item small,
.tray-empty {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.2;
}

.tray-item small {
  display: none;
}

.tray-actions {
  display: none;
}

.tray-item.selected .tray-actions {
  display: none;
}

.tray-actions .mini-button:not(.accent) {
  display: none;
}

.tray-item.selected .tray-icon {
  transform: translateY(-2px);
}

.tray-item.selected .tray-name {
  display: -webkit-box;
}

.tray-item.selected .mini-button {
  min-height: 16px;
  padding: 0;
  font-size: 7px;
}

.bag-tray.is-empty .tray-empty {
  min-height: 46px;
  border: 1px dashed #46505f;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #9fa8b8;
  font-size: 0;
}

.tray-item small {
  max-width: 100%;
  overflow: hidden;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.tray-actions {
  width: 100%;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 2px;
}

.tray-actions .mini-button {
  min-width: 0;
  width: 100%;
  height: 22px;
  padding-inline: 3px;
  font-size: 9px;
}

.synergy-box {
  display: none;
  margin-top: 8px;
  background: #171b22;
  border: 1px solid #343b48;
  border-radius: 8px;
  padding: 8px;
}

#bagPanel .synergy-box,
#bagPanel .synergy-box.compact {
  display: none !important;
  margin: 0;
  padding: 0;
  border: 0;
}

#bagPanel.active .synergy-box {
  display: none;
}

.synergy-box.compact {
  margin-top: 6px;
}

.synergy-box strong {
  font-size: 12px;
}

.synergy-box p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 4px;
}

.meta-perk {
  margin-top: 7px;
  padding: 6px 7px;
  border-radius: 7px;
  background: #151a20;
  border: 1px solid #343b48;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.log-panel {
  display: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  flex: 1;
  min-height: 76px;
}

.log-list {
  display: grid;
  gap: 6px;
  max-height: 60px;
  overflow: auto;
}

.log-entry {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.log-entry strong {
  color: var(--text);
}

@media (max-width: 390px) {
  body {
    padding: 0;
  }

  .phone-shell {
    min-height: 100vh;
    border-radius: 0;
  }

  .combat-panel {
    grid-template-columns: 1fr;
  }

  .enemy-side {
    text-align: left;
  }

  .battle-core {
    order: 3;
  }

  .bag-grid {
    grid-template-columns: repeat(4, 32px);
    grid-template-rows: repeat(3, 32px);
  }

  .status-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  .chance-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-height: 760px) {
  body {
    padding: 0;
  }

  .phone-shell {
    height: 100vh;
    border-radius: 0;
  }

  .topbar {
    padding-top: 8px;
    margin-bottom: 6px;
  }

  .status-strip {
    gap: 3px;
    margin-bottom: 3px;
  }

  .status-strip div {
    padding: 2px 4px;
  }

  .status-strip strong {
    font-size: 12px;
  }

  .mission-panel {
    min-height: 38px;
    padding: 6px 8px;
    margin-bottom: 6px;
  }

  .combat-panel {
    min-height: 148px;
    padding: 8px;
    margin-bottom: 6px;
  }

  .primary-button {
    height: 34px;
  }

  .skill-button {
    min-height: 18px;
  }

  .skill-button {
    min-height: 20px;
  }

  .tabs {
    margin-bottom: 6px;
    padding: 8px 9px;
    gap: 5px;
  }

  .tab-button {
    height: 32px;
    font-size: 10.5px;
  }

  .panel {
    padding: 8px;
    margin-bottom: 6px;
  }

  .panel-head {
    margin-bottom: 6px;
  }

  .capsule-board {
    gap: 4px;
  }

  .log-panel {
    min-height: 58px;
    padding: 8px;
    margin-bottom: 6px;
  }

  .log-list {
    max-height: 36px;
  }
}

@media (max-width: 390px), (max-height: 700px) {
  .run-prep-card,
  .board-passive-choice-card {
    width: min(410px, calc(100vw - 12px));
    max-height: calc(100dvh - 16px);
    min-height: 0;
    padding: 36px 30px 28px;
    overflow-y: auto;
  }

  .board-passive-choice {
    min-height: 72px;
  }
}

/* Combat timing, abyss impact and bag-frame fit pass 1788257000000. */
.slash-fx {
  width: 124px;
  height: 82px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/combat_fx_refresh_1788256000000/abyss-hit-burst-v1.png") center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(-5deg) scale(0.48);
  filter:
    drop-shadow(0 0 4px rgba(129, 225, 255, 0.76))
    drop-shadow(0 0 9px rgba(56, 91, 255, 0.52));
}

@keyframes abyssHitBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-9deg) scale(0.34);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-3deg) scale(1.04);
  }
  48% {
    opacity: 0.96;
    transform: translate(-50%, -50%) rotate(1deg) scale(0.94);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(5deg) scale(1.18);
  }
}

@media (max-height: 760px) {
}

/* Mobile completion pass 1788131000000. */
.story-actions {
  grid-template-columns: minmax(74px, 0.9fr) minmax(104px, 1.25fr) minmax(92px, 1fr);
  gap: 6px;
}

#storyBackButton,
#storySkipButton,
#storyNextButton {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png") center / 100% 100% no-repeat;
  color: #e4f3ff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92);
  box-shadow: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.38));
}

#menuSettingsPanel.menu-panel.active {
  box-sizing: border-box;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

#menuSettingsPanel .menu-panel-head {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
}

#menuSettingsPanel .menu-panel-head > .menu-back-button {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  min-width: 68px;
}

#menuSettingsPanel .menu-panel-head::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 40px;
  height: 44px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-settings-button.png") center / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.42));
}

.menu-lobby-panel .lobby-status-grid div {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px 8px 14px;
}

.menu-lobby-panel .lobby-status-grid img {
  width: 26px;
  height: 26px;
  align-self: center;
}

.menu-lobby-panel .lobby-status-grid span,
.menu-lobby-panel .lobby-status-grid strong {
  align-self: center;
  line-height: 1;
}

.chance-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}

#adPullButton,
#adHealButton {
  grid-column: span 2;
  min-height: 36px;
  padding-inline: 12px;
}

#adPullButton span,
#adHealButton span {
  font-size: 10.5px;
  white-space: nowrap;
}

.chance-button {
  min-width: 0;
  min-height: 34px;
  padding: 4px 5px;
}

.chance-button span,
.chance-button small {
  display: block;
  overflow: hidden;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#boardSummary {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-close-button {
  position: relative;
  color: #ffffff;
  font-size: 18px;
  line-height: 30px;
  text-indent: 0;
  text-shadow: 0 2px 3px #000;
}

.icon-close-button::after {
  content: "X";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
}

.wave-preview {
  width: min(100%, 292px);
  min-height: 40px;
  margin-inline: auto;
  padding: 6px 22px;
}

.wave-preview span {
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}

.wave-preview strong,
.wave-preview small {
  white-space: nowrap;
}

@media (max-width: 390px) {
  .story-actions {
    grid-template-columns: minmax(68px, 0.85fr) minmax(98px, 1.2fr) minmax(86px, 1fr);
  }

  .menu-lobby-panel .lobby-status-grid div {
    padding-inline: 11px;
  }
}

/* Game and settings controls share the lobby raster language. */
.run-prep-shard-ledger {
  min-height: 46px;
  padding: 5px 12px;
}

.run-prep-shard-ledger > div {
  min-height: 36px;
}

.run-prep-shard-ledger span {
  font-size: 9px;
  line-height: 1.05;
}

.run-prep-shard-ledger strong {
  font-size: 10px;
  line-height: 1.05;
}

.run-prep-shard-ledger b {
  font-size: 14px;
  line-height: 1;
}

.top-menu-button {
  width: 38px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-settings-button.png") center / 100% 100% no-repeat;
  color: transparent;
  font-size: 0;
  box-shadow: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.46));
}

.chance-button.premium,
.mini-button.accent,
.skill-button.ready,
.ranking-scope-button.active,
.tutorial-actions button:first-child {
  border: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png") center / 100% 100% no-repeat;
  color: #fff1b6;
  box-shadow: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
}

.chance-button.premium small {
  color: #ffe29a;
}

.primary-button {
  width: 104px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png") center / 100% 100% no-repeat;
  color: #fff2bd;
  box-shadow: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.42));
}

.primary-button.needs-item {
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png") center / 100% 100% no-repeat;
  color: #dceeff;
}

.tabs {
  padding: 7px 8px;
  gap: 5px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-hint.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.34));
}

.mini-button.danger {
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png");
  color: #ffb7b3;
}

.menu-button,
.menu-setting-button {
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
  color: #e4f4ff;
  box-shadow: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.38));
}

.menu-button.primary {
  border: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png") center / 100% 100% no-repeat;
  color: #fff1b6;
  box-shadow: none;
}

.menu-button.google {
  border: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
}

.menu-back-button,
.menu-small-button,
.menu-small-button.ghost {
  min-height: 32px;
  padding: 0 13px;
  border: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png") center / 100% 100% no-repeat;
  color: #dceeff;
}

.menu-account-box,
.menu-cloud-box {
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.34));
}

/* Codex, element and recipe decision screens. */
#itemCodexBody.open {
  max-height: min(560px, calc(100dvh - 210px));
  gap: 7px;
  padding-right: 2px;
}

.codex-item-list {
  display: grid;
  gap: 5px;
}

button.codex-row {
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  border: 1px solid rgba(120, 166, 205, 0.18);
  background: rgba(12, 24, 37, 0.82);
  color: inherit;
  font: inherit;
  text-align: left;
}

button.codex-row:not(:disabled) {
  cursor: pointer;
}

.codex-row em {
  color: #8edfff;
  font-size: 8px;
  font-style: normal;
  font-weight: 1000;
  white-space: nowrap;
}

.codex-item-detail {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  padding: 19px 22px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.4));
}

.codex-detail-close {
  position: absolute;
  top: 12px;
  right: 18px;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #dbeeff;
  font-size: 19px;
  font-weight: 1000;
}

.codex-detail-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding-right: 22px;
}

.codex-detail-head > img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(105, 210, 255, 0.26));
}

.codex-detail-head > div {
  display: grid;
  gap: 1px;
}

.codex-detail-head small,
.codex-detail-head span,
.codex-detail-unlock {
  color: #aebfd2;
  font-size: 8px;
  font-weight: 900;
}

.codex-detail-head strong {
  color: #fff2bd;
  font-size: 15px;
}

.codex-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.codex-item-detail > p {
  margin: 0;
  color: #dce7f4;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.4;
}

.codex-detail-note b {
  color: #8fe6ff;
}

.menu-element-box {
  gap: 8px;
  padding: 10px;
}

.element-rule-row {
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);
  padding: 7px;
}

.element-rule-row strong {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
}

.element-rule-row strong i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #263b4e;
  color: #f7fbff;
  font-size: 9px;
  font-style: normal;
}

.element-rule-row span,
.element-rule-row em {
  display: grid;
  gap: 1px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.element-rule-row span b,
.element-rule-row em b {
  color: #8fe5ff;
  font-size: 7px;
}

.element-rule-row em b {
  color: #ffaaa8;
}

#menuRecipePanel .menu-recipe-list {
  max-height: min(560px, calc(100dvh - 190px));
  gap: 7px;
}

.menu-recipe-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 8px;
  min-height: 82px;
  padding: 9px;
  border: 1px solid rgba(125, 167, 205, 0.2);
  border-radius: 6px;
  background: rgba(11, 23, 36, 0.84);
}

.menu-recipe-materials {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 3px;
}

.menu-recipe-materials > span {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
}

.menu-recipe-materials img,
.menu-recipe-result > img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.menu-recipe-materials small {
  max-width: 100%;
  color: #c7d3e1;
  font-size: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-recipe-materials > b {
  color: #8fe5ff;
  font-size: 11px;
}

.menu-recipe-result {
  min-width: 0;
  display: grid;
  grid-template-columns: 14px 36px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.menu-recipe-equals {
  color: #ffe17c;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 7px rgba(255, 204, 76, 0.4);
}

.menu-recipe-result > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.menu-recipe-result strong {
  color: #fff0b5;
  font-size: 10px;
}

.menu-recipe-result small {
  color: #9eb4c9;
  font-size: 7px;
  line-height: 1.3;
}

.menu-recipe-empty {
  display: grid;
  gap: 5px;
  padding: 18px 12px;
  text-align: center;
}

.menu-recipe-empty strong {
  color: #fff0b8;
  font-size: 13px;
}

.menu-recipe-empty span,
.menu-recipe-empty small,
.menu-recipe-unknown {
  color: #b7c7d8;
  font-size: 9px;
  line-height: 1.4;
}

.menu-recipe-unknown {
  padding: 9px;
  text-align: center;
}

.menu-recipe-unknown strong {
  color: #9ce8ff;
}

/* Scene-first expedition lobby */
.main-menu[data-panel="lobby"] {
  padding: 0;
}

.main-menu[data-panel="lobby"] .menu-scene {
  width: min(100%, 430px);
  height: min(100dvh, 820px);
  min-height: 0;
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 0 110px 90px rgba(10, 4, 19, 0.42),
    inset 0 -170px 120px rgba(4, 3, 8, 0.76);
}

.main-menu[data-panel="lobby"][data-lobby-phase="deep"] .menu-scene,
.main-menu[data-panel="lobby"][data-lobby-phase="final"] .menu-scene {
  background:
    url("assets/generated/story_stage30_reveal_1787580000000/reveal_panel_2_bg.png") center / cover no-repeat,
    #10081d;
}

.main-menu[data-panel="lobby"] .menu-title {
  display: none;
}

.main-menu[data-panel="lobby"] .menu-card {
  inset: 0;
  overflow: hidden;
}

.main-menu[data-panel="lobby"] .menu-characters {
  opacity: 0;
  pointer-events: none;
}

.main-menu[data-panel="lobby"] .menu-party {
  bottom: 176px;
}

.main-menu[data-panel="lobby"] .menu-final-boss {
  bottom: 166px;
}

.main-menu[data-panel="lobby"][data-lobby-phase="deep"] .menu-characters,
.main-menu[data-panel="lobby"][data-lobby-phase="final"] .menu-characters {
  opacity: 0;
}

.menu-lobby-panel.active {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  overflow: hidden;
}

.menu-lobby-panel .lobby-command {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.menu-lobby-panel .lobby-command::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(8, 4, 16, 0.58) 0%, rgba(8, 4, 16, 0.08) 24%, transparent 58%, rgba(5, 3, 9, 0.74) 82%, rgba(4, 3, 8, 0.94) 100%);
}

.menu-lobby-panel .lobby-command-art {
  z-index: 1;
  object-position: 50% 50%;
  opacity: 1;
  filter: saturate(1.06) contrast(1.03) brightness(0.94);
}

.main-menu[data-lobby-phase="deep"] .lobby-command-art,
.main-menu[data-lobby-phase="final"] .lobby-command-art {
  opacity: 0.82;
}

.lobby-deep-cast {
  position: absolute;
  z-index: 4;
  left: 8px;
  right: 8px;
  bottom: 224px;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  pointer-events: none;
}

.main-menu[data-lobby-phase="deep"] .lobby-deep-cast {
  display: grid;
}

.lobby-deep-cast img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: auto;
  filter:
    drop-shadow(0 0 8px rgba(204, 139, 255, 0.52))
    drop-shadow(0 10px 8px rgba(0, 0, 0, 0.72));
  transform-origin: center bottom;
  animation: lobby-cast-float 3.4s ease-in-out infinite;
}

.lobby-deep-cast img:nth-child(2),
.lobby-deep-cast img:nth-child(4) {
  animation-delay: -1.1s;
}

.lobby-deep-cast img:nth-child(3) {
  animation-delay: -2.1s;
}

@keyframes lobby-cast-float {
  0%, 100% { transform: translateY(0) scale(1.68); }
  50% { transform: translateY(-4px) scale(1.68); }
}

.lobby-final-scene {
  position: absolute;
  z-index: 4;
  top: 132px;
  left: 8px;
  width: calc(100% - 16px);
  height: 300px;
  display: none;
  object-fit: contain;
  object-position: center;
  filter:
    saturate(1.08)
    brightness(1.08)
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.62));
  pointer-events: none;
}

.main-menu[data-lobby-phase="final"] .lobby-final-scene {
  display: block;
}

.menu-lobby-panel .lobby-head {
  z-index: 8;
  top: max(12px, env(safe-area-inset-top));
  bottom: auto;
  left: 56px;
  right: 56px;
  gap: 1px;
  text-align: center;
}

.menu-lobby-panel .lobby-head span {
  color: #9ee9ff;
  font-size: 9px;
  letter-spacing: 0;
}

.menu-lobby-panel .lobby-head strong {
  color: #fff3bd;
  font-size: 17px;
  line-height: 1.12;
  text-shadow: 0 2px 0 #4b2919, 0 0 14px rgba(255, 198, 74, 0.34);
}

.menu-lobby-panel .lobby-head p {
  display: none;
}

.menu-lobby-panel .lobby-story-link,
.lobby-settings-button {
  position: absolute;
  z-index: 10;
  top: max(10px, env(safe-area-inset-top));
  width: 46px;
  height: 42px;
  min-width: 46px;
  padding: 0;
  border: 0;
  background: url("assets/generated/ui/tab-button.png") center / 100% 100% no-repeat;
  color: #fff4c7;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.42));
  display: grid;
  place-items: center;
}

.menu-lobby-panel .lobby-story-link {
  left: 10px;
  right: auto;
}

.lobby-settings-button {
  right: 10px;
}

.menu-lobby-panel .lobby-story-link img,
.lobby-settings-button img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.58));
}

.menu-lobby-panel .lobby-status-grid {
  position: absolute;
  z-index: 8;
  top: max(61px, calc(env(safe-area-inset-top) + 56px));
  left: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.menu-lobby-panel .lobby-status-grid div {
  min-height: 42px;
  grid-template-columns: 29px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 4px;
  padding: 5px 7px;
  border: 0;
  background: url("assets/generated/ui/popup-stat.png") center / 100% 100% no-repeat;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.menu-lobby-panel .lobby-status-grid img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: auto;
  justify-self: center;
  align-self: center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.58));
}

.menu-lobby-panel .lobby-status-grid span {
  color: #eadcc4;
  font-size: 8px;
  line-height: 1;
}

.menu-lobby-panel .lobby-status-grid strong {
  color: #fff3b2;
  font-size: 12px;
}

.menu-lobby-panel .lobby-mark-board {
  position: absolute;
  z-index: 8;
  left: 10px;
  right: 10px;
  bottom: 145px;
  min-height: 76px;
  gap: 4px;
  padding: 8px 10px;
  border: 0;
  background: url("assets/generated/ui/popup-list.png") center / 100% 100% no-repeat;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}

.menu-lobby-panel .lobby-mark-head {
  min-height: 15px;
}

.menu-lobby-panel .lobby-mark-head > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.menu-lobby-panel .lobby-mark-head span {
  color: #ffe39b;
  font-size: 9px;
}

.menu-lobby-panel .lobby-mark-head strong {
  color: #9ee9ff;
  font-size: 10px;
}

.menu-lobby-panel .lobby-mark-slots {
  gap: 4px;
}

.menu-lobby-panel .lobby-mark-slot {
  min-height: 42px;
  padding: 2px;
  border-color: rgba(255, 218, 126, 0.18);
  background: rgba(12, 8, 17, 0.54);
}

.menu-lobby-panel .lobby-mark-slot img {
  width: 28px;
  height: 28px;
}

.menu-lobby-panel .lobby-mark-slot strong {
  font-size: 7px;
}

.menu-lobby-panel .lobby-start-button {
  position: absolute;
  z-index: 9;
  left: 10px;
  right: 10px;
  bottom: 72px;
  min-height: 60px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 0;
  padding: 5px 13px;
  border: 0;
  background: url("assets/generated/ui/popup-wide-button.png") center / 100% 100% no-repeat;
  filter:
    drop-shadow(0 8px 11px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 12px rgba(255, 192, 67, 0.18));
}

.menu-lobby-panel .lobby-start-button img {
  grid-column: 1;
  justify-self: center;
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.58));
}

.menu-lobby-panel .lobby-start-button > span {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.menu-lobby-panel .lobby-start-button strong {
  font-size: 18px;
}

.menu-lobby-panel .lobby-tools {
  position: absolute;
  z-index: 9;
  left: 8px;
  right: 8px;
  bottom: max(7px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.menu-lobby-panel .lobby-tool-button,
.menu-lobby-panel .lobby-tool-button.wide {
  min-height: 58px;
  grid-template-rows: 34px 12px;
  align-content: center;
  row-gap: 4px;
  padding: 4px 2px 5px;
  border: 0;
  background: url("assets/generated/ui/tab-button.png") center / 100% 100% no-repeat;
  box-shadow: 0 5px 9px rgba(0, 0, 0, 0.34);
}

.menu-lobby-panel .lobby-tool-button img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: auto;
  justify-self: center;
  align-self: center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.58));
}

.menu-lobby-panel .lobby-tool-button strong {
  color: #fff1c9;
  font-size: 9px;
  line-height: 12px;
  margin: 0;
  align-self: center;
}

@media (max-height: 700px) {
  .menu-lobby-panel .lobby-status-grid {
    top: 56px;
  }

  .lobby-deep-cast {
    bottom: 210px;
  }

  .lobby-final-scene {
    top: 112px;
    height: 260px;
  }

  .menu-lobby-panel .lobby-mark-board {
    bottom: 139px;
    min-height: 68px;
  }

  .menu-lobby-panel .lobby-start-button {
    bottom: 68px;
    min-height: 55px;
  }

  .menu-lobby-panel .lobby-tool-button,
  .menu-lobby-panel .lobby-tool-button.wide {
    min-height: 54px;
  }
}

/* v7 visual correction: optical mark centering and one-piece companion chrome. */

@media (max-height: 700px) {
}

/* Dedicated companion, mark-label, lobby shortcut, and store art v6. */

#menuCompanionPanel.active {
  background:
    radial-gradient(circle at 50% 20%, rgba(27, 100, 139, .16), transparent 48%),
    linear-gradient(180deg, rgba(3, 14, 25, .98), rgba(2, 7, 15, .99)) !important;
}

#menuCompanionPanel .companion-currency-bar img {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 22px !important;
  height: 22px !important;
  justify-self: center !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 4px rgba(96, 211, 247, .32)) !important;
}

#menuCompanionPanel .companion-menu-tabs button.active {
  background-image: url("assets/generated/companion_ui_v6/companion-tab-active.png") !important;
  color: #fff2b4 !important;
  text-shadow: 0 2px 3px #000, 0 0 5px rgba(95, 221, 255, .42) !important;
}

#menuCompanionPanel .summon-result,
#menuCompanionPanel .companion-collection-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3)) !important;
}

#menuStorePanel .store-inventory > div:nth-child(4)::before {
  border-color: rgba(197, 113, 244, .56) !important;
  background: radial-gradient(circle, rgba(132, 51, 192, .24), rgba(8, 8, 25, .95) 68%) !important;
}

#menuStorePanel .store-product-group {
  min-width: 0;
  display: grid;
  gap: 6px;
}

#menuStorePanel .store-product-group-head {
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 18px;
  background: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat;
  text-shadow: 0 2px 3px #000;
}

#menuStorePanel .store-product-group-head strong {
  color: #fff0ad;
  font-size: 12px;
  white-space: nowrap;
}

#menuStorePanel .store-product-group-head small {
  overflow: hidden;
  color: #9fd3e6;
  font-size: 7.5px;
  line-height: 1.15;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menuStorePanel .store-product-group-grid {
  display: grid;
  gap: 6px;
}

#menuStorePanel .store-product-card[data-store-tone="summon-best"] {
  filter: drop-shadow(0 0 7px rgba(210, 142, 63, .3)) drop-shadow(0 4px 6px rgba(0, 0, 0, .34)) !important;
}

@media (max-height: 700px) {
}

/* v7 final visual correction: optical mark centering and one-piece companion chrome. */
.menu-lobby-panel .lobby-mark-slot:nth-child(1) img {
  transform: translate(calc(-50% - 4px), -50%) !important;
}

.menu-lobby-panel .lobby-mark-slot:nth-child(2) img {
  transform: translate(calc(-50% - 2px), -50%) !important;
}

.menu-lobby-panel .lobby-mark-slot:nth-child(3) img {
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-mark-slot:nth-child(4) img {
  transform: translate(calc(-50% + 2px), -50%) !important;
}

.menu-lobby-panel .lobby-mark-slot:nth-child(5) img {
  transform: translate(calc(-50% + 4px), -50%) !important;
}

#menuCompanionPanel .companion-currency-bar span {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 34px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  align-items: center !important;
  padding: 2px 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCompanionPanel .companion-menu-tabs button,
#menuCompanionPanel .companion-menu-tabs button:not(.active),
#menuCompanionPanel .companion-menu-tabs button.active {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 24px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: center !important;
  filter: none !important;
}

#menuCompanionPanel .companion-menu-tabs button,
#menuCompanionPanel .companion-menu-tabs button:not(.active) {
  background-image: url("assets/generated/companion_ui_v6/companion-tab-inactive.png") !important;
  color: #c1c9dd !important;
}

#menuCompanionPanel .companion-menu-tabs button.active {
  background-image: url("assets/generated/companion_ui_v6/companion-tab-active.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  color: #fff2b4 !important;
  text-shadow: 0 2px 3px #000, 0 0 5px rgba(95, 221, 255, .42) !important;
}

#menuCompanionPanel .companion-summon-card button,
#menuCompanionPanel .companion-summon-card .summon-store-link {
  height: 35px !important;
  min-height: 35px !important;
  border-width: 8px 15px !important;
  border-image-width: 8px 15px !important;
}

#menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
  position: absolute !important;
  left: 21px !important;
  right: 21px !important;
  bottom: 25px !important;
  width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  border-width: 7px 14px !important;
  border-image-width: 7px 14px !important;
}

@media (max-height: 700px) {
}

/* Final raster skin overrides for the scene-first lobby. */
.menu-lobby-panel .lobby-start-button {
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 11px rgba(0, 0, 0, 0.44)) drop-shadow(0 0 12px rgba(77, 200, 255, 0.16));
}

.menu-lobby-panel .lobby-start-button img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 7px rgba(100, 220, 255, 0.42));
}

.menu-lobby-panel .lobby-start-button small {
  color: #aeeaff;
}

.menu-lobby-panel .lobby-tool-button,
.menu-lobby-panel .lobby-tool-button.wide {
  min-height: 62px;
  grid-template-rows: 35px 12px;
  row-gap: 2px;
  padding: 5px 3px 6px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-tool.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.32));
}

.menu-lobby-panel .lobby-tool-button img {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 6px rgba(102, 217, 255, 0.42));
}

.menu-lobby-panel .lobby-tool-button strong {
  color: #f5faff;
  font-size: 9px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

@media (max-width: 390px), (max-height: 700px) {
  .run-prep-card {
    width: min(365px, calc(100vw - 10px));
    max-height: calc(100dvh - 10px);
    aspect-ratio: 1005 / 1530;
    padding: 50px 39px 42px;
    overflow: hidden;
  }

  .run-prep-option {
    min-height: 64px;
  }
}

/* Premium loot reveal uses a dedicated raster frame instead of CSS ornaments. */
.pull-reveal.high-rarity {
  padding: 8px;
  background: rgba(4, 5, 12, 0.88);
  backdrop-filter: blur(4px);
}

.pull-reveal.high-rarity .pull-reveal-card {
  width: min(330px, calc(100vw - 14px));
  max-height: calc(100dvh - 12px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  animation: rareRevealCard 320ms ease both;
}

.pull-reveal.high-rarity .pull-reveal-list {
  display: block;
  margin: 0;
}

.pull-reveal.high-rarity .rare-showcase {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 2 / 3;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr) 44px 48px 38px;
  align-items: center;
  gap: 2px;
  padding: 14.5% 14% 8.5%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui/loot-reveal-frame-v2.png") center / 100% 100% no-repeat;
  box-shadow: none;
  animation: rareRevealPulse 1500ms ease-in-out infinite;
}

.rare-item-focus {
  min-height: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
}

.rare-grade {
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 24px;
  color: currentColor;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 0 10px currentColor, 0 2px 2px rgba(0, 0, 0, 0.95);
}

.pull-reveal.high-rarity .rare-kicker {
  align-self: center;
  color: #dff8ff;
  font-size: 11px;
  letter-spacing: 0;
  text-shadow: 0 2px 4px #000;
}

.pull-reveal.high-rarity .rare-reveal-icon {
  width: 94px;
  height: 94px;
  margin: 0 auto;
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter:
    drop-shadow(0 5px 3px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 12px currentColor);
}

.pull-reveal.high-rarity .rare-showcase .name {
  max-width: 220px;
  color: #f7fbff;
  font-size: 18px;
  line-height: 1.15;
  text-shadow: 0 2px 4px #000;
}

.pull-reveal.high-rarity .rare-showcase .stats {
  align-self: center;
  color: #d8ebff;
  font-size: 11px;
  line-height: 1.25;
}

.pull-reveal.high-rarity .rare-showcase .hint {
  align-self: center;
  max-height: 42px;
  overflow: hidden;
  color: #e7e8f2;
  font-size: 10px;
  line-height: 1.3;
}

.pull-reveal.high-rarity .reveal-card-actions {
  align-self: center;
  width: 84%;
  margin: 0 auto;
}

.pull-reveal.high-rarity .reveal-card-actions .mini-button {
  height: 30px;
  border-color: rgba(143, 222, 255, 0.7);
  background: rgba(20, 34, 58, 0.92);
  color: #f4fbff;
  font-size: 11px;
}

/* Placed icons keep their transparent silhouette and respect the item footprint. */
.placed-item::after {
  display: none;
}

.placed-item .item-icon {
  box-sizing: border-box;
  width: min(28px, 74%);
  height: min(28px, 74%);
  max-width: calc(100% - 6px);
  max-height: calc(100% - 6px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: none;
  filter:
    saturate(1.08)
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.62));
}

.placed-item[data-item-width="2"][data-item-height="1"] .item-icon {
  width: min(43px, 68%);
  height: min(28px, 76%);
}

.placed-item[data-item-width="1"][data-item-height="2"] .item-icon {
  width: min(28px, 76%);
  height: min(43px, 68%);
}

.placed-item[data-item-width="2"][data-item-height="2"] .item-icon {
  width: min(47px, 66%);
  height: min(47px, 66%);
}

.placed-item.item-art-badge .item-icon,
.placed-item[data-item-width="2"][data-item-height="1"].item-art-badge .item-icon {
  width: 29px;
  height: 25px;
  max-width: 42%;
  max-height: 70%;
  transform: none;
}

.placed-item.item-art-bow .item-icon {
  width: min(48px, 72%);
  height: min(27px, 70%);
  transform: rotate(-8deg);
}

/* Tutorial placement is calculated from the current target rectangle in JS. */
.tutorial-panel[class*="tutorial-step-"],
.tutorial-panel[class*="tutorial-"] {
  bottom: auto;
  transform: none;
}

/* Store uses a brighter raster UI kit so products remain readable over the abyss lobby. */
.menu-store-panel.active {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
}

.store-panel-title {
  display: grid;
  gap: 1px;
}

.store-panel-title span {
  color: #85e8f2;
  font-size: 8px;
  font-weight: 900;
}

.store-panel-title strong {
  color: #fff2be;
  font-size: 19px;
  text-shadow: 0 2px 0 rgba(38, 20, 6, 0.72);
}

.store-inventory {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.store-inventory > div {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 4px;
  padding: 8px 9px;
  background: url("assets/generated/store_refresh_1788069000000/store-stat-card.png") center / 100% 100% no-repeat;
}

.store-inventory img {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 2px 3px rgba(28, 42, 59, 0.42));
}

.store-inventory span {
  min-width: 0;
  color: #24364b;
  font-size: 7.5px;
  font-weight: 900;
  white-space: nowrap;
}

.store-inventory strong {
  color: #17253b;
  font-size: 12px;
  font-weight: 1000;
}

.store-product-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.store-product-card {
  position: relative;
  min-height: 116px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 7px;
  padding: 13px 15px;
  background: url("assets/generated/store_refresh_1788069000000/store-product-card.png") center / 100% 100% no-repeat;
}

.store-product-card[data-store-tone="best"] {
  filter: drop-shadow(0 0 7px rgba(255, 203, 84, 0.42));
}
.store-product-card[data-store-tone="summon"],
.store-product-card[data-store-tone="summon-best"] { border-color: rgba(196, 118, 255, .5); background-color: #261945; box-shadow: inset 0 0 18px rgba(157, 83, 229, .15), 0 7px 13px rgba(0, 0, 0, .35); }
.store-product-card[data-store-tone="summon-best"] { border-color: rgba(255, 207, 100, .72); box-shadow: inset 0 0 20px rgba(232, 91, 198, .19), 0 0 14px rgba(255, 195, 88, .15); }
.store-product-card[data-store-tone="summon"] .store-product-badge,
.store-product-card[data-store-tone="summon-best"] .store-product-badge { background: #6e3fa0; color: #fff1b8; }

.store-product-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 3px 3px rgba(25, 36, 54, 0.42));
}

.store-product-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.store-product-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.store-product-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.store-product-badge {
  flex: 0 0 auto;
  color: #147989;
  font-size: 8px;
  font-weight: 1000;
}

.store-product-card[data-store-tone="starter"] .store-product-badge,
.store-product-card[data-store-tone="best"] .store-product-badge {
  color: #9a5c00;
}

.store-product-card[data-store-tone="revive"] .store-product-badge {
  color: #7b3d8e;
}

.store-product-title strong {
  min-width: 0;
  color: #16263d;
  font-size: 13px;
  font-weight: 1000;
}

.store-product-title small {
  color: #52677d;
  font-size: 9px;
  font-weight: 800;
}

.store-product-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
}

.store-product-contents span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #24384e;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.store-product-contents img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.store-buy-button,
.store-restore-button {
  min-width: 0;
  border: 0;
  color: #fff0b7;
  font: inherit;
  font-weight: 1000;
}

.store-buy-button {
  min-height: 42px;
  padding: 4px;
  font-size: 10px;
  background: none;
  text-shadow: 0 2px 0 rgba(8, 18, 34, 0.78);
}

.store-footer {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  background: url("assets/generated/store_refresh_1788069000000/store-stat-card.png") center / 100% 100% no-repeat;
}

.store-footer p {
  margin: 0;
  color: #2b3f55;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.35;
}

.store-footer p[data-state="error"] {
  color: #a92f2f;
}

.store-footer p[data-state="pending"] {
  color: #8d6200;
}

.store-restore-button {
  min-height: 30px;
  color: #172940;
  font-size: 9px;
  background: none;
  text-shadow: none;
}

/* Store refresh: darker raster plates matched to the abyss lobby. */
.menu-lobby-panel .lobby-first-offer {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: -2px 0 1px;
  padding: 9px 18px 9px 60px;
  border: 0;
  color: #fff1c7;
  background: url("assets/generated/store_refresh_1788079000000/lobby-first-offer.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.34));
}

.menu-lobby-panel .lobby-first-offer span {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.menu-lobby-panel .lobby-first-offer small {
  color: #80f2ff;
  font-size: 8px;
  font-weight: 1000;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.85);
}

.menu-lobby-panel .lobby-first-offer strong {
  color: #fff5cb;
  font-size: 12px;
  font-weight: 1000;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.86);
}

.menu-lobby-panel .lobby-first-offer b {
  color: #ffd66c;
  font-size: 11px;
  font-weight: 1000;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.86);
  white-space: nowrap;
}

.menu-store-panel.active {
  background:
    linear-gradient(180deg, rgba(19, 17, 39, 0.5), rgba(10, 13, 30, 0.82)),
    url("assets/generated/lobby_refresh_1787640000000/lobby-abyss-gate.webp") center / cover no-repeat;
  border-radius: 8px;
}

.store-panel-title span {
  color: #82f1ff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82);
}

.store-panel-title strong {
  color: #fff1be;
}

.store-inventory > div {
  min-height: 50px;
  background-image: url("assets/generated/store_refresh_1788079000000/store-stat-card.png");
}

.store-inventory span {
  color: #c6e4f3;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.74);
}

.store-inventory strong {
  color: #fff1bd;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.78);
}

.store-product-card {
  min-height: 118px;
  grid-template-columns: 54px minmax(0, 1fr) 76px;
  padding: 14px 18px;
  background-image: url("assets/generated/store_refresh_1788079000000/store-product-card.png");
}

.store-product-title strong {
  color: #f8f0d2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.84);
}

.store-product-title small {
  color: #a9c7db;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.78);
}

.store-product-badge {
  color: #85f3ff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.82);
}

.store-product-card[data-store-tone="starter"] .store-product-badge,
.store-product-card[data-store-tone="best"] .store-product-badge {
  color: #ffd66a;
}

.store-product-card[data-store-tone="revive"] .store-product-badge {
  color: #dfa7ff;
}

.store-product-contents span {
  color: #ddedf5;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.76);
}

.store-buy-button {
  color: #ffda77;
  font-size: 11px;
}

.store-footer {
  background-image: url("assets/generated/store_refresh_1788079000000/store-stat-card.png");
}

.store-footer p {
  color: #d7e9f2;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.74);
}

.store-footer p[data-state="error"] {
  color: #ffaaa0;
}

.store-footer p[data-state="pending"] {
  color: #ffe08b;
}

.store-restore-button {
  color: #fff0bd;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82);
}

/* Store/lobby refresh 1788088000000: brighter game-raster plates. */
.main-menu[data-panel="lobby"][data-lobby-phase="deep"] .menu-scene,
.main-menu[data-panel="lobby"][data-lobby-phase="final"] .menu-scene {
  background:
    linear-gradient(180deg, rgba(255, 221, 156, 0.12) 0%, rgba(41, 26, 88, 0.08) 35%, rgba(6, 7, 21, 0.7) 100%),
    url("assets/generated/store_lobby_refresh_1788088000000/lobby-post30-bright.png") center / cover no-repeat,
    #1b1745;
}

.main-menu[data-lobby-phase="deep"] .lobby-command-art,
.main-menu[data-lobby-phase="final"] .lobby-command-art {
  opacity: 1;
  filter: saturate(1.06) contrast(1.02) brightness(1.02);
}

.main-menu[data-lobby-phase="deep"] .lobby-command::after,
.main-menu[data-lobby-phase="final"] .lobby-command::after {
  background:
    linear-gradient(180deg, rgba(22, 12, 47, 0.38) 0%, rgba(22, 12, 47, 0.06) 28%, rgba(8, 8, 22, 0.08) 56%, rgba(7, 7, 20, 0.78) 88%, rgba(5, 4, 12, 0.94) 100%);
}

.menu-lobby-panel .lobby-status-grid {
  top: max(62px, calc(env(safe-area-inset-top) + 57px));
  left: 8px;
  right: 8px;
  gap: 4px;
}

.menu-lobby-panel .lobby-status-grid div {
  min-height: 50px;
  grid-template-columns: 31px minmax(0, 1fr);
  padding: 7px 8px 7px 9px;
  background: url("assets/generated/store_lobby_refresh_1788088000000/stat-chip.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.38));
}

.menu-lobby-panel .lobby-status-grid img {
  width: 30px;
  height: 30px;
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 5px rgba(92, 219, 255, 0.42));
}

.menu-lobby-panel .lobby-status-grid span {
  color: #c9ecff;
  font-size: 8px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.78);
}

.menu-lobby-panel .lobby-status-grid strong {
  color: #fff0a8;
  font-size: 13px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82);
}

.menu-lobby-panel .lobby-mark-board {
  bottom: 139px;
  min-height: 104px;
  padding: 15px 22px 12px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-mark-board.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 9px 13px rgba(0, 0, 0, 0.44));
}

.menu-lobby-panel .lobby-mark-head {
  min-height: 19px;
  padding: 0 5px;
}

.menu-lobby-panel .lobby-mark-head span {
  color: #fff0b5;
  font-size: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82);
}

.menu-lobby-panel .lobby-mark-head strong {
  color: #9df1ff;
  font-size: 11px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82);
}

.menu-lobby-panel .lobby-mark-slots {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0 4px;
}

.menu-lobby-panel .lobby-mark-slot {
  min-height: 55px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.menu-lobby-panel .lobby-mark-slot img {
  width: 36px;
  height: 36px;
  filter:
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 6px rgba(107, 226, 255, 0.34));
}

.menu-lobby-panel .lobby-mark-slot.locked img {
  opacity: 0.35;
  filter: grayscale(0.95) brightness(0.62) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72));
}

.menu-lobby-panel .lobby-mark-slot strong {
  color: #f5e4bc;
  font-size: 7px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.82);
}

.menu-store-panel.active {
  background:
    linear-gradient(180deg, rgba(15, 10, 30, 0.18), rgba(9, 8, 19, 0.48)),
    url("assets/generated/store_lobby_refresh_1788088000000/store-bg.png") center / cover no-repeat;
  border-radius: 0;
  padding: 14px 12px 12px;
}

.store-panel-title {
  min-height: 58px;
  align-content: center;
  padding: 8px 18px 9px 62px;
  background: url("assets/generated/store_lobby_refresh_1788088000000/stat-chip.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.38));
}

.store-panel-title span {
  color: #9ef2ff;
}

.store-panel-title strong {
  font-size: 18px;
  color: #fff1b2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.84);
}

.store-inventory > div {
  min-height: 52px;
  background-image: url("assets/generated/store_lobby_refresh_1788088000000/stat-chip.png");
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.32));
}

.store-product-list {
  gap: 8px;
  padding: 1px 1px 1px 0;
}

.store-product-card {
  background-image: url("assets/generated/store_refresh_1788079000000/store-product-card.png");
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.34));
}

.store-footer {
  background-image: url("assets/generated/store_lobby_refresh_1788088000000/stat-chip.png");
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.32));
}

@media (max-height: 700px) {
  .menu-lobby-panel .lobby-status-grid {
    top: 57px;
  }

  .menu-lobby-panel .lobby-mark-board {
    bottom: 135px;
    min-height: 94px;
    padding: 13px 20px 10px;
  }

  .menu-lobby-panel .lobby-mark-slot {
    min-height: 48px;
  }
}

/* Run preparation separates consumable inventory from abyss-shard upgrades. */
.run-prep-card {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-shell.png");
}

.run-prep-sections {
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 7px;
}

.run-prep-section {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 7px 9px;
  background: url("assets/generated/ui/popup-list.png") center / 100% 100% no-repeat;
}

.run-prep-section-head {
  min-width: 0;
  min-height: 21px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
}

.run-prep-section-head img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.run-prep-section-head strong {
  color: #fff0bd;
  font-size: 10px;
  font-weight: 1000;
}

.run-prep-section-head span {
  color: #b8c9dc;
  font-size: 8px;
  font-weight: 900;
}

.run-prep-section .run-prep-option {
  min-height: 63px;
  padding: 8px 18px;
  grid-template-columns: 34px minmax(0, 1fr) 31px;
}

.run-prep-section .run-prep-option > img {
  width: 32px;
  height: 32px;
}

.run-prep-options.shard-options {
  gap: 4px;
}

.run-prep-shard-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.run-prep-shard-ledger > div {
  min-width: 0;
  min-height: 35px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  background: url("assets/generated/ui/popup-stat.png") center / 100% 100% no-repeat;
}

.run-prep-shard-ledger span {
  color: #aebed2;
  font-size: 7px;
  font-weight: 900;
}

.run-prep-shard-ledger strong {
  color: #f0e8ff;
  font-size: 9px;
  font-weight: 1000;
}

.run-prep-shard-ledger b {
  color: #d6bfff;
  font-size: 12px;
}

.run-prep-shard-ledger.insufficient > div:nth-child(3) strong,
.run-prep-shard-ledger.insufficient > div:nth-child(3) b {
  color: #ff9e91;
}

.run-prep-actions {
  padding: 0 14px;
}

.run-prep-actions .mini-button,
.run-prep-actions .mini-button.accent {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  filter: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.86);
}

.run-prep-actions .mini-button {
  color: #aebdce;
}

.run-prep-actions .mini-button.accent {
  color: #ffe19a;
  font-size: 13px;
}

.run-prep-actions .mini-button:disabled {
  color: #687585;
  opacity: 0.58;
}

@media (max-width: 390px), (max-height: 700px) {
  .store-product-card {
    min-height: 108px;
    grid-template-columns: 44px minmax(0, 1fr) 66px;
    padding: 10px 12px;
  }

  .store-product-icon {
    width: 42px;
    height: 42px;
  }

  .run-prep-section {
    padding: 5px 7px;
  }

  .run-prep-section .run-prep-option {
    min-height: 57px;
  }
}

/* Lobby and run-preparation raster refresh 1788097000000. */
.main-menu[data-panel="lobby"] .menu-scene {
  height: 100dvh;
  min-height: 100dvh;
  max-height: none;
}

.menu-lobby-panel .lobby-command-art {
  object-position: 50% 0;
}

.menu-lobby-panel .lobby-status-grid {
  top: max(61px, calc(env(safe-area-inset-top) + 56px));
  left: 7px;
  right: 7px;
  gap: 3px;
}

.menu-lobby-panel .lobby-status-grid div {
  min-height: 50px;
  grid-template-columns: 39px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 1px;
  padding: 6px 8px 6px 4px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-status-chip.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.42));
}

.menu-lobby-panel .lobby-status-grid img {
  grid-row: 1 / 3;
  width: 27px;
  height: 27px;
  justify-self: center;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 5px rgba(91, 222, 255, 0.48));
}

.menu-lobby-panel .lobby-status-grid span {
  align-self: end;
  color: #c9ebff;
  font-size: 8px;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.86);
}

.menu-lobby-panel .lobby-status-grid strong {
  align-self: start;
  color: #fff0a8;
  font-size: 12px;
  line-height: 1.05;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.88);
}

.lobby-settings-button {
  top: max(7px, env(safe-area-inset-top));
  right: 7px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
}

.lobby-settings-button img {
  width: 48px;
  height: 48px;
  filter: none;
}

.run-prep-card {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.run-prep-sections {
  gap: 6px;
}

.run-prep-section {
  gap: 5px;
  padding: 10px 13px;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.38));
}

.run-prep-section.inventory-section {
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png");
}

.run-prep-section.shard-section {
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-shard-frame.png");
}

.run-prep-section-head {
  min-height: 23px;
  padding: 0 5px;
}

.run-prep-section-head strong {
  color: #fff1b8;
  font-size: 10px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.86);
}

.run-prep-section-head span {
  color: #9edff6;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.82);
}

.run-prep-shard-ledger {
  min-height: 39px;
  gap: 0;
  padding: 4px 11px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.34));
}

.run-prep-shard-ledger > div {
  min-height: 31px;
  background: none;
}

.run-prep-shard-ledger span {
  color: #b9d4e8;
  font-size: 8px;
}

.run-prep-shard-ledger strong {
  color: #f6f0ff;
  font-size: 9px;
}

.run-prep-shard-ledger b {
  color: #d9c1ff;
  font-size: 13px;
}

.run-prep-card > p {
  min-height: 42px;
  display: grid;
  place-items: center;
  margin: 0 10px;
  padding: 6px 22px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-hint.png") center / 100% 100% no-repeat;
  color: #dff4ff;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.34));
}

.run-prep-actions {
  gap: 8px;
  padding: 0 7px;
}

.run-prep-actions .mini-button,
.run-prep-actions .mini-button.accent {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.4));
  font-weight: 1000;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.run-prep-actions .mini-button {
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png");
  color: #d9e8f5;
}

.run-prep-actions .mini-button.accent {
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png");
  color: #fff3bd;
  font-size: 13px;
}

.run-prep-actions .mini-button:disabled {
  color: #748295;
  opacity: 0.55;
  filter: grayscale(0.55) brightness(0.65);
}

@media (max-width: 390px), (max-height: 700px) {
  .run-prep-card {
    padding: 43px 34px 34px;
  }

  .run-prep-section {
    padding: 7px 10px;
  }

  .run-prep-section .run-prep-option {
    min-height: 55px;
  }

  .run-prep-card > p {
    min-height: 38px;
    padding: 5px 18px;
  }

  .run-prep-actions .mini-button,
  .run-prep-actions .mini-button.accent {
    min-height: 40px;
  }
}

/* Final mobile control sizing and raster-style unification 1788117000000. */
.run-prep-shard-ledger {
  min-height: 50px;
  padding: 5px 12px;
}

.run-prep-shard-ledger > div {
  min-height: 40px;
}

.run-prep-shard-ledger span {
  font-size: 10px;
  line-height: 1;
}

.run-prep-shard-ledger strong {
  font-size: 11px;
  line-height: 1;
}

.run-prep-shard-ledger b {
  font-size: 15px;
  line-height: 1;
}

.top-menu-button {
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-settings-button.png") center / 100% 100% no-repeat;
  color: transparent;
  font-size: 0;
  box-shadow: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.46));
}

.chance-button,
.mini-button,
.skill-button,
.skip-button,
.tutorial-actions button,
.menu-small-button,
.menu-back-button,
.ranking-scope-button {
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #dceeff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.34));
}

.chance-button.premium,
.mini-button.accent,
.skill-button.ready,
.ranking-scope-button.active,
.tutorial-actions button:first-child,
.primary-button {
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #fff1b6;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
}

.chance-button {
  min-height: 38px;
  padding: 5px 7px;
  text-align: center;
}

.chance-button span {
  color: #eef8ff;
  font-size: 9.5px;
}

.chance-button small {
  color: #9fc9e5;
  font-size: 7.5px;
}

.primary-button {
  width: 104px;
  height: 34px;
  padding: 0 14px;
}

.primary-button.needs-item {
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png");
  color: #dceeff;
}

.skill-button {
  width: 92px;
  min-height: 26px;
  padding: 0 8px;
  font-size: 9px;
}

.skip-button {
  width: 58px;
  height: 26px;
  padding: 0 7px;
  font-size: 9px;
}

.wave-preview {
  min-height: 34px;
  padding: 6px 16px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.36));
}

.wave-preview span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #a9dcf2;
}

.tabs {
  padding: 7px 8px;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-hint.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.34));
}

.tab-button,
.tab-button.active {
  height: 36px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
  color: #b8d9ec;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92);
  filter: none;
}

.tab-button.active {
  color: #fff0ac;
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png");
}

.mini-button {
  min-width: 62px;
  min-height: 31px;
  padding: 0 11px;
}

.menu-back-button,
.menu-small-button,
.menu-small-button.ghost {
  min-width: 64px;
  min-height: 34px;
  padding: 0 13px;
}

#menuSettingsPanel {
  gap: 10px;
}

#menuSettingsPanel .menu-panel-head {
  min-height: 42px;
  padding: 4px 10px 4px 14px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-hint.png") center / 100% 100% no-repeat;
}

#menuSettingsPanel .menu-panel-head > strong {
  color: #fff0b6;
  font-size: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.menu-account-box {
  min-height: 86px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 6px 9px;
  padding: 13px 16px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.34));
}

.menu-account-box span {
  color: #9edff6;
  font-size: 10px;
  text-align: center;
}

.menu-account-box strong {
  color: #fff2c2;
  font-size: 11px;
}

.menu-cloud-box {
  min-height: 86px;
  gap: 10px;
  padding: 13px 16px 11px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.34));
}

.menu-cloud-box span {
  color: #c9e5f5;
  font-size: 10px;
  text-align: center;
}

.menu-cloud-box div {
  gap: 8px;
}

.primary-button:disabled,
.skill-button:disabled,
.skip-button:disabled,
.chance-button:disabled,
.mini-button:disabled,
.menu-button:disabled,
.menu-back-button:disabled,
.menu-small-button:disabled {
  opacity: 0.52;
  filter: grayscale(0.5) brightness(0.7);
}

@media (max-width: 390px), (max-height: 700px) {
  .run-prep-shard-ledger {
    min-height: 48px;
  }

  .run-prep-shard-ledger > div {
    min-height: 38px;
  }
}

/* Final precedence for mobile completion pass 1788131000000. */
#storyBackButton,
#storySkipButton,
#storyNextButton {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #e4f3ff;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

#storyNextButton {
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png");
  color: #fff1b6;
  font-size: 12px;
}

#menuSettingsPanel.menu-panel.active {
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

#menuSettingsPanel .menu-panel-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 44px;
  padding: 4px 8px;
}

#menuSettingsPanel .menu-panel-head > strong {
  grid-column: 2;
  text-align: center;
}

#menuSettingsPanel .menu-panel-head > .menu-back-button {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

#menuSettingsPanel .menu-panel-head::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  width: 40px;
  height: 44px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-settings-button.png") center / contain no-repeat;
}

#adPullButton,
#adHealButton {
  grid-column: span 2;
  min-height: 36px;
}

#boardSummary {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-close-button {
  position: relative;
  color: #fff;
}

.icon-close-button::after {
  content: "X";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
}

.wave-preview {
  width: min(100%, 292px);
  min-height: 40px;
  margin-inline: auto;
  padding-inline: 22px;
}

/* Direct mobile visual correction 1788139000000. */
.menu-lobby-panel .lobby-status-grid div {
  position: relative;
  min-height: 52px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 20px 20px;
  align-items: center;
  column-gap: 3px;
  padding: 6px 9px 6px 10px;
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-status-chip.png");
}

.menu-lobby-panel .lobby-status-grid img {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
}

.menu-lobby-panel .lobby-status-grid span {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: 0 4px 2px;
  font-size: 8px;
  line-height: 1;
}

.menu-lobby-panel .lobby-status-grid strong {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding: 2px 4px 0;
  font-size: 12px;
  line-height: 1;
}

.menu-store-panel.active {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 7px;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.menu-store-panel .menu-panel-head {
  min-height: 48px;
  padding: 5px 9px 5px 16px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-hint.png") center / 100% 100% no-repeat;
}

.store-panel-title {
  min-height: 0;
  display: block;
  padding: 0;
  background: none;
  filter: none;
}

.store-panel-title strong {
  display: block;
  font-size: 17px;
  line-height: 1;
}

.store-inventory {
  gap: 4px;
}

.store-inventory > div {
  min-height: 50px;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 18px 18px;
  column-gap: 2px;
  padding: 7px 8px 7px 9px;
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-status-chip.png");
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.34));
}

.store-inventory img {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 27px;
  height: 27px;
}

.store-inventory span {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding-bottom: 2px;
  color: #c9ecff;
  font-size: 7px;
  line-height: 1;
}

.store-inventory strong {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding-top: 2px;
  color: #fff0a8;
  font-size: 11px;
  line-height: 1;
}

.store-product-list {
  gap: 6px;
  padding: 0 2px 0 0;
}

.store-product-card {
  min-height: 104px;
  grid-template-columns: 48px minmax(0, 1fr) 66px;
  gap: 7px;
  padding: 13px 18px;
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png");
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.34));
}

.store-product-icon {
  width: 42px;
  height: 42px;
}

.store-product-title strong {
  font-size: 11px;
}

.store-product-title small,
.store-product-contents span {
  font-size: 8px;
}

.store-product-contents {
  gap: 1px 5px;
}

.store-buy-button {
  min-height: 36px;
  font-size: 10px;
  white-space: nowrap;
}

.store-footer {
  display: none !important;
}

.chance-strip,
.panel .chance-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 2px;
}

#adPullButton,
#adHealButton,
.chance-strip .chance-button {
  grid-column: auto;
  min-height: 33px;
  padding: 3px 4px;
}

.chance-button span {
  font-size: 8.5px;
}

.chance-button small {
  font-size: 7px;
}

.button-row.end-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding-inline: 0;
}

.end-actions .mini-button,
.end-actions #endShardBonusButton,
.end-actions #endRestartButton,
.end-actions #endStoneReviveButton {
  grid-column: auto;
  min-width: 0;
  min-height: 34px;
  padding: 3px 4px;
  font-size: 8px;
  line-height: 1.08;
}

.end-actions #endStoneReviveButton::before {
  display: none;
}

.bag-effect-summary {
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.34));
}

.effect-summary-head {
  margin-bottom: 6px;
  padding-inline: 2px;
}

.effect-summary-list {
  grid-template-columns: repeat(auto-fill, 29px);
  gap: 4px;
}

.effect-summary-chip {
  width: 29px;
  height: 29px;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png") center / 100% 100% no-repeat;
}

.effect-summary-chip.complete {
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png");
}

.effect-summary-chip img {
  width: 19px;
  height: 19px;
}

.placed-item {
  position: relative;
}

.placed-item .item-icon,
.placed-item.item-art-badge .item-icon,
.placed-item.item-art-bow .item-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(30px, calc(100% - 8px));
  height: min(30px, calc(100% - 8px));
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
  margin: 0;
  padding: 1px;
  transform: translate(-50%, -50%);
  object-position: center;
}

.placed-item[data-item-width="2"][data-item-height="1"] .item-icon {
  width: min(44px, calc(100% - 10px));
  height: min(28px, calc(100% - 6px));
}

.placed-item[data-item-width="1"][data-item-height="2"] .item-icon {
  width: min(28px, calc(100% - 6px));
  height: min(44px, calc(100% - 10px));
}

.placed-item[data-item-width="2"][data-item-height="2"] .item-icon {
  width: min(48px, calc(100% - 12px));
  height: min(48px, calc(100% - 12px));
}

/* Precision pass for close controls, store fit, and run-prep footer 1788143000000. */
.icon-close-button {
  width: 34px;
  min-width: 34px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-settings-button.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.38));
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.icon-close-button::after {
  content: "";
  position: absolute;
  inset: 9px;
  display: block;
  background: url("assets/vendor/skymon_icons_free/skymon-icons-white/close-x.png") center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  pointer-events: none;
}

.store-product-list {
  grid-auto-rows: 100px;
  gap: 5px;
  padding-right: 0;
  overflow-y: auto;
  scrollbar-gutter: auto;
}

.store-product-card {
  min-height: 0;
  height: 100px;
  padding-block: 11px;
}

@media (min-height: 760px) {
  .store-product-list {
    overflow-y: hidden;
  }
}

.run-prep-card > p,
#runPrepHint {
  min-height: 24px;
  margin: 0 18px;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #cfe9f6;
  font-size: 9px;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.88);
}

.run-prep-actions {
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.run-prep-actions .mini-button,
.run-prep-actions .mini-button.accent {
  min-height: 40px;
  background-size: 100% 100%;
}

/* Visual alignment pass 1788148000000. */
.icon-close-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #71849a;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(57, 76, 96, 0.96), rgba(15, 25, 38, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(10, 17, 27, 0.9),
    inset 0 1px 0 rgba(219, 236, 248, 0.18),
    0 3px 5px rgba(0, 0, 0, 0.42);
  filter: none;
}

.icon-close-button::before,
.icon-close-button::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 15px;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: #d7e3eb;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.icon-close-button::before {
  transform: rotate(45deg);
}

.icon-close-button::after {
  inset: auto;
  left: 9px;
  top: 15px;
  display: block;
  transform: rotate(-45deg);
  filter: none;
}

.store-inventory {
  gap: 5px;
}

.store-inventory > div {
  min-height: 42px;
  height: 42px;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: 15px 15px;
  column-gap: 4px;
  padding: 6px 9px 6px 8px;
  background-image: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-status-chip.png");
  background-size: 100% 100%;
}

.store-inventory img {
  width: 24px;
  height: 24px;
  justify-self: center;
}

.store-inventory span {
  align-self: end;
  padding: 0 0 1px;
  font-size: 7px;
}

.store-inventory strong {
  align-self: start;
  padding: 1px 0 0;
  font-size: 10px;
}

.store-product-list {
  grid-auto-rows: 92px;
  gap: 5px;
}

.store-product-card {
  height: 92px;
  grid-template-columns: 44px minmax(0, 1fr) 62px;
  gap: 6px;
  padding: 10px 17px;
  background-image: url("assets/generated/store_refresh_1788079000000/store-product-card.png");
  background-size: 100% 100%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
}

.store-product-icon {
  width: 38px;
  height: 38px;
  justify-self: center;
}

.store-product-copy {
  align-self: center;
  gap: 2px;
}

.store-product-title {
  gap: 1px;
}

.store-product-heading {
  gap: 4px;
}

.store-product-title strong {
  font-size: 10px;
}

.store-product-title small,
.store-product-contents span {
  font-size: 7px;
}

.store-buy-button {
  min-height: 32px;
  padding-inline: 3px;
  font-size: 9px;
}

.run-prep-sections {
  padding-inline: 1px;
}

.run-prep-section {
  filter: none;
}

.run-prep-section-head {
  padding-inline: 7px;
}

.run-prep-actions {
  padding-inline: 13px;
}

/* Responsive abyss combat skin 1788154000000. */
.phone-shell {
  --screen-gutter: clamp(8px, 3.25vw, 14px);
  --combat-stage-height: clamp(152px, 20dvh, 184px);
}

.topbar,
.status-strip,
.combat-panel,
.tabs,
.panel,
.log-panel {
  margin-inline: var(--screen-gutter);
}

.combat-panel {
  min-height: 0;
  padding: 12px 13px 10px;
  border: 12px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(9, 19, 31, 0.86), rgba(3, 9, 17, 0.96)) padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png")
    28 38 fill / 16px 20px / 0 stretch;
  box-shadow: none;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.38));
}

.fight-stage {
  width: 100%;
  height: var(--combat-stage-height);
  border: 10px solid transparent;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 76%, rgba(106, 214, 255, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(5, 9, 18, 0.08), rgba(4, 7, 13, 0.58)),
    url("assets/generated/main-menu-abyss.png") center 43% / cover no-repeat,
    #08101a;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-shard-frame.png")
    26 38 fill / 14px 18px / 0 stretch;
  box-shadow: inset 0 -22px 30px rgba(0, 0, 0, 0.42);
}

.fight-stage::before {
  background:
    linear-gradient(180deg, rgba(119, 210, 255, 0.06), transparent 34%, rgba(1, 4, 9, 0.28));
  opacity: 1;
}

.fight-stage::after {
  bottom: 27px;
}

.fighter {
  bottom: 21px;
  width: clamp(98px, 28vw, 116px);
  height: clamp(98px, 28vw, 116px);
}

.player-fighter {
  left: clamp(12px, 5vw, 24px);
}

.enemy-fighter {
  right: clamp(12px, 5vw, 25px);
}

.primary-button {
  top: 7px;
  width: clamp(94px, 28vw, 116px);
  height: 32px;
  border: 0;
  border-radius: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png")
    center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.44));
}

.stage-controls {
  bottom: 27px;
}

.skill-button,
.skip-button {
  border: 0;
  border-radius: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png")
    center / 100% 100% no-repeat;
  box-shadow: none;
}

.skill-button.ready {
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png")
    center / 100% 100% no-repeat;
  color: #fff0ad;
}

.combat-stats-mini {
  width: 100%;
  gap: 3px;
  margin-top: 4px;
}

.combat-stats-mini span {
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 4px;
  border: 7px solid transparent;
  border-radius: 0;
  background: rgba(4, 12, 22, 0.94) padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png")
    18 30 fill / 8px 10px / 0 stretch;
}

.wave-preview {
  width: 100%;
  margin-top: 1px;
}

.panel,
.reward-modal-card,
.end-card,
.item-info-card,
.enemy-info-card,
.pull-reveal-card,
.fusion-card,
.board-passive-choice-card {
  border: 12px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(8, 20, 34, 0.94), rgba(3, 10, 20, 0.98)) padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png")
    28 38 fill / 15px 18px / 0 stretch;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.4));
}

.panel {
  padding: 9px;
}

.panel-head {
  min-height: 38px;
  padding: 3px 5px 5px;
  border-bottom: 1px solid rgba(99, 186, 235, 0.24);
}

.tabs {
  margin-bottom: 5px;
}

@media (max-width: 374px) {
  .phone-shell {
    --screen-gutter: 7px;
    --combat-stage-height: clamp(146px, 19dvh, 164px);
  }

  .combat-panel {
    padding: 9px 9px 7px;
    border-width: 10px;
  }

  .fighter {
    width: 96px;
    height: 96px;
  }

  .player-fighter {
    left: 9px;
  }

  .player-damage-float {
    left: 57px;
    top: calc(100% - 21px - 96px + 4px);
  }

  .enemy-fighter {
    right: 9px;
  }

  .stage-hud {
    width: 102px;
  }

  .enemy-stage-hud {
    width: 112px;
  }
}

@media (min-width: 400px) and (min-height: 860px) {
  .phone-shell {
    --combat-stage-height: 184px;
  }

  .combat-panel {
    padding-inline: 15px;
  }

  .fighter {
    bottom: 23px;
  }

  .player-damage-float {
    top: calc(100% - 23px - clamp(98px, 28vw, 116px) + 4px);
  }
}

@media (max-height: 760px) {
  .phone-shell {
    --combat-stage-height: 148px;
  }

  .combat-panel {
    min-height: 0;
    padding-block: 8px 6px;
  }

  .combat-stats-mini span {
    min-height: 23px;
    padding-block: 3px;
  }

  .wave-preview {
    min-height: 30px;
  }
}

/* Readability, frame alignment, and compact combat flow 1788162000000. */
.menu-lobby-panel .lobby-status-grid div {
  min-height: 0;
  height: auto;
  aspect-ratio: 8 / 3;
  grid-template-columns: 43px minmax(0, 1fr);
  grid-template-rows: 17px 17px;
  column-gap: 2px;
  padding: 6px 7px 6px 5px;
  background-size: 100% 100%;
}

.menu-lobby-panel .lobby-status-grid img {
  width: 27px;
  height: 27px;
  justify-self: center;
}

.menu-lobby-panel .lobby-status-grid span {
  align-self: end;
  padding: 0 2px 1px;
  font-size: 8.5px;
}

.menu-lobby-panel .lobby-status-grid strong {
  align-self: start;
  padding: 1px 2px 0;
  font-size: 12px;
}

.store-inventory > div {
  min-height: 0;
  height: auto;
  aspect-ratio: 8 / 3;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: 13px 13px;
  column-gap: 2px;
  padding: 5px 5px 5px 3px;
  background-size: 100% 100%;
}

.store-inventory img {
  width: 22px;
  height: 22px;
  justify-self: center;
}

.store-inventory span {
  align-self: end;
  padding: 0 0 1px;
  font-size: 8px;
}

.store-inventory strong {
  align-self: start;
  padding: 1px 0 0;
  font-size: 11px;
}

.store-product-list {
  grid-auto-rows: 96px;
  gap: 4px;
}

.store-product-card {
  height: 96px;
  grid-template-columns: 43px minmax(0, 1fr) 66px;
  gap: 7px;
  padding: 10px 17px;
  cursor: pointer;
  outline: none;
}

.store-product-card:focus-visible {
  filter:
    drop-shadow(0 0 4px rgba(126, 227, 255, 0.9))
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.34));
}

.store-product-card:active {
  transform: translateY(1px);
  filter: brightness(1.08) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.34));
}

.store-product-icon {
  width: 40px;
  height: 40px;
}

.store-product-copy {
  gap: 3px;
}

.store-product-title {
  gap: 2px;
}

.store-product-badge {
  font-size: 8px;
}

.store-product-title strong {
  font-size: 12px;
  line-height: 1.15;
}

.store-product-title small {
  color: #c5d9e8;
  font-size: 9px;
  line-height: 1.15;
}

.store-product-contents {
  gap: 2px 6px;
}

.store-product-contents span {
  font-size: 8.5px;
  line-height: 1.15;
}

.store-product-contents img {
  width: 13px;
  height: 13px;
}

.store-buy-button {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding-inline: 4px;
  color: #ffe27c;
  font-size: 10px;
  pointer-events: none;
}

.stage-controls {
  top: 39px;
  bottom: auto;
  gap: 4px;
}

.stage-controls .skill-button {
  width: 64px;
  min-height: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 7.5px;
  line-height: 1;
}

.stage-controls .skip-button {
  width: 38px;
  min-height: 18px;
  height: 18px;
  padding: 0 3px;
  font-size: 7.5px;
}

.combat-stats-mini {
  min-height: 30px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 2px;
  padding: 5px 13px;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png")
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.34));
}

.combat-stats-mini span {
  min-height: 20px;
  padding: 2px 5px;
  border: 0;
  border-image: none;
  background: none;
  color: #b9d8e9;
  font-size: 9px;
}

.combat-stats-mini span + span {
  border-left: 1px solid rgba(113, 184, 225, 0.22);
}

.combat-stats-mini strong {
  color: #fff0af;
  font-size: 10px;
}

.tabs {
  position: relative;
  z-index: 4;
  margin-bottom: -14px;
  padding-bottom: 15px;
}

.panel.active {
  padding-top: 15px;
}

.icon-close-button {
  width: 35px;
  min-width: 35px;
  height: 35px;
  border: 1px solid rgba(213, 180, 103, 0.72);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(5, 15, 28, 0.18)),
    var(--ui-button-square-blue) center / 100% 100% no-repeat,
    #162b43;
  box-shadow:
    inset 0 0 0 1px rgba(8, 18, 31, 0.72),
    0 3px 5px rgba(0, 0, 0, 0.4);
  filter: none;
}

.icon-close-button::before,
.icon-close-button::after {
  left: 9px;
  top: 16px;
  width: 17px;
  height: 2px;
  background: #f0e6c9;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.86),
    0 0 4px rgba(120, 204, 255, 0.28);
}

.icon-close-button::after {
  left: 9px;
  top: 16px;
}

.icon-close-button:active {
  transform: translateY(1px);
  filter: brightness(0.94);
}

.end-panel {
  padding: max(12px, env(safe-area-inset-top)) 9px max(12px, env(safe-area-inset-bottom));
  background: rgba(3, 7, 14, 0.82);
  backdrop-filter: blur(8px);
}

.end-card,
.end-panel:is(.defeat, .victory) .end-card,
.end-panel.clear .end-card {
  width: min(365px, calc(100vw - 18px));
  min-height: min(594px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  padding: 76px 43px 39px;
  border: 0;
  border-image: none;
  background:
    url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png")
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.end-card > .label {
  justify-self: center;
  color: #9ddff3;
  font-size: 10px;
  font-weight: 1000;
}

.end-card > strong {
  color: #fff0b6;
  font-size: 24px;
}

.end-text {
  gap: 5px;
  font-size: 11px;
}

.run-result-hero,
.result-progress,
.result-unlock-list,
.result-line,
.result-best-item,
.result-upgrade-hint {
  border: 8px solid transparent;
  background: rgba(4, 14, 25, 0.9) padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png")
    28 38 fill / 9px 11px / 0 stretch;
}

.result-mini-card {
  min-height: 42px;
  padding: 7px 5px;
  border: 7px solid transparent;
  background: rgba(4, 14, 25, 0.9) padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png")
    18 30 fill / 8px 10px / 0 stretch;
}

.result-mini-card small {
  color: #aac8da;
}

.button-row.end-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 2px 0 0;
}

.end-actions .mini-button,
.end-actions #endShardBonusButton,
.end-actions #endRestartButton,
.end-actions #endStoneReviveButton {
  min-height: 38px;
  font-size: 9px;
}

@media (max-height: 760px) {
  .end-card,
  .end-panel:is(.defeat, .victory) .end-card,
  .end-panel.clear .end-card {
    min-height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 65px 39px 32px;
  }
}

/* Mobile composition correction 1788170000000.
   Keep ornamental art and interactive content on the same responsive geometry. */
.menu-lobby-panel .lobby-status-grid div {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.menu-lobby-panel .lobby-status-grid img {
  position: absolute;
  z-index: 1;
  left: 19%;
  top: 50%;
  width: 37%;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  clip-path: circle(36% at 50% 50%);
  filter:
    saturate(1.08)
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.74))
    drop-shadow(0 0 5px rgba(103, 216, 255, 0.4));
}

.menu-lobby-panel .lobby-status-grid span,
.menu-lobby-panel .lobby-status-grid strong {
  position: relative;
  z-index: 2;
}

.combat-panel {
  margin-bottom: -11px;
  padding: 8px 11px 7px;
}

.fight-stage {
  height: clamp(148px, 18.5dvh, 166px);
  overflow: visible;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.fight-stage::before {
  display: none;
}

.fight-stage::after {
  bottom: 17px;
  height: 31px;
  opacity: 0.46;
}

.combat-panel + .tabs {
  margin-top: -11px;
}

#capsulesPanel.active {
  position: relative;
}

.pull-inline-panel.active {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  width: 100%;
  height: 84px;
  min-height: 84px;
  max-height: 84px;
  flex: 0 0 84px;
  margin: 5px 0 0;
  padding: 3px 6px 5px;
  overflow: hidden;
  border: 6px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(11, 28, 45, 0.98), rgba(3, 11, 21, 0.99))
    padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-shard-frame.png")
    26 38 fill / 7px 9px / 0 stretch;
  box-shadow: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.36));
}

.pull-inline-panel .panel-head.compact {
  min-height: 23px;
  height: 23px;
  flex: 0 0 23px;
  margin: 0 0 2px;
  padding: 0 3px 2px;
  border-bottom-color: rgba(105, 192, 239, 0.22);
}

.pull-inline-panel .panel-head.compact .label {
  display: none;
}

.pull-inline-panel .panel-head.compact h2 {
  color: #fff0b3;
  font-size: 11px;
  line-height: 1;
}

.pull-inline-panel .icon-close-button {
  width: 24px;
  min-width: 24px;
  height: 22px;
  border-radius: 3px;
}

.pull-inline-panel .icon-close-button::before,
.pull-inline-panel .icon-close-button::after {
  left: 6px;
  top: 10px;
  width: 12px;
}

.pull-inline-list {
  display: flex;
  min-height: 0;
  max-height: 38px;
  flex: 1;
  gap: 4px;
  padding: 0 1px 1px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.inline-reveal-item {
  min-width: 0;
  min-height: 36px;
  height: 36px;
  flex: 0 0 154px;
  grid-template-columns: minmax(0, 1fr) 47px;
  gap: 3px;
  padding: 3px 4px 3px 5px;
  border-width: 1px;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 0 rgba(0, 0, 0, 0.28);
}

.inline-reveal-item:only-child {
  flex-basis: 100%;
}

.inline-reveal-main strong {
  gap: 3px;
  font-size: 10px;
}

.inline-item-icon {
  width: 21px;
  height: 21px;
  padding: 1px;
  border-radius: 4px;
}

.inline-reveal-item .reveal-card-actions {
  width: 47px;
}

.inline-reveal-item .reveal-card-actions .mini-button {
  height: 27px;
  padding-inline: 3px;
  font-size: 9px;
}

.bag-board-row {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  min-height: 134px;
  height: 134px;
  margin-bottom: 0;
}

.bag-grid {
  box-sizing: border-box;
  align-self: stretch;
  margin: 0;
  padding: 6px;
  border: 6px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(9, 25, 41, 0.98), rgba(3, 11, 21, 0.99))
    padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-shard-frame.png")
    26 38 fill / 7px 9px / 0 stretch;
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.34));
}

.bag-cell {
  border: 1px solid rgba(102, 161, 196, 0.34);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(34, 65, 88, 0.26), rgba(3, 10, 18, 0.18)),
    #0b1623;
  box-shadow:
    inset 0 0 0 1px rgba(3, 9, 16, 0.72),
    inset 0 1px 0 rgba(183, 226, 255, 0.06);
}

.bag-cell.filled {
  background: #07111d;
}

.bag-effect-summary {
  box-sizing: border-box;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 12px 10px 9px;
  overflow: hidden;
  border: 6px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(9, 25, 41, 0.98), rgba(3, 11, 21, 0.99))
    padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-shard-frame.png")
    26 38 fill / 7px 9px / 0 stretch;
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.34));
}

.effect-summary-head {
  min-height: 17px;
  margin: 0 0 6px;
  padding: 0 1px 5px;
  border-bottom: 1px solid rgba(105, 192, 239, 0.2);
}

.effect-summary-head strong {
  color: #fff0b3;
  font-size: 10px;
}

.effect-summary-head small {
  color: #9bcbe4;
  font-size: 8px;
}

.bag-effect-summary.is-empty {
  padding: 12px 10px 9px;
}

.bag-effect-summary.is-empty .effect-summary-head {
  margin-bottom: 6px;
}

.bag-effect-summary.is-empty::after {
  content: var(--i18n-css-placeHint, "아이템을 배치하면\A세트·위치 효과 표시");
  min-height: 63px;
  display: grid;
  place-items: center;
  color: #89aabd;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  white-space: pre;
}

.effect-summary-list {
  grid-template-columns: repeat(3, 28px);
  align-content: start;
  gap: 4px;
  max-height: 78px;
  overflow-y: auto;
}

.effect-summary-chip {
  width: 28px;
  height: 28px;
}

#bagPanel.active .bag-tray {
  box-sizing: border-box;
  min-height: 0;
  margin: 5px 0 0;
  padding: 10px 11px 9px;
  overflow: hidden;
  border: 7px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(9, 25, 41, 0.98), rgba(3, 11, 21, 0.99))
    padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-shard-frame.png")
    26 38 fill / 8px 10px / 0 stretch;
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.34));
}

.tray-head {
  min-height: 17px;
  margin: 0 0 5px;
  padding: 0 2px 4px;
  border-bottom: 1px solid rgba(105, 192, 239, 0.2);
}

.tray-head strong {
  color: #fff0b3;
  font-size: 10px;
}

.bag-tray-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 62px;
  align-content: start;
  min-height: 0;
  max-height: none;
  gap: 4px;
  padding: 0 1px 2px;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
}

.tray-item {
  min-height: 62px;
  border-radius: 5px;
}

.bag-tray.is-empty .tray-empty {
  min-height: 62px;
  border-color: rgba(105, 192, 239, 0.25);
  border-radius: 4px;
  background: rgba(5, 15, 26, 0.5);
  color: #88aabd;
  font-size: 9px;
}

@media (max-height: 760px) {
  .combat-panel {
    margin-bottom: -12px;
    padding-block: 6px 5px;
  }

  .fight-stage {
    height: 138px;
  }

  #bagPanel.active .bag-tray {
    margin-top: 3px;
    padding-block: 8px 7px;
  }
}

/* Reward, inline-loot and bag alignment pass 1788250000000. */
.pull-reveal.high-rarity {
  padding:
    max(7px, env(safe-area-inset-top))
    max(7px, env(safe-area-inset-right))
    max(7px, env(safe-area-inset-bottom))
    max(7px, env(safe-area-inset-left));
  background: rgba(1, 7, 15, 0.9);
  backdrop-filter: blur(6px);
}

.pull-reveal.high-rarity .pull-reveal-card {
  box-sizing: border-box;
  width: min(354px, calc(100vw - 14px));
  max-height: calc(100dvh - 14px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  padding: 12px 13px 14px;
  overflow: hidden;
  border: 12px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(10, 31, 49, 0.99), rgba(2, 11, 21, 0.995))
    padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png")
    28 38 fill / 15px 18px / 0 stretch;
  box-shadow: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.62));
  animation: rareRevealCard 240ms ease-out both;
}

.pull-reveal.high-rarity .panel-head {
  min-height: 38px;
  margin: 0;
  padding: 0 2px 5px;
  border-bottom: 1px solid rgba(121, 205, 242, 0.22);
}

.pull-reveal.high-rarity .panel-head .label {
  color: #84dcec;
  font-size: 8px;
  letter-spacing: 0.04em;
}

.pull-reveal.high-rarity .panel-head h2 {
  color: #fff0b5;
  font-size: 18px;
  text-shadow: 0 2px 0 rgba(32, 15, 2, 0.88);
}

.pull-reveal.high-rarity .icon-close-button {
  width: 31px;
  min-width: 31px;
  height: 32px;
}

.pull-reveal.high-rarity .icon-close-button::after {
  inset: 9px;
}

.pull-reveal.high-rarity .pull-reveal-list {
  min-height: 0;
  display: block;
  margin: 0;
  overflow: hidden;
}

.pull-reveal.high-rarity .rare-showcase {
  box-sizing: border-box;
  width: 100%;
  min-height: 388px;
  max-height: 100%;
  aspect-ratio: auto;
  display: grid;
  grid-template-rows: 25px minmax(168px, 1fr) auto auto 40px;
  align-items: center;
  gap: 7px;
  padding: 18px 19px 17px;
  overflow: hidden;
  border: 10px solid transparent;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(72, 126, 160, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(7, 24, 40, 0.98), rgba(2, 10, 19, 0.99))
    padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-shard-frame.png")
    26 38 fill / 11px 14px / 0 stretch;
  box-shadow: none;
  animation: none;
}

.pull-reveal.high-rarity .rare-showcase::before,
.pull-reveal.high-rarity .rare-showcase::after {
  display: none;
}

.pull-reveal.high-rarity .rare-kicker {
  align-self: center;
  color: #91e0ef;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 3px #000;
}

.pull-reveal.high-rarity .rare-item-focus {
  min-height: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
}

.pull-reveal.high-rarity .rare-grade {
  min-width: 62px;
  min-height: 29px;
  display: grid;
  place-items: center;
  padding: 0 12px 2px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png") center / 100% 100% no-repeat;
  color: currentColor;
  font-size: 20px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 0 9px currentColor, 0 2px 2px #000;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.48));
}

.pull-reveal.high-rarity .rare-reveal-icon {
  box-sizing: border-box;
  width: 108px;
  height: 108px;
  margin: 1px auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  object-position: 50% 50%;
  filter:
    saturate(1.14)
    drop-shadow(0 6px 3px rgba(0, 0, 0, 0.76))
    drop-shadow(0 0 12px currentColor);
}

.pull-reveal.high-rarity .rare-showcase .name {
  max-width: 230px;
  color: #f8fcff;
  font-size: 20px;
  line-height: 1.1;
  text-shadow: 0 2px 3px #000;
}

.pull-reveal.high-rarity .rare-showcase .stats,
.pull-reveal.high-rarity .rare-showcase .hint {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(105, 192, 239, 0.2);
  border-radius: 3px;
  background: rgba(3, 13, 24, 0.74);
  line-height: 1.25;
  text-align: center;
}

.pull-reveal.high-rarity .rare-showcase .stats {
  color: #ffe4a0;
  font-size: 11px;
}

.pull-reveal.high-rarity .rare-showcase .hint {
  max-height: 42px;
  color: #c5dbea;
  font-size: 10px;
}

.pull-reveal.high-rarity .reveal-card-actions {
  align-self: stretch;
  width: 100%;
  margin: 0;
}

.pull-reveal.high-rarity .reveal-card-actions.single {
  grid-template-columns: minmax(0, 1fr);
}

.pull-reveal.high-rarity .reveal-card-actions .mini-button {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 18px 2px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png") center / 100% 100% no-repeat;
  color: #fff8d6;
  font-size: 12px;
  text-shadow: 0 2px 2px rgba(28, 12, 1, 0.9);
  box-shadow: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.42));
}

.pull-reveal.high-rarity .reveal-actions {
  display: none;
}

.pull-inline-panel.active {
  height: auto;
  min-height: 84px;
  max-height: 124px;
  flex: 0 0 auto;
}

.pull-inline-list {
  min-height: 36px;
  max-height: 76px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 36px;
  align-content: start;
  flex: 0 1 auto;
  gap: 4px;
  padding: 0 1px 1px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.inline-reveal-item,
.inline-reveal-item:only-child {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 43px;
  flex: none;
}

.inline-reveal-item .reveal-card-actions {
  width: 43px;
}

.bag-board-row {
  min-height: 129px;
  height: 129px;
}

.bag-grid {
  box-sizing: border-box;
  padding: 8px;
  gap: 4px;
}

.bag-cell {
  box-sizing: border-box;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(93, 160, 198, 0.36);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(31, 67, 91, 0.22), rgba(3, 12, 21, 0.12)),
    #081522;
  box-shadow:
    inset 0 0 0 1px rgba(1, 7, 13, 0.76),
    inset 0 1px 0 rgba(196, 232, 255, 0.05);
}

.bag-cell.filled {
  background: #06111d;
}

.placed-item {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  overflow: hidden;
  border-radius: 3px;
}

.placed-item .item-icon,
.placed-item.item-art-badge .item-icon,
.placed-item.item-art-bow .item-icon,
.placed-item.bonus-active .item-icon,
.placed-item.set-active .item-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  max-width: calc(100% - 6px);
  max-height: calc(100% - 6px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  object-position: 50% 50%;
  transform: translate(-50%, -50%);
  filter:
    saturate(1.08)
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.62));
}

.placed-item[data-item-width="2"][data-item-height="1"] .item-icon {
  width: 42px;
  height: 24px;
}

.placed-item[data-item-width="1"][data-item-height="2"] .item-icon {
  width: 24px;
  height: 42px;
}

.placed-item[data-item-width="2"][data-item-height="2"] .item-icon {
  width: 42px;
  height: 42px;
}

.placed-item[data-item-width="3"][data-item-height="1"] .item-icon {
  width: 50px;
  height: 24px;
}

.placed-item[data-item-width="1"][data-item-height="3"] .item-icon {
  width: 24px;
  height: 50px;
}

.placed-item.item-art-badge .item-icon,
.placed-item[data-item-width="2"][data-item-height="1"].item-art-badge .item-icon {
  width: 28px;
  height: 24px;
  transform: translate(-50%, -50%);
}

.placed-item.item-art-bow .item-icon,
.placed-item[data-item-width="2"][data-item-height="1"].item-art-bow .item-icon,
.placed-item[data-item-width="3"][data-item-height="1"].item-art-bow .item-icon {
  width: 50px;
  height: 24px;
  transform: translate(-50%, -50%) rotate(-8deg);
}

#itemPlaceButton[hidden] {
  display: none !important;
}

@media (max-height: 760px) {
  .pull-reveal.high-rarity .pull-reveal-card {
    padding: 9px 11px 11px;
    border-width: 10px;
  }

  .pull-reveal.high-rarity .rare-showcase {
    min-height: 323px;
    grid-template-rows: 22px minmax(130px, 1fr) auto auto 37px;
    gap: 5px;
    padding: 13px 16px 14px;
  }

  .pull-reveal.high-rarity .rare-reveal-icon {
    width: 88px;
    height: 88px;
  }

  .pull-reveal.high-rarity .rare-showcase .name {
    font-size: 18px;
  }

  .bag-board-row {
    min-height: 129px;
    height: 129px;
  }

  .bag-effect-summary.is-empty::after {
    min-height: 58px;
  }
}

/* Final combat VFX and bag frame precision override 1788257000000. */
.slash-fx {
  width: 124px;
  height: 82px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/combat_fx_refresh_1788256000000/abyss-hit-burst-v1.png") center / contain no-repeat;
  background-size: 140% auto;
  transform: translate(-50%, -50%) rotate(-5deg) scale(0.48);
  filter:
    drop-shadow(0 0 4px rgba(129, 225, 255, 0.76))
    drop-shadow(0 0 9px rgba(56, 91, 255, 0.52));
}

.slash-fx.active {
  animation: abyssHitBurst 360ms cubic-bezier(0.16, 0.76, 0.2, 1);
}

.slash-fx.burst {
  width: 140px;
  height: 92px;
  border: 0;
  filter:
    drop-shadow(0 0 5px rgba(209, 248, 255, 0.9))
    drop-shadow(0 0 13px rgba(98, 111, 255, 0.72));
}

.impact-fx,
.impact-fx.active {
  display: none;
}

.bag-board-row {
  min-height: 124px;
  height: 124px;
}

.bag-grid {
  gap: 3px;
  padding: 8px;
}

.bag-cell {
  width: 30px;
  height: 30px;
}

@media (max-height: 760px) {
  .bag-board-row {
    min-height: 124px;
    height: 124px;
  }

  .bag-effect-summary.is-empty::after {
    min-height: 53px;
  }
}

/* True-final ornament and item silhouette lock 1788259000000. */
.menu-lobby-panel .lobby-status-grid {
  left: clamp(7px, 2.1vw, 9px);
  right: clamp(7px, 2.1vw, 9px);
  gap: clamp(3px, 0.9vw, 4px);
}

.menu-lobby-panel .lobby-status-grid div {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: 210 / 91;
  padding: 0;
  overflow: visible;
  background-position: 50% 50%;
  background-size: 100% 100%;
}

.menu-lobby-panel .lobby-status-grid img {
  position: absolute;
  z-index: 1;
  left: 22.6%;
  top: 50%;
  width: 36.8%;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  clip-path: none;
}

.menu-lobby-panel .lobby-status-grid span,
.menu-lobby-panel .lobby-status-grid strong {
  position: absolute;
  z-index: 2;
  left: 40.5%;
  width: 56.5%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-lobby-panel .lobby-status-grid span {
  top: 28%;
  color: #cdeeff;
  font-size: clamp(8.5px, 2.3vw, 10px);
}

.menu-lobby-panel .lobby-status-grid strong {
  top: 54%;
  color: #fff0a8;
  font-size: clamp(11px, 3.05vw, 13px);
}

.placed-item {
  isolation: isolate;
  overflow: visible;
}

.placed-item::before {
  z-index: 0;
}

.placed-item .item-icon,
.placed-item.item-art-badge .item-icon,
.placed-item.item-art-bow .item-icon,
.placed-item.bonus-active .item-icon,
.placed-item.set-active .item-icon {
  z-index: 2;
  width: 26px;
  height: 26px;
  max-width: calc(100% - 4px);
  max-height: calc(100% - 4px);
  padding: 0;
  overflow: visible;
  object-fit: contain;
  object-position: 50% 50%;
  transform: translate(-50%, -50%);
}

.placed-item[data-item-width="2"][data-item-height="1"] .item-icon {
  width: 44px;
  height: 26px;
}

.placed-item[data-item-width="1"][data-item-height="2"] .item-icon {
  width: 26px;
  height: 44px;
}

.placed-item[data-item-width="2"][data-item-height="2"] .item-icon {
  width: 48px;
  height: 48px;
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
}

.placed-item[data-item-width="3"][data-item-height="1"] .item-icon {
  width: 52px;
  height: 26px;
}

.placed-item[data-item-width="1"][data-item-height="3"] .item-icon {
  width: 26px;
  height: 52px;
}

.placed-item.item-art-guard .item-icon,
.placed-item[data-item-width="2"][data-item-height="1"].item-art-guard .item-icon,
.placed-item[data-item-width="1"][data-item-height="2"].item-art-guard .item-icon {
  width: 26px;
  height: 26px;
  max-width: calc(100% - 4px);
  max-height: calc(100% - 4px);
  transform: translate(-50%, -50%) scale(0.94);
  transform-origin: center;
}

.placed-item.item-art-tall-shield .item-icon,
.placed-item[data-item-width="2"][data-item-height="1"].item-art-tall-shield .item-icon,
.placed-item[data-item-width="1"][data-item-height="2"].item-art-tall-shield .item-icon {
  width: 32px;
  height: 32px;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
}

.placed-item.item-art-bow .item-icon,
.placed-item[data-item-width="2"][data-item-height="1"].item-art-bow .item-icon,
.placed-item[data-item-width="3"][data-item-height="1"].item-art-bow .item-icon {
  width: 52px;
  height: 26px;
  transform: translate(-50%, -50%) rotate(-8deg);
}

/* Unified expedition reward and result composition 1788261000000. */
.reward-panel,
.board-passive-choice-panel,
.end-panel {
  padding:
    max(10px, env(safe-area-inset-top))
    9px
    max(10px, env(safe-area-inset-bottom));
  background: rgba(3, 7, 14, 0.84);
  backdrop-filter: blur(8px);
}

.reward-modal-card,
.reward-panel.boss-reward .reward-modal-card {
  width: min(365px, calc(100vw - 18px));
  min-height: min(500px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  padding: 70px 42px 42px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 7px;
  overflow: hidden;
  border: 0;
  border-image: none;
  background:
    url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png")
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.reward-modal-card > div:first-child {
  min-height: 42px;
  gap: 2px;
}

.reward-grid {
  min-height: 0;
  align-content: center;
  gap: 5px;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.reward-card,
.reward-panel.boss-reward .reward-card,
.reward-panel.boss-reward .reward-riskCoins,
.reward-panel.boss-reward .reward-riskPurge,
.reward-panel.boss-reward .reward-riskOverclock {
  min-height: 72px;
  padding: 7px 9px;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 5px;
  border: 7px solid transparent;
  background: rgba(4, 14, 25, 0.92) padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png")
    18 30 fill / 8px 10px / 0 stretch;
}

.reward-card:active {
  transform: translateY(1px);
  filter: brightness(1.12);
}

.reward-icon {
  width: 29px;
  height: 29px;
}

.reward-copy {
  gap: 3px;
}

.reward-copy em {
  color: #9edff3;
  font-size: 8.5px;
}

.reward-copy strong {
  color: #fff1b0;
  font-size: 11px;
  white-space: normal;
}

.reward-copy b,
.reward-panel.boss-reward .reward-copy b {
  color: #f5f9ff;
  font-size: 9px;
  line-height: 1.22;
  white-space: normal;
  overflow: visible;
}

.reward-ad-reroll,
.reward-panel .reward-ad-reroll,
.reward-panel.boss-reward .reward-ad-reroll {
  min-height: 48px;
  width: 100%;
  padding: 6px 14px;
  grid-template-columns: 28px minmax(0, 1fr);
  border: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png")
    center / 100% 100% no-repeat;
}

.board-passive-choice-card {
  width: min(365px, calc(100vw - 18px));
  min-height: min(580px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  padding: 72px 42px 42px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 7px;
  overflow: hidden;
  border: 0;
  border-image: none;
  background:
    url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png")
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.board-passive-choice-card > div:first-child {
  min-height: 48px;
  align-content: center;
  gap: 2px;
}

.board-passive-choice-card > div:first-child > .label {
  color: #9edff3;
  font-size: 9px;
}

.board-passive-choice-card > div:first-child > strong {
  color: #fff0b6;
  font-size: 16px;
}

.board-passive-choice-card > div:first-child > small {
  color: #b8cedd;
  font-size: 9px;
}

.board-clear-supply-preview {
  min-height: 62px;
  padding: 7px 11px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  border: 7px solid transparent;
  background: rgba(4, 14, 25, 0.92) padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png")
    28 38 fill / 8px 10px / 0 stretch;
}

.board-clear-supply-preview img {
  width: 38px;
  height: 38px;
}

.board-clear-supply-preview strong {
  font-size: 12px;
}

.board-passive-choice-list {
  min-height: 0;
  align-content: start;
  gap: 5px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.board-passive-choice {
  min-height: 66px;
  padding: 6px 9px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  border: 7px solid transparent;
  background: rgba(4, 14, 25, 0.92) padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png")
    18 30 fill / 8px 10px / 0 stretch;
}

.board-passive-choice img {
  width: 34px;
  height: 34px;
}

.board-passive-choice > span {
  gap: 2px;
}

.board-passive-choice strong {
  color: #fff1b0;
  font-size: 11.5px;
}

.board-passive-choice small,
.board-passive-choice em {
  font-size: 8.5px;
  line-height: 1.18;
}

.board-passive-choice em {
  color: #9edff3;
}

.board-passive-choice[data-quality="common"] {
  border-color: rgba(155, 179, 194, 0.52);
}

.board-passive-choice[data-quality="rare"] {
  border-color: rgba(74, 188, 255, 0.82);
  box-shadow: inset 0 0 18px rgba(49, 145, 220, 0.11), 0 0 9px rgba(45, 156, 229, 0.12);
}

.board-passive-choice[data-quality="epic"] {
  border-color: rgba(194, 104, 255, 0.9);
  box-shadow: inset 0 0 20px rgba(137, 62, 214, 0.15), 0 0 11px rgba(157, 77, 231, 0.17);
}

.board-passive-choice[data-quality="legendary"] {
  border-color: rgba(255, 190, 63, 0.94);
  box-shadow: inset 0 0 22px rgba(218, 135, 30, 0.18), 0 0 13px rgba(255, 174, 51, 0.2);
}

.board-passive-choice[data-quality="mythic"] {
  border-color: rgba(255, 103, 186, 0.98);
  box-shadow: inset 0 0 25px rgba(186, 50, 161, 0.22), 0 0 15px rgba(255, 79, 181, 0.28);
}

.board-passive-choice[data-quality="rare"] b { color: #061927; background: #7ed8ff; }
.board-passive-choice[data-quality="epic"] b { color: #180625; background: #d6a0ff; }
.board-passive-choice[data-quality="legendary"] b { color: #281800; background: #ffd66c; }
.board-passive-choice[data-quality="mythic"] b { color: #2b061e; background: #ff9ed6; }

.board-passive-choice[data-quality="legendary"] strong,
.board-passive-choice[data-quality="mythic"] strong {
  color: #fff4c4;
  text-shadow: 0 0 8px rgba(255, 206, 102, 0.36);
}

.unlock-showcase.board-clear .unlock-card {
  width: min(350px, calc(100vw - 20px));
  min-height: min(440px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  padding: 68px 42px 40px;
  grid-template-rows: 68px auto auto minmax(70px, auto) 38px;
  align-content: stretch;
  gap: 5px;
  overflow: hidden;
  border: 0;
  background:
    url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png")
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.unlock-showcase.board-clear .unlock-card p {
  max-width: 100%;
  max-height: none;
  margin: 0;
  padding: 7px 9px;
  align-self: stretch;
  overflow-y: auto;
  border: 7px solid transparent;
  background: rgba(4, 14, 25, 0.92) padding-box;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png")
    18 30 fill / 8px 10px / 0 stretch;
  font-size: 10px;
  line-height: 1.35;
}

.unlock-showcase.board-clear .unlock-confirm-button {
  width: 100%;
  min-height: 38px;
  margin: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png")
    center / 100% 100% no-repeat;
  font-size: 11px;
}

.end-card,
.end-panel:is(.defeat, .victory) .end-card,
.end-panel.clear .end-card {
  width: min(365px, calc(100vw - 18px));
  min-height: min(720px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  padding: 70px 42px 40px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 5px;
  overflow: hidden;
}

.end-text {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.button-row.end-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  padding: 2px 3px 0;
}

.end-actions .mini-button,
.end-actions #endShardBonusButton,
.end-actions #endRestartButton,
.end-actions #endHomeButton,
.end-actions #endStoneReviveButton {
  grid-column: auto;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 5px 7px;
  border: 0;
  border-radius: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png")
    center / 100% 100% no-repeat;
  color: #edf7ff;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1.12;
  box-shadow: none;
}

.end-actions #endMenuButton,
.end-actions .end-ad-revive {
  grid-column: 1;
}

.end-actions #endShardReviveButton,
.end-actions .end-shard-revive {
  grid-column: 2;
}

.end-actions #endStoneReviveButton,
.end-actions .end-stone-revive {
  grid-column: 1 / -1;
}

.end-actions #endShardBonusButton,
.end-actions .end-shard-bonus {
  grid-column: 1 / -1;
}

.end-actions #endRestartButton,
.end-actions .end-restart {
  grid-column: 1;
  background-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png");
  color: #fff0ad;
}

.end-actions #endHomeButton,
.end-actions .end-home {
  grid-column: 2;
}

.end-actions #endStoneReviveButton::before {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
}

@media (max-height: 700px) {
  .reward-modal-card,
  .reward-panel.boss-reward .reward-modal-card {
    padding: 61px 38px 34px;
  }

  .board-passive-choice-card {
    padding: 61px 38px 34px;
  }

  .end-card,
  .end-panel:is(.defeat, .victory) .end-card,
  .end-panel.clear .end-card {
    padding: 61px 38px 34px;
  }

  .end-actions .mini-button,
  .end-actions #endShardBonusButton,
  .end-actions #endRestartButton,
  .end-actions #endHomeButton,
  .end-actions #endStoneReviveButton {
    min-height: 34px;
  }
}

/* Moon-bunny death settle and single battle control 1788263000000. */
.enemy-fighter.enemy-king-bunny.defeated {
  transform: translateY(6px);
}

.enemy-fighter.enemy-king-bunny.anim-dead img {
  transform: translateY(1%) scale(1.03);
  transform-origin: center bottom;
}

.stage-controls .skill-button:only-child {
  width: 76px;
}

/* Rewarded-ad verification and purchase status 1788280000000. */
.store-notice {
  width: calc(100% - 12px);
  margin: 5px auto max(8px, env(safe-area-inset-bottom));
  padding: 8px 10px;
  border: 1px solid rgba(115, 175, 205, 0.42);
  background: rgba(4, 15, 28, 0.9);
  color: #c8dae8;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.store-notice[data-state="pending"] {
  color: #ffe597;
}

.store-notice[data-state="success"] {
  color: #9ff4c8;
}

.store-notice[data-state="error"] {
  color: #ffb4ad;
}

.store-product-card[aria-disabled="true"] {
  cursor: default;
}

.store-product-card.purchase-pending {
  filter: saturate(0.65);
}

.store-product-card.purchase-complete {
  opacity: 0.72;
}

.store-product-card.purchase-complete .store-buy-button {
  color: #9ff4c8;
}

.rewarded-ad-panel {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: none;
  place-items: center;
  padding:
    max(12px, env(safe-area-inset-top))
    12px
    max(12px, env(safe-area-inset-bottom));
  background: rgba(0, 4, 11, 0.88);
}

.rewarded-ad-panel.active {
  display: grid;
}

.rewarded-ad-card {
  width: min(350px, calc(100vw - 24px));
  padding: 56px 38px 38px;
  display: grid;
  gap: 9px;
  text-align: center;
  background:
    url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png")
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.65));
}

.rewarded-ad-card > strong {
  color: #fff3ba;
  font-size: 17px;
}

.rewarded-ad-card p,
.rewarded-ad-card b {
  margin: 0;
  color: #d9e8f4;
  font-size: 11px;
  line-height: 1.4;
}

.rewarded-ad-visual {
  position: relative;
  min-height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 7px solid transparent;
  border-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png")
    18 30 fill / 8px 10px / 0 stretch;
  background: rgba(5, 17, 31, 0.95);
}

.rewarded-ad-visual span {
  color: rgba(190, 224, 243, 0.5);
  font-size: 42px;
  font-weight: 1000;
  letter-spacing: 0.08em;
}

.rewarded-ad-visual i {
  position: absolute;
  left: 8px;
  right: auto;
  bottom: 8px;
  width: 0;
  height: 5px;
  background: #83e6c2;
  box-shadow: 0 0 9px rgba(131, 230, 194, 0.7);
  transition: width 0.2s linear;
}

.rewarded-ad-card .mini-button {
  width: 100%;
  min-height: 40px;
  border: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png")
    center / 100% 100% no-repeat;
  font-size: 10px;
}

.monetization-toast {
  position: fixed;
  z-index: 3300;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 24px));
  padding: 10px 12px;
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(135, 201, 228, 0.48);
  background: rgba(3, 14, 26, 0.96);
  color: #eff8ff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.monetization-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.monetization-toast[data-state="success"] {
  color: #a5f6cd;
}

.monetization-toast[data-state="error"] {
  color: #ffc0b8;
}

/* New-player balance, lobby offer and readable bag effects pass 1788292000000. */
.menu-lobby-panel .lobby-first-offer {
  position: absolute;
  z-index: 9;
  top: max(118px, calc(env(safe-area-inset-top) + 112px));
  left: 8px;
  right: 8px;
  width: auto;
  min-height: 54px;
  margin: 0;
}

.menu-lobby-panel .lobby-first-offer[hidden] {
  display: none;
}

.bag-board-row {
  min-height: var(--bag-board-height, 124px);
  height: var(--bag-board-height, 124px);
}

.effect-summary-list {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 3px;
  max-height: 80px;
}

.effect-summary-chip {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  min-width: 0;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid rgba(104, 184, 224, 0.28);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(28, 62, 86, 0.76), rgba(5, 18, 31, 0.9));
  text-align: left;
}

.effect-summary-chip.complete {
  border-color: rgba(255, 218, 112, 0.58);
  background: linear-gradient(180deg, rgba(89, 66, 26, 0.82), rgba(25, 18, 10, 0.92));
}

.effect-summary-chip.upcoming {
  opacity: 0.78;
  border-style: dashed;
}

.effect-summary-chip img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.effect-summary-chip > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.effect-summary-chip b,
.effect-summary-chip small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.effect-summary-chip b {
  color: #fff0b1;
  font-size: 8.5px;
  line-height: 1.05;
}

.effect-summary-chip small {
  color: #a9d4e8;
  font-size: 7.5px;
  line-height: 1.05;
}

.store-purchase-safety {
  color: #8fdbe6;
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1.15;
}

@media (max-width: 370px) {
  .menu-lobby-panel .lobby-first-offer {
    left: 6px;
    right: 6px;
    padding-left: 54px;
  }

  .effect-summary-chip {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 4px;
    padding-inline: 4px;
  }

  .effect-summary-chip img {
    width: 22px;
    height: 22px;
  }
}

/* Victory aura, unmistakable SSS palette and SSS-only reveal spectacle 1790104000000. */
.fight-stage.victory-glow {
  border-color: rgba(255, 224, 119, 0.92) !important;
  box-shadow:
    inset 0 0 30px rgba(255, 205, 74, 0.28),
    inset 0 -24px 46px rgba(255, 171, 35, 0.12),
    0 0 22px rgba(255, 210, 89, 0.38) !important;
  animation: victoryStageGlow 1050ms ease-in-out infinite alternate;
}

.fight-stage.victory-glow::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 246, 183, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 18%, rgba(255, 216, 92, 0.85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 65% 72%, rgba(255, 241, 162, 0.72) 0 1px, transparent 2px),
    radial-gradient(ellipse at 50% 88%, rgba(255, 199, 65, 0.2), transparent 64%);
  background-size: 47px 41px, 61px 53px, 39px 47px, 100% 100%;
  animation: victorySparkDrift 1500ms linear infinite;
}

@keyframes victoryStageGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.09) saturate(1.12); }
}

@keyframes victorySparkDrift {
  from { opacity: 0.48; background-position: 0 18px, 8px 4px, 2px 12px, 0 0; }
  to { opacity: 0.95; background-position: 9px -28px, -6px -44px, 13px -32px, 0 0; }
}

.rarity-SSS {
  border-color: #fff6b8 !important;
  color: #ffffff !important;
  text-shadow: 0 0 5px #fff, 0 0 11px #42f5ff, 0 0 17px rgba(255, 202, 74, 0.9);
  box-shadow:
    0 0 0 1px rgba(92, 244, 255, 0.72),
    0 0 18px rgba(65, 235, 255, 0.72),
    0 0 30px rgba(255, 196, 58, 0.38),
    inset 0 0 14px rgba(255, 255, 255, 0.28) !important;
}

.item-tile.rarity-SSS,
.tray-item.rarity-SSS,
.placed-item.rarity-SSS,
.inline-reveal-item.rarity-SSS,
.fusion-material.rarity-SSS,
.fusion-result-pop.rarity-SSS,
.rare-showcase.rarity-SSS {
  --item-grade-surface:
    radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.72), transparent 24%),
    conic-gradient(from 215deg at 50% 42%, #082d56, #00a9bf, #fff0a4, #ce5cff, #07264d, #00a9bf) !important;
  color: #fffdf0 !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.58), transparent 26%),
    conic-gradient(from 215deg at 50% 42%, #082d56, #00a9bf, #fff0a4, #ce5cff, #07264d, #00a9bf) !important;
}

/* Final reward shrine v2 and readable enemy skill callout 1790108000000. */
.reward-modal-card,.reward-panel.boss-reward .reward-modal-card{width:min(366px,calc(100vw - 12px))!important;padding:82px 43px 50px!important;border:0!important;border-radius:0!important;background:url("assets/generated/reward_attendance_v2_1790106000000/stage-reward-panel-v2.png") center/100% 100% no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 14px 25px rgba(0,0,0,.78))!important}
.reward-modal-card>div:first-child{min-height:58px!important;padding:0 10px 8px!important;background:transparent!important}.reward-modal-card .reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 10px!important;padding:13px 7px 18px!important}.reward-modal-card .reward-card:not(.reward-ad-reroll){min-height:118px!important;padding:15px 10px!important;border:0!important;border-radius:0!important;background:radial-gradient(circle at 50% 0,rgba(36,176,224,.18),transparent 52%),rgba(2,10,18,.7)!important;box-shadow:inset 0 0 14px rgba(38,170,222,.1)!important}.reward-modal-card .reward-card:last-child:nth-child(odd):not(.reward-ad-reroll){grid-column:1/-1!important;min-height:106px!important}
.enemy-skill-banner{position:absolute;left:50%;top:-31px;z-index:18;min-width:86px;max-width:142px;min-height:25px;display:grid;place-items:center;box-sizing:border-box;padding:4px 16px 5px;overflow:hidden;border:1px solid rgba(255,210,91,.82);border-radius:3px;background:linear-gradient(180deg,rgba(70,30,82,.98),rgba(19,10,32,.98));color:#fff3b0;font-size:9px;font-weight:1000;line-height:1.05;text-align:center;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 2px 2px #000;box-shadow:0 0 12px rgba(211,98,255,.38),inset 0 0 8px rgba(255,220,113,.1);opacity:0;pointer-events:none;transform:translate(-50%,7px) scale(.9)}.enemy-skill-banner.show{animation:enemySkillBannerHold 2300ms ease both}.enemy-skill-banner::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;border-right:1px solid rgba(255,210,91,.82);border-bottom:1px solid rgba(255,210,91,.82);background:#160b24;transform:translateX(-50%) rotate(45deg)}
@keyframes enemySkillBannerHold{0%{opacity:0;transform:translate(-50%,7px) scale(.9)}10%,82%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-4px) scale(.98)}}

/* Final full-screen QA: single-line copy and proportionate inventory actions 1790107000000. */
.reward-modal-card .reward-copy,
.reward-modal-card .reward-copy strong,
.reward-modal-card .reward-copy small,
.reward-modal-card .reward-copy b,
.reward-panel.boss-reward .reward-copy small,
.reward-panel.boss-reward .reward-copy b {
  min-width: 0 !important; max-width: 100% !important; overflow: hidden !important;
  white-space: nowrap !important; overflow-wrap: normal !important; word-break: keep-all !important;
  text-overflow: ellipsis !important;
}
.reward-modal-card .reward-copy small,
.reward-panel.boss-reward .reward-copy small { display: block !important; font-size: 8px !important; line-height: 1.15 !important; }

.item-info-card p, #itemInfoText,
.item-info-stats span, .item-info-stats span small, .item-info-stats span strong {
  min-width: 0 !important; max-width: 100% !important; overflow: hidden !important;
  white-space: nowrap !important; overflow-wrap: normal !important; word-break: keep-all !important;
  text-overflow: ellipsis !important;
}
.item-info-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 7px !important; width: 100% !important; }
.item-info-actions .mini-button, #itemPlaceButton, #itemRemoveButton, #itemSellButton {
  box-sizing: border-box !important; width: 100% !important; min-width: 0 !important;
  height: 42px !important; min-height: 42px !important; display: grid !important; place-items: center !important;
  margin: 0 !important; padding: 0 6px 1px !important; border: 0 !important; border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat !important;
  color: #eaf8ff !important; font-size: 9px !important; font-weight: 900 !important; line-height: 1 !important;
  white-space: nowrap !important; text-shadow: 0 2px 3px rgba(0,0,0,.9) !important; box-shadow: none !important;
}
#itemPlaceButton,
.pull-reveal .reveal-card-actions .mini-button,
.pull-inline-panel .reveal-card-actions .mini-button,
.inline-reveal-item .mini-button {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-primary.png") center / 100% 100% no-repeat !important;
  color: #fff2b5 !important;
}
#itemSellButton { filter: hue-rotate(132deg) saturate(.78) brightness(.88) !important; }
.pull-reveal .reveal-card-actions .mini-button,
.pull-inline-panel .reveal-card-actions .mini-button,
.inline-reveal-item .mini-button {
  box-sizing: border-box !important; width: 100% !important; height: 38px !important; min-height: 38px !important;
  padding: 0 10px 1px !important; border: 0 !important; border-radius: 0 !important;
  font-size: 9px !important; font-weight: 900 !important; line-height: 1 !important; white-space: nowrap !important;
}

/* Companion header, readable currency, equal summon actions, and login parity 1790105000000. */
#menuCompanionPanel .menu-panel-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 5px 10px 6px !important;
}

#menuCompanionPanel .menu-panel-head > strong {
  grid-column: 1 !important;
  justify-self: center !important;
  width: 100% !important;
  padding-inline: 82px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

#menuCompanionPanel .menu-panel-head > .menu-back-button {
  position: absolute !important;
  left: 1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 72px !important;
  min-width: 72px !important;
}

#menuCompanionPanel .companion-currency-bar span {
  min-height: 46px !important;
  grid-template-columns: 34% minmax(0, 1fr) !important;
  padding: 4px 7px 4px 4px !important;
}

#menuCompanionPanel .companion-currency-bar img {
  width: 27px !important;
  height: 27px !important;
}

#menuCompanionPanel .companion-currency-bar em {
  overflow: visible !important;
  color: #c5eaff !important;
  font-size: 8.5px !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  text-overflow: clip !important;
}

#menuCompanionPanel .companion-currency-bar b {
  margin-top: 2px !important;
  font-size: 13px !important;
}

#menuCompanionPanel .companion-summon-card button,
#menuCompanionPanel .companion-summon-card .summon-store-link,
#menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin-top: 5px !important;
  border-width: 10px 18px !important;
  border-image-width: 10px 18px !important;
  font-size: 9px !important;
}

#menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
  border-image-source: url("assets/generated/companion_summon_controls_v4/summon-premium-button.png") !important;
  color: #fff3bd !important;
}

#menuLoginPanel .login-choice > #googleLoginButton,
#menuLoginPanel .login-choice > #appleLoginButton,
#menuLoginPanel .login-choice > #guestLoginButton {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat !important;
  color: #edf7ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.92) !important;
  box-shadow: none !important;
}

/* Purpose-built stage reward and exact 28-slot attendance boards 1790106000000. */
.reward-modal-card,
.reward-panel.boss-reward .reward-modal-card {
  box-sizing: border-box !important;
  width: min(356px, calc(100vw - 18px)) !important;
  max-height: min(724px, calc(100dvh - 18px)) !important;
  padding: 48px 35px 38px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/reward_attendance_v2_1790106000000/stage-reward-panel.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.72)) !important;
}

.reward-modal-card > div:first-child {
  min-height: 64px !important;
  display: grid !important;
  place-content: center !important;
  gap: 4px !important;
  padding: 0 14px 10px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
}

.reward-modal-card > div:first-child .label {
  color: #6de8ff !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
}

.reward-modal-card > div:first-child > strong {
  color: #fff0a8 !important;
  font-size: 19px !important;
  text-shadow: 0 2px 3px #000, 0 0 10px rgba(255,213,87,.35) !important;
}

.reward-modal-card .reward-grid {
  min-height: 0 !important;
  max-height: calc(100dvh - 180px) !important;
  gap: 9px !important;
  padding: 8px 3px 14px !important;
  overflow-y: auto !important;
}

.reward-modal-card .reward-card:not(.reward-ad-reroll) {
  min-height: 112px !important;
  padding: 13px 10px !important;
  border: 1px solid rgba(74,202,238,.58) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(135deg, transparent 7px, rgba(13,42,63,.98) 0) top left,
    radial-gradient(circle at 50% 0, rgba(66,200,239,.18), transparent 58%),
    linear-gradient(180deg, #102b41, #050d18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,225,126,.08), 0 4px 8px rgba(0,0,0,.35) !important;
}

.reward-modal-card .reward-card:not(.reward-ad-reroll)::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(255,210,89,.16);
  clip-path: polygon(0 0, 16px 0, 0 16px, 0 100%, 100% 100%, 100% 0);
}

#menuAttendancePanel .attendance-board-shell {
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: min(690px, calc(100dvh - 92px)) !important;
  display: grid !important;
  grid-template-rows: 90px 46px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 42px 45px 50px !important;
  overflow: hidden !important;
  background: url("assets/generated/reward_attendance_v2_1790106000000/attendance-board-28.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.62)) !important;
}

#menuAttendancePanel .attendance-summary {
  margin: 0 !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  align-items: center !important;
  color: #e9f6ff !important;
  font-size: 11px !important;
}

#menuAttendancePanel .attendance-claim-button {
  width: 82% !important;
  min-height: 40px !important;
  justify-self: center !important;
  margin: 0 !important;
  border: 1px solid rgba(255,218,105,.54) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #315873, #112b40 62%, #07131f) !important;
  box-shadow: inset 0 0 0 1px rgba(105,226,255,.12), 0 0 10px rgba(48,187,231,.12) !important;
}

#menuAttendancePanel .attendance-grid {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#menuAttendancePanel .attendance-day {
  box-sizing: border-box !important;
  min-height: 0 !important;
  display: grid !important;
  place-content: center !important;
  gap: 3px !important;
  padding: 5px 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(3,12,22,.28) !important;
  box-shadow: inset 0 0 8px rgba(28,121,167,.08) !important;
}

#menuAttendancePanel .attendance-day b { font-size: 9px !important; }
#menuAttendancePanel .attendance-day span { margin: 0 !important; font-size: 7.5px !important; line-height: 1.15 !important; }
#menuAttendancePanel .attendance-day em { inset: auto 2px 2px !important; font-size: 7px !important; }
#menuAttendancePanel .attendance-day.today {
  background: radial-gradient(circle, rgba(255,218,92,.22), rgba(14,43,60,.3)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,220,104,.66), 0 0 10px rgba(255,207,67,.25) !important;
}

@media (max-height: 720px) {
  #menuAttendancePanel .attendance-board-shell {
    height: calc(100dvh - 78px) !important;
    grid-template-rows: 70px 38px minmax(0, 1fr) !important;
    padding: 34px 39px 40px !important;
  }
  #menuAttendancePanel .attendance-day span { font-size: 6.8px !important; }
}

#menuLoginPanel .login-choice > #googleLoginButton {
  color: #eaf6ff !important;
}

#menuLoginPanel .login-choice > #appleLoginButton {
  color: #fff !important;
  filter: brightness(.93) saturate(.72) !important;
}

#menuLoginPanel .login-choice > #guestLoginButton {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-small-primary.png") !important;
  color: #fff2bd !important;
}

.pull-reveal.sss-reveal {
  background:
    radial-gradient(circle at 50% 42%, rgba(36, 223, 255, 0.24), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(255, 197, 55, 0.18), transparent 62%),
    rgba(0, 4, 14, 0.94);
  animation: sssScreenFlash 720ms ease-out both;
}

.pull-reveal.sss-reveal .pull-reveal-card {
  filter:
    drop-shadow(0 0 12px rgba(255, 244, 176, 0.9))
    drop-shadow(0 0 28px rgba(34, 224, 255, 0.66));
  animation: sssRevealCard 680ms cubic-bezier(0.14, 0.86, 0.2, 1.15) both;
}

.pull-reveal.sss-reveal .rare-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255, 244, 168, 0.95);
  animation: sssShowcasePulse 1200ms ease-in-out infinite alternate;
}

.pull-reveal.sss-reveal .rare-showcase::before,
.pull-reveal.sss-reveal .rare-showcase::after {
  content: "";
  position: absolute;
  display: block;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
}

.pull-reveal.sss-reveal .rare-showcase::before {
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 246, 169, 0.36) 0 3deg, transparent 3deg 15deg);
  animation: sssRays 6500ms linear infinite;
}

.pull-reveal.sss-reveal .rare-showcase::after {
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 82% 18%, #7cf5ff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 74% 76%, #ffe277 0 1px, transparent 2px),
    radial-gradient(circle at 25% 82%, #e99cff 0 1.5px, transparent 2.5px);
  background-size: 43px 51px, 57px 47px, 39px 59px, 53px 41px;
  animation: sssStars 900ms steps(2, end) infinite alternate;
}

.pull-reveal.sss-reveal .rare-grade {
  color: #fff !important;
  font-size: 25px;
  letter-spacing: 0.08em;
  text-shadow: 0 0 5px #fff, 0 0 13px #45ecff, 0 0 23px #ffc846;
  animation: sssGradePop 900ms ease-in-out infinite alternate;
}

.pull-reveal.sss-reveal .rare-reveal-icon {
  width: 124px;
  height: 124px;
  filter:
    saturate(1.35)
    brightness(1.1)
    drop-shadow(0 7px 3px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 13px #66f4ff)
    drop-shadow(0 0 25px rgba(255, 208, 74, 0.88));
  animation: sssItemFloat 1150ms ease-in-out infinite alternate;
}

@keyframes sssScreenFlash {
  0% { opacity: 0; background-color: #fff8c7; }
  22% { opacity: 1; background-color: rgba(255, 244, 174, 0.48); }
  100% { opacity: 1; }
}

@keyframes sssRevealCard {
  0% { opacity: 0; transform: scale(0.72); }
  58% { opacity: 1; transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes sssShowcasePulse {
  from { box-shadow: inset 0 0 24px rgba(63, 232, 255, 0.25), 0 0 10px rgba(255, 226, 111, 0.42); }
  to { box-shadow: inset 0 0 42px rgba(255, 213, 82, 0.3), 0 0 22px rgba(60, 231, 255, 0.72); }
}

@keyframes sssRays { to { transform: rotate(360deg); } }
@keyframes sssStars { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes sssGradePop { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes sssItemFloat { from { transform: translateY(3px) scale(1); } to { transform: translateY(-5px) scale(1.045); } }

#capsulesPanel > .panel-head > :first-child {
  min-width: 0;
  flex: 1 1 auto;
}

#capsulesPanel > .panel-head > .button-row {
  flex: 0 0 auto;
}

/* Mobile reward, inventory art and combat readability pass 1788389000000. */
.fighter.enemy-fighter.defeated,
.enemy-fighter.enemy-king-bunny.defeated {
  transform: none !important;
}

.enemy-fighter.enemy-king-bunny.anim-dead img {
  transform: translateY(0) scale(1.03);
}

.enemy-fighter.enemy-boss.enemy-king-high.enemy-stage30-king {
  right: 0;
  bottom: 1px;
  width: 160px;
  height: 152px;
  overflow: visible;
}

.enemy-fighter.enemy-boss.enemy-king-high.enemy-stage30-king img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
}

.item-icon,
.inline-item-icon,
.tray-icon,
.item-info-icon,
.rare-reveal-icon,
.pull-item-icon,
.reward-icon,
.board-clear-supply-preview img,
.board-passive-choice img,
.skill-fx img {
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}

.placed-item {
  overflow: hidden;
}

.placed-item .item-icon,
.placed-item.item-art-badge .item-icon,
.placed-item.item-art-bow .item-icon,
.placed-item.item-art-guard .item-icon,
.placed-item.item-art-tall-shield .item-icon,
.placed-item.bonus-active .item-icon,
.placed-item.set-active .item-icon,
.placed-item[data-item-width][data-item-height] .item-icon {
  box-sizing: border-box;
  width: calc(100% - 6px) !important;
  height: calc(100% - 6px) !important;
  max-width: calc(100% - 6px) !important;
  max-height: calc(100% - 6px) !important;
  padding: 1px;
  transform: translate(-50%, -50%) !important;
  object-fit: contain;
  object-position: center;
}

.item-tile .item-icon,
.tray-item .tray-icon,
.inline-reveal-item .inline-item-icon {
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
}

.inline-reveal-item,
.inline-reveal-item:only-child {
  min-height: 46px;
  height: 46px;
}

.inline-item-icon {
  width: 32px;
  height: 32px;
  padding: 1px;
  border-radius: 6px;
}

.reward-modal-card,
.reward-panel.boss-reward .reward-modal-card {
  width: min(382px, calc(100vw - 10px));
  min-height: min(548px, calc(100dvh - 12px));
  max-height: calc(100dvh - 12px);
  padding: 68px 29px 36px;
  gap: 8px;
}

.reward-grid {
  align-content: start;
  gap: 7px;
  padding: 1px 2px 3px;
}

.reward-card,
.reward-panel.boss-reward .reward-card,
.reward-panel.boss-reward .reward-riskCoins,
.reward-panel.boss-reward .reward-riskPurge,
.reward-panel.boss-reward .reward-riskOverclock {
  box-sizing: border-box;
  min-height: 82px;
  padding: 9px 11px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
}

.reward-icon {
  width: 34px;
  height: 34px;
}

.reward-copy {
  min-width: 0;
  gap: 4px;
}

.reward-copy em {
  font-size: 9.5px;
}

.reward-copy strong {
  font-size: 12.5px;
  line-height: 1.2;
}

.reward-copy b,
.reward-panel.boss-reward .reward-copy b {
  max-width: 100%;
  font-size: 10.5px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.reward-ad-reroll,
.reward-panel .reward-ad-reroll,
.reward-panel.boss-reward .reward-ad-reroll {
  box-sizing: border-box;
  min-height: 56px;
  padding: 8px 15px;
  grid-template-columns: 31px minmax(0, 1fr);
  font-size: 10.5px;
  line-height: 1.22;
  white-space: normal;
}

.board-passive-choice-card {
  width: min(382px, calc(100vw - 10px));
  min-height: min(620px, calc(100dvh - 12px));
  max-height: calc(100dvh - 12px);
  padding: 68px 28px 34px;
  gap: 8px;
}

.board-clear-supply-preview,
.board-passive-choice,
.unlock-showcase.board-clear .unlock-card p {
  border-image: none;
}

.board-clear-supply-preview {
  box-sizing: border-box;
  min-height: 82px;
  padding: 9px 11px;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  border: 1px solid rgba(255, 218, 112, 0.74);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 218, 112, 0.2), transparent 38%),
    linear-gradient(145deg, rgba(71, 51, 20, 0.96), rgba(13, 25, 33, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 240, 170, 0.08);
}

.board-clear-supply-preview::before,
.board-clear-supply-preview::after,
.board-passive-choice::before,
.board-passive-choice::after {
  display: none !important;
}

.board-clear-supply-preview img {
  width: 44px;
  height: 44px;
}

.board-clear-supply-preview > span {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.board-clear-supply-preview b,
.board-passive-choice b {
  width: fit-content;
  padding: 2px 5px;
  border-radius: 999px;
  font-style: normal;
  font-size: 8px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -0.02em;
}

.board-clear-supply-preview b {
  color: #261b08;
  background: #ffe493;
}

.board-clear-supply-preview strong {
  font-size: 13px;
  line-height: 1.15;
}

.board-clear-supply-preview small {
  color: #f2dfab;
  font-size: 9px;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.board-passive-choice-list {
  gap: 7px;
  padding: 1px 2px 3px;
}

.board-passive-choice {
  box-sizing: border-box;
  min-height: 82px;
  padding: 9px 11px;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 9px;
  border: 1px solid rgba(117, 210, 239, 0.5);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 20%, rgba(90, 199, 229, 0.15), transparent 40%),
    linear-gradient(145deg, rgba(7, 31, 48, 0.98), rgba(5, 14, 25, 0.98));
  box-shadow: inset 0 0 0 1px rgba(202, 242, 255, 0.05);
}

.board-passive-choice img {
  width: 42px;
  height: 42px;
}

.board-passive-choice > span {
  min-width: 0;
  gap: 3px;
}

.board-passive-choice b {
  color: #06202c;
  background: #9edff3;
}

.board-passive-choice strong {
  font-size: 12.5px;
  line-height: 1.15;
}

.board-passive-choice small,
.board-passive-choice em {
  font-size: 9.5px;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.unlock-showcase.board-clear .unlock-card {
  width: min(372px, calc(100vw - 12px));
  min-height: min(500px, calc(100dvh - 14px));
  max-height: calc(100dvh - 14px);
  padding: 66px 30px 36px;
  grid-template-rows: 70px auto auto minmax(112px, 1fr) 42px;
  gap: 7px;
}

.unlock-showcase.board-clear .unlock-card p {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 14px;
  overflow-y: auto;
  border: 1px solid rgba(117, 210, 239, 0.42);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(7, 31, 48, 0.96), rgba(5, 14, 25, 0.98));
  color: #dcecf5;
  font-size: 11px;
  line-height: 1.48;
  text-align: center;
  white-space: pre-line;
}

.end-actions .mini-button,
.end-actions #endShardBonusButton,
.end-actions #endRestartButton,
.end-actions #endHomeButton,
.end-actions #endStoneReviveButton {
  min-height: 43px;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.18;
  white-space: normal;
}

.skill-fx.skill-flare {
  --skill-main: #ffb15c;
  --skill-glow: rgba(255, 76, 38, 0.72);
}

.skill-fx.skill-flare::before {
  border-radius: 50% 18% 52% 22%;
  transform: rotate(45deg);
}

.skill-fx.skill-curse {
  --skill-main: #dc82ff;
  --skill-glow: rgba(102, 35, 146, 0.78);
}

.skill-fx.skill-curse::before {
  border-style: dashed;
  box-shadow: 0 0 22px var(--skill-glow), inset 0 0 24px rgba(30, 3, 46, 0.9);
}

.skill-fx.skill-frost {
  --skill-main: #bdf8ff;
  --skill-glow: rgba(65, 189, 255, 0.72);
}

.skill-fx.skill-frost::before {
  inset: 17px 25px;
  border-radius: 3px;
  transform: rotate(45deg);
}

.skill-fx.skill-venom {
  --skill-main: #a8ff78;
  --skill-glow: rgba(63, 197, 74, 0.72);
}

.skill-fx.skill-venom::before {
  border-radius: 64% 38% 58% 42%;
  border-style: dotted;
}

.skill-fx.skill-storm {
  --skill-main: #fff277;
  --skill-glow: rgba(70, 170, 255, 0.75);
}

.skill-fx.skill-storm::before {
  inset: 7px 29px 11px 34px;
  border: 0;
  border-radius: 0;
  background: var(--skill-main);
  clip-path: polygon(52% 0, 100% 0, 66% 38%, 94% 38%, 22% 100%, 43% 56%, 13% 56%);
  box-shadow: none;
  filter: drop-shadow(0 0 10px var(--skill-glow));
}

.skill-fx.skill-shatter {
  --skill-main: #ffc477;
  --skill-glow: rgba(222, 108, 42, 0.68);
}

.skill-fx.skill-shatter::before {
  inset: 12px;
  border-radius: 3px;
  clip-path: polygon(0 20%, 38% 0, 49% 34%, 76% 4%, 100% 44%, 67% 58%, 90% 100%, 48% 76%, 10% 100%, 26% 56%);
}

.skill-fx.skill-abyss {
  --skill-main: #b69cff;
  --skill-glow: rgba(55, 12, 104, 0.88);
}

.skill-fx.skill-abyss::before {
  inset: 8px;
  border: 3px solid var(--skill-main);
  border-left-color: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 26px var(--skill-glow), inset 0 0 30px rgba(2, 0, 8, 0.94);
}

@media (max-width: 370px), (max-height: 700px) {
  .reward-modal-card,
  .reward-panel.boss-reward .reward-modal-card,
  .board-passive-choice-card {
    width: min(362px, calc(100vw - 8px));
    padding: 61px 24px 31px;
  }

  .reward-card,
  .reward-panel.boss-reward .reward-card,
  .board-passive-choice {
    min-height: 76px;
  }
}

/* Lobby tool identity and codex readability pass 1785376800000. */
#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton) {
  --tool-accent: #76dfff;
  --tool-glow: rgba(70, 190, 235, 0.28);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tool-accent) 64%, #101a2b);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 26%, var(--tool-glow), transparent 50%),
    linear-gradient(180deg, rgba(19, 48, 72, 0.98), rgba(4, 14, 27, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.42),
    inset 0 0 0 3px rgba(3, 11, 22, 0.72),
    0 5px 9px rgba(0, 0, 0, 0.38);
  filter: drop-shadow(0 0 5px var(--tool-glow));
}

#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--tool-accent) 24%, transparent);
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent, var(--tool-accent), transparent) top / 72% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 215, 111, 0.58), transparent) bottom / 58% 1px no-repeat;
  opacity: 0.78;
}

#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton)::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 4px;
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  border: 1px solid var(--tool-accent);
  background: rgba(5, 17, 30, 0.9);
  box-shadow: 0 0 5px var(--tool-accent);
}

#lobbyGrowthButton {
  --tool-accent: #7ef0bd !important;
  --tool-glow: rgba(64, 226, 163, 0.27) !important;
}

#lobbyRecipeButton {
  --tool-accent: #c6a2ff !important;
  --tool-glow: rgba(163, 105, 244, 0.29) !important;
}

#lobbyElementButton {
  --tool-accent: #ffca72 !important;
  --tool-glow: rgba(255, 159, 64, 0.27) !important;
}

#lobbyCodexButton {
  --tool-accent: #77d9ff !important;
  --tool-glow: rgba(48, 174, 240, 0.3) !important;
}

#lobbyRankingButton {
  --tool-accent: #ffe28b !important;
  --tool-glow: rgba(255, 209, 76, 0.27) !important;
}

#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton) img {
  width: 34px;
  height: 34px;
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 7px var(--tool-accent));
}

#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton) strong {
  color: #fff6d0;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.96),
    0 0 5px var(--tool-glow);
}

#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton):active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(1.13) drop-shadow(0 0 7px var(--tool-glow));
}

#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton):focus-visible {
  outline: 2px solid var(--tool-accent);
  outline-offset: 1px;
}

#menuCodexPanel .codex-row.item:not(.locked) {
  min-height: 66px;
  grid-template-columns: 48px minmax(0, 1fr) 22px;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease;
}

#menuCodexPanel .codex-row.item:not(.locked):active {
  transform: scale(0.985);
  border-color: rgba(115, 220, 255, 0.7);
  background:
    radial-gradient(circle at 12% 50%, rgba(65, 191, 238, 0.24), transparent 34%),
    linear-gradient(90deg, rgba(10, 52, 75, 0.99), rgba(4, 17, 30, 0.96));
}

#menuCodexPanel .codex-row.item:not(.locked) > img {
  width: 46px;
  height: 46px;
}

#menuCodexPanel .codex-row.item:not(.locked) > div > strong {
  font-size: 13.5px;
}

#menuCodexPanel .codex-row.item:not(.locked) > div > span {
  font-size: 10px;
}

#menuCodexPanel .codex-row .codex-row-open {
  width: 20px;
  height: 32px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(105, 208, 246, 0.34);
  border-radius: 10px;
  color: #b7efff;
  background: linear-gradient(180deg, rgba(28, 93, 121, 0.76), rgba(7, 31, 47, 0.84));
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 8px rgba(50, 190, 240, 0.12);
}

#menuCodexPanel .codex-row.boss.found {
  min-height: 154px;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 10px;
  cursor: pointer;
  touch-action: manipulation;
}

#menuCodexPanel .codex-row.boss.found > img {
  width: 64px;
  height: 64px;
  padding: 4px;
}

#menuCodexPanel .codex-row.boss.found:active {
  transform: scale(0.988);
  border-color: rgba(119, 220, 255, 0.68);
}

#menuCodexPanel .codex-row.boss.found .codex-boss-copy {
  gap: 7px;
}

#menuCodexPanel .codex-row.boss.found .codex-boss-name {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px;
  align-items: center;
  gap: 7px;
}

#menuCodexPanel .codex-row.boss.found .codex-boss-name > strong {
  font-size: 14.5px;
}

#menuCodexPanel .codex-row.boss.found .codex-boss-badges {
  width: 60px;
  justify-content: center;
}

#menuCodexPanel .codex-row.boss.found .codex-element-badge {
  box-sizing: border-box;
  width: 54px;
  min-height: 22px;
  display: grid;
  place-items: center;
  padding: 4px 3px;
  font-size: 8.5px;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 8px rgba(69, 188, 233, 0.1);
}

#menuCodexPanel .codex-row.boss.found .codex-boss-counters > span {
  min-height: 22px;
  padding: 5px 6px;
}

#menuCodexPanel .codex-row.boss.found .codex-boss-counters small {
  font-size: 7.8px;
}

#menuCodexPanel .codex-row.boss.found .codex-boss-counters b {
  font-size: 8.6px;
}

#menuCodexPanel .codex-row.boss.found .codex-boss-abilities > span {
  grid-template-columns: 40px minmax(0, 0.7fr) minmax(0, 1fr);
  min-height: 25px;
  padding: 5px 6px;
}

#menuCodexPanel .codex-row.boss.found .codex-boss-abilities small {
  font-size: 7.5px;
}

#menuCodexPanel .codex-row.boss.found .codex-boss-abilities b {
  font-size: 8.4px;
}

#menuCodexPanel .codex-row.boss.found .codex-boss-abilities em {
  font-size: 7.5px;
}

/* Unlock clarity, store wallet redraw, and analysis-window skin 1785379200000. */
.menu-unlock-list {
  position: relative;
}

.unlock-overview {
  min-height: 0;
  display: grid;
  gap: 7px;
}

.unlock-overview.detail-open {
  visibility: hidden;
}

.main-menu[data-panel="recipes"]:has(.unlock-item-detail:not([hidden])) .menu-title {
  display: none;
}

.unlock-group {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px;
}

.menu-unlock-guide {
  margin: 0;
  padding: 6px 8px;
  border-left: 2px solid rgba(91, 204, 244, 0.56);
  color: #a9cada;
  background: rgba(4, 24, 38, 0.72);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.35;
}

.unlock-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.unlock-pill,
button.unlock-pill {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 13px;
  align-items: center;
  gap: 5px;
  padding: 4px 5px;
  border: 1px solid rgba(87, 183, 222, 0.24);
  border-radius: 6px;
  appearance: none;
  color: #eef9ff;
  background:
    radial-gradient(circle at 17px 50%, rgba(75, 187, 231, 0.13), transparent 29px),
    linear-gradient(180deg, rgba(12, 47, 67, 0.94), rgba(4, 20, 33, 0.98));
  font: inherit;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 2px 0 0 rgba(74, 190, 234, 0.32);
}

button.unlock-pill.discovered {
  cursor: pointer;
  touch-action: manipulation;
}

button.unlock-pill.discovered:active {
  transform: scale(0.985);
  border-color: rgba(116, 219, 255, 0.68);
  filter: brightness(1.12);
}

button.unlock-pill.discovered:focus-visible {
  outline: 2px solid #85e4ff;
  outline-offset: 1px;
}

.unlock-pill-icon {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 219, 120, 0.32);
  border-radius: 5px;
  background:
    radial-gradient(circle, rgba(88, 198, 238, 0.18), transparent 66%),
    rgba(1, 10, 18, 0.84);
}

.unlock-pill-icon img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 5px rgba(99, 212, 251, 0.25))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72));
}

.unlock-pill-icon.locked-mark {
  opacity: 0.48;
  border-color: rgba(120, 147, 164, 0.25);
  filter: grayscale(1);
}

.unlock-pill-icon.locked-mark i {
  width: 13px;
  height: 16px;
  border: 1px solid #7f98a6;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 58%, #a8bdc8 0 1px, transparent 2px),
    rgba(22, 39, 49, 0.86);
  box-shadow: inset 0 0 0 2px rgba(2, 11, 17, 0.5);
}

.unlock-pill-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.unlock-pill-copy b {
  color: #fff0b1;
  font-size: 8.5px;
  letter-spacing: -0.03em;
}

.unlock-pill-copy small {
  color: #8ed3eb;
  font-size: 7.5px;
}

.unlock-pill.locked {
  color: #a9b9c2;
  background:
    radial-gradient(circle at 17px 50%, rgba(84, 108, 123, 0.08), transparent 28px),
    linear-gradient(180deg, rgba(16, 31, 42, 0.84), rgba(5, 15, 23, 0.94));
  border-color: rgba(100, 131, 147, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    inset 2px 0 0 rgba(92, 119, 133, 0.16);
  opacity: 0.72;
}

.unlock-pill.locked .unlock-pill-copy b {
  color: #b9c7ce;
}

.unlock-pill.locked .unlock-pill-copy small {
  color: #778e9a;
}

.unlock-pill-open {
  color: #8ee8ff;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 6px rgba(88, 213, 255, 0.42);
}

#menuStorePanel .store-inventory > div {
  --wallet-accent: #6fdcff;
  --wallet-glow: rgba(73, 190, 232, 0.24);
  height: 58px;
  min-height: 58px;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: 23px 23px;
  column-gap: 5px;
  padding: 6px 7px 6px 5px;
  border: 1px solid var(--wallet-accent);
  border-radius: 0;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  background:
    linear-gradient(90deg, transparent, var(--wallet-accent), transparent) top / 68% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 214, 105, 0.52), transparent) bottom / 48% 1px no-repeat,
    radial-gradient(circle at 20px 50%, var(--wallet-glow), transparent 31px),
    linear-gradient(145deg, rgba(17, 53, 74, 0.99), rgba(3, 16, 28, 0.995) 64%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px var(--wallet-glow);
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.42));
}

#menuStorePanel .store-inventory > div:nth-child(1) {
  --wallet-accent: #e6bd56;
  --wallet-glow: rgba(239, 185, 58, 0.24);
}

#menuStorePanel .store-inventory > div:nth-child(2) {
  --wallet-accent: #b888ff;
  --wallet-glow: rgba(151, 82, 240, 0.26);
}

#menuStorePanel .store-inventory > div:nth-child(3) {
  --wallet-accent: #70d8ff;
  --wallet-glow: rgba(56, 145, 240, 0.25);
}

#menuStorePanel .store-inventory > div::before {
  left: 8px;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%) rotate(45deg);
  border: 1px solid var(--wallet-accent);
  border-radius: 4px;
  background:
    radial-gradient(circle, var(--wallet-glow), transparent 64%),
    linear-gradient(135deg, rgba(15, 43, 62, 0.98), rgba(1, 10, 19, 0.98));
  box-shadow:
    inset 0 0 0 3px rgba(3, 14, 24, 0.72),
    0 0 8px var(--wallet-glow);
}

#menuStorePanel .store-inventory > div:nth-child(2)::before,
#menuStorePanel .store-inventory > div:nth-child(3)::before {
  border-color: var(--wallet-accent);
  background:
    radial-gradient(circle, var(--wallet-glow), transparent 64%),
    linear-gradient(135deg, rgba(15, 43, 62, 0.98), rgba(1, 10, 19, 0.98));
}

#menuStorePanel .store-inventory > div::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 5px;
  top: 5px;
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  border: 1px solid var(--wallet-accent);
  background: #071421;
  box-shadow: 0 0 5px var(--wallet-accent);
}

#menuStorePanel .store-inventory img {
  width: 27px;
  height: 27px;
  filter:
    drop-shadow(0 0 6px var(--wallet-accent))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.76));
}

#menuStorePanel .store-inventory span {
  color: #d9f2ff;
  font-size: 8.8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

#menuStorePanel .store-inventory strong {
  color: #fff0a6;
  font-size: 14px;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.92),
    0 0 5px var(--wallet-glow);
}

.codex-item-detail {
  --analysis-accent: #55d7ff;
  --analysis-gold: #e9bf5c;
  border: 1px solid rgba(103, 218, 255, 0.7);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% -8%, rgba(65, 198, 244, 0.28), transparent 34%),
    radial-gradient(circle at 4% 52%, rgba(222, 176, 67, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(21, 55, 75, 0.16) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #071d2c 0%, #020811 100%);
  box-shadow:
    0 0 0 999px rgba(0, 3, 9, 0.9),
    inset 0 0 0 3px rgba(2, 10, 18, 0.88),
    inset 0 0 0 4px rgba(232, 190, 86, 0.14),
    inset 0 0 38px rgba(25, 151, 203, 0.13),
    0 0 22px rgba(39, 181, 233, 0.18),
    0 18px 42px rgba(0, 0, 0, 0.76);
}

.codex-item-detail::before {
  inset: 6px;
  border: 1px solid rgba(94, 201, 240, 0.26);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent, var(--analysis-gold), transparent) top / 58% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--analysis-accent), transparent) bottom / 72% 1px no-repeat,
    linear-gradient(135deg, rgba(233, 190, 85, 0.68) 0 2px, transparent 2px) top left / 16px 16px no-repeat,
    linear-gradient(225deg, rgba(233, 190, 85, 0.68) 0 2px, transparent 2px) top right / 16px 16px no-repeat,
    linear-gradient(45deg, rgba(82, 208, 248, 0.52) 0 2px, transparent 2px) bottom left / 16px 16px no-repeat,
    linear-gradient(315deg, rgba(82, 208, 248, 0.52) 0 2px, transparent 2px) bottom right / 16px 16px no-repeat;
}

.codex-item-detail::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 5px;
  width: 9px;
  height: 9px;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--analysis-gold);
  background: radial-gradient(circle, #67dcff, #0c3650 66%);
  box-shadow:
    0 0 0 2px rgba(4, 15, 25, 0.9),
    0 0 10px rgba(82, 208, 248, 0.58);
}

.codex-detail-titlebar {
  min-height: 45px;
  padding: 4px 7px 6px 14px;
  border: 1px solid rgba(101, 211, 249, 0.42);
  border-radius: 0;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  background:
    radial-gradient(circle at 50% 0, rgba(75, 211, 255, 0.27), transparent 58%),
    linear-gradient(180deg, rgba(18, 67, 91, 0.99), rgba(4, 22, 36, 0.995));
  box-shadow:
    inset 0 1px 0 rgba(255, 234, 161, 0.14),
    inset 0 -2px 0 rgba(43, 174, 220, 0.22);
}

.codex-detail-titlebar > span {
  padding: 3px 6px;
  border-left: 2px solid rgba(95, 215, 255, 0.62);
  color: #a6e7fb;
  background: rgba(3, 23, 36, 0.54);
  font-size: 8.5px;
}

.codex-detail-titlebar > strong {
  color: #fff1ac;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.92),
    0 0 8px rgba(239, 194, 83, 0.2);
}

.codex-detail-close {
  width: 59px;
  height: 31px;
  border: 1px solid rgba(107, 211, 248, 0.46);
  border-radius: 0;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  background:
    linear-gradient(180deg, rgba(30, 88, 116, 0.98), rgba(5, 25, 40, 0.99));
  color: #dff7ff;
  font-size: 9.5px;
  font-weight: 1000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.38);
}

.codex-detail-close:active {
  transform: translateY(1px);
  filter: brightness(1.14);
}

.codex-detail-scroll {
  gap: 9px;
  padding: 9px 5px 7px;
  scrollbar-color: #4ac8ef rgba(0, 0, 0, 0.26);
}

.codex-detail-hero {
  position: relative;
  overflow: hidden;
  min-height: 124px;
  border: 1px solid rgba(99, 205, 244, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent, rgba(233, 191, 86, 0.56), transparent) bottom / 66% 1px no-repeat,
    radial-gradient(circle at 18% 50%, rgba(91, 212, 253, 0.24), transparent 38%),
    radial-gradient(circle at 87% 22%, rgba(232, 187, 82, 0.1), transparent 28%),
    linear-gradient(120deg, rgba(6, 35, 52, 0.99), rgba(3, 16, 29, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 182, 0.1),
    inset 0 0 24px rgba(45, 171, 218, 0.1);
}

.codex-detail-hero.rarity-SSS {
  border-color: rgba(255, 211, 94, 0.58);
  background:
    linear-gradient(90deg, transparent, #f3c95d, transparent) bottom / 72% 1px no-repeat,
    radial-gradient(circle at 18% 50%, rgba(255, 207, 79, 0.25), transparent 38%),
    radial-gradient(circle at 87% 18%, rgba(172, 92, 245, 0.15), transparent 31%),
    linear-gradient(120deg, rgba(45, 37, 16, 0.97), rgba(10, 17, 30, 0.99));
}

.codex-detail-hero.rarity-SS {
  border-color: rgba(205, 126, 255, 0.55);
  background:
    linear-gradient(90deg, transparent, #c982ff, transparent) bottom / 72% 1px no-repeat,
    radial-gradient(circle at 18% 50%, rgba(182, 91, 244, 0.24), transparent 38%),
    linear-gradient(120deg, rgba(37, 21, 55, 0.98), rgba(7, 18, 32, 0.99));
}

.codex-boss-hero.element-dark {
  border-color: rgba(179, 116, 255, 0.52);
  background:
    linear-gradient(90deg, transparent, #b87bff, transparent) bottom / 72% 1px no-repeat,
    radial-gradient(circle at 18% 50%, rgba(151, 73, 235, 0.25), transparent 40%),
    radial-gradient(circle at 86% 20%, rgba(71, 187, 236, 0.13), transparent 28%),
    linear-gradient(120deg, rgba(31, 17, 50, 0.99), rgba(4, 17, 30, 0.99));
}

.codex-detail-art {
  border: 1px solid rgba(255, 221, 118, 0.5);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 223, 126, 0.12), transparent 32%),
    radial-gradient(circle, rgba(88, 208, 250, 0.23), transparent 66%),
    rgba(1, 9, 17, 0.88);
  box-shadow:
    inset 0 0 0 3px rgba(4, 17, 27, 0.74),
    inset 0 0 20px rgba(61, 190, 237, 0.15),
    0 0 10px rgba(236, 193, 78, 0.1),
    0 7px 12px rgba(0, 0, 0, 0.42);
}

.codex-detail-art b {
  border-color: rgba(255, 219, 105, 0.58);
  color: #fff0a0;
  background: linear-gradient(180deg, rgba(46, 56, 57, 0.96), rgba(8, 20, 29, 0.98));
  box-shadow: 0 0 7px rgba(238, 193, 78, 0.18);
}

.codex-detail-identity > small {
  color: #91e1f8;
  font-size: 9.5px;
}

.codex-detail-identity > strong {
  color: #fff0aa;
  font-size: 22px;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.94),
    0 0 8px rgba(232, 188, 79, 0.16);
}

.codex-detail-identity > div span {
  border-color: rgba(101, 207, 245, 0.3);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(15, 59, 80, 0.82), rgba(4, 24, 37, 0.9));
  color: #d3edf7;
  font-size: 9px;
}

.codex-detail-section {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(86, 187, 225, 0.3);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 0, rgba(64, 175, 218, 0.09), transparent 46%),
    linear-gradient(180deg, rgba(5, 28, 43, 0.94), rgba(2, 13, 23, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 177, 0.06),
    inset 0 0 20px rgba(30, 130, 174, 0.07);
}

.codex-detail-section::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 192, 81, 0.72), transparent);
}

.codex-detail-section-head {
  border-bottom: 1px solid rgba(100, 202, 239, 0.2);
}

.codex-detail-section-head > span {
  color: #fff0a9;
  font-size: 11.5px;
}

.codex-detail-section-head > small {
  color: #87d9f1;
  font-size: 8.5px;
}

.codex-detail-stat {
  min-height: 54px;
  border: 1px solid rgba(92, 194, 231, 0.31);
  border-radius: 0;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  background:
    radial-gradient(circle at 50% 0, rgba(72, 192, 233, 0.13), transparent 52%),
    linear-gradient(180deg, rgba(18, 66, 89, 0.84), rgba(3, 20, 33, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.codex-detail-stat strong {
  color: #fff0a0;
  font-size: 15.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92);
}

.codex-detail-ability {
  border: 1px solid rgba(89, 191, 228, 0.22);
  border-left: 3px solid rgba(83, 205, 246, 0.68);
  border-radius: 7px;
  background:
    radial-gradient(circle at 30px 50%, rgba(68, 189, 230, 0.14), transparent 50px),
    linear-gradient(90deg, rgba(12, 55, 76, 0.82), rgba(4, 21, 34, 0.88));
}

.codex-detail-ability > img {
  border-color: rgba(255, 217, 103, 0.4);
  background:
    radial-gradient(circle, rgba(92, 205, 245, 0.17), transparent 68%),
    rgba(0, 8, 15, 0.74);
}

.codex-detail-ability strong {
  color: #b4eeff;
  font-size: 10.5px;
}

.codex-detail-ability p {
  color: #deedf3;
  font-size: 9.2px;
}

.codex-detail-traits > span {
  border-color: rgba(87, 174, 208, 0.23);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(10, 42, 59, 0.84), rgba(3, 18, 29, 0.9));
}

.codex-detail-relations > div {
  border-color: rgba(91, 200, 235, 0.33);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, rgba(68, 197, 237, 0.13), transparent 54%),
    linear-gradient(135deg, rgba(10, 54, 74, 0.94), rgba(3, 18, 29, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.codex-detail-relations > div.recipe {
  border-color: rgba(239, 194, 83, 0.43);
  background:
    radial-gradient(circle at 0 0, rgba(230, 177, 58, 0.15), transparent 54%),
    linear-gradient(135deg, rgba(61, 46, 15, 0.92), rgba(20, 17, 8, 0.98));
}

.codex-detail-unlock {
  border: 1px solid rgba(95, 203, 240, 0.3);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(9, 47, 66, 0.9), rgba(3, 19, 31, 0.96));
  box-shadow:
    inset 3px 0 0 rgba(232, 188, 77, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.codex-detail-unlock span {
  color: #89ddf5;
  font-size: 8.5px;
}

.codex-detail-unlock strong {
  color: #f2f8fb;
  font-size: 9px;
}

.codex-boss-detail-skills > div {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(91, 187, 224, 0.29);
  border-left: 3px solid rgba(184, 116, 255, 0.68);
  border-radius: 7px;
  background:
    radial-gradient(circle at 0 50%, rgba(151, 76, 231, 0.14), transparent 42%),
    linear-gradient(90deg, rgba(17, 57, 79, 0.88), rgba(3, 19, 31, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.codex-boss-detail-skills > div > span {
  color: #e2c8ff;
  background: rgba(61, 35, 83, 0.72);
}

.codex-boss-detail-skills > div > strong {
  color: #fff0ad;
}

@media (max-width: 370px), (max-height: 700px) {
  .unlock-row {
    grid-template-columns: 1fr;
  }

  .unlock-pill,
  button.unlock-pill {
    min-height: 38px;
  }

  #menuStorePanel .store-inventory > div {
    height: 52px;
    min-height: 52px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding-left: 4px;
  }

  #menuStorePanel .store-inventory > div::before {
    left: 7px;
    width: 29px;
    height: 29px;
  }

  #menuStorePanel .store-inventory img {
    width: 24px;
    height: 24px;
  }

  .codex-item-detail {
    padding: 9px;
  }

  .codex-detail-titlebar {
    grid-template-columns: auto minmax(0, 1fr) 55px;
    padding-left: 10px;
  }

  .codex-detail-titlebar > strong {
    font-size: 15.5px;
  }

  .codex-detail-close {
    width: 53px;
  }

  .codex-detail-hero {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 9px;
    padding: 9px 10px;
  }

  .codex-detail-art {
    width: 88px;
    height: 88px;
  }

  .codex-detail-art img {
    width: 72px;
    height: 72px;
  }
}

/* Unified codex, reward, store and pull surfaces 1788560000000. */
#menuCodexPanel.active {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 7px;
  overflow: hidden;
}

#menuCodexPanel .menu-feature-box {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  padding: 11px 13px;
  border: 0;
  border-radius: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png")
    center / 100% 100% no-repeat;
  overflow: hidden;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.38);
  filter: none;
}

#menuCodexPanel .menu-feature-box:first-of-type {
  max-height: 176px;
}

#menuCodexPanel .menu-feature-head {
  min-height: 26px;
  padding: 1px 5px;
}

#menuCodexPanel .menu-feature-head span {
  color: #d9edfa;
  font-size: 12px;
}

#menuCodexPanel .menu-feature-head strong {
  color: #ffe08d;
  font-size: 12px;
}

#menuCodexPanel .menu-feature-body.open {
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 0 2px 0 0;
}

#menuCodexPanel #bossCodexBody.open {
  max-height: 119px;
  overflow-y: auto;
}

#itemCodexBody.open {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

#itemCodexBody .codex-item-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

#menuCodexPanel button.codex-row {
  min-height: 48px;
  padding: 7px 9px;
  border-color: rgba(100, 187, 228, 0.3);
  border-radius: 4px;
  background: rgba(4, 17, 30, 0.92);
}

#menuCodexPanel .codex-row strong {
  font-size: 12px;
}

#menuCodexPanel .codex-row span {
  font-size: 9.5px;
}

.codex-item-detail {
  position: fixed;
  z-index: 2850;
  left: 50%;
  top: max(16px, env(safe-area-inset-top));
  width: min(360px, calc(100vw - 20px));
  max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  gap: 10px;
  padding: 54px 36px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-50%);
  border: 0;
  border-radius: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png")
    center / 100% 100% no-repeat;
  box-shadow:
    0 0 0 999px rgba(0, 4, 10, 0.84),
    0 18px 42px rgba(0, 0, 0, 0.66);
  filter: none;
}

.codex-detail-close {
  top: 21px;
  right: 27px;
  width: 58px;
  height: 29px;
  padding: 0 0 2px;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png")
    center / 100% 100% no-repeat;
  color: #dceeff;
  font-size: 10px;
  text-shadow: 0 1px 2px #000;
}

.codex-detail-head {
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  min-height: 76px;
  padding: 7px 8px;
  border: 1px solid rgba(98, 190, 232, 0.27);
  background: rgba(4, 17, 30, 0.86);
}

.codex-detail-head > img {
  width: 68px;
  height: 68px;
}

.codex-detail-head small,
.codex-detail-head span,
.codex-detail-unlock {
  font-size: 10px;
  line-height: 1.35;
}

.codex-detail-head strong {
  font-size: 18px;
}

.codex-item-detail > p {
  padding: 8px 9px;
  border: 1px solid rgba(105, 176, 210, 0.2);
  background: rgba(3, 14, 25, 0.72);
  font-size: 11px;
  line-height: 1.5;
}

.unlock-showcase.reward-result .unlock-card {
  width: min(360px, calc(100vw - 20px));
  min-height: 322px;
  grid-template-rows: 78px auto auto 40px;
  gap: 7px;
  padding: 48px 38px 38px;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png")
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.68));
}

.unlock-showcase.reward-result .unlock-icon {
  box-sizing: border-box;
  width: 76px;
  height: 76px;
  padding: 9px;
  border: 1px solid rgba(111, 209, 250, 0.46);
  background: rgba(5, 19, 32, 0.92);
  filter:
    drop-shadow(0 0 10px rgba(93, 207, 255, 0.26))
    drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5));
}

.unlock-showcase.reward-result .unlock-card .label {
  color: #8ee9ff;
  font-size: 11px;
}

.unlock-showcase.reward-result .unlock-card strong {
  color: #fff0b3;
  font-size: 20px;
}

.unlock-showcase.reward-result .unlock-card p {
  max-width: 278px;
  max-height: 94px;
  color: #e1edf6;
  font-size: 12px;
  line-height: 1.45;
}

.unlock-showcase.reward-result .unlock-confirm-button {
  min-width: 164px;
  min-height: 40px;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png")
    center / 100% 100% no-repeat;
}

.menu-store-panel.active {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 7px;
}

.store-product-list {
  grid-auto-rows: minmax(108px, auto);
  gap: 6px;
}

.store-product-card {
  height: auto;
  min-height: 108px;
  grid-template-columns: 48px minmax(0, 1fr) 72px;
  gap: 8px;
  padding: 12px 18px;
}

.store-product-icon {
  width: 45px;
  height: 45px;
}

.store-product-copy {
  gap: 4px;
}

.store-product-badge {
  font-size: 9px;
}

.store-product-title strong {
  font-size: 13.5px;
  line-height: 1.16;
}

.store-product-title small {
  font-size: 10px;
  line-height: 1.22;
}

.store-product-contents {
  gap: 3px 7px;
}

.store-product-contents span {
  font-size: 9.5px;
  line-height: 1.2;
}

.store-product-contents img {
  width: 15px;
  height: 15px;
}

.store-buy-button {
  min-height: 43px;
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
}

.store-buy-button b {
  color: #ffe27c;
  font-size: 11px;
  line-height: 1.05;
}

.store-buy-button small {
  color: #aee7f4;
  font-size: 7.5px;
  line-height: 1;
}

.store-notice {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-hint.png")
    center / 100% 100% no-repeat;
  color: #d5e9f5;
  font-size: 9.5px;
}

.pull-inline-panel.active {
  min-height: 96px;
  max-height: 148px;
}

.pull-inline-list {
  max-height: 94px;
  grid-auto-rows: 44px;
}

.inline-reveal-item,
.inline-reveal-item:only-child {
  min-height: 44px;
  height: 44px;
  grid-template-columns: minmax(0, 1fr) 46px;
  padding: 4px 5px;
  background: rgba(5, 18, 31, 0.94);
}

.inline-reveal-main strong {
  font-size: 10.5px;
}

.inline-reveal-item .reveal-card-actions,
.inline-reveal-item .reveal-card-actions .mini-button {
  width: 46px;
}

.inline-reveal-item .reveal-card-actions .mini-button {
  height: 31px;
}

/* Stage-45 lobby kings share a 43px transparent foot margin in 220px frames. */
.lobby-deep-cast img {
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.86))
    drop-shadow(0 6px 5px rgba(0, 0, 0, 0.64));
}

@keyframes lobby-cast-float {
  0%, 100% { transform: translateY(24px) scale(1.68); }
  50% { transform: translateY(22px) scale(1.68); }
}

/* Resume safety, in-run settings, result empty state, and deep-lobby alignment 1788742800000. */

.result-best-item.empty strong {
  color: #fff0b4;
  font-size: 14px;
}

.result-best-item.empty em {
  color: #b9ddec;
  font-size: 9.5px;
  line-height: 1.3;
}

.menu-game-home-box {
  display: grid;
  gap: 4px;
  padding: 11px 15px 10px;
  border: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png")
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.34));
}

.menu-tutorial-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(80, 172, 218, 0.48);
  border-radius: 10px;
  background:
    radial-gradient(circle at 0 0, rgba(62, 170, 224, 0.15), transparent 46%),
    linear-gradient(180deg, rgba(8, 34, 54, 0.96), rgba(3, 16, 28, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(143, 219, 255, 0.06),
    0 5px 12px rgba(0, 0, 0, 0.25);
}

.menu-tutorial-box > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.menu-tutorial-box strong {
  color: #ffe8a4;
  font-size: 11px;
}

.menu-tutorial-box small {
  color: #a9cfdf;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.3;
}

.menu-tutorial-box .menu-small-button {
  min-width: 66px;
  min-height: 32px;
}

.menu-tutorial-box .menu-small-button.active {
  color: #a8f5cf;
  border-color: rgba(105, 233, 178, 0.72);
  background: linear-gradient(180deg, rgba(19, 76, 67, 0.95), rgba(8, 38, 39, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(185, 255, 224, 0.14),
    0 0 12px rgba(56, 205, 154, 0.2);
}

.menu-game-home-box[hidden] {
  display: none !important;
}

.menu-game-home-button {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png")
    center / 100% 100% no-repeat;
  color: #ffd6c5;
  font-size: 11px;
  font-weight: 1000;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.menu-game-home-button.confirming {
  color: #fff0aa;
  filter:
    drop-shadow(0 0 8px rgba(255, 112, 74, 0.36))
    brightness(1.08);
}

.menu-game-home-box small {
  color: #b8d8e7;
  font-size: 8.5px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 370px), (max-height: 700px) {
}

/* Store and codex structural pass 1785289800000.
   These panels own one fixed mobile viewport and only their content wells scroll. */
.main-menu[data-panel="store"] .menu-title,
.main-menu[data-panel="codex"] .menu-title {
  display: none;
}

.main-menu[data-panel="store"],
.main-menu[data-panel="codex"] {
  padding: 0;
}

.main-menu[data-panel="store"] .menu-scene,
.main-menu[data-panel="codex"] .menu-scene {
  width: min(100%, 430px);
  height: 100dvh;
  min-height: 0;
  max-height: none;
}

.main-menu[data-panel="store"] .menu-card,
.main-menu[data-panel="codex"] .menu-card {
  top: max(8px, env(safe-area-inset-top));
  bottom: auto;
  left: 18px;
  right: 18px;
}

#menuStorePanel.active,
#menuCodexPanel.active {
  box-sizing: border-box;
  width: 100%;
  height: min(790px, calc(100dvh - 16px));
  min-height: 0;
  max-height: min(790px, calc(100dvh - 16px));
  padding:
    max(12px, env(safe-area-inset-top))
    12px
    max(12px, env(safe-area-inset-bottom));
  overflow: hidden;
  border: 1px solid rgba(109, 192, 231, 0.28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 4%, rgba(40, 116, 157, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(9, 25, 39, 0.98), rgba(3, 10, 18, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 128, 0.08),
    inset 0 0 32px rgba(0, 126, 187, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.54);
}

#menuStorePanel.active {
  grid-template-rows: 48px 58px minmax(0, 1fr) 34px;
  gap: 7px;
}

#menuStorePanel .menu-panel-head,
#menuCodexPanel .menu-panel-head {
  box-sizing: border-box;
  min-height: 48px;
  padding: 5px 10px 6px 17px;
  background:
    radial-gradient(circle at 50% 0, rgba(70, 194, 237, 0.2), transparent 54%),
    linear-gradient(180deg, rgba(13, 45, 65, 0.98), rgba(4, 17, 29, 0.98));
  border: 1px solid rgba(94, 190, 229, 0.32);
  border-radius: 9px;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 151, 0.12),
    inset 0 -2px 0 rgba(53, 164, 207, 0.18);
}

#menuStorePanel .menu-panel-head > strong,
#menuCodexPanel .menu-panel-head > strong,
#menuStorePanel .store-panel-title strong {
  color: #fff0ad;
  font-size: 17px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

#menuStorePanel .store-inventory {
  height: 58px;
  gap: 5px;
}

#menuStorePanel .store-inventory > div {
  position: relative;
  box-sizing: border-box;
  height: 58px;
  min-height: 58px;
  aspect-ratio: auto;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: 22px 22px;
  column-gap: 4px;
  padding: 7px 6px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24px 50%, rgba(255, 216, 103, 0.11), transparent 29px),
    linear-gradient(180deg, rgba(16, 50, 70, 0.98), rgba(4, 20, 33, 0.99));
  border: 1px solid rgba(89, 190, 229, 0.36);
  border-radius: 9px;
  box-shadow:
    inset 0 1px 0 rgba(255, 237, 175, 0.12),
    inset 0 0 16px rgba(37, 147, 194, 0.08),
    0 4px 9px rgba(0, 0, 0, 0.24);
}

#menuStorePanel .store-inventory > div::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 7px;
  top: 50%;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 220, 112, 0.44);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(53, 174, 219, 0.2), rgba(3, 16, 27, 0.92) 68%);
  box-shadow:
    inset 0 0 0 3px rgba(71, 179, 219, 0.08),
    0 0 9px rgba(45, 176, 226, 0.14);
}

#menuStorePanel .store-inventory > div:nth-child(2)::before {
  border-color: rgba(190, 135, 255, 0.5);
  background: radial-gradient(circle, rgba(144, 75, 226, 0.24), rgba(10, 10, 30, 0.94) 68%);
}

#menuStorePanel .store-inventory > div:nth-child(3)::before {
  border-color: rgba(115, 205, 255, 0.5);
  background: radial-gradient(circle, rgba(70, 119, 236, 0.24), rgba(5, 14, 32, 0.94) 68%);
}

#menuStorePanel .store-inventory img {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  justify-self: center;
  align-self: center;
  object-fit: contain;
  filter:
    drop-shadow(0 0 5px rgba(107, 214, 255, 0.28))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
}

#menuStorePanel .store-inventory span {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: 0 0 2px;
  overflow: hidden;
  color: #cdefff;
  font-size: 8.5px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menuStorePanel .store-inventory strong {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding: 2px 0 0;
  color: #ffe998;
  font-size: 13px;
  line-height: 1;
}

#menuStorePanel .store-product-list {
  min-height: 0;
  display: grid;
  grid-auto-rows: minmax(108px, auto);
  align-content: start;
  gap: 7px;
  padding: 2px 3px 8px 0;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #4ab7e3 rgba(0, 0, 0, 0.24);
}

#menuStorePanel .store-product-card {
  box-sizing: border-box;
  min-height: 108px;
  height: auto;
  grid-template-columns: 48px minmax(0, 1fr) 72px;
  gap: 8px;
  padding: 12px 17px;
}

#menuStorePanel .store-product-title strong {
  font-size: 13.5px;
  line-height: 1.18;
  white-space: normal;
}

#menuStorePanel .store-product-title small,
#menuStorePanel .store-product-contents span {
  font-size: 9.5px;
  line-height: 1.2;
}

#menuStorePanel .store-notice {
  position: relative;
  z-index: 2;
  height: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 5px 12px;
  overflow: hidden;
  border: 1px solid rgba(86, 178, 217, 0.24);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(12, 43, 61, 0.96), rgba(4, 19, 31, 0.98));
  color: #cde8f3;
  font-size: 8.5px;
  line-height: 1.2;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 225, 141, 0.07);
}

#menuCodexPanel.active {
  grid-template-rows: 48px 72px minmax(0, 1fr);
  gap: 8px;
}

.codex-tabbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#menuCodexPanel .codex-tab {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid rgba(88, 173, 212, 0.3);
  border-radius: 9px;
  background:
    radial-gradient(circle at 20% 50%, rgba(79, 167, 207, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(16, 43, 61, 0.98), rgba(5, 18, 31, 0.98));
  color: #d8e8f3;
  text-align: left;
  filter: saturate(0.76) brightness(0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -2px 0 rgba(40, 139, 181, 0.12);
}

#menuCodexPanel .codex-tab::after {
  content: none !important;
}

#menuCodexPanel .codex-tab.open {
  border-color: rgba(255, 216, 102, 0.58);
  background:
    radial-gradient(circle at 20% 50%, rgba(47, 183, 231, 0.24), transparent 46%),
    linear-gradient(180deg, rgba(21, 66, 87, 0.98), rgba(7, 28, 44, 0.99));
  color: #fff2b7;
  filter:
    saturate(1.08)
    drop-shadow(0 0 7px rgba(54, 193, 245, 0.28));
}

#menuCodexPanel .codex-tab > img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75));
}

#menuCodexPanel .codex-tab > span {
  min-width: 0;
  display: grid;
  gap: 1px;
  color: inherit;
}

#menuCodexPanel .codex-tab > span small {
  color: #8db5c9;
  font-size: 7.5px;
  line-height: 1;
}

#menuCodexPanel .codex-tab > span b {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menuCodexPanel .codex-tab > strong {
  padding-left: 4px;
  color: #ffe28a;
  font-size: 10px;
}

#menuCodexPanel .codex-book {
  position: relative;
  min-height: 0;
  padding: 11px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgba(54, 166, 213, 0.15), transparent 28%),
    linear-gradient(180deg, rgba(6, 24, 38, 0.99), rgba(2, 11, 20, 0.995));
  border: 1px solid rgba(91, 188, 227, 0.38);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 3px rgba(4, 12, 22, 0.82),
    inset 0 0 0 4px rgba(224, 186, 89, 0.13),
    inset 0 0 28px rgba(29, 139, 187, 0.1);
}

#menuCodexPanel .codex-book::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 6px;
  pointer-events: none;
  border: 1px solid rgba(68, 158, 199, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(65, 193, 237, 0.28), transparent 10%, transparent 90%, rgba(65, 193, 237, 0.28)) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(238, 193, 88, 0.18), transparent 18%, transparent 82%, rgba(238, 193, 88, 0.18)) bottom / 100% 1px no-repeat;
}

#menuCodexPanel .codex-page,
#menuCodexPanel .codex-page.open {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  display: none;
  align-content: start;
  gap: 6px;
  padding: 2px 3px 2px 1px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #4ab7e3 rgba(0, 0, 0, 0.24);
}

#menuCodexPanel .codex-page.open {
  display: grid;
}

#menuCodexPanel #bossCodexBody.open {
  max-height: none;
}

#menuCodexPanel #itemCodexBody.open {
  grid-template-rows: minmax(0, 1fr);
}

#menuCodexPanel #itemCodexBody .codex-item-list {
  min-height: 0;
  overflow: visible;
  padding: 0;
}

.codex-boss-list {
  display: grid;
  align-content: start;
  gap: 6px;
}

.codex-boss-list.detail-open,
.codex-item-list.detail-open {
  visibility: hidden;
}

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row {
  box-sizing: border-box;
  min-height: 58px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(105, 190, 228, 0.26);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(9, 36, 54, 0.98), rgba(4, 17, 30, 0.94));
  box-shadow:
    inset 3px 0 0 rgba(69, 188, 233, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#menuCodexPanel .codex-row img {
  width: 42px;
  height: 42px;
  padding: 3px;
  object-fit: contain;
  border: 1px solid rgba(116, 203, 239, 0.24);
  border-radius: 5px;
  background: rgba(1, 9, 17, 0.72);
}

#menuCodexPanel .codex-row strong {
  color: #fff0b4;
  font-size: 12.5px;
}

#menuCodexPanel .codex-row span {
  color: #b9d3e1;
  font-size: 9.5px;
  line-height: 1.35;
}

#menuCodexPanel .codex-row em {
  min-width: 48px;
  padding: 5px 6px;
  border: 1px solid rgba(103, 204, 244, 0.3);
  border-radius: 4px;
  color: #9ee9ff;
  background: rgba(14, 54, 77, 0.74);
  font-size: 8px;
  text-align: center;
}

#menuCodexPanel .codex-row.locked {
  opacity: 0.44;
  filter: grayscale(0.7);
}

#menuCodexPanel .codex-row.boss {
  grid-template-columns: 44px minmax(0, 1fr);
}

#menuCodexPanel .codex-row.boss.found {
  min-height: 132px;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  padding: 10px;
}

#menuCodexPanel .codex-row.boss.found > img {
  width: 52px;
  height: 52px;
}

.codex-boss-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.codex-boss-name {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.codex-boss-badges {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

#menuCodexPanel .codex-boss-open {
  margin: 0;
  padding: 3px 6px;
  border: 1px solid rgba(255, 216, 107, 0.32);
  border-radius: 4px;
  color: #ffe69a;
  background: rgba(66, 47, 11, 0.72);
  font-size: 7.5px;
  font-weight: 1000;
  line-height: 1;
}

#menuCodexPanel .codex-boss-name > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menuCodexPanel .codex-element-badge {
  flex: 0 0 auto;
  margin: 0;
  padding: 3px 6px;
  border: 1px solid rgba(124, 202, 236, 0.26);
  border-radius: 4px;
  color: #d8f1fb;
  background: rgba(14, 54, 75, 0.8);
  font-size: 7.5px;
  font-weight: 1000;
  line-height: 1;
}

#menuCodexPanel .codex-element-badge.element-fire { color: #ffc4ab; border-color: rgba(255, 119, 82, 0.34); }
#menuCodexPanel .codex-element-badge.element-water { color: #b7dcff; border-color: rgba(84, 160, 255, 0.38); }
#menuCodexPanel .codex-element-badge.element-wood { color: #b9f0be; border-color: rgba(91, 204, 118, 0.36); }
#menuCodexPanel .codex-element-badge.element-light { color: #fff0aa; border-color: rgba(255, 222, 108, 0.4); }
#menuCodexPanel .codex-element-badge.element-dark { color: #dcc4ff; border-color: rgba(177, 119, 255, 0.38); }
#menuCodexPanel .codex-element-badge.element-gold { color: #ffe4a0; border-color: rgba(238, 184, 74, 0.4); }

.codex-boss-counters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

#menuCodexPanel .codex-boss-counters > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px 5px;
  border: 1px solid rgba(102, 185, 222, 0.16);
  border-radius: 3px;
  background: rgba(3, 20, 32, 0.72);
  line-height: 1;
}

.codex-boss-counters small {
  flex: 0 0 auto;
  color: #7fc8e2;
  font-size: 7px;
  font-weight: 900;
}

.codex-boss-counters b {
  min-width: 0;
  overflow: hidden;
  color: #edf7fb;
  font-size: 7.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-boss-abilities {
  display: grid;
  gap: 4px;
}

#menuCodexPanel .codex-boss-abilities > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 0.62fr) minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 5px 6px;
  border-left: 2px solid rgba(93, 205, 245, 0.52);
  border-radius: 2px;
  background: rgba(5, 28, 43, 0.84);
  line-height: 1.2;
}

.codex-boss-abilities small {
  color: #75cce9;
  font-size: 6.8px;
  font-weight: 900;
}

.codex-boss-abilities b {
  min-width: 0;
  overflow: hidden;
  color: #fff0ae;
  font-size: 7.6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menuCodexPanel .codex-boss-abilities em {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: #bcd4df;
  background: transparent;
  font-size: 6.8px;
  font-style: normal;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menuCodexPanel .codex-boss-locked-copy {
  margin: 3px 0 0;
  color: #9fb2bf;
  font-size: 9px;
}

.codex-item-detail {
  position: fixed;
  z-index: 2850;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  box-sizing: border-box;
  width: min(370px, calc(100vw - 12px));
  height: min(770px, calc(100dvh - 20px));
  max-height: min(770px, calc(100dvh - 20px));
  display: grid;
  grid-template-rows: 45px minmax(0, 1fr);
  gap: 0;
  padding: 12px;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(105, 200, 239, 0.48);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0, rgba(38, 174, 223, 0.22), transparent 30%),
    radial-gradient(circle at 0 50%, rgba(218, 171, 64, 0.07), transparent 36%),
    linear-gradient(180deg, #091d2d 0%, #040b13 100%);
  box-shadow:
    0 0 0 999px rgba(0, 4, 10, 0.88),
    inset 0 0 0 1px rgba(255, 221, 135, 0.08),
    inset 0 0 36px rgba(0, 124, 182, 0.09),
    0 18px 42px rgba(0, 0, 0, 0.72);
  filter: none;
}

.codex-item-detail::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(228, 190, 91, 0.15);
  border-radius: 9px;
  background:
    linear-gradient(90deg, transparent, rgba(76, 201, 244, 0.52), transparent) top / 72% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(76, 201, 244, 0.28), transparent) bottom / 72% 1px no-repeat;
}

.codex-item-detail > * {
  position: relative;
  z-index: 1;
}

.codex-item-detail[hidden] {
  display: none;
}

.codex-detail-titlebar {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 62px;
  align-items: center;
  gap: 8px;
  padding: 4px 5px 6px 12px;
  background:
    radial-gradient(circle at 50% 0, rgba(71, 194, 237, 0.22), transparent 56%),
    linear-gradient(180deg, rgba(16, 53, 73, 0.96), rgba(5, 22, 36, 0.98));
  border: 1px solid rgba(92, 189, 228, 0.3);
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 146, 0.1),
    inset 0 -2px 0 rgba(47, 154, 196, 0.14);
}

.codex-detail-titlebar > span {
  color: #9edcf1;
  font-size: 8px;
  font-weight: 900;
}

.codex-detail-titlebar > strong {
  color: #fff0af;
  font-size: 15px;
  text-align: center;
}

.codex-detail-close {
  position: static;
  width: 62px;
  height: 30px;
  padding: 0 0 2px;
  border: 1px solid rgba(100, 190, 229, 0.32);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(24, 67, 91, 0.98), rgba(5, 25, 40, 0.98));
  color: #dceeff;
  font-size: 9px;
  text-shadow: 0 1px 2px #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 5px rgba(0, 0, 0, 0.3);
}

.codex-detail-scroll {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px 4px 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.codex-detail-hero {
  min-height: 120px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid rgba(100, 194, 235, 0.34);
  border-radius: 7px;
  background:
    radial-gradient(circle at 17% 50%, rgba(86, 200, 243, 0.17), transparent 36%),
    linear-gradient(90deg, rgba(4, 20, 34, 0.98), rgba(7, 27, 42, 0.9));
}

.codex-detail-art {
  position: relative;
  width: 98px;
  height: 98px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 221, 130, 0.4);
  border-radius: 8px;
  background:
    radial-gradient(circle, rgba(91, 205, 248, 0.2), transparent 64%),
    rgba(1, 9, 17, 0.8);
  box-shadow:
    inset 0 0 18px rgba(52, 181, 232, 0.12),
    0 6px 10px rgba(0, 0, 0, 0.34);
}

.codex-detail-art img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px rgba(107, 215, 255, 0.32))
    drop-shadow(0 5px 4px rgba(0, 0, 0, 0.55));
}

.codex-detail-art b {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 30px;
  padding: 3px 5px;
  border: 1px solid rgba(255, 224, 131, 0.42);
  border-radius: 4px;
  color: #fff0a7;
  background: rgba(6, 20, 31, 0.94);
  font-size: 9px;
  text-align: center;
}

.codex-detail-identity {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.codex-detail-identity > small {
  color: #8fdcf5;
  font-size: 9px;
  font-weight: 900;
}

.codex-detail-identity > strong {
  color: #fff1b8;
  font-size: 21px;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.codex-detail-identity > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.codex-detail-identity > div span {
  padding: 4px 7px;
  border: 1px solid rgba(105, 193, 230, 0.24);
  border-radius: 4px;
  color: #c7dfeb;
  background: rgba(7, 30, 46, 0.78);
  font-size: 8.5px;
  font-weight: 900;
}

.codex-detail-section {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid rgba(87, 167, 203, 0.24);
  border-radius: 7px;
  background: rgba(3, 15, 26, 0.84);
}

.codex-detail-section-head {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 5px;
  border-bottom: 1px solid rgba(98, 186, 224, 0.18);
}

.codex-detail-section-head > span {
  color: #fff0af;
  font-size: 11px;
  font-weight: 1000;
}

.codex-detail-section-head > small {
  color: #80cde9;
  font-size: 8px;
  font-weight: 900;
}

.codex-detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.codex-detail-stat {
  min-width: 0;
  min-height: 52px;
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: 1px solid rgba(92, 187, 228, 0.25);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(19, 66, 89, 0.72), rgba(4, 22, 35, 0.94));
  text-align: center;
}

.codex-detail-stat small {
  color: #9fc9da;
  font-size: 8px;
  font-weight: 900;
}

.codex-detail-stat strong {
  overflow: hidden;
  color: #fff0a6;
  font-size: 15px;
  line-height: 1.05;
  text-overflow: ellipsis;
}

.codex-detail-stat[data-stat="공격"] {
  box-shadow: inset 0 3px 0 rgba(255, 104, 83, 0.68);
}

.codex-detail-stat[data-stat="방어"],
.codex-detail-stat[data-stat="회피"] {
  box-shadow: inset 0 3px 0 rgba(85, 176, 255, 0.72);
}

.codex-detail-stat[data-stat="체력"],
.codex-detail-stat[data-stat="회복"],
.codex-detail-stat[data-stat="흡혈"] {
  box-shadow: inset 0 3px 0 rgba(82, 220, 145, 0.68);
}

.codex-detail-stat[data-stat="공격속도"],
.codex-detail-stat[data-stat="치명"],
.codex-detail-stat[data-stat="관통"] {
  box-shadow: inset 0 3px 0 rgba(214, 133, 255, 0.7);
}

.codex-detail-ability {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(18, 61, 82, 0.72), rgba(5, 23, 36, 0.74));
}

.codex-detail-ability > img {
  width: 42px;
  height: 42px;
  padding: 4px;
  object-fit: contain;
  border: 1px solid rgba(255, 220, 124, 0.28);
  border-radius: 6px;
  background: rgba(0, 8, 15, 0.66);
}

.codex-detail-ability > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.codex-detail-ability strong {
  color: #a9eaff;
  font-size: 10px;
}

.codex-detail-ability p {
  margin: 0;
  color: #d6e6ee;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.42;
}

.codex-detail-traits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.codex-detail-traits > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid rgba(85, 156, 188, 0.18);
  border-radius: 4px;
  background: rgba(3, 17, 28, 0.76);
}

.codex-detail-traits small {
  color: #83bed4;
  font-size: 7.5px;
}

.codex-detail-traits b {
  overflow: hidden;
  color: #eef8fb;
  font-size: 8.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.codex-detail-relations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.codex-detail-relations > div {
  min-width: 0;
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(92, 195, 231, 0.25);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(11, 55, 77, 0.9), rgba(4, 20, 31, 0.94));
}

.codex-detail-relations > div.recipe {
  border-color: rgba(241, 194, 91, 0.32);
  background:
    linear-gradient(135deg, rgba(67, 50, 18, 0.84), rgba(24, 20, 11, 0.94));
}

.codex-detail-relations span {
  color: #80d5f1;
  font-size: 8px;
  font-weight: 900;
}

.codex-detail-relations strong {
  color: #fff0ad;
  font-size: 9.5px;
  line-height: 1.3;
}

.codex-detail-relations small {
  color: #afc9d5;
  font-size: 7.5px;
  line-height: 1.35;
}

.codex-detail-unlock {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(95, 184, 221, 0.2);
  border-radius: 5px;
  color: inherit;
  background: rgba(4, 19, 31, 0.86);
}

.codex-detail-unlock span {
  color: #82cde7;
  font-size: 8px;
  font-weight: 900;
}

.codex-detail-unlock strong {
  color: #dcecf3;
  font-size: 8.5px;
  text-align: right;
}

.codex-boss-hero .codex-detail-art img {
  width: 90px;
  height: 90px;
}

.codex-boss-counter-grid .codex-detail-stat strong {
  font-size: 12px;
}

.codex-boss-counter-grid .codex-detail-stat.weak {
  box-shadow: inset 0 3px 0 rgba(88, 220, 151, 0.68);
}

.codex-boss-counter-grid .codex-detail-stat.resist {
  box-shadow: inset 0 3px 0 rgba(211, 126, 255, 0.68);
}

.codex-boss-detail-skills {
  display: grid;
  gap: 6px;
}

.codex-boss-detail-skills > div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 3px 8px;
  padding: 9px 10px;
  border: 1px solid rgba(84, 175, 214, 0.22);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(15, 57, 78, 0.82), rgba(4, 21, 34, 0.9));
}

.codex-boss-detail-skills span {
  grid-row: 1 / 3;
  align-self: center;
  padding: 5px 6px;
  border: 1px solid rgba(255, 218, 113, 0.28);
  border-radius: 4px;
  color: #ffe89e;
  background: rgba(61, 44, 13, 0.68);
  font-size: 8px;
  font-weight: 1000;
  text-align: center;
}

.codex-boss-detail-skills strong {
  color: #a9eaff;
  font-size: 11px;
}

.codex-boss-detail-skills p {
  margin: 0;
  color: #c9dce5;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.35;
}

.unlock-pill.recipe-only {
  border-color: rgba(255, 207, 91, 0.52);
  background:
    linear-gradient(180deg, rgba(73, 51, 12, 0.9), rgba(24, 19, 9, 0.94));
  box-shadow: inset 0 0 9px rgba(255, 194, 49, 0.1);
}

.unlock-pill.recipe-only small {
  color: #ffe181;
}

.reward-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #bfd8e5;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.22;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 370px), (max-height: 700px) {
  .main-menu[data-panel="store"] .menu-card,
  .main-menu[data-panel="codex"] .menu-card {
    left: 8px;
    right: 8px;
  }

  #menuStorePanel.active,
  #menuCodexPanel.active {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding:
      max(9px, env(safe-area-inset-top))
      9px
      max(9px, env(safe-area-inset-bottom));
  }

  #menuStorePanel.active {
    grid-template-rows: 44px 52px minmax(0, 1fr) 31px;
    gap: 5px;
  }

  #menuStorePanel .store-inventory,
  #menuStorePanel .store-inventory > div {
    height: 52px;
    min-height: 52px;
  }

  #menuStorePanel .store-product-card {
    grid-template-columns: 42px minmax(0, 1fr) 64px;
    min-height: 104px;
    padding: 10px 14px;
  }

  #menuCodexPanel.active {
    grid-template-rows: 44px 64px minmax(0, 1fr);
  }

  #menuCodexPanel .codex-tab {
    min-height: 64px;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    padding: 7px 8px;
  }

  #menuCodexPanel .codex-tab > img {
    width: 28px;
    height: 28px;
  }

  #menuCodexPanel .codex-book {
    padding: 9px;
  }

  .codex-item-detail {
    top: 5px;
    width: calc(100vw - 8px);
    height: calc(100dvh - 10px);
    max-height: calc(100dvh - 10px);
    padding: 8px;
  }

  .codex-detail-hero {
    min-height: 104px;
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .codex-detail-art {
    width: 82px;
    height: 82px;
  }

  .codex-detail-art img {
    width: 68px;
    height: 68px;
  }

  .codex-detail-identity > strong {
    font-size: 18px;
  }
}

/* Clean information surfaces, native-ratio king marks, and stat details 1788552000000. */
.topbar {
  border: 1px solid rgba(105, 197, 235, 0.5);
  border-radius: 9px;
  background:
    radial-gradient(circle at 12% 18%, rgba(75, 184, 229, 0.16), transparent 34%),
    linear-gradient(155deg, rgba(13, 43, 67, 0.98), rgba(4, 15, 28, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(210, 242, 255, 0.05),
    0 4px 9px rgba(0, 0, 0, 0.34);
}

.topbar::before,
.topbar::after {
  display: none !important;
}

.topbar .eyebrow {
  color: #8fd8ee;
}

.topbar h1 {
  color: #f4ebca;
}

.top-menu-button {
  width: 40px;
  height: 36px;
  padding: 0 5px;
  border: 1px solid rgba(134, 211, 239, 0.62);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(60, 142, 183, 0.34), rgba(5, 20, 36, 0.24)),
    #102b43;
  color: #eaf8ff;
  font-size: 8.5px;
  line-height: 1;
  box-shadow:
    inset 0 0 0 1px rgba(220, 248, 255, 0.06),
    0 3px 6px rgba(0, 0, 0, 0.36);
  filter: none;
}

.round-chip {
  min-width: 76px;
  height: 30px;
  padding-inline: 8px;
  border: 1px solid rgba(115, 207, 239, 0.58);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 0, rgba(83, 192, 231, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(24, 73, 101, 0.98), rgba(5, 22, 37, 0.98));
  color: #ffebb0;
  box-shadow:
    inset 0 0 0 1px rgba(218, 245, 255, 0.05),
    0 3px 6px rgba(0, 0, 0, 0.32);
}

.round-chip small {
  color: #a9d3e2;
}

.combat-stats-mini {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 3px;
  padding: 4px;
  appearance: none;
  border: 1px solid rgba(91, 181, 220, 0.48);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0, rgba(68, 177, 220, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(8, 32, 51, 0.98), rgba(3, 14, 26, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(203, 240, 255, 0.04),
    0 3px 7px rgba(0, 0, 0, 0.3);
  filter: none;
  cursor: pointer;
}

.combat-stats-mini::before,
.combat-stats-mini::after {
  display: none !important;
}

.combat-stats-mini span,
.combat-stats-mini span + span {
  box-sizing: border-box;
  min-width: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 2px;
  border: 1px solid rgba(105, 189, 225, 0.19);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(29, 72, 98, 0.68), rgba(4, 19, 32, 0.78));
  color: #b9dbea;
  font-size: 9px;
  line-height: 1;
}

.combat-stats-mini strong {
  color: #fff0ae;
  font-size: 10px;
}

.combat-stats-mini:active {
  transform: translateY(1px);
  filter: brightness(1.08);
}

.combat-stats-mini:focus-visible {
  outline: 2px solid #8ee7ff;
  outline-offset: 2px;
}

.combat-stats-panel {
  position: fixed;
  inset: 0;
  z-index: 288;
  display: none;
  place-items: center;
  padding:
    max(10px, env(safe-area-inset-top))
    8px
    max(10px, env(safe-area-inset-bottom));
  background: rgba(2, 7, 13, 0.82);
  backdrop-filter: blur(8px);
}

.combat-stats-panel.active {
  display: grid;
}

.combat-stats-card {
  box-sizing: border-box;
  width: min(382px, calc(100vw - 12px));
  max-height: calc(100dvh - 20px);
  display: grid;
  grid-template-rows: auto minmax(0, auto) minmax(0, 1fr);
  gap: 9px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(115, 207, 239, 0.62);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 0, rgba(64, 181, 226, 0.2), transparent 32%),
    linear-gradient(155deg, rgba(9, 35, 55, 0.99), rgba(3, 13, 25, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(221, 246, 255, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.62);
}

.combat-stats-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(105, 190, 226, 0.28);
}

.combat-stats-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.combat-stats-head .label {
  color: #8fdbee;
  font-size: 9px;
}

.combat-stats-head strong {
  color: #fff0b4;
  font-size: 18px;
  line-height: 1.1;
}

.combat-stats-detail-list {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.combat-stat-detail {
  min-width: 0;
  min-height: 47px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(101, 184, 218, 0.23);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(18, 55, 77, 0.72), rgba(4, 18, 31, 0.86));
}

.combat-stat-detail > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: #cce5ef;
  font-size: 9px;
  font-weight: 1000;
}

.combat-stat-detail small {
  overflow: hidden;
  color: #7399aa;
  font-size: 6.8px;
  font-weight: 850;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combat-stat-detail strong {
  color: #ffe9a3;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.combat-stats-effect-list {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid rgba(101, 184, 218, 0.2);
  border-radius: 8px;
  background: rgba(2, 12, 22, 0.68);
  scrollbar-width: thin;
}

.combat-effect-title {
  position: sticky;
  top: -8px;
  z-index: 1;
  padding: 1px 0 5px;
  color: #9edff1;
  background: #061725;
  font-size: 9px;
}

.combat-effect-chip,
.combat-effect-empty {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #d6e7ee;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.28;
}

.combat-effect-chip b {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 4px;
  border-radius: 999px;
  color: #09202b;
  background: #9edff1;
  font-size: 7px;
  text-align: center;
}

.combat-effect-empty {
  color: #829eaa;
}

.result-mini-card {
  box-sizing: border-box;
  min-height: 46px;
  padding: 7px 5px;
  border: 1px solid rgba(98, 187, 225, 0.3) !important;
  border-image: none !important;
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 0, rgba(64, 177, 220, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(14, 43, 62, 0.96), rgba(3, 16, 29, 0.98)) !important;
  box-shadow: inset 0 0 0 1px rgba(210, 242, 255, 0.035);
}

.result-mini-card::before,
.result-mini-card::after {
  display: none !important;
}

.result-mini-card small {
  color: #9fc9da;
  line-height: 1.08;
  text-align: center;
}

.result-mini-card strong {
  color: #ffebaa;
  line-height: 1;
}

.item-tile::before,
.item-tile::after,
.tray-item::before,
.tray-item::after,
.placed-item::before,
.placed-item::after {
  content: none !important;
  display: none !important;
}

.item-tile,
.tray-item,
.item-tile.secret-item,
.tray-item.secret-item {
  background:
    radial-gradient(circle at 50% 42%, rgba(83, 153, 187, 0.12), transparent 58%),
    linear-gradient(160deg, rgba(14, 38, 55, 0.96), rgba(4, 14, 25, 0.98));
}

.placed-item {
  border: 1px solid color-mix(in srgb, currentColor 72%, #22384a) !important;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, currentColor 12%, transparent), transparent 60%),
    linear-gradient(145deg, rgba(13, 34, 49, 0.96), rgba(3, 12, 22, 0.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(203, 239, 255, 0.025),
    0 0 7px color-mix(in srgb, currentColor 13%, transparent) !important;
}

.item-icon,
.item-tile .item-icon,
.tray-icon,
.tray-item .tray-icon,
.inline-item-icon {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.menu-lobby-panel .lobby-mark-board {
  box-sizing: border-box;
  left: 5px;
  right: 5px;
  bottom: 137px;
  width: auto;
  min-height: 0;
  aspect-ratio: 1830 / 658;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    url("assets/generated/lobby_mark_refresh_1788552000000/king-mark-rail-hq.png")
    center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.48));
}

.menu-lobby-panel .lobby-mark-head {
  position: absolute;
  z-index: 2;
  left: 10.5%;
  top: 27.2%;
  width: 30.5%;
  height: 14%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
}

.menu-lobby-panel .lobby-mark-head > div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
}

.menu-lobby-panel .lobby-mark-head span {
  color: #d8edf5;
  font-size: clamp(6.5px, 1.9vw, 8px);
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}

.menu-lobby-panel .lobby-mark-head strong {
  color: #8ee9ff;
  font-size: clamp(7px, 2vw, 8.5px);
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}

.menu-lobby-panel .lobby-mark-head p {
  display: none;
}

.menu-lobby-panel .lobby-mark-slots {
  position: absolute;
  z-index: 2;
  left: 10.7%;
  right: 10.7%;
  top: 44%;
  bottom: 7%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}

.menu-lobby-panel .lobby-mark-slot {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  align-content: stretch;
  gap: 0;
  padding: 2px 2px 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.menu-lobby-panel .lobby-mark-slot img {
  align-self: center;
  width: min(34px, 74%);
  height: min(34px, 74%);
  object-fit: contain;
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.76))
    drop-shadow(0 0 5px rgba(79, 202, 239, 0.28));
}

.menu-lobby-panel .lobby-mark-slot strong {
  max-width: 100%;
  overflow: hidden;
  color: #e2d7bc;
  font-size: clamp(5.5px, 1.6vw, 6.5px);
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

.menu-lobby-panel .lobby-mark-slot.locked img {
  opacity: 0.28;
  filter: grayscale(1) brightness(0.55) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72));
}

@media (max-width: 370px), (max-height: 700px) {
  .combat-stats-card {
    padding: 11px;
    gap: 6px;
  }

  .combat-stat-detail {
    min-height: 42px;
    padding: 5px 6px;
  }

  .combat-stats-effect-list {
    min-height: 62px;
  }

  .menu-lobby-panel .lobby-mark-board {
    bottom: 133px;
  }
}

/* Native-proportion reward panels, centered item art, and readable passive levels 1788474000000. */
.fusion-card,
.reward-modal-card,
.reward-panel.boss-reward .reward-modal-card,
.board-passive-choice-card,
.unlock-showcase.board-clear .unlock-card {
  border: 0 !important;
  border-image: none !important;
  border-radius: 0;
  background:
    url("assets/generated/reward_refresh_1788474000000/fusion-panel-square.png")
    center / 100% 100% no-repeat !important;
  box-shadow: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.62));
}

.fusion-panel {
  padding:
    max(8px, env(safe-area-inset-top))
    6px
    max(8px, env(safe-area-inset-bottom));
}

.fusion-card {
  box-sizing: border-box;
  width: min(390px, calc(100vw - 10px));
  min-height: 0;
  max-height: calc(100dvh - 16px);
  padding: 48px 34px 31px;
  gap: 8px;
  overflow-y: auto;
}

.fusion-absorb {
  min-height: 94px;
  padding: 6px;
}

.fusion-result {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
}

.fusion-result-icon {
  width: 64px;
  height: 64px;
  padding: 6px;
  object-position: center;
}

.fusion-material img,
.fusion-result-pop img {
  object-position: center;
}

.reward-modal-card,
.reward-panel.boss-reward .reward-modal-card {
  box-sizing: border-box;
  width: min(382px, calc(100vw - 10px));
  min-height: 360px;
  max-height: calc(100dvh - 12px);
  padding: 50px 34px 31px;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 9px;
  overflow-y: auto;
}

.reward-modal-card > div:first-child {
  min-height: 45px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 3px;
  padding: 0 8px;
}

.reward-modal-card > div:first-child .label {
  color: #9edff3;
  font-size: 9px;
}

.reward-modal-card > div:first-child > strong {
  margin: 0;
  color: #fff1b0;
  font-size: 16px;
  line-height: 1.14;
  text-align: center;
}

.reward-grid {
  align-content: start;
  padding: 0;
}

.reward-grid > .reward-card:last-child:nth-child(odd):not(.reward-ad-reroll) {
  grid-column: 1 / -1;
}

.reward-card,
.reward-panel.boss-reward .reward-card,
.reward-panel.boss-reward .reward-riskCoins,
.reward-panel.boss-reward .reward-riskPurge,
.reward-panel.boss-reward .reward-riskOverclock {
  min-height: 78px;
}

.reward-ad-reroll,
.reward-panel .reward-ad-reroll,
.reward-panel.boss-reward .reward-ad-reroll {
  min-height: 62px;
  padding: 8px 13px;
  grid-template-columns: 34px minmax(0, 1fr);
  border: 1px solid rgba(107, 221, 255, 0.82);
  border-radius: 9px;
  background:
    radial-gradient(circle at 12% 24%, rgba(86, 218, 255, 0.28), transparent 34%),
    linear-gradient(145deg, rgba(9, 57, 83, 0.98), rgba(5, 21, 39, 0.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(203, 244, 255, 0.08),
    0 0 12px rgba(62, 190, 232, 0.2);
}

.reward-ad-reroll .reward-icon {
  width: 32px;
  height: 32px;
}

.reward-ad-reroll .reward-copy {
  align-content: center;
  gap: 2px;
}

.reward-ad-reroll .reward-copy em {
  font-size: 9px;
}

.reward-ad-reroll .reward-copy strong {
  font-size: 12.5px;
  line-height: 1.15;
}

.reward-ad-reroll .reward-copy b {
  font-size: 10px;
  line-height: 1.18;
}

.board-passive-choice-card {
  box-sizing: border-box;
  width: min(382px, calc(100vw - 10px));
  min-height: 0;
  max-height: calc(100dvh - 12px);
  padding: 49px 33px 31px;
  grid-template-rows: auto auto minmax(0, auto);
  align-content: start;
  gap: 8px;
  overflow-y: auto;
}

.board-passive-choice-card > div:first-child {
  min-height: 48px;
  padding: 0 8px;
  align-content: start;
  justify-items: center;
}

.board-passive-choice-card > div:first-child > strong {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
  text-align: center;
}

.board-passive-choice-card > div:first-child > small {
  font-size: 9px;
  line-height: 1.15;
  text-align: center;
}

.board-clear-supply-preview,
.board-passive-choice {
  min-height: 76px;
}

.board-passive-choice-list {
  max-height: min(330px, calc(100dvh - 250px));
  overflow-y: auto;
}

.unlock-showcase.board-clear .unlock-card {
  box-sizing: border-box;
  width: min(372px, calc(100vw - 12px));
  min-height: 0;
  max-height: calc(100dvh - 14px);
  padding: 47px 34px 31px;
  grid-template-rows: 84px auto auto auto 42px;
  align-content: start;
  gap: 5px;
  overflow-y: auto;
}

.unlock-showcase.board-clear .unlock-icon {
  width: 82px;
  height: 82px;
  max-width: 82px;
  max-height: 82px;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  filter: drop-shadow(0 0 12px rgba(130, 255, 177, 0.24));
}

.unlock-showcase.board-clear .unlock-card .label {
  font-size: 9px;
}

.unlock-showcase.board-clear .unlock-card > strong {
  font-size: 19px;
  line-height: 1.15;
}

.unlock-showcase.board-clear .unlock-card p {
  min-height: 0;
  max-height: 124px;
  padding: 10px 12px;
  align-self: auto;
  font-size: 10.5px;
  line-height: 1.42;
}

.board-passive-badges {
  max-width: 156px;
  grid-template-columns: repeat(4, 36px);
  gap: 4px;
}

.board-passive-badge {
  width: 36px;
  height: 36px;
  padding: 2px;
  border-color: rgba(185, 236, 255, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 12px rgba(91, 198, 255, 0.24),
    0 4px 8px rgba(0, 0, 0, 0.34);
}

.board-passive-badge img {
  width: 30px;
  height: 30px;
  image-rendering: auto;
}

.board-passive-badge small {
  min-width: 25px;
  padding: 2px 4px;
  border: 1px solid rgba(255, 248, 199, 0.9);
  color: #201603;
  background: #ffe17a;
  font-size: 8.5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.48);
}

.enemy-fighter.enemy-king-bunny.anim-dead img {
  object-position: center bottom;
  transform: none !important;
}

@media (max-width: 370px), (max-height: 700px) {
  .fusion-card {
    width: min(362px, calc(100vw - 8px));
    padding: 43px 27px 27px;
  }

  .reward-modal-card,
  .reward-panel.boss-reward .reward-modal-card {
    width: min(362px, calc(100vw - 8px));
    min-height: 344px;
    padding: 44px 28px 27px;
  }

  .board-passive-choice-card {
    width: min(362px, calc(100vw - 8px));
    padding: 43px 28px 27px;
  }

  .unlock-showcase.board-clear .unlock-card {
    width: min(356px, calc(100vw - 10px));
    padding: 43px 29px 27px;
  }
}

/* Final precedence for settings, result, stat modal, and stage-45 rail 1788742800000. */
.result-best-item.empty {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 92px;
  padding: 12px 18px;
  text-align: center;
}

.result-best-item.empty > span {
  width: 100%;
  justify-items: center;
  align-content: center;
  gap: 3px;
  text-align: center;
}

.result-best-item.empty small,
.result-best-item.empty strong,
.result-best-item.empty em {
  width: 100%;
  text-align: center;
  white-space: normal;
}

#menuSettingsPanel .menu-panel-head {
  grid-template-columns: 42px minmax(0, 1fr) 68px;
  min-height: 48px;
  padding: 4px 11px;
}

#menuSettingsPanel .menu-panel-head::after {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: 36px;
  height: 36px;
}

#menuSettingsPanel .menu-panel-head > strong {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
}

#menuSettingsPanel .menu-panel-head > .menu-back-button {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 66px;
  min-width: 66px;
  min-height: 34px;
  padding: 0 7px;
  font-size: 10px;
}

.combat-stats-panel {
  padding:
    max(8px, env(safe-area-inset-top))
    5px
    max(8px, env(safe-area-inset-bottom));
  background: rgba(2, 5, 12, 0.86);
  backdrop-filter: blur(6px);
}

.combat-stats-card {
  position: relative;
  width: min(390px, calc(100vw - 10px));
  max-height: calc(100dvh - 12px);
  grid-template-rows: auto auto minmax(72px, 1fr);
  gap: 7px;
  padding: 51px 34px 31px;
  border: 0;
  border-radius: 0;
  background:
    url("assets/generated/reward_refresh_1788474000000/fusion-panel-square.png")
    center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.68));
}

.combat-stats-head {
  position: relative;
  min-height: 43px;
  justify-content: center;
  padding: 0 42px 5px;
  border: 0;
  text-align: center;
}

.combat-stats-head > div {
  justify-items: center;
  gap: 2px;
}

.combat-stats-head .label {
  color: #9edff3;
  font-size: 8.5px;
}

.combat-stats-head strong {
  color: #fff0b0;
  font-size: 17px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.86);
}

.combat-stats-head .icon-close-button {
  position: absolute;
  top: 2px;
  right: 0;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  background:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png")
    center / 100% 100% no-repeat;
  color: #d9ebf5;
  font-size: 17px;
  filter: none;
}

.combat-stats-detail-list {
  gap: 4px;
}

.combat-stat-detail {
  min-height: 43px;
  gap: 5px;
  padding: 6px 8px;
  border: 0;
  border-radius: 0;
  background:
    url("assets/generated/ui/popup-row.png")
    center / 100% 100% no-repeat;
  box-shadow: none;
}

.combat-stat-detail > span {
  color: #d4e9f2;
  font-size: 9px;
}

.combat-stat-detail small {
  color: #81aaba;
  font-size: 6.7px;
}

.combat-stat-detail strong {
  color: #fff0ae;
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.84);
}

.combat-stats-effect-list {
  min-height: 72px;
  gap: 4px;
  padding: 9px 11px;
  border: 0;
  border-radius: 0;
  background:
    url("assets/generated/ui/popup-list.png")
    center / 100% 100% no-repeat;
}

.combat-effect-title {
  top: -9px;
  padding: 2px 0 5px;
  color: #9edff3;
  background: #071421;
}

.combat-effect-chip b {
  border-radius: 3px;
  color: #091722;
  background: #a8e7f5;
}

.main-menu[data-lobby-phase="deep"] .lobby-deep-cast {
  bottom: clamp(267px, 72vw, 296px);
}

.menu-lobby-panel .lobby-mark-head {
  left: 24.8%;
  top: 34%;
  width: 28%;
  height: auto;
  transform: translate(-50%, -50%);
}

.menu-lobby-panel .lobby-mark-head > div {
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.menu-lobby-panel .lobby-mark-head span {
  font-size: clamp(7px, 2vw, 8.5px);
}

.menu-lobby-panel .lobby-mark-head strong {
  font-size: clamp(7.5px, 2.15vw, 9px);
}

.menu-lobby-panel .lobby-mark-slots {
  inset: 0;
  display: block;
  padding: 0;
}

.menu-lobby-panel .lobby-mark-slot {
  position: absolute;
  top: 0;
  width: 13.5%;
  height: 100%;
  padding: 0;
  transform: translateX(-50%);
}

.menu-lobby-panel .lobby-mark-slot:nth-child(1) { left: 19.5%; }
.menu-lobby-panel .lobby-mark-slot:nth-child(2) { left: 34.45%; }
.menu-lobby-panel .lobby-mark-slot:nth-child(3) { left: 50%; }
.menu-lobby-panel .lobby-mark-slot:nth-child(4) { left: 65.1%; }
.menu-lobby-panel .lobby-mark-slot:nth-child(5) { left: 80.1%; }

.menu-lobby-panel .lobby-mark-slot img {
  position: absolute;
  left: 50%;
  top: 64.4%;
  width: min(34px, 67%);
  height: min(34px, 45%);
  transform: translate(-50%, -50%);
}

.menu-lobby-panel .lobby-mark-slot strong {
  position: absolute;
  left: 0;
  right: 0;
  top: 88.5%;
  display: block;
  text-align: center;
  transform: translateY(-50%);
}

@media (max-width: 370px), (max-height: 700px) {
  .combat-stats-card {
    width: min(362px, calc(100vw - 8px));
    padding: 45px 28px 27px;
    gap: 5px;
  }

  .combat-stats-head {
    min-height: 38px;
  }

  .combat-stat-detail {
    min-height: 39px;
    padding: 5px 6px;
  }

  .main-menu[data-lobby-phase="deep"] .lobby-deep-cast {
    bottom: clamp(260px, 73vw, 273px);
  }
}

/* Counter plate geometry correction 1785321600000.
   Match visible icon bounds to the sockets painted into each background. */
.menu-lobby-panel {
  --lobby-counter-top: max(
    clamp(57px, calc(100px - 10vw), 61px),
    calc(env(safe-area-inset-top) + 56px)
  );
  --lobby-counter-height: clamp(45px, 14.16vw, 61px);
}

.menu-lobby-panel .lobby-status-grid {
  top: var(--lobby-counter-top);
}

.menu-lobby-panel .lobby-status-grid > div {
  aspect-ratio: 407 / 184;
}

.menu-lobby-panel .lobby-status-grid > div > img {
  left: 21.85%;
  top: 50%;
  width: 31.6%;
  height: auto;
  object-fit: contain;
  object-position: 50% 50%;
  transform: translate(-50%, -50%);
}

.menu-lobby-panel .lobby-status-grid > div > span,
.menu-lobby-panel .lobby-status-grid > div > strong {
  left: 43%;
  width: 52.5%;
}

.menu-lobby-panel .lobby-status-grid > div > span {
  top: 28.5%;
}

.menu-lobby-panel .lobby-status-grid > div > strong {
  top: 54%;
}

.menu-lobby-panel .lobby-first-offer {
  top: calc(var(--lobby-counter-top) + var(--lobby-counter-height) + 4px);
}

#menuStorePanel .store-inventory > div {
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 3px;
  padding-inline: 7px;
}

#menuStorePanel .store-inventory > div::before {
  left: 8px;
  top: calc(50% + 1px);
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

#menuStorePanel .store-inventory img {
  top: 1px;
}

/* Unified abyss workbench, resource crests, and item-unlock alert 1785416400000. */
.status-strip {
  gap: 4px;
  margin-bottom: 4px;
}

.status-strip .status-resource {
  --resource-glow: 96, 198, 244;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 32px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  padding: 3px 5px 3px 3px;
  overflow: hidden;
  border: 1px solid rgba(var(--resource-glow), 0.62);
  border-radius: 6px;
  background:
    radial-gradient(circle at 17% 50%, rgba(var(--resource-glow), 0.22), transparent 35%),
    linear-gradient(180deg, rgba(23, 50, 71, 0.98), rgba(4, 13, 24, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(3, 8, 15, 0.88),
    inset 0 1px 0 rgba(220, 244, 255, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.34);
  isolation: isolate;
}

.status-strip .status-resource::before,
.status-strip .status-resource::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.status-strip .status-resource::before {
  inset: 2px;
  border: 1px solid rgba(222, 239, 250, 0.08);
  border-radius: 4px;
}

.status-strip .status-resource::after {
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  background:
    linear-gradient(135deg, transparent 42%, rgba(var(--resource-glow), 0.45) 43% 47%, transparent 48%)
    right center / 8px 100% no-repeat;
  opacity: 0.7;
}

.status-strip .status-resource-supply {
  --resource-glow: 240, 190, 91;
}

.status-strip .status-resource-shard {
  --resource-glow: 148, 218, 249;
}

.status-strip .status-resource-power {
  --resource-glow: 128, 155, 255;
}

.status-strip .status-resource-abyss {
  --resource-glow: 188, 111, 255;
}

.status-resource-icon {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--resource-glow), 0.68);
  border-radius: 5px;
  background:
    radial-gradient(circle, rgba(var(--resource-glow), 0.24), rgba(2, 9, 17, 0.82) 70%);
  box-shadow:
    inset 0 0 5px rgba(var(--resource-glow), 0.24),
    0 0 7px rgba(var(--resource-glow), 0.2);
}

.status-resource-icon img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  image-rendering: auto;
  filter:
    saturate(1.08)
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.62));
}

.status-resource-copy {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 1px;
}

.status-strip .status-resource .label {
  max-width: 100%;
  color: #a9c5d8;
  font-size: 8px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-strip .status-resource strong {
  max-width: 100%;
  margin: 0;
  color: #fff3bd;
  font-size: 12px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    0 1px 0 #02070c,
    0 0 7px rgba(var(--resource-glow), 0.32);
}

#bagPanel,
#bagPanel.active {
  position: relative;
  box-sizing: border-box;
  padding: 9px 10px 10px;
  border: 1px solid rgba(111, 205, 246, 0.72);
  border-radius: 11px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(82, 160, 210, 0.2), transparent 48%),
    linear-gradient(180deg, rgba(9, 28, 46, 0.98), rgba(3, 10, 19, 0.995));
  box-shadow:
    inset 0 0 0 2px rgba(2, 7, 13, 0.92),
    inset 0 0 0 3px rgba(88, 159, 198, 0.18),
    inset 0 -18px 30px rgba(0, 0, 0, 0.24),
    0 4px 12px rgba(0, 0, 0, 0.44);
}

#bagPanel::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 14px;
  right: 14px;
  top: 0;
  height: 3px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, #7ad7ff 20%, #f3c85e 50%, #7ad7ff 80%, transparent);
  box-shadow: 0 0 8px rgba(103, 212, 255, 0.48);
}

#bagPanel > * {
  position: relative;
  z-index: 1;
}

#bagPanel > .panel-head {
  min-height: 31px;
  margin: 0 0 4px;
  padding: 0 3px 5px;
  border-bottom: 1px solid rgba(104, 197, 239, 0.22);
}

#bagPanel > .panel-head h2 {
  color: #fff1b1;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.7),
    0 0 10px rgba(89, 194, 244, 0.24);
}

#bagPanel .bag-board-row {
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
  min-height: var(--bag-board-height, 124px);
  height: var(--bag-board-height, 124px);
  margin: 3px 0 0;
  padding: 7px;
  border: 1px solid rgba(92, 176, 218, 0.34);
  border-radius: 7px 7px 3px 3px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(116, 209, 248, 0.12) 50%, transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 0, rgba(82, 164, 213, 0.12), transparent 62%),
    rgba(2, 10, 18, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(215, 243, 255, 0.06),
    inset 0 -9px 18px rgba(0, 0, 0, 0.16);
}

#bagPanel .bag-grid,
#bagPanel .bag-effect-summary {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(19, 48, 68, 0.42), rgba(3, 13, 23, 0.7));
  box-shadow:
    inset 0 0 0 1px rgba(92, 169, 206, 0.2),
    inset 0 7px 12px rgba(115, 200, 238, 0.03);
  filter: none;
  border-image: none;
}

#bagPanel .bag-grid {
  align-content: start;
  justify-content: center;
  padding: 6px;
}

#bagPanel .bag-cell {
  border-color: rgba(109, 189, 226, 0.36);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 42%, rgba(60, 121, 157, 0.13), transparent 66%),
    #07131f;
  box-shadow:
    inset 0 0 0 1px rgba(1, 6, 12, 0.74),
    0 0 0 1px rgba(127, 213, 250, 0.025);
}

#bagPanel .bag-cell.filled {
  background:
    radial-gradient(circle at 50% 45%, rgba(70, 140, 178, 0.11), transparent 68%),
    #050f1a;
}

#bagPanel .bag-effect-summary,
#bagPanel .bag-effect-summary.is-empty {
  padding: 8px 7px 6px;
}

#bagPanel .effect-summary-head {
  min-height: 18px;
  margin: 0 0 5px;
  padding: 0 1px 4px;
  border-bottom-color: rgba(112, 207, 247, 0.18);
}

#bagPanel .bag-effect-summary.is-empty::after {
  min-height: 67px;
}

#bagPanel.active .bag-tray,
#bagPanel.active .bag-tray.is-empty {
  box-sizing: border-box;
  min-height: 151px;
  flex: 1 0 151px;
  margin: 0;
  padding: 8px 7px 7px;
  overflow: hidden;
  border: 1px solid rgba(92, 176, 218, 0.34);
  border-top-color: rgba(119, 213, 251, 0.58);
  border-radius: 3px 3px 7px 7px;
  background:
    linear-gradient(180deg, rgba(21, 52, 73, 0.38), rgba(2, 10, 18, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(218, 244, 255, 0.05),
    inset 0 -13px 24px rgba(0, 0, 0, 0.18);
  filter: none;
  border-image: none;
}

#bagPanel .tray-head {
  min-height: 20px;
  margin: 0 0 6px;
  padding: 0 3px 5px;
  border-bottom-color: rgba(112, 207, 247, 0.2);
}

#bagPanel .tray-head strong {
  color: #fff0ad;
  font-size: 11px;
}

#bagPanel .tray-head strong::after {
  content: var(--i18n-tray-scroll-hint, " · 4열 · 위아래 스크롤");
  color: #82adc4;
  font-size: 8px;
}

#bagPanel .bag-tray-list {
  box-sizing: border-box;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 58px;
  align-content: start;
  min-height: 120px;
  max-height: none;
  gap: 4px;
  padding: 0 1px 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#bagPanel .tray-item {
  min-height: 58px;
  border-radius: 5px;
  touch-action: pan-y;
}

#bagPanel .tray-item.dragging {
  touch-action: none;
}

#bagPanel .bag-tray.is-empty .tray-empty {
  min-height: 120px;
}

.unlock-showcase.item-unlock {
  background:
    radial-gradient(circle at 50% 44%, rgba(32, 103, 153, 0.2), transparent 38%),
    rgba(1, 5, 11, 0.78);
}

.unlock-showcase.item-unlock .unlock-card {
  box-sizing: border-box;
  width: min(342px, calc(100vw - 24px));
  min-height: 316px;
  display: grid;
  grid-template-rows: 82px 20px auto minmax(62px, auto) 40px;
  align-content: center;
  place-items: center;
  gap: 4px;
  padding: 31px 24px 23px;
  overflow: hidden;
  border: 1px solid rgba(111, 215, 255, 0.76);
  border-radius: 13px;
  background:
    linear-gradient(90deg, transparent 49.4%, rgba(243, 202, 91, 0.28) 50%, transparent 50.6%) top / 100% 30px no-repeat,
    radial-gradient(circle at 50% 23%, rgba(84, 176, 225, 0.21), transparent 34%),
    linear-gradient(180deg, #0a2337 0%, #06131f 46%, #020811 100%);
  box-shadow:
    inset 0 0 0 2px rgba(2, 8, 15, 0.94),
    inset 0 0 0 4px rgba(73, 143, 180, 0.16),
    inset 0 -24px 38px rgba(0, 0, 0, 0.36),
    0 24px 62px rgba(0, 0, 0, 0.62),
    0 0 24px rgba(57, 170, 228, 0.13);
}

.unlock-showcase.item-unlock .unlock-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(151, 220, 249, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(90deg, #6fd6ff, #f4cc65, #6fd6ff) top center / calc(100% - 54px) 1px no-repeat,
    linear-gradient(90deg, #6fd6ff, #f4cc65, #6fd6ff) bottom center / calc(100% - 54px) 1px no-repeat;
  pointer-events: none;
}

.unlock-showcase.item-unlock .unlock-card::after {
  content: "◆";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #ffe08a;
  font-size: 17px;
  line-height: 1;
  text-shadow:
    0 0 7px rgba(255, 218, 98, 0.65),
    0 0 14px rgba(86, 203, 255, 0.46);
  transform: translateX(-50%);
  pointer-events: none;
}

.unlock-showcase.item-unlock .unlock-icon {
  box-sizing: border-box;
  width: 78px;
  height: 78px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(126, 217, 255, 0.72);
  border-radius: 14px;
  background:
    radial-gradient(circle, rgba(95, 183, 231, 0.24), rgba(3, 12, 22, 0.86) 70%);
  object-fit: contain;
  filter:
    drop-shadow(0 0 10px rgba(105, 211, 255, 0.32))
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.38));
}

.unlock-showcase.item-unlock .unlock-card .label {
  box-sizing: border-box;
  min-width: 88px;
  margin: 0;
  padding: 4px 11px 3px;
  border: 1px solid rgba(237, 195, 82, 0.42);
  border-radius: 999px;
  color: #ffe18a;
  background: rgba(25, 20, 8, 0.54);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}

.unlock-showcase.item-unlock .unlock-card > strong {
  max-width: 270px;
  margin: 1px 0 0;
  color: #fff4c3;
  font-size: 21px;
  line-height: 1.12;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.72),
    0 0 12px rgba(255, 221, 116, 0.18);
}

.unlock-showcase.item-unlock .unlock-card p {
  box-sizing: border-box;
  width: min(278px, 100%);
  min-height: 62px;
  max-height: 78px;
  display: grid;
  place-items: center;
  margin: 3px 0 1px;
  padding: 9px 12px;
  overflow-y: auto;
  border-block: 1px solid rgba(104, 193, 234, 0.22);
  color: #dcecf6;
  background: linear-gradient(90deg, transparent, rgba(31, 76, 103, 0.24) 18% 82%, transparent);
  font-size: 11.5px;
  line-height: 1.38;
}

.unlock-showcase.item-unlock .unlock-confirm-button {
  box-sizing: border-box;
  width: min(230px, 100%);
  min-width: 0;
  min-height: 38px;
  margin: 2px 0 0;
  border: 1px solid rgba(119, 218, 255, 0.72);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(32, 112, 158, 0.96), rgba(7, 38, 65, 0.98));
  color: #fff2bd;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  box-shadow:
    inset 0 0 0 1px rgba(4, 12, 20, 0.72),
    inset 0 1px 0 rgba(225, 247, 255, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.36);
  filter: none;
}

.unlock-showcase.item-unlock .unlock-confirm-button:hover {
  background:
    linear-gradient(180deg, rgba(45, 136, 183, 0.98), rgba(9, 49, 80, 0.99));
  filter: none;
}

.unlock-showcase.item-unlock .unlock-confirm-button:active {
  transform: translateY(1px);
  filter: brightness(0.94);
}

@media (max-width: 370px), (max-height: 760px) {
  .status-strip {
    gap: 3px;
  }

  .status-strip .status-resource {
    grid-template-columns: 22px minmax(0, 1fr);
    padding-inline: 2px 3px;
  }

  .status-resource-icon {
    width: 21px;
    height: 21px;
  }

  .status-resource-icon img {
    width: 17px;
    height: 17px;
  }

  #bagPanel,
  #bagPanel.active {
    padding-inline: 8px;
  }

  #bagPanel .bag-board-row {
    gap: 5px;
    padding: 6px;
  }

  #bagPanel.active .bag-tray,
  #bagPanel.active .bag-tray.is-empty {
    min-height: 145px;
    flex-basis: 145px;
  }

  #bagPanel .bag-tray-list {
    min-height: 120px;
  }

  .unlock-showcase.item-unlock .unlock-card {
    width: min(334px, calc(100vw - 18px));
    min-height: 306px;
    padding: 29px 21px 20px;
  }
}

/* Submission-ready account surfaces and final lobby header alignment 1789918200000. */

.menu-button.apple {
  border-color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, #252525, #050505);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 5px 12px rgba(0, 0, 0, 0.42);
}

.login-policy-note {
  margin: 4px 4px 0;
  color: #8ca9ba;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
}

.login-policy-note a {
  color: #aeeaff;
  text-underline-offset: 2px;
}

#menuSettingsPanel .menu-policy-box {
  box-sizing: border-box;
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(86, 177, 218, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, rgba(61, 167, 218, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(10, 39, 59, 0.96), rgba(3, 16, 27, 0.98));
  box-shadow: inset 0 1px 0 rgba(219, 246, 255, 0.045);
}

.menu-policy-box > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.menu-policy-box > span strong {
  color: #fff0ad;
  font-size: 11px;
}

.menu-policy-box > span small {
  color: #9bbdce;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.35;
}

.menu-policy-links {
  width: 142px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.menu-policy-links a,
.menu-policy-links button {
  box-sizing: border-box;
  min-width: 0;
  min-height: 27px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 4px 5px;
  border: 1px solid rgba(93, 178, 219, 0.48);
  border-radius: 5px;
  background: rgba(5, 24, 38, 0.86);
  color: #d7effa;
  font-family: inherit;
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.menu-policy-links #deleteAccountButton {
  grid-column: 1 / -1;
  border-color: rgba(235, 113, 126, 0.52);
  color: #ffc0c7;
}

.menu-policy-links #deleteAccountButton.confirming {
  grid-column: 1 / -1;
  border-color: rgba(255, 163, 90, 0.82);
  color: #ffe0ae;
}

.menu-policy-links button:disabled {
  opacity: 0.42;
}

@media (max-width: 370px), (max-height: 760px) {

  #menuSettingsPanel .menu-policy-box {
    min-height: 78px;
    padding: 8px 9px;
  }

  .menu-policy-links {
    width: 136px;
  }
}

/* Attack/defense affinity split, item-grade parity and readable boss rewards. */
.element-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 4px 2px;
}

.element-mode-tab {
  min-height: 34px;
  border: 1px solid rgba(87, 181, 223, 0.35);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(18, 56, 80, 0.94), rgba(4, 19, 33, 0.98));
  color: #a7cadb;
  font-size: 10px;
  font-weight: 1000;
  box-shadow: inset 0 0 0 1px rgba(210, 244, 255, 0.025);
}

.element-mode-tab.active {
  border-color: rgba(255, 216, 106, 0.72);
  background:
    radial-gradient(circle at 50% 0, rgba(79, 191, 238, 0.22), transparent 70%),
    linear-gradient(180deg, #163f59, #071827);
  color: #fff0ad;
  box-shadow:
    inset 0 0 10px rgba(63, 184, 231, 0.18),
    0 0 9px rgba(62, 182, 231, 0.12);
}

#menuElementPanel .menu-element-box {
  padding-inline: 11px;
}

.element-wheel {
  width: min(286px, calc(100vw - 70px));
  flex: 0 0 auto;
  overflow: visible;
}

.element-wheel-node {
  width: 48px;
  height: 48px;
  grid-template-rows: 25px 12px;
  padding: 4px 2px;
  transform:
    translate(-50%, -50%)
    rotate(calc(-90deg + var(--wheel-index) * 51.428deg))
    translateY(-106px)
    rotate(calc(90deg - var(--wheel-index) * 51.428deg));
}

.element-wheel-node i,
.element-wheel-core i {
  width: 23px;
  height: 23px;
  font-size: 10px;
}

.element-wheel-node strong {
  font-size: 7.5px;
}

.element-wheel-core {
  width: 86px;
  height: 86px;
  grid-template-rows: 27px 17px 12px;
}

.element-wheel-core strong {
  font-size: 10px;
}

.element-wheel-core small {
  font-size: 6.5px;
}

.element-wheel-attack .element-wheel-cycle {
  stroke: rgba(255, 193, 99, 0.72);
}

.element-wheel-defense .element-wheel-cycle {
  stroke: rgba(93, 211, 255, 0.76);
}

.element-wheel-details {
  grid-template-columns: 1fr;
  gap: 4px;
}

.element-wheel-detail {
  min-height: 45px;
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 6px;
  padding: 5px 7px;
}

.element-wheel-detail strong {
  grid-row: auto;
  grid-template-columns: 23px minmax(0, 1fr);
  font-size: 9px;
}

.element-wheel-detail strong i {
  width: 22px;
  height: 22px;
}

.element-wheel-detail span,
.element-wheel-detail em {
  display: grid;
  gap: 2px;
  font-size: 8.5px;
  line-height: 1.18;
  white-space: normal;
}

.element-wheel-detail b {
  margin: 0;
  font-size: 7px;
}

.element-detail-defense span b {
  color: #78e8c0;
}

.element-detail-defense em b {
  color: #ffad8f;
}

.item-tile.rarity-SSS,
.tray-item.rarity-SSS,
.placed-item.rarity-SSS {
  --item-grade-surface:
    radial-gradient(circle at 18% 12%, rgba(157, 247, 255, 0.34), transparent 38%),
    linear-gradient(145deg, #173f55, #281a48 68%);
}

.item-tile.rarity-SS,
.tray-item.rarity-SS,
.placed-item.rarity-SS {
  --item-grade-surface:
    radial-gradient(circle at 18% 12%, rgba(255, 183, 201, 0.26), transparent 36%),
    linear-gradient(145deg, #4d2336, #241727 70%);
}

.item-tile.rarity-S,
.tray-item.rarity-S,
.placed-item.rarity-S {
  --item-grade-surface:
    radial-gradient(circle at 18% 12%, rgba(255, 220, 115, 0.25), transparent 34%),
    linear-gradient(145deg, #493611, #1f1d16 72%);
}

.item-tile.rarity-A,
.tray-item.rarity-A,
.placed-item.rarity-A {
  --item-grade-surface: linear-gradient(145deg, #34285d, #171b2c 72%);
}

.item-tile.rarity-B,
.tray-item.rarity-B,
.placed-item.rarity-B {
  --item-grade-surface: linear-gradient(145deg, #0d3547, #14212b 72%);
}

.item-tile.rarity-C,
.tray-item.rarity-C,
.placed-item.rarity-C {
  --item-grade-surface:
    radial-gradient(circle at 18% 12%, rgba(74, 222, 128, 0.2), transparent 36%),
    linear-gradient(145deg, #17432b, #151f21 74%);
}

.item-tile.rarity-D,
.tray-item.rarity-D,
.placed-item.rarity-D {
  --item-grade-surface:
    radial-gradient(circle at 18% 12%, rgba(217, 139, 70, 0.2), transparent 36%),
    linear-gradient(145deg, #342317, #1c1816 74%);
}

.item-tile.rarity-F,
.tray-item.rarity-F,
.placed-item.rarity-F {
  --item-grade-surface:
    radial-gradient(circle at 18% 12%, rgba(168, 121, 86, 0.2), transparent 34%),
    linear-gradient(145deg, #34271f, #181919 74%);
}

.item-tile[class*="rarity-"],
.tray-item[class*="rarity-"],
.placed-item[class*="rarity-"] {
  background: var(--item-grade-surface) !important;
}

.placed-item .item-icon,
.placed-item.item-art-badge .item-icon,
.placed-item.item-art-bow .item-icon,
.placed-item.item-art-guard .item-icon,
.placed-item.item-art-tall-shield .item-icon,
.placed-item.bonus-active .item-icon,
.placed-item.set-active .item-icon,
.placed-item[data-item-width][data-item-height] .item-icon {
  width: calc(100% - 8px) !important;
  height: calc(100% - 8px) !important;
  max-width: calc(100% - 8px) !important;
  max-height: calc(100% - 8px) !important;
  padding: 1px;
  object-fit: contain !important;
  object-position: center !important;
}

.reward-card.boss-choice,
.reward-panel.boss-reward .reward-card.boss-choice {
  min-height: 112px;
}

.reward-card.boss-choice .reward-copy small {
  color: #d8e9f1;
  font-size: 8.5px;
  line-height: 1.3;
  -webkit-line-clamp: 4;
}

@media (max-width: 370px), (max-height: 760px) {
  .element-wheel {
    width: min(260px, calc(100vw - 78px));
  }

  .element-wheel-node {
    width: 44px;
    height: 44px;
    transform:
      translate(-50%, -50%)
      rotate(calc(-90deg + var(--wheel-index) * 51.428deg))
      translateY(-96px)
      rotate(calc(90deg - var(--wheel-index) * 51.428deg));
  }

  .element-wheel-detail {
    grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Interaction and non-stretched modal surface correction 1785419400000. */
#bagMultiSellButton.active {
  border: 1px solid rgba(116, 215, 255, 0.78);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(34, 111, 151, 0.98), rgba(5, 35, 59, 0.99)) !important;
  color: #fff1b0;
  box-shadow:
    inset 0 0 0 1px rgba(3, 10, 17, 0.82),
    inset 0 1px 0 rgba(220, 246, 255, 0.16),
    0 0 9px rgba(79, 196, 242, 0.2);
  filter: none;
}

#bagPanel .bag-sell-bar {
  border: 1px solid rgba(102, 188, 229, 0.34);
  border-radius: 6px;
  background:
    radial-gradient(circle at 8% 20%, rgba(72, 167, 210, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(12, 42, 62, 0.96), rgba(3, 17, 29, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(218, 243, 255, 0.06),
    inset 0 -7px 12px rgba(0, 0, 0, 0.14);
}

#bagPanel .bag-sell-bar > span strong {
  color: #fff0ae;
}

#bagPanel .bag-sell-bar > span small {
  color: #9dc4d7;
}

#bagPanel .bag-effect-summary,
#bagPanel .bag-effect-summary.is-empty {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#bagPanel .bag-effect-summary.is-empty::after {
  content: none;
  display: none;
}

#bagPanel .effect-summary-scroll {
  box-sizing: border-box;
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 0 1px 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 202, 244, 0.58) rgba(2, 10, 18, 0.54);
}

#bagPanel .effect-summary-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 4px;
  max-height: none;
  overflow: visible;
}

#bagPanel .effect-summary-chip {
  min-height: 39px;
  height: auto;
  flex: 0 0 auto;
}

#bagPanel .effect-summary-empty {
  min-height: 56px;
  display: grid;
  place-items: center;
  padding: 7px;
  color: #7e9cad;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.item-info-card,
.enemy-info-card,
.pull-reveal-card,
.fusion-card,
.board-passive-choice-card,
.reward-modal-card,
.reward-panel.boss-reward .reward-modal-card,
.combat-stats-card,
.unlock-showcase.reward-result .unlock-card,
.end-card,
.end-panel:is(.defeat, .victory) .end-card,
.end-panel.clear .end-card {
  box-sizing: border-box;
  border: 1px solid rgba(107, 207, 249, 0.7) !important;
  border-image: none !important;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(67, 154, 204, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(8, 31, 49, 0.99), rgba(3, 12, 22, 0.995)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(2, 8, 14, 0.94),
    inset 0 0 0 3px rgba(107, 187, 226, 0.12),
    inset 0 -18px 32px rgba(0, 0, 0, 0.26),
    0 20px 46px rgba(0, 0, 0, 0.58);
  filter: none;
}

.item-info-card,
.enemy-info-card,
.pull-reveal-card,
.end-card,
.end-panel:is(.defeat, .victory) .end-card,
.end-panel.clear .end-card {
  width: min(360px, calc(100vw - 18px));
  padding: 14px 14px 15px;
}

.fusion-card,
.board-passive-choice-card {
  width: min(370px, calc(100vw - 14px));
  padding: 18px 16px 16px;
}

.icon-close-button,
.combat-stats-head .icon-close-button,
.item-info-head .icon-close-button {
  position: relative;
  box-sizing: border-box;
  width: 31px;
  min-width: 31px;
  height: 31px;
  min-height: 31px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(117, 207, 245, 0.54);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(72, 143, 180, 0.18), rgba(3, 14, 24, 0.96) 72%) !important;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-shadow: none;
  box-shadow:
    inset 0 0 0 1px rgba(1, 7, 12, 0.82),
    0 2px 6px rgba(0, 0, 0, 0.38);
  filter: none;
}

.icon-close-button::before,
.icon-close-button::after,
.combat-stats-head .icon-close-button::before,
.combat-stats-head .icon-close-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  border: 0;
  border-radius: 2px;
  background: #cfe7f2;
  box-shadow: 0 0 4px rgba(98, 205, 249, 0.24);
  transform-origin: center;
}

.icon-close-button::before,
.combat-stats-head .icon-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.icon-close-button::after,
.combat-stats-head .icon-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.icon-close-button:active {
  transform: translateY(1px);
  background:
    radial-gradient(circle, rgba(82, 167, 207, 0.2), rgba(3, 14, 24, 0.98) 72%) !important;
  filter: brightness(0.94);
}

.pull-inline-panel .icon-close-button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
}

.pull-inline-panel .icon-close-button::before,
.pull-inline-panel .icon-close-button::after {
  width: 10px;
  height: 1.5px;
}

.item-info-card {
  max-height: calc(100dvh - 18px);
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}

.item-info-head {
  align-items: center;
  min-height: 58px;
  padding: 0 2px 7px;
  border-bottom: 1px solid rgba(108, 197, 237, 0.2);
}

.item-info-icon {
  box-sizing: border-box;
  width: 58px;
  height: 58px;
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  filter:
    saturate(1.08)
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.56))
    drop-shadow(0 0 8px rgba(92, 198, 241, 0.18));
}

.item-info-head .label {
  color: #8edbf4;
  font-size: 9px;
}

.item-info-head strong {
  color: #fff0b0;
  font-size: 18px;
}

.item-info-card p {
  padding: 8px 9px;
  border-block: 1px solid rgba(102, 189, 229, 0.16);
  background: rgba(3, 14, 24, 0.42);
  color: #c7dae5;
  font-size: 11px;
  line-height: 1.42;
}

.item-info-stats span {
  border-color: rgba(98, 177, 216, 0.24);
  background: rgba(4, 17, 29, 0.74);
}

.item-info-actions .mini-button,
.unlock-showcase.reward-result .unlock-confirm-button {
  border: 1px solid rgba(111, 207, 247, 0.56);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(28, 95, 132, 0.96), rgba(5, 31, 54, 0.99)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(2, 9, 16, 0.78),
    inset 0 1px 0 rgba(220, 245, 255, 0.13);
  filter: none;
}

.item-info-actions .mini-button.danger {
  border-color: rgba(229, 136, 118, 0.52);
  background:
    linear-gradient(180deg, rgba(117, 52, 50, 0.96), rgba(43, 17, 22, 0.99)) !important;
}

.combat-stats-card {
  width: min(370px, calc(100vw - 14px));
  max-height: calc(100dvh - 14px);
  grid-template-rows: auto auto minmax(88px, 1fr);
  gap: 8px;
  padding: 14px 12px 13px;
  overflow: hidden;
}

.combat-stats-head {
  min-height: 47px;
  padding: 2px 40px 7px;
  border-bottom: 1px solid rgba(107, 199, 239, 0.22);
}

.combat-stats-head .icon-close-button {
  position: absolute;
  top: 1px;
  right: 0;
}

.combat-stat-detail {
  min-height: 43px;
  padding: 6px 8px;
  border: 1px solid rgba(100, 183, 222, 0.22);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(18, 48, 68, 0.78), rgba(4, 17, 29, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(214, 241, 253, 0.04),
    inset 0 -5px 9px rgba(0, 0, 0, 0.12);
}

.combat-stats-effect-list {
  min-height: 88px;
  padding: 13px 9px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(100, 183, 222, 0.22);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(11, 37, 55, 0.86), rgba(3, 14, 24, 0.94));
}

.combat-effect-title {
  top: -8px;
  background: #071a2a;
}

.reward-modal-card,
.reward-panel.boss-reward .reward-modal-card {
  width: min(360px, calc(100vw - 18px));
  min-height: 0;
  max-height: calc(100dvh - 18px);
  padding: 16px 14px 14px;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
  overflow: hidden;
}

.reward-modal-card > div:first-child {
  min-height: 52px;
  align-content: center;
  gap: 4px;
  padding: 3px 8px 9px;
  border-bottom: 1px solid rgba(110, 205, 245, 0.2);
}

.reward-modal-card > div:first-child .label {
  color: #8edcf4;
  font-size: 9px;
}

.reward-modal-card > div:first-child > strong {
  color: #fff0ae;
  font-size: 17px;
}

.reward-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.reward-card,
.reward-panel.boss-reward .reward-card,
.reward-panel.boss-reward .reward-riskCoins,
.reward-panel.boss-reward .reward-riskPurge,
.reward-panel.boss-reward .reward-riskOverclock {
  box-sizing: border-box;
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 9px 9px;
  border: 1px solid rgba(102, 193, 234, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 13% 28%, rgba(70, 164, 209, 0.15), transparent 36%),
    linear-gradient(180deg, rgba(14, 44, 64, 0.96), rgba(3, 15, 27, 0.99)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(1, 7, 13, 0.82),
    inset 0 1px 0 rgba(218, 243, 255, 0.06),
    0 3px 8px rgba(0, 0, 0, 0.3);
}

.reward-card:hover {
  border-color: rgba(240, 204, 103, 0.58);
  background:
    radial-gradient(circle at 13% 28%, rgba(213, 177, 75, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(22, 54, 70, 0.98), rgba(4, 18, 30, 0.99)) !important;
}

.reward-card:active {
  transform: translateY(1px);
  filter: brightness(1.08);
}

.reward-icon {
  box-sizing: border-box;
  width: 43px;
  height: 43px;
  padding: 5px;
  border: 1px solid rgba(112, 204, 244, 0.3);
  border-radius: 7px;
  background:
    radial-gradient(circle, rgba(86, 177, 222, 0.16), rgba(3, 13, 23, 0.7) 72%);
  object-fit: contain;
  image-rendering: auto;
  filter:
    saturate(1.08)
    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.48));
}

.reward-copy {
  min-width: 0;
  align-content: center;
  gap: 3px;
}

.reward-copy em {
  color: #8fdcf3;
  font-size: 8.5px;
}

.reward-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fff0b0;
  font-size: 10.5px;
  line-height: 1.28;
  white-space: normal;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.reward-card:not(.reward-ad-reroll) .reward-copy b {
  display: none;
}

.reward-ad-reroll,
.reward-panel .reward-ad-reroll,
.reward-panel.boss-reward .reward-ad-reroll {
  grid-column: 1 / -1;
  min-height: 64px;
  grid-template-columns: 43px minmax(0, 1fr);
  padding: 8px 11px;
  border-radius: 8px;
  border-image: none;
}

.reward-ad-reroll .reward-copy b {
  color: #91bfd3;
  font-size: 8.5px;
}

.unlock-showcase.reward-result {
  background:
    radial-gradient(circle at 50% 43%, rgba(54, 145, 195, 0.17), transparent 38%),
    rgba(1, 5, 11, 0.78);
}

.unlock-showcase.reward-result .unlock-card {
  width: min(342px, calc(100vw - 22px));
  min-height: 326px;
  display: grid;
  grid-template-rows: 88px 20px auto minmax(62px, auto) 40px;
  align-content: center;
  place-items: center;
  gap: 5px;
  padding: 18px 18px 16px;
  overflow: hidden;
}

.unlock-showcase.reward-result .unlock-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(146, 219, 248, 0.13);
  border-radius: 8px;
  pointer-events: none;
}

.unlock-showcase.reward-result .unlock-icon {
  box-sizing: border-box;
  width: 84px;
  height: 84px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  filter:
    saturate(1.08)
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 11px rgba(96, 203, 244, 0.22));
}

.unlock-showcase.reward-result .unlock-card .label {
  margin: 0;
  color: #8dddf4;
  font-size: 9px;
}

.unlock-showcase.reward-result .unlock-card > strong {
  max-width: 282px;
  color: #fff0af;
  font-size: 20px;
}

.unlock-showcase.reward-result .unlock-card p {
  box-sizing: border-box;
  width: min(284px, 100%);
  min-height: 62px;
  max-height: 86px;
  display: grid;
  place-items: center;
  margin: 2px 0;
  padding: 9px 11px;
  overflow-y: auto;
  border-block: 1px solid rgba(102, 192, 233, 0.18);
  background: linear-gradient(90deg, transparent, rgba(24, 68, 94, 0.22) 18% 82%, transparent);
  color: #d5e5ed;
  font-size: 11px;
  line-height: 1.4;
}

.unlock-showcase.reward-result .unlock-confirm-button {
  width: min(224px, 100%);
  min-width: 0;
  min-height: 38px;
  margin: 0;
}

@media (max-width: 370px), (max-height: 760px) {
  .combat-stats-card {
    width: min(350px, calc(100vw - 10px));
    padding: 11px 9px 10px;
    gap: 6px;
  }

  .combat-stat-detail {
    min-height: 40px;
    padding: 5px 6px;
  }

  .reward-modal-card,
  .reward-panel.boss-reward .reward-modal-card {
    width: min(350px, calc(100vw - 10px));
    padding: 13px 10px 11px;
  }

  .reward-card,
  .reward-panel.boss-reward .reward-card {
    min-height: 82px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 5px;
    padding: 7px;
  }

  .reward-icon {
    width: 38px;
    height: 38px;
  }

  .unlock-showcase.reward-result .unlock-card {
    width: min(334px, calc(100vw - 16px));
    min-height: 312px;
    padding: 15px 15px 13px;
  }
}

/* Purpose-built mobile control assets. Each raster is authored for the shape
   that consumes it so decorative caps and jewels are no longer distorted. */
#battleButton {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-medium-primary.png") center / 100% 100% no-repeat;
}

.skill-button,
.skip-button {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-skill-neutral.png") center / 100% 100% no-repeat;
}

.skill-button.ready {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-primary.png");
}

.chance-button,
#bagMultiSellButton,
#clearBagButton,
#pullOneButton,
#pullFiveButton,
.tutorial-actions button {
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-chance-neutral.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.chance-button.premium {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-chance-primary.png");
}

.tutorial-actions button:first-child,
#pullFiveButton {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png");
}

.mini-button,
.menu-small-button,
.menu-small-button.ghost {
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.mini-button.accent {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-small-primary.png");
}

.primary-button {
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-medium-primary.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.primary-button.needs-item {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png");
}

.menu-button,
.menu-setting-button {
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-wide-neutral.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.menu-button.primary,
.menu-button.google {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-wide-primary.png");
}

#wavePreview {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-ultrawide-neutral.png") center / 100% 100% no-repeat;
}

.tabs {
  background: url("assets/generated/ui_controls_purpose_1788505000000/tab-tray-wide.png") center / 100% 100% no-repeat;
}

.tab-button {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center / 100% 100% no-repeat;
}

.tab-button.active {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png");
}

#menuGrowthPanel .menu-panel-head,
#menuRecipePanel .menu-panel-head,
#menuElementPanel .menu-panel-head,
#menuCodexPanel .menu-panel-head,
#menuRankingPanel .menu-panel-head,
#menuStorePanel .menu-panel-head,
.menu-sub-panel .menu-panel-head {
  background: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat;
}

#menuSettingsPanel .menu-panel-head {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-wide.png");
}

.menu-back-button,
#menuSettingsBackButton {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat;
}

.ranking-scope-button {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-neutral.png") center / 100% 100% no-repeat;
}

.ranking-scope-button.active {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-primary.png");
}

.store-product-card {
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat;
}

.run-prep-card > p,
.store-notice {
  background: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat;
}

.tutorial-panel {
  border: 0;
  border-radius: 0;
  background-color: #061827;
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/tutorial-panel.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
}

.tutorial-panel::after {
  border-top-color: #071827;
  border-bottom-color: #071827;
}

.tutorial-actions button:last-child {
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-chance-neutral.png") center / 100% 100% no-repeat;
  color: #e5f3ff;
}

.run-prep-actions .mini-button,
.end-actions #endMenuButton,
.end-actions #endShardReviveButton,
.end-actions #endRestartButton,
.end-actions #endHomeButton {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-result-half-neutral.png") center / 100% 100% no-repeat;
}

.run-prep-actions .mini-button.accent,
.end-actions #endRestartButton {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-result-half-primary.png");
}

.end-actions #endStoneReviveButton,
.end-actions #endShardBonusButton,
#menuGameHomeButton,
#rewardedAdCancelButton {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-wide-neutral.png") center / 100% 100% no-repeat;
}

#fusionCloseButton {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-fusion-primary.png") center / 100% 100% no-repeat;
}

.reward-ad-reroll,
.reward-panel .reward-ad-reroll,
.reward-panel.boss-reward .reward-ad-reroll,
.pull-reveal.high-rarity .reveal-card-actions .mini-button {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-wide-primary.png") center / 100% 100% no-repeat;
}

.rewarded-ad-card .mini-button {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-wide-neutral.png") center / 100% 100% no-repeat;
}

.pull-reveal.high-rarity .rare-grade {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat;
}

.effect-summary-chip {
  border: 1px solid rgba(103, 199, 238, 0.42);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 42%, rgba(43, 142, 193, 0.2), transparent 62%),
    linear-gradient(145deg, rgba(17, 45, 66, 0.98), rgba(3, 13, 24, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 147, 0.08),
    inset 0 0 9px rgba(46, 163, 211, 0.1);
}

.effect-summary-chip.complete {
  border-color: rgba(255, 216, 104, 0.58);
  background:
    radial-gradient(circle at 50% 42%, rgba(90, 205, 244, 0.28), transparent 64%),
    linear-gradient(145deg, rgba(25, 75, 101, 0.98), rgba(5, 24, 39, 0.99));
}

.codex-detail-close,
.combat-stats-head .icon-close-button {
  border: 1px solid rgba(103, 199, 238, 0.52);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 36%, rgba(50, 161, 207, 0.22), transparent 66%),
    linear-gradient(145deg, #17384f, #071724 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 225, 145, 0.1),
    inset 0 -3px 7px rgba(0, 0, 0, 0.36),
    0 4px 8px rgba(0, 0, 0, 0.36);
}

.unlock-confirm-button,
#storyPrevButton,
#storySkipButton,
#storyNextButton {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-neutral.png") center / 100% 100% no-repeat;
}

.unlock-confirm-button,
#storyNextButton {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-primary.png");
}

#menuGrowthPanel.active,
#menuRecipePanel.active,
#menuElementPanel.active,
#menuCodexPanel.active,
#menuRankingPanel.active {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  padding: 1px 0 0;
  border: 14px solid transparent;
  border-image-source: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png");
  border-image-slice: 120 fill;
  border-image-width: 14px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46);
}

#menuCodexPanel.active {
  height: min(790px, calc(100dvh - 22px));
  max-height: min(790px, calc(100dvh - 22px));
  margin-top: 6px;
  padding: 1px 0 0;
}

/* Mobile submenu, tutorial, reward and placement clarity pass 1788650000000. */
.main-menu[data-panel="growth"] .menu-title,
.main-menu[data-panel="recipes"] .menu-title,
.main-menu[data-panel="elements"] .menu-title,
.main-menu[data-panel="codex"] .menu-title,
.main-menu[data-panel="ranking"] .menu-title,
.main-menu[data-panel="store"] .menu-title {
  display: none;
}

.main-menu[data-panel="growth"],
.main-menu[data-panel="recipes"],
.main-menu[data-panel="elements"],
.main-menu[data-panel="codex"],
.main-menu[data-panel="ranking"],
.main-menu[data-panel="store"] {
  padding: 0;
}

.main-menu[data-panel="growth"] .menu-scene,
.main-menu[data-panel="recipes"] .menu-scene,
.main-menu[data-panel="elements"] .menu-scene,
.main-menu[data-panel="codex"] .menu-scene,
.main-menu[data-panel="ranking"] .menu-scene,
.main-menu[data-panel="store"] .menu-scene {
  width: min(100%, 430px);
  height: 100dvh;
  min-height: 0;
  max-height: none;
}

.main-menu[data-panel="growth"] .menu-card,
.main-menu[data-panel="recipes"] .menu-card,
.main-menu[data-panel="elements"] .menu-card,
.main-menu[data-panel="codex"] .menu-card,
.main-menu[data-panel="ranking"] .menu-card,
.main-menu[data-panel="store"] .menu-card {
  top: max(6px, env(safe-area-inset-top));
  bottom: max(6px, env(safe-area-inset-bottom));
  left: 7px;
  right: 7px;
}

#menuGrowthPanel.active,
#menuRecipePanel.active,
#menuElementPanel.active,
#menuCodexPanel.active,
#menuRankingPanel.active {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  gap: 8px;
  padding: 15px 12px 13px;
  overflow-x: hidden;
  overflow-y: auto;
}

#menuGrowthPanel.active,
#menuElementPanel.active {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#menuGrowthPanel .menu-meta-box {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

#menuRankingPanel.active {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

#menuGrowthPanel .menu-panel-head,
#menuRecipePanel .menu-panel-head,
#menuElementPanel .menu-panel-head,
#menuCodexPanel .menu-panel-head,
#menuRankingPanel .menu-panel-head {
  box-sizing: border-box;
  min-height: 46px;
  padding: 5px 11px 6px 17px;
  flex: 0 0 auto;
}

#menuGrowthPanel .menu-panel-head > strong,
#menuRecipePanel .menu-panel-head > strong,
#menuElementPanel .menu-panel-head > strong,
#menuCodexPanel .menu-panel-head > strong,
#menuRankingPanel .menu-panel-head > strong {
  color: #fff0ad;
  font-size: 17px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.menu-sub-panel .menu-panel-head .menu-back-button {
  width: 76px;
  min-width: 76px;
  height: 32px;
  padding: 0 8px;
}

#menuRecipePanel .menu-recipe-head {
  cursor: default;
}

#menuRecipePanel .menu-recipe-head::after {
  display: none;
  content: none;
}

#menuRecipePanel .menu-recipe-body {
  display: block;
}

.game-ranking-list {
  align-content: start;
  grid-auto-rows: min-content;
}

/* The element screen is authored as a vector wheel, not a stretched panel image. */
#menuElementPanel .menu-element-box {
  min-height: 0;
  gap: 7px;
  padding: 6px 7px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.element-rule-head {
  min-height: 34px;
  padding: 2px 5px;
  border-bottom: 1px solid rgba(104, 196, 236, 0.2);
}

.element-rule-head span {
  color: #fff0ad;
  font-size: 13px;
}

.element-rule-head strong {
  color: #8eddf5;
  font-size: 10px;
}

.element-wheel {
  position: relative;
  box-sizing: border-box;
  width: min(304px, 82vw);
  aspect-ratio: 1;
  margin: 0 auto;
  isolation: isolate;
}

.element-wheel-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 7px rgba(71, 191, 239, 0.2));
}

.element-wheel-lines circle {
  fill: rgba(4, 18, 31, 0.58);
  stroke: rgba(112, 205, 242, 0.28);
  stroke-width: 2;
}

.element-wheel-lines circle + circle {
  fill: rgba(6, 23, 39, 0.86);
  stroke: rgba(255, 211, 106, 0.3);
}

.element-wheel-lines path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.element-wheel-lines marker path {
  fill: #75d9f5;
  stroke: none;
}

.element-wheel-cycle {
  stroke: rgba(117, 217, 245, 0.74);
  stroke-width: 2.2;
}

.element-wheel-spokes {
  stroke: rgba(255, 211, 106, 0.2);
  stroke-width: 1.3;
  stroke-dasharray: 3 6;
}

.element-wheel-node {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  display: grid;
  grid-template-rows: 30px 14px;
  place-items: center;
  padding: 4px 3px;
  border: 1px solid color-mix(in srgb, var(--element-color) 75%, #d9f5ff);
  border-radius: 50%;
  background: #071827;
  box-shadow:
    inset 0 0 0 3px rgba(1, 7, 13, 0.86),
    inset 0 0 14px color-mix(in srgb, var(--element-color) 28%, transparent),
    0 0 12px color-mix(in srgb, var(--element-color) 25%, transparent);
  transform:
    translate(-50%, -50%)
    rotate(calc(-90deg + var(--wheel-index) * 51.428deg))
    translateY(-116px)
    rotate(calc(90deg - var(--wheel-index) * 51.428deg));
}

.element-wheel-node i,
.element-wheel-core i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--element-color) 24%, #06131f);
  color: #fff7d6;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
  text-shadow: 0 1px 3px #000;
}

.element-wheel-node strong {
  color: var(--element-color);
  font-size: 8px;
  line-height: 1;
}

.element-wheel-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 92px;
  height: 92px;
  display: grid;
  grid-template-rows: 32px 18px 13px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255, 218, 112, 0.5);
  border-radius: 50%;
  background: #081827;
  box-shadow:
    inset 0 0 0 4px rgba(1, 7, 13, 0.88),
    inset 0 0 22px rgba(112, 194, 229, 0.17),
    0 0 18px rgba(255, 207, 95, 0.13);
  transform: translate(-50%, -50%);
}

.element-wheel-core strong {
  color: #fff0ad;
  font-size: 11px;
}

.element-wheel-core small {
  color: #8cb7cb;
  font-size: 7px;
}

.element-wood { --element-color: #79df84; }
.element-fire { --element-color: #ff775e; }
.element-earth { --element-color: #e6a257; }
.element-metal { --element-color: #c6d6e8; }
.element-water { --element-color: #63bcff; }
.element-light { --element-color: #ffe073; }
.element-dark { --element-color: #c88cff; }
.element-neutral { --element-color: #a9c0cd; }

.element-wheel-guide {
  margin: -2px 5px 1px;
  color: #bed5e2;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.element-wheel-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.element-wheel-detail {
  min-width: 0;
  min-height: 47px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 5px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--element-color) 38%, #173449);
  border-radius: 7px;
  background: #071827;
  box-shadow: inset 0 0 9px color-mix(in srgb, var(--element-color) 9%, transparent);
}

.element-wheel-detail strong {
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 3px;
  color: var(--element-color);
  font-size: 9px;
}

.element-wheel-detail strong i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--element-color) 20%, #071827);
  color: #fff;
  font-size: 8px;
  font-style: normal;
}

.element-wheel-detail span,
.element-wheel-detail em {
  min-width: 0;
  color: #d4e3eb;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.element-wheel-detail b {
  margin-right: 4px;
  color: #82ddf8;
  font-size: 7px;
}

.element-wheel-detail em b {
  color: #ff9d91;
}

/* Tutorial stays inside the same viewport and progress never visually resets. */
.tutorial-panel,
.tutorial-panel[class*="tutorial-step-"],
.tutorial-panel[class*="tutorial-"] {
  box-sizing: border-box;
  width: min(354px, calc(100vw - 12px));
  max-width: calc(100vw - 12px);
  max-height: min(116px, calc(100dvh - 12px));
  grid-template-columns: minmax(0, 1fr) 66px;
  gap: 7px;
  padding: 10px 12px;
  overflow: hidden;
}

.tutorial-panel > div:first-child {
  min-width: 0;
}

.tutorial-panel strong {
  max-width: 100%;
  margin: 0 0 2px;
  overflow: hidden;
  color: #fff0ad;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tutorial-panel p {
  max-height: 47px;
  margin: 0;
  overflow: hidden;
  color: #d7e8f2;
  font-size: 9px;
  line-height: 1.3;
}

/* Guided first-run spotlight: everything except the current action stays subdued. */
.tutorial-spotlight {
  position: fixed;
  z-index: 150;
  box-sizing: border-box;
  border: 2px solid rgba(255, 224, 123, 0.98);
  border-radius: 10px;
  background: transparent;
  box-shadow:
    0 0 0 9999px rgba(1, 6, 14, 0.74),
    0 0 0 4px rgba(255, 212, 82, 0.15),
    0 0 25px rgba(255, 215, 89, 0.54);
  pointer-events: none;
  transition: left 120ms ease, top 120ms ease, width 120ms ease, height 120ms ease;
}

.tutorial-spotlight[hidden] {
  display: none;
}

body.tutorial-locked {
  overscroll-behavior: none;
}

body.tutorial-locked .tutorial-panel.active {
  z-index: 160;
}

body.tutorial-locked .tutorial-target {
  outline: 0 !important;
  box-shadow: none !important;
}

.tutorial-actions {
  min-width: 0;
  gap: 3px;
}

.tutorial-actions button,
.tutorial-actions button:first-child,
.tutorial-actions button:last-child {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat;
  color: #e8f5ff;
  box-shadow: none;
}

.tutorial-panel.tutorial-single-action .tutorial-actions {
  align-self: stretch;
  display: grid;
  grid-template-rows: 30px;
  align-content: center;
  justify-content: stretch;
}

.tutorial-panel.tutorial-single-action .tutorial-actions button:not([hidden]) {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  margin: 0;
}

.tutorial-panel.tutorial-final-actions {
  min-height: 92px;
}

.tutorial-panel.tutorial-final-actions .tutorial-actions {
  align-self: stretch;
  display: grid;
  grid-template-rows: repeat(2, 30px);
  align-content: center;
  gap: 3px;
  overflow: hidden;
}

.tutorial-panel.tutorial-final-actions .tutorial-actions button {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  margin: 0;
}

/* Pull controls use the same authored shape and enforce exact ticket costs. */
#capsulesPanel .panel-head .button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 176px;
  gap: 5px;
}

#pullOneButton,
#pullFiveButton {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 0 8px;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center / 100% 100% no-repeat;
  color: #e8f4ff;
  font-size: 10px;
  text-align: center;
}

#pullFiveButton {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png");
  color: #fff0b0;
}

#pullOneButton:disabled,
#pullFiveButton:disabled {
  opacity: 0.42;
  filter: grayscale(0.72) brightness(0.72);
}

/* Reward panels use the square reward frame and purpose-built reward buttons. */
.reward-modal-card,
.reward-panel.boss-reward .reward-modal-card {
  width: min(378px, calc(100vw - 8px));
  min-height: 0;
  max-height: calc(100dvh - 8px);
  padding: 60px 31px 46px;
  gap: 6px;
  border: 0 !important;
  border-radius: 0;
  background: url("assets/generated/reward_refresh_1788474000000/fusion-panel-square.png") center / 100% 100% no-repeat !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.66);
}

.reward-modal-card > div:first-child {
  min-height: 48px;
  gap: 2px;
  padding: 0 8px 7px;
  border-bottom: 1px solid rgba(120, 210, 247, 0.25);
}

.reward-modal-card > div:first-child .label {
  color: #8eddf5;
  font-size: 8px;
}

.reward-modal-card > div:first-child > strong {
  color: #fff0ad;
  font-size: 16px;
}

.reward-grid {
  gap: 6px;
  padding: 1px;
}

.reward-card,
.reward-panel.boss-reward .reward-card,
.reward-panel.boss-reward .reward-riskCoins,
.reward-panel.boss-reward .reward-riskPurge,
.reward-panel.boss-reward .reward-riskOverclock {
  min-height: 82px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 6px;
  padding: 8px 9px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-chance-neutral.png") center / 100% 100% no-repeat !important;
  box-shadow: none;
}

.reward-card:hover,
.reward-card:active {
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-chance-primary.png") center / 100% 100% no-repeat !important;
}

.reward-icon {
  width: 40px;
  height: 40px;
  padding: 4px;
  border-color: rgba(126, 213, 249, 0.34);
  background: #061827;
}

.reward-copy strong {
  color: #fff0ad;
  font-size: 10px;
  line-height: 1.24;
  -webkit-line-clamp: 2;
}

.reward-card.boss-choice .reward-copy {
  gap: 4px;
}

.reward-card.boss-choice .reward-copy strong {
  color: #ffe27a;
  font-size: 12px;
  line-height: 1.1;
}

.reward-card.boss-choice .reward-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #c6dce8;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.28;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.reward-ad-reroll,
.reward-panel .reward-ad-reroll,
.reward-panel.boss-reward .reward-ad-reroll {
  min-height: 62px;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-wide-primary.png") center / 100% 100% no-repeat !important;
}

/* D is warm bronze and B is bright blue, so they cannot be mistaken at a glance. */
.rarity-D {
  border-color: #d98b46;
  color: #f0b36d;
}

.rarity-B {
  border-color: #35c8ff;
  color: #79ddff;
}

.item-tile.rarity-D,
.tray-item.rarity-D,
.inline-reveal-item.rarity-D,
.fusion-material.rarity-D,
.fusion-result-pop.rarity-D {
  color: #f0b36d;
  background: #342317;
  box-shadow: inset 0 0 12px rgba(217, 139, 70, 0.2);
}

.item-tile.rarity-B,
.tray-item.rarity-B,
.inline-reveal-item.rarity-B,
.fusion-material.rarity-B,
.fusion-result-pop.rarity-B {
  color: #79ddff;
  background: #0d3547;
  box-shadow: inset 0 0 12px rgba(53, 200, 255, 0.2);
}

.capsule.rarity-D {
  color: #f0b36d;
  border-color: #d98b46;
}

.capsule.rarity-B {
  color: #79ddff;
  border-color: #35c8ff;
}

/* Items that affect neighbors draw their exact one-cell perimeter in the bag. */
.bag-cell.adjacency-range {
  outline: 1px dashed rgba(92, 219, 255, 0.78);
  outline-offset: -3px;
  box-shadow:
    inset 0 0 0 2px rgba(3, 18, 30, 0.86),
    inset 0 0 10px rgba(54, 191, 236, 0.22);
}

.placed-item.adjacency-source {
  outline: 2px solid rgba(255, 218, 101, 0.92);
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 222, 115, 0.52),
    0 0 0 2px rgba(76, 207, 247, 0.3),
    0 0 12px rgba(70, 200, 242, 0.28);
}

.placed-item.adjacency-boosted {
  outline: 1px solid rgba(105, 255, 203, 0.9);
  outline-offset: -5px;
}

.placed-item.adjacency-source.adjacency-boosted {
  outline-color: rgba(255, 231, 118, 0.96);
  outline-offset: -5px;
}

.adjacency-boost-mark {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 5;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(133, 255, 213, 0.94);
  border-radius: 50%;
  background: rgba(4, 48, 43, 0.94);
  color: #baffdf;
  font-size: 8px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 0 6px rgba(77, 255, 193, 0.72);
  pointer-events: none;
}

.stage-controls .skill-button,
.stage-controls .skill-button:only-child {
  width: 104px;
  min-width: 104px;
  min-height: 26px;
  height: 26px;
  padding: 0 10px;
  font-size: 9px;
}

@media (max-width: 370px), (max-height: 760px) {
  .element-wheel {
    width: min(270px, 78vw);
  }

  .element-wheel-node {
    width: 50px;
    height: 50px;
    grid-template-rows: 27px 12px;
    transform:
      translate(-50%, -50%)
      rotate(calc(-90deg + var(--wheel-index) * 51.428deg))
      translateY(-103px)
      rotate(calc(90deg - var(--wheel-index) * 51.428deg));
  }

  .element-wheel-node i,
  .element-wheel-core i {
    width: 24px;
    height: 24px;
  }

  .element-wheel-core {
    width: 82px;
    height: 82px;
  }

  .element-wheel-details {
    gap: 4px;
  }

  .element-wheel-detail {
    min-height: 43px;
    grid-template-columns: 39px minmax(0, 1fr);
    padding: 4px 5px;
  }

  .reward-modal-card,
  .reward-panel.boss-reward .reward-modal-card {
    width: min(354px, calc(100vw - 12px));
    padding: 54px 27px 40px;
  }

  .reward-card,
  .reward-panel.boss-reward .reward-card {
    min-height: 76px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 7px;
  }

  .reward-icon {
    width: 36px;
    height: 36px;
  }
}

/* Final mobile precedence for the split affinity view and boss reward copy. */
#menuElementPanel .element-wheel {
  width: min(286px, calc(100vw - 70px));
  flex: 0 0 auto;
  overflow: visible;
}

#menuElementPanel .element-wheel-node {
  width: 48px;
  height: 48px;
  grid-template-rows: 25px 12px;
  padding: 4px 2px;
  transform:
    translate(-50%, -50%)
    rotate(calc(-90deg + var(--wheel-index) * 51.428deg))
    translateY(-106px)
    rotate(calc(90deg - var(--wheel-index) * 51.428deg));
}

#menuElementPanel .element-wheel-node i,
#menuElementPanel .element-wheel-core i {
  width: 23px;
  height: 23px;
  font-size: 10px;
}

#menuElementPanel .element-wheel-node strong {
  font-size: 7.5px;
}

#menuElementPanel .element-wheel-core {
  width: 86px;
  height: 86px;
  grid-template-rows: 27px 17px 12px;
}

#menuElementPanel .element-wheel-core strong {
  font-size: 10px;
}

#menuElementPanel .element-wheel-core small {
  font-size: 6.5px;
}

#menuElementPanel .element-wheel-details {
  grid-template-columns: 1fr;
  gap: 4px;
}

#menuElementPanel .element-wheel-detail {
  min-height: 45px;
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 6px;
  padding: 5px 7px;
}

#menuElementPanel .element-wheel-detail strong {
  grid-row: auto;
  grid-template-columns: 23px minmax(0, 1fr);
  font-size: 9px;
}

#menuElementPanel .element-wheel-detail strong i {
  width: 22px;
  height: 22px;
}

#menuElementPanel .element-wheel-detail span,
#menuElementPanel .element-wheel-detail em {
  display: grid;
  gap: 2px;
  font-size: 8.5px;
  line-height: 1.18;
  white-space: normal;
}

#menuElementPanel .element-wheel-detail b {
  margin: 0;
  font-size: 7px;
}

.reward-panel.boss-reward .reward-card.boss-choice {
  min-height: 76px;
}

.reward-panel.boss-reward .reward-card.boss-choice .reward-copy small {
  display: block;
  overflow: visible;
  color: #d8e9f1;
  font-size: 9.5px;
  line-height: 1.34;
  white-space: pre-line;
  -webkit-line-clamp: unset;
}

.reward-panel.boss-reward .reward-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.reward-panel.boss-reward .reward-card {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 11px;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuElementPanel .element-wheel {
    width: min(260px, calc(100vw - 78px));
  }

  #menuElementPanel .element-wheel-node {
    width: 44px;
    height: 44px;
    transform:
      translate(-50%, -50%)
      rotate(calc(-90deg + var(--wheel-index) * 51.428deg))
      translateY(-96px)
      rotate(calc(90deg - var(--wheel-index) * 51.428deg));
  }

  #menuElementPanel .element-wheel-detail {
    grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Mobile layout correction: settings, board rewards, bag, recipes and compact board copy. */
.main-menu[data-panel="settings"] {
  padding: 0;
  background:
    radial-gradient(circle at 50% 0, rgba(49, 142, 193, 0.18), transparent 38%),
    linear-gradient(180deg, #061522 0%, #020811 100%);
}

.main-menu[data-panel="settings"] .menu-title,
.main-menu[data-panel="settings"] .menu-characters {
  display: none;
}

.main-menu[data-panel="settings"] .menu-scene {
  width: min(100%, 430px);
  height: 100dvh;
  min-height: 0;
  max-height: none;
  background:
    radial-gradient(circle at 50% 8%, rgba(74, 178, 224, 0.13), transparent 31%),
    linear-gradient(180deg, #071a29 0%, #020a13 100%);
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.34);
}

.main-menu[data-panel="settings"] .menu-scene::before {
  opacity: 0.28;
}

.main-menu[data-panel="settings"] .menu-scene::after {
  display: none;
}

.main-menu[data-panel="settings"] .menu-card {
  top: max(6px, env(safe-area-inset-top));
  right: 7px;
  bottom: max(6px, env(safe-area-inset-bottom));
  left: 7px;
}

#menuSettingsPanel.menu-panel.active {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: none;
  align-content: start;
  grid-auto-rows: min-content;
  gap: 9px;
  padding: 14px 12px 13px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(103, 205, 246, 0.62);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0, rgba(58, 156, 205, 0.15), transparent 30%),
    linear-gradient(180deg, rgba(8, 31, 49, 0.99), rgba(2, 10, 18, 0.995));
  box-shadow:
    inset 0 0 0 2px rgba(2, 8, 14, 0.92),
    inset 0 -20px 36px rgba(0, 0, 0, 0.2),
    0 16px 34px rgba(0, 0, 0, 0.52);
}

#menuSettingsPanel .menu-account-box,
#menuSettingsPanel .menu-cloud-box,
#menuSettingsPanel .menu-game-home-box {
  border: 1px solid rgba(86, 177, 218, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, rgba(61, 167, 218, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(10, 39, 59, 0.96), rgba(3, 16, 27, 0.98));
  box-shadow: inset 0 1px 0 rgba(219, 246, 255, 0.045);
  filter: none;
}

.board-passive-choice-card {
  overflow-x: hidden;
  overflow-y: auto;
}

.board-passive-choice-list {
  max-height: min(380px, calc(100dvh - 238px));
  padding-right: 2px;
  overflow-x: hidden;
  overflow-y: auto;
}

.board-passive-choice {
  box-sizing: border-box;
  min-height: 88px;
  height: auto;
  padding: 8px 10px;
  overflow: visible;
}

.board-passive-choice > span {
  min-height: 0;
  align-content: center;
  gap: 2px;
  overflow: visible;
}

.board-passive-choice small,
.board-passive-choice em {
  display: block;
  max-height: none;
  overflow: visible;
  font-size: 8.5px;
  line-height: 1.28;
  text-overflow: clip;
  white-space: normal;
  -webkit-line-clamp: unset;
}

#bagPanel .bag-tray.is-empty .bag-tray-list {
  grid-template-columns: minmax(0, 1fr);
  place-items: stretch;
}

#bagPanel .bag-tray.is-empty .tray-empty {
  grid-column: 1 / -1;
  box-sizing: border-box;
  width: 100%;
  min-height: 112px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 14px 18px;
  overflow: visible;
  color: #91b6c9;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
}

#menuRecipePanel.active {
  grid-template-rows: auto minmax(255px, 0.95fr) minmax(245px, 1.05fr);
  overflow: hidden;
}

#menuRecipePanel .menu-unlock-list,
#menuRecipePanel .unlock-overview,
#menuRecipePanel .menu-recipe-box,
#menuRecipePanel .menu-recipe-body {
  min-height: 0;
}

#menuRecipePanel .menu-unlock-list {
  overflow: hidden;
}

#menuRecipePanel .unlock-overview {
  height: 100%;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

#menuRecipePanel .unlock-scroll {
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}

#menuRecipePanel .unlock-row {
  grid-template-columns: minmax(0, 1fr);
}

#menuRecipePanel .unlock-pill,
#menuRecipePanel button.unlock-pill {
  min-height: 44px;
}

#menuRecipePanel .unlock-pill-copy small {
  overflow: visible;
  line-height: 1.22;
  text-overflow: clip;
  white-space: normal;
}

#menuRecipePanel .menu-recipe-box {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#menuRecipePanel .menu-recipe-body {
  overflow: hidden;
}

#menuRecipePanel .menu-recipe-list {
  height: 100%;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}

#capsulesPanel .panel-head .button-row {
  width: 154px;
  gap: 4px;
}

#boardSummary,
.chance-button small {
  text-overflow: clip;
}

.placed-item[data-item-width="1"][data-item-height="1"] .item-icon {
  width: calc(100% - 4px) !important;
  height: calc(100% - 4px) !important;
  max-width: calc(100% - 4px) !important;
  max-height: calc(100% - 4px) !important;
}

.item-base-starBadge .item-icon,
.item-base-starBadge .tray-icon,
.item-base-angelTear .item-icon,
.item-base-angelTear .tray-icon {
  transform: scale(1.22);
  transform-origin: center;
}

.item-base-dagger .item-icon,
.item-base-dagger .tray-icon,
.item-base-pulseNeedle .item-icon,
.item-base-pulseNeedle .tray-icon,
.item-base-bronzeMail .item-icon,
.item-base-bronzeMail .tray-icon {
  transform: scale(1.08);
  transform-origin: center;
}

.item-base-rustAxe .item-icon,
.item-base-rustAxe .tray-icon {
  filter:
    brightness(1.28)
    contrast(1.08)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.82)) !important;
}

.fusion-result-pop.item-base-starBadge img {
  transform: translateY(-2px) scale(1.6);
  transform-origin: center;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuSettingsPanel.menu-panel.active {
    gap: 7px;
    padding: 10px 9px 9px;
  }

  #menuSettingsPanel .menu-account-box,
  #menuSettingsPanel .menu-cloud-box {
    min-height: 76px;
    padding-block: 10px;
  }

  #menuRecipePanel.active {
    grid-template-rows: auto minmax(235px, 0.95fr) minmax(225px, 1.05fr);
  }

  .board-passive-choice-list {
    max-height: min(360px, calc(100dvh - 222px));
  }
}

/* Purpose-built combat and reward surfaces 1788795000000. */
.combat-panel {
  position: relative;
  isolation: isolate;
  margin-bottom: 0 !important;
  padding: 8px 9px 8px;
  overflow: visible;
  border: 1px solid rgba(86, 166, 207, 0.42) !important;
  border-image: none !important;
  border-radius: 11px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(59, 142, 187, 0.15), transparent 42%),
    linear-gradient(180deg, rgba(8, 27, 44, 0.98), rgba(2, 10, 18, 0.99)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(206, 240, 255, 0.035),
    inset 0 -14px 26px rgba(0, 0, 0, 0.22),
    0 5px 11px rgba(0, 0, 0, 0.34);
  filter: none;
}

.combat-panel::before,
.combat-panel::after {
  content: none !important;
  display: none !important;
}

.fight-stage {
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: clamp(138px, calc((100vw - 40px) / 2.318), 152px);
  overflow: visible;
  border: 0 !important;
  border-image: none !important;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(60, 160, 201, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(5, 18, 31, 0.94), rgba(2, 8, 15, 0.99)) !important;
  box-shadow: inset 0 -18px 28px rgba(0, 0, 0, 0.3);
}

.fight-stage::before {
  content: "" !important;
  position: absolute;
  inset: -3px -4px;
  z-index: 1;
  display: block !important;
  border: 0;
  background: url("assets/generated/combat_ui_refresh_1788795000000/battle-frame.webp") center / 100% 100% no-repeat !important;
  opacity: 1;
  pointer-events: none;
}

.fight-stage::after {
  z-index: 0;
}

.fighter {
  z-index: 2;
}

.combat-panel + .tabs,
.tabs {
  box-sizing: border-box;
  min-height: 58px;
  height: 58px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.tabs + .panel,
.tabs + #capsulesPanel,
.tabs + #bagPanel {
  margin-top: 0 !important;
}

.board-passive-badge {
  padding: 3px;
  border-color: rgba(127, 211, 244, 0.52);
  background:
    radial-gradient(circle at 50% 35%, rgba(87, 186, 226, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(15, 43, 63, 0.96), rgba(3, 14, 25, 0.98));
}

.board-passive-badge img {
  width: 23px;
  height: 23px;
  image-rendering: auto;
}

.board-passive-badge small {
  display: none !important;
}

.reward-modal-card,
.reward-panel.boss-reward .reward-modal-card {
  width: min(360px, calc(100vw - 18px));
  max-height: calc(100dvh - 18px);
  padding: 16px 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(105, 205, 244, 0.64) !important;
  border-image: none !important;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(58, 153, 201, 0.19), transparent 40%),
    linear-gradient(180deg, rgba(7, 29, 47, 0.995), rgba(2, 10, 18, 0.998)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(1, 7, 13, 0.94),
    inset 0 0 0 3px rgba(101, 190, 230, 0.11),
    0 20px 44px rgba(0, 0, 0, 0.62);
}

.reward-card,
.reward-panel.boss-reward .reward-card,
.reward-panel.boss-reward .reward-riskCoins,
.reward-panel.boss-reward .reward-riskPurge,
.reward-panel.boss-reward .reward-riskOverclock {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(93, 184, 224, 0.36) !important;
  border-image: none !important;
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 28%, rgba(68, 164, 208, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(12, 40, 60, 0.98), rgba(3, 15, 27, 0.995)) !important;
  box-shadow:
    inset 0 1px 0 rgba(215, 243, 255, 0.045),
    0 3px 8px rgba(0, 0, 0, 0.28);
}

.reward-card::before,
.reward-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.reward-card:hover,
.reward-card:active {
  border-color: rgba(238, 204, 105, 0.56) !important;
  background:
    radial-gradient(circle at 16% 28%, rgba(213, 178, 76, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(18, 50, 68, 0.99), rgba(3, 17, 29, 0.998)) !important;
}

.reward-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 5px;
  object-fit: contain;
  image-rendering: auto !important;
  transform: none !important;
}

.reward-copy {
  position: relative;
  z-index: 1;
}

.unlock-showcase.reward-result .unlock-icon {
  width: 92px;
  height: 92px;
  object-fit: contain;
  image-rendering: auto !important;
  transform: none !important;
  filter:
    saturate(1.08)
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 12px rgba(93, 199, 241, 0.22));
}

.combat-stats-card {
  grid-template-rows: auto minmax(0, 1fr) minmax(102px, 0.42fr);
  gap: 8px;
  padding: 14px 12px 12px;
  border: 1px solid rgba(104, 204, 243, 0.65) !important;
  border-image: none !important;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(62, 158, 207, 0.19), transparent 37%),
    linear-gradient(180deg, rgba(7, 29, 47, 0.995), rgba(2, 10, 18, 0.998)) !important;
}

.combat-stats-detail-list {
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
  padding: 0 2px 3px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.combat-power-hero {
  grid-column: 1 / -1;
  min-height: 78px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(229, 193, 91, 0.34);
  border-radius: 9px;
  background:
    radial-gradient(circle at 15% 45%, rgba(238, 188, 72, 0.16), transparent 28%),
    linear-gradient(110deg, rgba(33, 45, 58, 0.96), rgba(6, 22, 36, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 238, 180, 0.055);
}

.combat-power-hero > img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter:
    saturate(1.08)
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
}

.combat-power-hero > span {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  column-gap: 9px;
}

.combat-power-hero small {
  grid-column: 1 / -1;
  color: #9cbfce;
  font-size: 7.5px;
  font-weight: 850;
}

.combat-power-hero strong {
  color: #fff0a8;
  font-size: 27px;
  line-height: 1;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.62);
}

.combat-power-hero em {
  align-self: center;
  color: #91d9ef;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.combat-core-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.combat-core-stat {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(92, 179, 218, 0.25);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(16, 48, 68, 0.86), rgba(4, 17, 29, 0.94));
}

.combat-core-stat img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.combat-core-stat span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.combat-core-stat small {
  color: #9dc4d4;
  font-size: 7px;
  font-weight: 900;
}

.combat-core-stat strong {
  overflow: hidden;
  color: #fff0ad;
  font-size: 11px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combat-core-stat.tone-attack { border-top-color: rgba(245, 133, 92, 0.72); }
.combat-core-stat.tone-guard { border-top-color: rgba(93, 186, 246, 0.74); }
.combat-core-stat.tone-life { border-top-color: rgba(86, 220, 146, 0.72); }
.combat-core-stat.tone-tempo { border-top-color: rgba(203, 133, 248, 0.72); }

.combat-detail-heading {
  grid-column: 1 / -1;
  min-height: 28px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px 5px;
  border-bottom: 1px solid rgba(99, 188, 226, 0.2);
}

.combat-detail-heading strong {
  color: #fff0af;
  font-size: 11px;
}

.combat-detail-heading small {
  color: #82b7cb;
  font-size: 7px;
}

.combat-stat-detail {
  border-left-width: 3px;
  background: linear-gradient(180deg, rgba(12, 39, 57, 0.88), rgba(3, 15, 26, 0.95));
}

.combat-stat-detail.tone-attack { border-left-color: #d98268; }
.combat-stat-detail.tone-guard { border-left-color: #5eafe1; }
.combat-stat-detail.tone-life { border-left-color: #58c98d; }
.combat-stat-detail.tone-tempo { border-left-color: #b27cda; }

.combat-stats-effect-list {
  background:
    linear-gradient(180deg, rgba(8, 31, 48, 0.9), rgba(2, 13, 23, 0.97));
}

.critical-mark {
  top: -10px;
  width: 104px;
  height: 35px;
  border: 0;
  background: url("assets/generated/combat_ui_refresh_1788795000000/badge-critical.webp") center / 100% 100% no-repeat !important;
  color: #fff4c4;
  font-size: 12px;
  text-shadow:
    0 2px 0 rgba(51, 17, 6, 0.95),
    0 0 6px rgba(255, 217, 102, 0.76);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5));
}

.clash-mark.reflect,
.clash-mark.kill {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #edfaff;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: none;
  text-shadow:
    0 2px 0 rgba(3, 10, 17, 0.95),
    0 0 6px rgba(117, 216, 255, 0.72);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5));
}

.clash-mark.reflect {
  width: 110px;
  height: 35px;
  background: url("assets/generated/combat_ui_refresh_1788795000000/badge-reflect.webp") center / 100% 100% no-repeat !important;
}

.clash-mark.kill {
  width: 114px;
  height: 34px;
  background: url("assets/generated/combat_ui_refresh_1788795000000/badge-kill.webp") center / 100% 100% no-repeat !important;
  color: #fff1b6;
}

.clash-mark.reflect.flash,
.clash-mark.kill.flash {
  animation: combatBadgeFlash 720ms cubic-bezier(0.18, 0.86, 0.26, 1);
}

@keyframes combatBadgeFlash {
  0% {
    opacity: 0;
    transform: translateY(3px) scale(0.72);
  }
  18% {
    opacity: 1;
    transform: translateY(0) scale(1.06);
  }
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-5px) scale(1.03);
  }
}

@media (max-width: 370px), (max-height: 760px) {
  .combat-panel {
    padding-inline: 7px;
  }

  .fight-stage {
    height: clamp(136px, calc((100vw - 38px) / 2.318), 146px);
  }

  .combat-stats-card {
    grid-template-rows: auto minmax(0, 1fr) minmax(92px, 0.38fr);
  }

  .combat-power-hero {
    min-height: 68px;
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 6px 9px;
  }

  .combat-power-hero > img {
    width: 48px;
    height: 48px;
  }

  .combat-core-stat {
    min-height: 52px;
    grid-template-columns: 21px minmax(0, 1fr);
    padding: 4px;
  }

  .combat-core-stat img {
    width: 21px;
    height: 21px;
  }
}

/* SSS 3개 합성 결과: 일반 SSS 강화가 아닌 별도 신화 단계 */
.item-tile.mythic-item,
.tray-item.mythic-item,
.inline-reveal-item.mythic-item,
.rare-showcase.mythic-item,
.fusion-material.mythic-item {
  border-color: #ff78df !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 232, 128, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(73, 16, 98, 0.98), rgba(12, 41, 76, 0.98) 54%, rgba(87, 22, 62, 0.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 142, 0.72),
    inset 0 0 18px rgba(169, 76, 255, 0.42),
    0 0 11px rgba(255, 80, 214, 0.68),
    0 0 22px rgba(78, 198, 255, 0.34) !important;
}

.item-tile.mythic-item::after,
.tray-item.mythic-item::after {
  content: var(--i18n-css-mythic, "신화");
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 5;
  padding: 1px 4px;
  border: 1px solid rgba(255, 227, 127, 0.86);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(125, 31, 155, 0.94), rgba(16, 88, 128, 0.96));
  color: #fff2ad;
  font-size: 8px;
  font-weight: 1000;
  line-height: 1.25;
  text-shadow: 0 1px 2px #18001c;
}

.tray-item.mythic-item .tray-grade,
.mythic-item .rare-grade,
.mythic-item .reveal-grade {
  color: #fff0a8 !important;
  text-shadow: 0 0 7px #ff52df, 0 1px 2px #13001d;
}

.item-info-panel.mythic-item .item-info-card,
.fusion-panel.mythic-item .fusion-card {
  border-color: rgba(255, 116, 222, 0.9) !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 212, 104, 0.14), transparent 34%),
    linear-gradient(160deg, rgba(47, 12, 72, 0.985), rgba(3, 28, 49, 0.99) 58%, rgba(62, 14, 54, 0.985)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 139, 0.38),
    inset 0 0 34px rgba(111, 68, 255, 0.24),
    0 0 24px rgba(255, 74, 211, 0.34) !important;
}

.item-info-panel.mythic-item #itemInfoTitle,
.fusion-panel.mythic-item #fusionResultName {
  color: #fff0a5 !important;
  text-shadow: 0 0 10px rgba(255, 78, 216, 0.84), 0 2px 2px #160018;
}

/* Ending navigation and post-46 expedition lobby 1789263000000. */
.story-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 390px) {
  .story-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#mainMenu[data-story-mode="ending"] .story-step-label {
  display: none !important;
}

#mainMenu[data-story-mode="ending"] .story-stage > strong {
  margin-top: 9px;
}

.main-menu[data-panel="lobby"][data-lobby-phase="beyond"] .menu-scene {
  background: #07111e;
}

.main-menu[data-lobby-phase="beyond"] .lobby-command-art {
  opacity: 1;
  object-position: 50% 50%;
  filter: saturate(1.04) contrast(1.04) brightness(0.96);
}

.main-menu[data-lobby-phase="beyond"] .lobby-command::after {
  background:
    linear-gradient(180deg, rgba(2, 8, 16, 0.72) 0%, rgba(3, 10, 19, 0.2) 25%, rgba(4, 10, 18, 0.02) 55%, rgba(2, 7, 13, 0.74) 84%, rgba(2, 6, 11, 0.96) 100%);
}

.main-menu[data-lobby-phase="beyond"] .lobby-head span {
  color: #9fe8ff;
}

.main-menu[data-lobby-phase="beyond"] .lobby-head strong {
  color: #fff0b2;
  text-shadow: 0 2px 0 #182638, 0 0 15px rgba(127, 215, 255, 0.34);
}

.menu-lobby-panel .lobby-status-grid {
  left: 6px;
  right: 6px;
  grid-template-columns: minmax(0, 0.91fr) minmax(0, 0.91fr) minmax(0, 1.18fr);
  gap: 4px;
}

.menu-lobby-panel .lobby-status-grid > div {
  height: var(--lobby-counter-height);
  min-height: 0;
  aspect-ratio: auto;
}

.menu-lobby-panel .lobby-status-grid > div:nth-child(3) > img {
  left: 18.5%;
  width: 27.5%;
}

.menu-lobby-panel .lobby-status-grid > div:nth-child(3) > span,
.menu-lobby-panel .lobby-status-grid > div:nth-child(3) > strong {
  left: 36%;
  width: 60%;
}

.menu-lobby-panel .lobby-mark-head {
  left: 24.45%;
  top: 34.8%;
  width: 27.5%;
}

.main-menu[data-lobby-phase="beyond"] .lobby-mark-board {
  bottom: 138px;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 10px rgba(108, 210, 245, 0.13));
}

.main-menu[data-lobby-phase="beyond"] .lobby-mark-slot.collected img {
  filter:
    saturate(0.86)
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.76))
    drop-shadow(0 0 5px rgba(117, 218, 246, 0.34));
}

/* Final-clear choice and dormant endless-depths shell 1789344000000. */
.result-depths-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(116, 205, 244, 0.46);
  border-radius: 8px;
  background: rgba(5, 22, 36, 0.88);
  box-shadow: inset 0 0 15px rgba(51, 155, 211, 0.09);
}

.result-depths-preview > span {
  grid-row: 1 / span 2;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 54px;
  padding: 3px 6px;
  border-right: 1px solid rgba(121, 201, 236, 0.28);
  color: #82d8f4;
  font-size: 9px;
  font-weight: 1000;
}

.result-depths-preview > strong {
  color: #fff0b1;
  font-size: 12px;
  line-height: 1.2;
}

.result-depths-preview > small {
  color: #aac6d5;
  font-size: 8px;
  line-height: 1.35;
}

.button-row.end-actions #endDepthsButton,
.end-actions .end-depths {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 45px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 5px 10px;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-wide-neutral.png") center / 100% 100% no-repeat;
  color: #dff5ff;
}

.end-depths > span {
  color: #e7f7ff;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.05;
}

.end-depths > small {
  color: #8fb8ca;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
}

.end-depths:disabled {
  opacity: 0.72;
  cursor: default;
  filter: saturate(0.72) brightness(0.82);
}

/* Unified lobby navigation, settings and story archive 1789830000000. */
.top-menu-button {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
}

.top-menu-button img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: auto;
}

.menu-sub-panel .menu-panel-head,
#menuSettingsPanel .menu-panel-head {
  box-sizing: border-box;
  min-height: 50px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  background: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat;
}

.menu-sub-panel .menu-panel-head > strong,
#menuSettingsPanel .menu-panel-head > strong,
.menu-store-panel .menu-panel-head .store-panel-title {
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  align-self: center;
  margin: 0;
  color: #fff0ad;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92);
}

.menu-store-panel .menu-panel-head .store-panel-title strong {
  font-size: inherit;
  line-height: inherit;
  text-align: center;
}

.menu-sub-panel .menu-panel-head > .menu-back-button,
#menuSettingsPanel .menu-panel-head > .menu-back-button {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  width: 68px;
  min-width: 68px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat;
  color: #e3f3ff;
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.92);
  box-shadow: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.38));
}

.menu-sub-panel .menu-panel-head::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  width: 68px;
  height: 34px;
}

#menuSettingsPanel .menu-panel-head::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 44px;
  height: 44px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-settings-button.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.46));
}

.menu-lobby-panel .lobby-status-grid {
  left: 6px;
  right: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.menu-lobby-panel .lobby-status-grid > div,
.menu-lobby-panel .lobby-status-grid > div:nth-child(3) {
  height: var(--lobby-counter-height);
  min-height: 0;
  aspect-ratio: 407 / 184;
}

.menu-lobby-panel .lobby-status-grid > div > img,
.menu-lobby-panel .lobby-status-grid > div:nth-child(3) > img {
  left: 21.85%;
  top: 50%;
  width: 31.6%;
  height: auto;
  object-fit: contain;
  object-position: 50% 50%;
  transform: translate(-50%, -50%);
}

.menu-lobby-panel .lobby-status-grid > div > span,
.menu-lobby-panel .lobby-status-grid > div > strong,
.menu-lobby-panel .lobby-status-grid > div:nth-child(3) > span,
.menu-lobby-panel .lobby-status-grid > div:nth-child(3) > strong {
  left: 43%;
  width: 52.5%;
  text-align: left;
}

.menu-lobby-panel .lobby-status-grid > div > span,
.menu-lobby-panel .lobby-status-grid > div:nth-child(3) > span {
  top: 28.5%;
  font-size: clamp(7.5px, 2.05vw, 9px);
}

.menu-lobby-panel .lobby-status-grid > div > strong,
.menu-lobby-panel .lobby-status-grid > div:nth-child(3) > strong {
  top: 54%;
  font-size: clamp(10.5px, 2.8vw, 12px);
}

.menu-lobby-panel .lobby-story-link {
  overflow: visible;
}

.menu-lobby-panel .lobby-story-link::after {
  content: attr(data-count);
  position: absolute;
  right: -2px;
  bottom: -1px;
  z-index: 3;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 1px solid rgba(255, 226, 137, 0.86);
  border-radius: 999px;
  background: #122a48;
  color: #fff0aa;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.58);
}

.main-menu[data-panel="storyArchive"] .menu-title {
  display: none;
}

.main-menu[data-panel="storyArchive"] {
  padding: 0;
}

.main-menu[data-panel="storyArchive"] .menu-scene {
  width: min(100%, 430px);
  height: 100dvh;
  min-height: 0;
  max-height: none;
}

.main-menu[data-panel="storyArchive"] .menu-card {
  top: max(6px, env(safe-area-inset-top));
  bottom: max(6px, env(safe-area-inset-bottom));
  left: 7px;
  right: 7px;
}

#menuStoryArchivePanel.active {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 15px 12px 13px;
  overflow: hidden;
  border: 14px solid transparent;
  border-image-source: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png");
  border-image-slice: 120 fill;
  border-image-width: 14px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46);
}

.story-archive-summary {
  min-height: 40px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 5px 22px;
  background: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat;
  color: #b9dbea;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9);
}

.story-archive-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 2px 1px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.story-archive-card {
  box-sizing: border-box;
  width: 100%;
  min-height: 112px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat;
  color: #e7f5ff;
  text-align: left;
  box-shadow: none;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.34));
}

.story-archive-cover {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 1px solid rgba(102, 198, 238, 0.5);
  border-radius: 7px;
  background: rgba(3, 14, 25, 0.86);
  box-shadow: inset 0 0 12px rgba(76, 179, 223, 0.1);
}

.story-archive-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
  image-rendering: auto;
}

.story-archive-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.story-archive-copy small {
  color: #89cfea;
  font-size: 8px;
  font-weight: 950;
}

.story-archive-copy strong {
  overflow: hidden;
  color: #fff0ad;
  font-size: 14px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.88);
}

.story-archive-copy em {
  overflow: hidden;
  color: #b8ccd9;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-archive-card > b {
  justify-self: center;
  color: #d9f4ff;
  font-size: 10px;
  font-weight: 1000;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9);
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-sub-panel .menu-panel-head,
  #menuSettingsPanel .menu-panel-head {
    grid-template-columns: 66px minmax(0, 1fr) 66px;
    padding-inline: 8px;
  }

  .menu-sub-panel .menu-panel-head > .menu-back-button,
  #menuSettingsPanel .menu-panel-head > .menu-back-button {
    width: 62px;
    min-width: 62px;
  }

  .story-archive-card {
    min-height: 100px;
    grid-template-columns: 70px minmax(0, 1fr) 30px;
    padding: 11px 14px;
  }

  .story-archive-cover {
    width: 66px;
    height: 66px;
  }
}

/* Final precedence: unified lobby tabs and centered story/settings controls 1789918200000. */
#menuLobbyPanel .lobby-tool-button,
#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton) {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui/tab-button.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.32)) !important;
}

#menuLobbyPanel .lobby-tool-button::before,
#menuLobbyPanel .lobby-tool-button::after,
#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton)::before,
#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton)::after {
  content: none !important;
  display: none !important;
}

#menuLobbyPanel .lobby-tool-button img,
#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton) img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 5px rgba(100, 213, 255, 0.32));
}

#menuLobbyPanel .lobby-tool-button strong,
#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton) strong {
  color: #f5faff;
  font-size: 9px;
  letter-spacing: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

#menuStoryArchivePanel .menu-panel-head {
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  min-height: 52px;
  margin: -2px -3px 0;
  padding: 6px 14px 6px 16px;
}

#menuStoryArchivePanel .menu-panel-head > .menu-back-button {
  width: 60px;
  min-width: 60px;
  height: 30px;
  min-height: 30px;
  justify-self: center;
  transform: translateX(1px);
}

#menuStoryArchivePanel .menu-panel-head::after {
  width: 60px;
  height: 30px;
}

#menuSettingsPanel .menu-panel-head {
  grid-template-columns: 68px minmax(0, 1fr) 68px;
  min-height: 52px;
  padding: 6px 14px;
}

#menuSettingsPanel .menu-panel-head > .menu-back-button {
  width: 60px;
  min-width: 60px;
  height: 30px;
  min-height: 30px;
  justify-self: center;
}

#menuSettingsPanel .menu-panel-head::after {
  width: 38px;
  height: 38px;
  justify-self: center;
  align-self: center;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuStoryArchivePanel .menu-panel-head,
  #menuSettingsPanel .menu-panel-head {
    grid-template-columns: 62px minmax(0, 1fr) 62px;
    padding-inline: 10px;
  }
}

/* Final precedence: combat tab alignment, battle CTA spacing and ad reroll action 1789921800000. */
.combat-panel + .tabs,
.tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 54px;
  height: 54px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 8px 8px 10px;
  gap: 6px;
}

.tabs .tab-button {
  width: 100%;
  height: 36px;
}

#battleButton {
  top: 12px !important;
}

.reward-grid .boss-reroll-action,
.reward-panel .boss-reroll-action,
.reward-panel.boss-reward .boss-reroll-action {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  width: 100%;
  min-height: 62px;
  margin-top: 5px;
  padding: 7px 10px 7px 8px;
  overflow: visible;
  border: 1px solid rgba(85, 221, 245, 0.82) !important;
  border-left-width: 3px !important;
  border-radius: 9px;
  background:
    radial-gradient(circle at 10% 50%, rgba(56, 226, 255, 0.23), transparent 30%),
    linear-gradient(100deg, rgba(4, 61, 78, 0.99), rgba(3, 25, 43, 0.99)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(207, 249, 255, 0.06),
    0 0 14px rgba(50, 204, 236, 0.16) !important;
  color: #effcff;
  text-align: left;
}

.boss-reroll-action::before {
  content: var(--i18n-css-rerollHint, "후보가 마음에 들지 않을 때");
  position: absolute;
  right: 8px;
  top: -8px;
  padding: 1px 6px 2px;
  border: 1px solid rgba(91, 218, 242, 0.44);
  border-radius: 8px;
  background: #061b2a;
  color: #8edff0;
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.boss-reroll-action::after {
  content: none !important;
  display: none !important;
}

.reward-ad-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(109, 225, 247, 0.48);
  border-radius: 8px;
  background: rgba(2, 18, 30, 0.78);
}

.boss-reroll-action .reward-ad-icon-wrap .reward-icon {
  width: 31px;
  height: 31px;
  padding: 3px;
}

.reward-ad-icon-wrap > em {
  position: absolute;
  right: -5px;
  bottom: -4px;
  min-width: 19px;
  padding: 1px 3px;
  border-radius: 5px;
  background: #f0c45a;
  color: #102230;
  font-size: 7px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.boss-reroll-action .reward-copy {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.boss-reroll-action .reward-copy small {
  color: #78dff2;
  font-size: 8px;
  font-weight: 950;
  line-height: 1.05;
}

.boss-reroll-action .reward-copy strong {
  color: #fff1ad;
  font-size: 11.5px;
  line-height: 1.15;
}

.boss-reroll-action .reward-copy b {
  color: #c9e6ef;
  font-size: 8.8px;
  font-weight: 800;
  line-height: 1.16;
}

.reward-ad-refresh {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(103, 222, 244, 0.55);
  border-radius: 50%;
  color: #9aeafb;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.boss-reroll-action:disabled {
  opacity: 0.6;
  filter: saturate(0.65);
}

.boss-reroll-action.watched,
.boss-reroll-action.watched:disabled {
  opacity: 0.78;
  border-color: rgba(132, 172, 183, 0.48) !important;
  background:
    linear-gradient(100deg, rgba(25, 49, 57, 0.96), rgba(13, 28, 39, 0.98)) !important;
  box-shadow: inset 0 0 0 1px rgba(208, 240, 245, 0.04) !important;
  filter: grayscale(0.28) saturate(0.56);
  cursor: default;
}

.boss-reroll-action.watched::before {
  content: var(--i18n-css-rerollUsed, "이번 왕 사용 완료");
  color: #b9d7dc;
  border-color: rgba(152, 190, 198, 0.34);
}

.boss-reroll-action.watched .reward-ad-refresh {
  border-color: rgba(135, 217, 180, 0.55);
  color: #9ce9bd;
}

@media (max-width: 370px) {
  .reward-grid .boss-reroll-action,
  .reward-panel .boss-reroll-action,
  .reward-panel.boss-reward .boss-reroll-action {
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    gap: 7px;
    padding-inline: 7px;
  }

  .reward-ad-icon-wrap {
    width: 36px;
    height: 36px;
  }

  .boss-reroll-action .reward-copy strong {
    font-size: 10.8px;
  }
}

/* Final precedence for consolidated lobby and themed companion menus. */
#menuLobbyPanel .lobby-tools { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 4px !important; }
#menuLobbyPanel .lobby-tool-button { min-width: 0 !important; }
#menuLobbyPanel .lobby-tool-button strong { font-size: clamp(7px, 1.95vw, 9px) !important; white-space: nowrap; }
#menuLobbyPanel #lobbyCompanionButton img { width: 40px !important; height: 40px !important; border-radius: 50%; object-fit: cover; object-position: 50% 42%; filter: drop-shadow(0 0 7px rgba(255,218,91,.62)) !important; }
.lobby-side-actions { position: absolute; z-index: 12; top: calc(var(--lobby-counter-top) + var(--lobby-counter-height) + 5px); right: 7px; width: 116px; display: grid; gap: 5px; }
.menu-lobby-panel .lobby-side-actions .lobby-first-offer,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut { position: relative !important; inset: auto !important; box-sizing: border-box; width: 116px !important; min-height: 42px !important; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 4px; margin: 0; padding: 5px 7px; border: 0; background: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png") center / 100% 100% no-repeat; color: #e9f7ff; text-align: left; filter: drop-shadow(0 4px 6px rgba(0,0,0,.48)); }
.menu-lobby-panel .lobby-side-actions .lobby-first-offer { grid-template-columns: minmax(0,1fr) auto; }
.lobby-side-actions button span { min-width: 0; display: grid; gap: 1px; }
.lobby-side-actions button small { color: #7feaff !important; font-size: 7px !important; font-weight: 950; }
.lobby-side-actions button strong,
.menu-lobby-panel .lobby-side-actions .lobby-first-offer strong { color: #fff1b5; font-size: 9px !important; font-weight: 1000; white-space: nowrap; }
.menu-lobby-panel .lobby-side-actions .lobby-first-offer b { font-size: 8px !important; }
.lobby-attendance-shortcut img { width: 31px; height: 31px; border-radius: 5px; object-fit: cover; object-position: 70% 35%; }
.lobby-attendance-shortcut .lobby-tool-badge { position: absolute; top: -2px; right: -2px; }
.menu-sub-panel .menu-panel-head > .menu-back-button,
#menuSettingsPanel .menu-panel-head > .menu-back-button { grid-column: 3 !important; justify-self: end !important; width: 72px !important; min-width: 72px !important; background-size: 100% 100% !important; }
.menu-sub-panel .menu-panel-head::after { grid-column: 1 !important; justify-self: start; }
#menuRecipePanel.active { grid-template-rows: auto 42px minmax(0,1fr) !important; overflow: hidden; }
.guide-tabbar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.guide-tabbar button { min-height: 38px; border: 0; background: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center / 100% 100% no-repeat; color: #afc9d8; font-size: 11px; font-weight: 1000; }
.guide-tabbar button.active { background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png"); color: #fff0ad; }
.guide-tab-view { min-height: 0; display: none; overflow: hidden; }
.guide-tab-view.active { display: grid; }
#guideRecipeView.active { grid-template-rows: minmax(220px,.95fr) minmax(210px,1.05fr); gap: 8px; }
#guideRecipeView .menu-unlock-list, #guideRecipeView .menu-recipe-box, #guideRecipeView .menu-recipe-body, #guideRecipeView .menu-recipe-list { min-height: 0; }
#guideRecipeView .menu-recipe-list { height: 100%; max-height: none; overflow-y: auto; }
#guideElementView.active { overflow-y: auto; }
#guideElementView .menu-element-box { min-height: 100%; padding: 7px; }
#menuCompanionPanel.active { background: linear-gradient(180deg,rgba(2,8,18,.08),rgba(2,8,18,.94) 42%),url("assets/generated/companion_attendance_ui/companion-sanctuary.png") center top / 100% auto no-repeat !important; }
.companion-concept-banner { min-height: 118px; border-radius: 8px; background: url("assets/generated/companion_attendance_ui/companion-sanctuary.png") center 57% / cover no-repeat; box-shadow: inset 0 0 18px rgba(2,7,18,.72),0 5px 12px rgba(0,0,0,.35); }
#menuAttendancePanel.active { background: linear-gradient(180deg,rgba(4,10,22,.78),rgba(4,8,18,.96)) !important; }
.attendance-board-shell { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 7px; padding: 16px 13px 18px; background: url("assets/generated/companion_attendance_ui/attendance-board.png") center / 100% 100% no-repeat; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.attendance-board-shell .attendance-grid { min-height: 0; overflow-y: auto; }
.main-menu[data-panel="companions"] .menu-title,
.main-menu[data-panel="attendance"] .menu-title { display: none !important; }

/* Final mobile-safe companion and attendance visual integration. */
#menuLobbyPanel .lobby-tools {
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 14px)) !important;
}

#menuLobbyPanel .lobby-start-button {
  bottom: max(97px, calc(env(safe-area-inset-bottom) + 79px)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 36px !important;
  padding-inline: 12px !important;
}

.lobby-attendance-shortcut img { display: none !important; }

#menuCompanionPanel.active,
#menuAttendancePanel.active {
  padding: 14px 12px max(24px, calc(env(safe-area-inset-bottom) + 14px)) !important;
  border: 14px solid transparent !important;
  border-image-source: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") !important;
  border-image-slice: 120 fill !important;
  border-image-width: 14px !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .48) !important;
}

#menuCompanionPanel.active {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden !important;
}

#menuAttendancePanel.active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden !important;
}

#menuCompanionPanel .menu-panel-head,
#menuAttendancePanel .menu-panel-head {
  position: static !important;
  top: auto !important;
  margin: -2px -3px 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat !important;
}

.companion-concept-banner { display: none !important; }

.companion-currency-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
}

.companion-currency-bar span {
  min-height: 54px;
  display: grid;
  place-content: center;
  padding: 5px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-neutral.png") center / 100% 100% no-repeat !important;
  color: #9fd9ed !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
}

.companion-currency-bar b { color: #fff0ad !important; }

.companion-menu-tabs {
  margin: 0 !important;
  gap: 6px !important;
}

.companion-menu-tabs button,
.companion-summon-card button,
.attendance-claim-button {
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-wide-primary.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #fff1bd !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
}

.companion-menu-tabs button:not(.active),
.companion-summon-card .summon-store-link {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-wide-neutral.png") !important;
}

.companion-tab-view.active {
  min-height: 0;
  overflow-y: auto;
  padding: 1px 2px 12px;
}

.companion-summon-cards { gap: 7px !important; }

.companion-summon-card,
.summon-result,
.companion-collection-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .34));
}

.companion-summon-card {
  min-height: 158px !important;
  padding: 16px 17px !important;
}

.attendance-board-shell {
  min-height: 0;
  padding: 10px 9px 12px !important;
  border: 10px solid transparent;
  border-image-source: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png");
  border-image-slice: 120 fill;
  border-image-width: 10px;
  border-image-repeat: stretch;
  background: transparent !important;
  filter: none !important;
}

.attendance-summary {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat !important;
}

.attendance-claim-button { margin: 0 !important; }

.attendance-grid { gap: 4px !important; }

.attendance-day {
  min-height: 66px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-neutral.png") center / 100% 100% no-repeat !important;
}

.attendance-day.today {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-primary.png") !important;
  box-shadow: none !important;
}

@media (max-height: 760px) {
  #menuLobbyPanel .lobby-tools {
    bottom: max(26px, calc(env(safe-area-inset-bottom) + 10px)) !important;
  }

  #menuLobbyPanel .lobby-start-button {
    bottom: max(91px, calc(env(safe-area-inset-bottom) + 75px)) !important;
  }

  .companion-summon-card { min-height: 146px !important; }
  .attendance-day { min-height: 60px !important; }
}

/* Final king-mark rail alignment from the 1830x658 source artwork. */
.menu-lobby-panel .lobby-mark-board {
  left: 5px !important;
  right: 5px !important;
  bottom: 162px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1830 / 658 !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
  background: url("assets/generated/lobby_mark_refresh_1788552000000/king-mark-rail-hq.png") center / 100% 100% no-repeat !important;
}

.menu-lobby-panel .lobby-mark-board[hidden] { display: none !important; }

.menu-lobby-panel .lobby-mark-head {
  position: absolute !important;
  left: 24.8% !important;
  top: 35% !important;
  width: 29.5% !important;
  height: 14% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-mark-head > div {
  width: 100% !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.menu-lobby-panel .lobby-mark-slots {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
}

.menu-lobby-panel .lobby-mark-slot {
  position: absolute !important;
  top: 0 !important;
  width: 13.5% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
}

.menu-lobby-panel .lobby-mark-slot:nth-child(1) { left: 19.55% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(2) { left: 34.50% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(3) { left: 50.00% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(4) { left: 65.10% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(5) { left: 80.15% !important; }

.menu-lobby-panel .lobby-mark-slot img {
  position: absolute !important;
  left: 50% !important;
  top: 64.1% !important;
  width: min(34px, 67%) !important;
  height: min(34px, 45%) !important;
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-mark-slot strong {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 88.4% !important;
  display: block !important;
  text-align: center !important;
  transform: translateY(-50%) !important;
}

@media (max-height: 760px) {
  .menu-lobby-panel .lobby-mark-board { bottom: 151px !important; }
}

/* Rebuilt king-mark board and native-size companion interface v2. */
.menu-sub-panel .menu-panel-head > .menu-back-button,
#menuSettingsPanel .menu-panel-head > .menu-back-button {
  grid-column: 1 !important;
  justify-self: start !important;
}

.menu-sub-panel .menu-panel-head::after {
  grid-column: 3 !important;
  justify-self: end !important;
}

.menu-lobby-panel .lobby-mark-board {
  aspect-ratio: 2167 / 725 !important;
  background-image: url("assets/generated/king_mark_v2/king-mark-board-v2.png") !important;
}

.menu-lobby-panel .lobby-mark-head {
  left: 50% !important;
  top: 17.7% !important;
  width: 31% !important;
  height: 16% !important;
}

.menu-lobby-panel .lobby-mark-slot:nth-child(1) { left: 17.8% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(2) { left: 33.9% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(4) { left: 66.1% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(5) { left: 82.2% !important; }

.menu-lobby-panel .lobby-mark-slot img {
  top: 51.2% !important;
  width: min(38px, 70%) !important;
  height: min(38px, 48%) !important;
}

.menu-lobby-panel .lobby-mark-slot strong {
  top: 78.4% !important;
  color: #d8e7ed !important;
  font-size: clamp(6px, 1.7vw, 7px) !important;
}

#menuCompanionPanel.active {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-image: none !important;
  background:
    #050914
    url("assets/generated/companion_ui_v2/companion-menu-plate.png")
    center top / 100% auto no-repeat !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .58) !important;
}

#menuCompanionPanel .menu-panel-head {
  position: absolute !important;
  z-index: 5;
  left: 5.5% !important;
  right: 5.5% !important;
  top: 4.2% !important;
  width: auto !important;
  height: 7.2% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 3% !important;
  grid-template-columns: 22% minmax(0, 1fr) 22% !important;
  background: none !important;
}

#menuCompanionPanel .menu-panel-head > strong {
  grid-column: 2 !important;
  font-size: 16px !important;
}

#menuCompanionPanel .menu-panel-head > .menu-back-button {
  grid-column: 1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 70% !important;
  min-height: 0 !important;
  border: 0 !important;
  background: none !important;
  filter: none !important;
}

#menuCompanionPanel .menu-panel-head::after { display: none !important; }

#menuCompanionPanel .companion-currency-bar {
  position: absolute !important;
  z-index: 4;
  left: 11.5% !important;
  right: 11.5% !important;
  top: 12.3% !important;
  height: 6% !important;
  margin: 0 !important;
  gap: 2% !important;
}

#menuCompanionPanel .companion-currency-bar span {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 8px !important;
}

#menuCompanionPanel .companion-currency-bar b { font-size: 12px !important; }

#menuCompanionPanel .companion-menu-tabs {
  position: absolute !important;
  z-index: 4;
  left: 5.5% !important;
  right: 5.5% !important;
  top: 19.2% !important;
  height: 5.8% !important;
  margin: 0 !important;
  gap: 2% !important;
}

#menuCompanionPanel .companion-menu-tabs button,
#menuCompanionPanel .companion-menu-tabs button:not(.active) {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #c9dce5 !important;
  font-size: 11px !important;
  filter: none !important;
}

#menuCompanionPanel .companion-menu-tabs button.active {
  color: #fff0a8 !important;
  text-shadow: 0 0 7px rgba(98, 216, 255, .44), 0 2px 3px #000 !important;
}

#menuCompanionPanel .companion-tab-view {
  position: absolute !important;
  z-index: 3;
  left: 5.7% !important;
  right: 5.7% !important;
  top: 26% !important;
  bottom: 5.5% !important;
  min-height: 0 !important;
  padding: 0 1.2% 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#menuCompanionPanel .companion-summon-cards {
  height: 72% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3.4% !important;
}

#menuCompanionPanel .companion-summon-card,
#menuCompanionPanel .companion-summon-card.premium {
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 7% 7% 8% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  filter: none !important;
}

#menuCompanionPanel .companion-summon-card strong { font-size: 14px !important; }
#menuCompanionPanel .companion-summon-card p { font-size: 10px !important; }
#menuCompanionPanel .companion-summon-card small { font-size: 8px !important; }

#menuCompanionPanel .companion-summon-card button,
#menuCompanionPanel .companion-summon-card .summon-store-link {
  min-height: 34px !important;
  padding: 3px 5px !important;
  border: 1px solid rgba(85, 207, 244, .72) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #183b5b, #071623) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 217, 114, .14), 0 3px 5px rgba(0, 0, 0, .42) !important;
  color: #fff0b2 !important;
  font-size: 9px !important;
}

#menuCompanionPanel .companion-summon-card.premium button {
  border-color: rgba(190, 105, 239, .78) !important;
  background: linear-gradient(180deg, #43245e, #170e29) !important;
}

#menuCompanionPanel .companion-summon-notice {
  margin: 8px 0 !important;
  font-size: 8px !important;
}

#menuCompanionPanel .companion-summon-results,
#menuCompanionPanel .companion-collection-list {
  gap: 6px !important;
}

#menuCompanionPanel .summon-result,
#menuCompanionPanel .companion-collection-card {
  border: 1px solid rgba(72, 152, 190, .42) !important;
  border-radius: 6px !important;
  background: rgba(4, 12, 23, .88) !important;
  filter: none !important;
}

/* Seamless king-mark overlay and centered companion controls v3. */
.menu-lobby-panel .lobby-mark-board {
  aspect-ratio: 2172 / 724 !important;
  background:
    url("assets/generated/king_mark_v3/king-mark-overlay.png") center / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(3, 9, 17, .78) 8%, rgba(3, 9, 17, .92) 50%, rgba(3, 9, 17, .78) 92%, transparent 100%) !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .38)) !important;
}

.menu-lobby-panel .lobby-mark-head {
  left: 50% !important;
  top: 17.4% !important;
  width: 30% !important;
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-mark-head > div {
  display: grid !important;
  grid-auto-flow: column !important;
  place-content: center !important;
  place-items: center !important;
  gap: 4px !important;
  text-align: center !important;
}

.menu-lobby-panel .lobby-mark-head span,
.menu-lobby-panel .lobby-mark-head strong {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.menu-lobby-panel .lobby-mark-slot:nth-child(1) { left: 17.1% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(2) { left: 33.55% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(3) { left: 50% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(4) { left: 66.45% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(5) { left: 82.9% !important; }

.menu-lobby-panel .lobby-mark-slot img { top: 50.4% !important; }
.menu-lobby-panel .lobby-mark-slot strong { top: 76.4% !important; }

#menuCompanionPanel .companion-menu-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

#menuCompanionPanel .companion-menu-tabs button,
#menuCompanionPanel .companion-menu-tabs button:not(.active) {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
}

#menuCompanionPanel .companion-summon-card div {
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  margin-top: 12px !important;
}

#menuCompanionPanel .companion-summon-card button,
#menuCompanionPanel .companion-summon-card .summon-store-link {
  position: relative !important;
  min-height: 40px !important;
  display: grid !important;
  place-items: center !important;
  padding: 5px 12px !important;
  border: 1px solid #4fc9ed !important;
  border-radius: 0 !important;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(86, 211, 246, .25), transparent 55%),
    linear-gradient(180deg, #153b58 0%, #071b2b 58%, #040d16 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 223, 139, .12),
    inset 0 0 12px rgba(67, 197, 236, .16),
    0 3px 5px rgba(0, 0, 0, .45) !important;
  color: #fff0b2 !important;
  font-size: 9.5px !important;
  text-align: center !important;
}

#menuCompanionPanel .companion-summon-card button::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 221, 123, .8);
  background: #42bde8;
  transform: translate(-50%, -50%) rotate(45deg);
}

#menuCompanionPanel .companion-summon-card.premium button,
#menuCompanionPanel .companion-summon-card .summon-store-link {
  border-color: #b969e9 !important;
  background:
    radial-gradient(circle at 50% 0, rgba(198, 96, 242, .3), transparent 56%),
    linear-gradient(180deg, #492560 0%, #21102f 58%, #100817 100%) !important;
}

#menuCompanionPanel .companion-summon-card.premium button::after,
#menuCompanionPanel .companion-summon-card .summon-store-link::after {
  background: #a94ee0;
}

#menuCompanionPanel .companion-summon-card .summon-store-link {
  width: 100% !important;
  min-height: 36px !important;
  margin-top: 8px !important;
}

/* Visual calibration v4: align to the artwork itself, not legacy box metrics. */
.menu-lobby-panel .lobby-mark-board {
  background:
    url("assets/generated/king_mark_v3/king-mark-overlay.png") center / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(3, 9, 17, .22) 8%, rgba(3, 9, 17, .44) 50%, rgba(3, 9, 17, .22) 92%, transparent 100%) !important;
}

.menu-lobby-panel .lobby-mark-head {
  left: 50% !important;
  top: 17.68% !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: block !important;
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-mark-head > .lobby-mark-title-line {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transform: none !important;
}

.menu-lobby-panel .lobby-mark-title-line > span,
.menu-lobby-panel .lobby-mark-title-line > strong {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  transform: none !important;
}

.menu-lobby-panel .lobby-mark-slot img { top: 45.65% !important; }
.menu-lobby-panel .lobby-mark-slot strong { top: 71.4% !important; }

/* Companion screen v4: ranking-style header and native summon controls. */
#menuCompanionPanel.active {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 15px 12px max(13px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  border: 14px solid transparent !important;
  border-image-source: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") !important;
  border-image-slice: 120 fill !important;
  border-image-width: 14px !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .48) !important;
}

#menuCompanionPanel .menu-panel-head {
  position: static !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  min-height: 46px !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) 76px !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 5px 11px 6px 17px !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat !important;
}

#menuCompanionPanel .menu-panel-head > strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  align-self: center !important;
  margin: 0 !important;
  color: #fff0ad !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9) !important;
}

#menuCompanionPanel .menu-panel-head > .menu-back-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 76px !important;
  min-width: 76px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat !important;
  color: #e3f3ff !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .92) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .38)) !important;
}

#menuCompanionPanel .menu-panel-head::after {
  content: "" !important;
  display: block !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  width: 76px !important;
  height: 34px !important;
}

#menuCompanionPanel .companion-currency-bar {
  position: static !important;
  inset: auto !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
}

#menuCompanionPanel .companion-currency-bar span {
  min-height: 34px !important;
  display: grid !important;
  place-content: center !important;
  gap: 1px !important;
  padding: 3px 2px !important;
  border: 1px solid rgba(70, 168, 207, .38) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, rgba(15, 43, 64, .92), rgba(3, 13, 24, .96)) !important;
  box-shadow: inset 0 0 10px rgba(58, 180, 226, .08) !important;
  color: #9fd9ed !important;
  font-size: 7px !important;
  text-align: center !important;
}

#menuCompanionPanel .companion-currency-bar b {
  color: #fff0ad !important;
  font-size: 10px !important;
}

#menuCompanionPanel .companion-menu-tabs {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 6px !important;
  margin: 0 !important;
}

#menuCompanionPanel .companion-menu-tabs button,
#menuCompanionPanel .companion-menu-tabs button:not(.active) {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid rgba(79, 148, 184, .52) !important;
  border-radius: 3px !important;
  clip-path: none !important;
  background: linear-gradient(180deg, #102b43, #071523 62%, #040b13) !important;
  box-shadow: inset 0 0 0 1px rgba(116, 214, 242, .07) !important;
  color: #b9ccda !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000 !important;
  filter: none !important;
}

#menuCompanionPanel .companion-menu-tabs button.active {
  border-color: #d6b55a !important;
  background: radial-gradient(circle at 50% 0, rgba(89, 201, 235, .25), transparent 62%), linear-gradient(180deg, #22465b, #0d2231 62%, #071019) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 231, 153, .16), 0 0 8px rgba(68, 192, 231, .12) !important;
  color: #fff0ad !important;
}

#menuCompanionPanel .companion-tab-view {
  position: static !important;
  inset: auto !important;
  min-height: 0 !important;
  padding: 1px 2px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#menuCompanionPanel .companion-summon-cards {
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#menuCompanionPanel .companion-summon-card,
#menuCompanionPanel .companion-summon-card.premium {
  position: relative !important;
  min-height: 154px !important;
  height: auto !important;
  box-sizing: border-box !important;
  padding: 13px 12px 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(62, 158, 199, .5) !important;
  border-radius: 4px !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px) !important;
  background: radial-gradient(circle at 50% 0, rgba(50, 163, 205, .2), transparent 48%), linear-gradient(180deg, #0d263b, #06111e 65%, #030812) !important;
  box-shadow: inset 0 0 18px rgba(48, 156, 199, .08) !important;
  filter: none !important;
}

#menuCompanionPanel .companion-summon-card.premium {
  border-color: rgba(174, 112, 214, .62) !important;
  background: radial-gradient(circle at 50% 0, rgba(144, 67, 190, .25), transparent 50%), linear-gradient(180deg, #241538, #0e0b1d 65%, #05050d) !important;
  box-shadow: inset 0 0 18px rgba(151, 68, 200, .1) !important;
}

#menuCompanionPanel .companion-summon-card > strong {
  display: block !important;
  color: #fff0ad !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

#menuCompanionPanel .companion-summon-card > p {
  min-height: 28px !important;
  margin: 6px 0 2px !important;
  color: #d7e6f1 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#menuCompanionPanel .companion-summon-card > small {
  min-height: 0 !important;
  display: block !important;
  color: #829bb0 !important;
  font-size: 7.5px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

#menuCompanionPanel .companion-summon-card > div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  margin-top: 7px !important;
}

#menuCompanionPanel .companion-summon-card button,
#menuCompanionPanel .companion-summon-card .summon-store-link {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: #f5f5ee !important;
  font-size: 8px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000, 0 0 3px #000 !important;
  filter: none !important;
}

#menuCompanionPanel .companion-summon-card.common button {
  background-image: url("assets/generated/companion_summon_controls_v4/summon-common-button.png") !important;
}

#menuCompanionPanel .companion-summon-card.premium button {
  background-image: url("assets/generated/companion_summon_controls_v4/summon-premium-button.png") !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

#menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
  height: 27px !important;
  min-height: 27px !important;
  margin-top: 3px !important;
  background-color: transparent !important;
  background-image: url("assets/generated/companion_summon_controls_v4/summon-store-button.png") !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  color: #fff0ad !important;
}

#menuCompanionPanel .companion-summon-card button::after,
#menuCompanionPanel .companion-summon-card .summon-store-link::after {
  display: none !important;
}

#menuCompanionPanel .companion-summon-notice {
  margin: 6px 0 !important;
  color: #8fa8ba !important;
  font-size: 8px !important;
  text-align: center !important;
}

#menuCompanionPanel .summon-result,
#menuCompanionPanel .companion-collection-card {
  border: 1px solid rgba(72, 152, 190, .42) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(11, 34, 51, .96), rgba(4, 12, 23, .98)) !important;
  filter: none !important;
}

@media (max-height: 700px) {
  #menuCompanionPanel.active {
    gap: 5px !important;
    padding-top: 10px !important;
  }

  #menuCompanionPanel .menu-panel-head { min-height: 42px !important; }
  #menuCompanionPanel .companion-currency-bar span { min-height: 29px !important; }
  #menuCompanionPanel .companion-menu-tabs button,
  #menuCompanionPanel .companion-menu-tabs button:not(.active) { height: 29px !important; min-height: 29px !important; }
  #menuCompanionPanel .companion-summon-card,
  #menuCompanionPanel .companion-summon-card.premium { min-height: 143px !important; padding-top: 10px !important; }
}

/* Pixel-visible calibration v5 from the user screenshots. */
.menu-sub-panel .menu-panel-head > .menu-back-button,
#menuSettingsPanel .menu-panel-head > .menu-back-button,
#menuCompanionPanel .menu-panel-head > .menu-back-button {
  transform: translateY(4px) !important;
}

.menu-lobby-panel .lobby-mark-head {
  transform: translate(-50%, calc(-50% - 3px)) !important;
}

.menu-lobby-panel .lobby-mark-slot strong {
  top: calc(71.4% + 3px) !important;
}

#menuCompanionPanel .companion-summon-card,
#menuCompanionPanel .companion-summon-card.premium {
  min-height: 210px !important;
  padding: 17px 14px 14px !important;
}

#menuCompanionPanel .companion-summon-card > strong {
  font-size: 15px !important;
}

#menuCompanionPanel .companion-summon-card > p {
  min-height: 34px !important;
  margin-top: 8px !important;
  font-size: 10px !important;
}

#menuCompanionPanel .companion-summon-card > small {
  font-size: 8.5px !important;
}

#menuCompanionPanel .companion-summon-card > div {
  gap: 5px !important;
  margin-top: 10px !important;
}

#menuCompanionPanel .companion-summon-card button,
#menuCompanionPanel .companion-summon-card .summon-store-link {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 4px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 10px 18px !important;
  border-image-slice: 74 270 fill !important;
  border-image-width: 10px 18px !important;
  border-image-repeat: stretch !important;
  background-image: none !important;
  background-color: transparent !important;
  color: #fff7d4 !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

#menuCompanionPanel .companion-summon-card.common button {
  background-image: none !important;
  border-image-source: url("assets/generated/companion_summon_controls_v4/summon-common-button.png") !important;
}

#menuCompanionPanel .companion-summon-card.premium button {
  background-image: none !important;
  border-image-source: url("assets/generated/companion_summon_controls_v4/summon-premium-button.png") !important;
}

#menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
  height: 38px !important;
  min-height: 38px !important;
  margin-top: 5px !important;
  background-image: none !important;
  border-image-source: url("assets/generated/companion_summon_controls_v4/summon-store-button.png") !important;
}

@media (max-height: 700px) {
  #menuCompanionPanel .companion-summon-card,
  #menuCompanionPanel .companion-summon-card.premium {
    min-height: 190px !important;
    padding: 13px 12px 12px !important;
  }

  #menuCompanionPanel .companion-summon-card button,
  #menuCompanionPanel .companion-summon-card .summon-store-link {
    height: 36px !important;
    min-height: 36px !important;
    border-width: 9px 15px !important;
    border-image-width: 9px 15px !important;
  }
}

/* v6 final precedence: dedicated raster controls must win over legacy rules. */
.menu-lobby-panel .lobby-side-actions {
  right: 7px !important;
  width: 94px !important;
  gap: 3px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  width: 94px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 3px 9px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.menu-lobby-panel .lobby-side-actions button span {
  place-content: center !important;
  gap: 0 !important;
}

.menu-lobby-panel .lobby-side-actions button small {
  font-size: 6px !important;
  text-align: center !important;
}

.menu-lobby-panel .lobby-side-actions button strong,
.menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
  font-size: 8px !important;
  text-align: center !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer b {
  display: none !important;
}

.menu-lobby-panel .lobby-mark-slot strong {
  left: 50% !important;
  right: auto !important;
  top: 72.1% !important;
  width: clamp(50px, 14.8vw, 64px) !important;
  height: clamp(12px, 3.35vw, 15px) !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 0 10px 1px !important;
  overflow: visible !important;
  background: url("assets/generated/companion_ui_v6/mark-label-wide.png") center / 100% 100% no-repeat !important;
  color: #f5e7c2 !important;
  font-size: clamp(6px, 1.75vw, 7px) !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: clip !important;
  transform: translate(-50%, -50%) !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .65)) !important;
}

#menuCompanionPanel.active {
  background: radial-gradient(circle at 50% 20%, rgba(27, 100, 139, .16), transparent 48%), linear-gradient(180deg, rgba(3, 14, 25, .98), rgba(2, 7, 15, .99)) !important;
}

#menuCompanionPanel .companion-currency-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#menuCompanionPanel .companion-currency-bar span {
  box-sizing: border-box !important;
  min-height: 36px !important;
  display: grid !important;
  grid-template-columns: 30% minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  place-content: stretch !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 3px 7px 3px 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/companion_ui_v6/companion-currency-frame.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCompanionPanel .companion-currency-bar em {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  overflow: hidden !important;
  color: #a9d8ea !important;
  font-size: 6.5px !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuCompanionPanel .companion-currency-bar b {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin: 1px 0 0 !important;
  color: #fff0ad !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-align: center !important;
}

#menuCompanionPanel .companion-menu-tabs button,
#menuCompanionPanel .companion-menu-tabs button:not(.active) {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/companion_ui_v6/companion-tab-inactive.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #b7c8d8 !important;
  font-size: 11px !important;
}

#menuCompanionPanel .companion-menu-tabs button.active {
  background-image: url("assets/generated/companion_ui_v6/companion-tab-active.png") !important;
  color: #fff2b4 !important;
}

#menuCompanionPanel .companion-summon-card,
#menuCompanionPanel .companion-summon-card.premium {
  min-height: 262px !important;
  height: 262px !important;
  padding: 46px 21px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: url("assets/generated/companion_ui_v6/companion-card-common.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .42)) !important;
}

#menuCompanionPanel .companion-summon-card > p {
  min-height: 30px !important;
  margin: 7px 0 2px !important;
}

#menuCompanionPanel .companion-summon-card > div {
  margin-top: 8px !important;
}

#menuCompanionPanel .companion-collection-summary {
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 4px 22px !important;
  background: url("assets/generated/companion_ui_v6/companion-tab-inactive.png") center / 100% 100% no-repeat !important;
  color: #d8e9f2 !important;
  text-align: center !important;
}

#menuCompanionPanel .summon-result,
#menuCompanionPanel .companion-collection-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuStorePanel .store-inventory > div:nth-child(4) img {
  width: 30px !important;
  height: 25px !important;
}

#menuStorePanel .store-product-list {
  grid-auto-rows: auto !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 2px 3px 12px 0 !important;
}

#menuStorePanel .store-product-group-grid {
  display: grid !important;
  gap: 6px !important;
}

#menuStorePanel .store-product-card {
  min-height: 88px !important;
  grid-template-columns: 56px minmax(0, 1fr) 76px !important;
  gap: 8px !important;
  padding: 10px 15px !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .32)) !important;
}

#menuStorePanel .store-product-card[data-store-tone="summon"],
#menuStorePanel .store-product-card[data-store-tone="summon-best"] {
  min-height: 82px !important;
}

#menuStorePanel .store-product-icon {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
}

#menuStorePanel .store-product-card[data-store-tone="summon"] .store-product-icon,
#menuStorePanel .store-product-card[data-store-tone="summon-best"] .store-product-icon {
  width: 56px !important;
  height: 46px !important;
  transform: rotate(-5deg) !important;
}

#menuStorePanel .store-product-title strong {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

#menuStorePanel .store-product-title small {
  margin-top: 3px !important;
  color: #a8c9d8 !important;
  font-size: 8px !important;
}

#menuStorePanel .store-product-contents[hidden] {
  display: none !important;
}

#menuStorePanel .store-buy-button {
  min-width: 72px !important;
  min-height: 44px !important;
  display: grid !important;
  place-content: center !important;
  gap: 2px !important;
  padding: 5px 8px !important;
  border: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-primary.png") center / 100% 100% no-repeat !important;
  color: #fff1b5 !important;
  text-align: center !important;
}

#menuStorePanel .store-buy-button b { font-size: 10px !important; line-height: 1 !important; }
#menuStorePanel .store-buy-button small { color: #9bdcf2 !important; font-size: 7px !important; line-height: 1 !important; }

@media (max-height: 700px) {
  #menuCompanionPanel .companion-summon-card,
  #menuCompanionPanel .companion-summon-card.premium {
    min-height: 238px !important;
    height: 238px !important;
    padding: 40px 19px 20px !important;
  }

  #menuStorePanel .store-product-card {
    min-height: 80px !important;
    padding-block: 8px !important;
  }
}
/* Absolute final precedence for the 1790104000000 SSS identity. */
.rarity-SSS {
  border-color: #fff6b8 !important;
  color: #fff !important;
  text-shadow: 0 0 5px #fff, 0 0 11px #42f5ff, 0 0 17px rgba(255, 202, 74, .9) !important;
}

.item-tile.rarity-SSS,
.tray-item.rarity-SSS,
.placed-item.rarity-SSS,
.inline-reveal-item.rarity-SSS,
.fusion-material.rarity-SSS,
.fusion-result-pop.rarity-SSS,
.rare-showcase.rarity-SSS {
  --item-grade-surface:
    radial-gradient(circle at 28% 12%, rgba(255,255,255,.72), transparent 24%),
    conic-gradient(from 215deg at 50% 42%, #082d56, #00a9bf, #fff0a4, #ce5cff, #07264d, #00a9bf) !important;
  color: #fffdf0 !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.58), transparent 26%),
    conic-gradient(from 215deg at 50% 42%, #082d56, #00a9bf, #fff0a4, #ce5cff, #07264d, #00a9bf) !important;
}

/* TRUE EOF MODAL SYSTEM 1790109000000: must remain the final popup precedence. */
.item-info-card,.fusion-card,.pull-reveal-card,.unlock-showcase .unlock-card,
.end-panel .end-card,.sale-result-card,.combat-stats-card {
  box-sizing:border-box!important;border:0!important;border-radius:0!important;
  background:url("assets/generated/reward_attendance_v2_1790106000000/stage-reward-panel.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;filter:drop-shadow(0 14px 24px rgba(0,0,0,.72))!important;
}
.item-info-card,.fusion-card,.pull-reveal-card,.unlock-showcase .unlock-card,.sale-result-card{padding:58px 34px 42px!important}
.end-panel .end-card,.combat-stats-card{padding:58px 36px 44px!important}
.item-info-card>*,.fusion-card>*,.pull-reveal-card>*,.unlock-showcase .unlock-card>*,.end-panel .end-card>*,.sale-result-card>*{position:relative;z-index:1}
.item-info-card p,.fusion-card p,.unlock-showcase .unlock-card p,.end-panel .end-card p{border:1px solid rgba(78,179,218,.22)!important;border-radius:3px!important;background:rgba(2,12,22,.68)!important}

.reward-modal-card,.reward-panel.boss-reward .reward-modal-card{
  box-sizing:border-box!important;width:min(374px,calc(100vw - 10px))!important;max-height:calc(100dvh - 10px)!important;
  padding:88px 46px 54px!important;overflow:hidden!important;border:0!important;border-radius:0!important;
  background:url("assets/generated/reward_attendance_v2_1790106000000/stage-reward-panel-v2.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;filter:drop-shadow(0 15px 26px rgba(0,0,0,.8))!important;
}
.reward-modal-card>div:first-child{min-height:58px!important;display:grid!important;place-content:center!important;padding:0 8px 10px!important;border:0!important;background:transparent!important;text-align:center!important}
.reward-modal-card .reward-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px 11px!important;max-height:calc(100dvh - 210px)!important;padding:14px 5px 20px!important;overflow-y:auto!important}
.reward-modal-card .reward-card:not(.reward-ad-reroll){position:relative!important;min-height:120px!important;padding:15px 9px!important;border:0!important;border-radius:0!important;background:rgba(2,10,18,.62)!important;box-shadow:inset 0 0 15px rgba(41,179,225,.1)!important}
.reward-modal-card .reward-card:last-child:nth-child(odd):not(.reward-ad-reroll){grid-column:1/-1!important;min-height:108px!important}
.reward-modal-card .reward-icon{width:44px!important;height:44px!important}.reward-modal-card .reward-copy{min-width:0!important}
.reward-modal-card .reward-copy strong,.reward-modal-card .reward-copy small,.reward-modal-card .reward-copy b{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}

.enemy-skill-banner{position:absolute!important;left:50%!important;top:-34px!important;z-index:30!important;min-width:92px!important;max-width:148px!important;min-height:28px!important;display:grid!important;place-items:center!important;box-sizing:border-box!important;padding:5px 16px!important;overflow:hidden!important;border:1px solid rgba(255,216,105,.88)!important;border-radius:3px!important;background:linear-gradient(180deg,rgba(82,34,94,.98),rgba(20,9,34,.99))!important;color:#fff3b1!important;font-size:9px!important;font-weight:1000!important;line-height:1!important;text-align:center!important;white-space:nowrap!important;text-overflow:ellipsis!important;text-shadow:0 2px 2px #000!important;box-shadow:0 0 14px rgba(213,96,255,.45),inset 0 0 8px rgba(255,222,116,.12)!important;opacity:0;pointer-events:none;transform:translate(-50%,7px) scale(.9)}
.enemy-skill-banner.show{animation:enemySkillBannerHold 2300ms ease both!important}
@keyframes enemySkillBannerHold{0%{opacity:0;transform:translate(-50%,7px) scale(.9)}10%,82%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-4px) scale(.98)}}

@media(max-height:700px){
  .reward-modal-card,.reward-panel.boss-reward .reward-modal-card{padding:72px 42px 44px!important}
  .item-info-card,.fusion-card,.pull-reveal-card,.unlock-showcase .unlock-card,.sale-result-card{padding:48px 30px 36px!important}
}

/* Final inventory copy and action sizing; keep after every legacy modal rule. */
#itemInfoText,.item-info-stats span,.item-info-stats span small,.item-info-stats span strong{
  min-width:0!important;max-width:100%!important;overflow:hidden!important;white-space:nowrap!important;
  overflow-wrap:normal!important;word-break:keep-all!important;text-overflow:ellipsis!important;
}
#itemInfoText{display:block!important;padding:9px 10px!important;font-size:10px!important;line-height:1.2!important}
.item-info-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:7px!important;width:100%!important}
.item-info-actions .mini-button,#itemPlaceButton,#itemRemoveButton,#itemSellButton{
  box-sizing:border-box!important;width:100%!important;min-width:0!important;height:42px!important;min-height:42px!important;
  display:grid!important;place-items:center!important;margin:0!important;padding:0 6px 1px!important;
  color:#eaf8ff!important;font-size:9px!important;font-weight:900!important;line-height:1!important;
}
#itemPlaceButton[hidden],#itemRemoveButton[hidden],#itemSellButton[hidden]{display:none!important}
.inline-reveal-item .reveal-card-actions .mini-button,.pull-reveal-card .reveal-actions .mini-button{
  box-sizing:border-box!important;min-width:0!important;height:38px!important;min-height:38px!important;
  padding:0 8px 1px!important;font-size:9px!important;line-height:1!important;
}

/* Purpose-built reward modal suite 1790110000000. Artwork bays are the layout. */
.reward-modal-card:not(.unused-selector){position:relative!important;width:min(370px,calc(100vw - 8px))!important;height:auto!important;min-height:0!important;aspect-ratio:550/764!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:url("assets/generated/reward_modal_suite_1790109000000/stage-reward-choice-frame.png") center/100% 100% no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 16px 28px rgba(0,0,0,.84))!important}
.reward-modal-card>div:first-child{position:absolute!important;z-index:3!important;left:15%!important;right:15%!important;top:10.5%!important;min-height:40px!important;height:40px!important;display:grid!important;place-content:center!important;gap:1px!important;padding:0!important;border:0!important;background:transparent!important;text-align:center!important}
.reward-modal-card>div:first-child .label{font-size:8px!important}.reward-modal-card>div:first-child strong{font-size:15px!important}
.reward-modal-card .reward-grid{position:absolute!important;z-index:2!important;left:13.4%!important;right:13.4%!important;top:20.7%!important;bottom:11.2%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:1.08fr .92fr!important;gap:3.2% 3.5%!important;width:auto!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important}
.reward-modal-card .reward-card:not(.reward-ad-reroll){box-sizing:border-box!important;min-width:0!important;min-height:0!important;height:auto!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:58px minmax(0,1fr)!important;place-items:center!important;align-content:center!important;gap:4px!important;margin:0!important;padding:13px 9px 10px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:none!important}
.reward-modal-card .reward-card:last-child:nth-child(odd):not(.reward-ad-reroll){grid-column:1/-1!important;min-height:0!important}
.reward-modal-card .reward-icon{width:46px!important;height:46px!important}.reward-modal-card .reward-copy{width:100%!important;text-align:center!important}.reward-modal-card .reward-copy em{font-size:7px!important}.reward-modal-card .reward-copy strong{font-size:11px!important}.reward-modal-card .reward-copy small{font-size:8px!important}

/* Royal legacy has its own crowned frame and preserves multi-line effects. */
.reward-panel.boss-reward .reward-modal-card{width:min(370px,calc(100vw - 8px))!important;aspect-ratio:940/1484!important;padding:0!important;background:url("assets/generated/reward_modal_suite_1790109000000/king-legacy-frame-v3.png") center/100% 100% no-repeat!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child{left:17%!important;right:17%!important;top:12.4%!important;height:60px!important;min-height:60px!important}.reward-panel.boss-reward .reward-modal-card>div:first-child .label{color:#c59cff!important;font-size:8px!important}.reward-panel.boss-reward .reward-modal-card>div:first-child strong{color:#fff0ad!important;font-size:18px!important}
.reward-panel.boss-reward .reward-grid{left:16.2%!important;right:16.2%!important;top:25.3%!important;bottom:4.1%!important;grid-template-columns:1fr!important;grid-template-rows:repeat(4,minmax(0,1fr)) 8.5%!important;gap:1.45%!important}
.reward-panel.boss-reward .reward-card:not(.reward-ad-reroll){grid-column:1!important;grid-template-columns:40px minmax(0,1fr)!important;grid-template-rows:1fr!important;justify-items:start!important;align-items:center!important;gap:8px!important;padding:5px 11px!important;text-align:left!important;transform:translateY(-2px)!important}.reward-panel.boss-reward .reward-card .reward-copy{text-align:left!important}.reward-panel.boss-reward .reward-card .reward-icon{width:37px!important;height:37px!important}
.reward-panel.boss-reward .reward-copy strong{font-size:10px!important;line-height:1.05!important}.reward-panel.boss-reward .reward-copy small{display:block!important;max-height:2.55em!important;overflow:hidden!important;white-space:pre-line!important;word-break:keep-all!important;text-overflow:clip!important;font-size:7.2px!important;line-height:1.16!important}
.reward-panel.boss-reward .reward-ad-reroll{box-sizing:border-box!important;grid-column:1!important;min-height:0!important;height:auto!important;width:100%!important;grid-template-columns:25px minmax(0,1fr) 16px!important;gap:5px!important;margin:0!important;padding:3px 12px!important;border:0!important;background:transparent!important;box-shadow:none!important;filter:none!important}.reward-panel.boss-reward .reward-ad-reroll .reward-icon{width:23px!important;height:23px!important}.reward-panel.boss-reward .reward-ad-reroll .reward-ad-icon-wrap em{display:none!important}.reward-panel.boss-reward .reward-ad-reroll .reward-copy{text-align:left!important}.reward-panel.boss-reward .reward-ad-reroll .reward-copy small{display:none!important}.reward-panel.boss-reward .reward-ad-reroll .reward-copy strong{display:block!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:8.5px!important;line-height:1.05!important}.reward-panel.boss-reward .reward-ad-reroll .reward-copy b{display:block!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:6.4px!important;line-height:1.05!important}

/* The selected-effect result no longer reuses a plain generic rectangle. */
.unlock-showcase.reward-result .unlock-card{position:relative!important;box-sizing:border-box!important;width:min(330px,calc(100vw - 16px))!important;height:auto!important;min-height:0!important;aspect-ratio:464/736!important;display:block!important;margin:0!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:url("assets/generated/reward_modal_suite_1790109000000/reward-result-frame.png") center/100% 100% no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 16px 26px rgba(0,0,0,.82))!important}
.unlock-showcase.reward-result .unlock-card::before,.unlock-showcase.reward-result .unlock-card::after{content:none!important;display:none!important}
.unlock-showcase.reward-result .unlock-icon{position:absolute!important;left:50%!important;top:17.2%!important;width:88px!important;height:88px!important;margin:0!important;border:0!important;background:transparent!important;transform:translateX(-50%)!important;filter:drop-shadow(0 7px 8px rgba(0,0,0,.65))!important}
.unlock-showcase.reward-result .unlock-card>.label{position:absolute!important;left:13%!important;right:13%!important;top:39.6%!important;margin:0!important;text-align:center!important}.unlock-showcase.reward-result .unlock-card>strong{position:absolute!important;left:9%!important;right:9%!important;top:43.5%!important;max-width:none!important;margin:0!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;text-align:center!important;font-size:19px!important}
.unlock-showcase.reward-result .unlock-card>p{position:absolute!important;left:9.5%!important;right:9.5%!important;top:59.2%!important;height:21.5%!important;min-height:0!important;max-height:none!important;display:grid!important;place-items:center!important;box-sizing:border-box!important;margin:0!important;padding:10px 13px!important;overflow-y:auto!important;border:0!important;border-radius:0!important;background:transparent!important;color:#dcebf3!important;font-size:10px!important;line-height:1.35!important;text-align:center!important;white-space:pre-line!important}
.unlock-showcase.reward-result .unlock-confirm-button{position:absolute!important;left:15%!important;right:15%!important;bottom:4.6%!important;width:auto!important;height:7.8%!important;min-height:0!important;margin:0!important;padding:0 12px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#fff1b3!important;font-size:11px!important}

/* Last-mile board and combat alignment. */
#bagPanel .bag-grid{transform:translateY(4px)!important}.primary-button{top:4px!important}.stage-controls{top:47px!important;bottom:auto!important}.stage-controls .skill-button{min-height:20px!important;height:20px!important}
.enemy-skill-banner{top:-23px!important;min-width:104px!important;max-width:164px!important;min-height:30px!important;font-size:9.5px!important}.enemy-skill-banner.show{animation:enemySkillBannerHold 3600ms ease both!important}
@keyframes enemySkillBannerHold{0%{opacity:0;transform:translate(-50%,8px) scale(.88)}7%,88%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-5px) scale(.98)}}

/* Combat numbers: large readable hit values with separate critical identity. */
.damage-float.enemy-damage{right:clamp(38px,11vw,54px)!important;top:32px!important;z-index:31!important;min-width:72px!important;padding:0!important;border:0!important;background:transparent!important;color:#ffe16d!important;font-size:20px!important;font-style:italic!important;font-weight:1000!important;letter-spacing:-.5px!important;text-align:center!important;-webkit-text-stroke:.7px rgba(75,25,4,.9)!important;text-shadow:0 3px 0 #4b1805,0 0 5px #fff7c1,0 0 13px rgba(255,139,38,.95),0 5px 9px rgba(0,0,0,.75)!important;transform:rotate(-5deg)!important}
.damage-float.enemy-damage::before{content:none!important;display:none!important}.damage-float.enemy-damage.critical-damage{color:#fff!important;font-size:24px!important;text-shadow:0 3px 0 #64124e,0 0 7px #fff,0 0 16px #ff4fd8,0 0 24px #ffae37!important}.damage-float.enemy-damage.critical-damage::before{content:none!important;display:none!important}
.damage-float.enemy-damage.show{animation:damageHeroRise 900ms cubic-bezier(.18,.72,.2,1) both!important}@keyframes damageHeroRise{0%{opacity:0;transform:translateY(14px) rotate(-8deg) scale(.55)}18%,70%{opacity:1;transform:translateY(0) rotate(-5deg) scale(1.08)}100%{opacity:0;transform:translateY(-24px) rotate(-3deg) scale(.98)}}
.player-damage-float{font-size:14px!important;font-weight:1000!important;border-color:rgba(255,126,91,.8)!important;background:linear-gradient(180deg,rgba(76,16,21,.96),rgba(29,6,12,.94))!important;box-shadow:0 0 13px rgba(255,66,61,.42),0 5px 10px rgba(0,0,0,.46)!important}
@media(max-height:700px){.reward-modal-card:not(.unused-selector){width:min(326px,calc(100vw - 12px))!important}.reward-panel.boss-reward .reward-modal-card{width:min(326px,calc(100vw - 12px))!important}.unlock-showcase.reward-result .unlock-card{width:min(292px,calc(100vw - 18px))!important}}

/* User-directed hierarchy and combat alignment 1790111000000. */
.reward-boss-portrait[hidden]{display:none!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child{
  top:7.2%!important;height:17.5%!important;min-height:0!important;display:grid!important;
  grid-template-rows:minmax(0,1fr) 22px!important;place-items:center!important;align-content:center!important;gap:0!important;
}
.reward-panel.boss-reward .reward-boss-portrait{
  display:block!important;width:82px!important;height:82px!important;max-width:82px!important;max-height:82px!important;
  align-self:end!important;object-fit:contain!important;image-rendering:auto!important;
  transform:translateY(2px) scale(1.5)!important;transform-origin:center bottom!important;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.72)) drop-shadow(0 0 9px rgba(168,102,255,.32))!important;
}
.reward-panel.boss-reward .reward-modal-card>div:first-child .label{
  align-self:center!important;margin:0!important;padding:0 20px!important;color:#bfeeff!important;font-size:9px!important;line-height:1!important;
  text-shadow:0 1px 2px #000,0 0 7px rgba(96,205,255,.45)!important;
}
.reward-panel.boss-reward .reward-modal-card>div:first-child strong{display:none!important}

/* The tab tray itself moves down; the bag grid correction from the previous pass is reverted. */
#bagPanel .bag-grid{transform:none!important}
.combat-panel+.tabs,.tabs{margin-top:12px!important}

/* Status conditions use a purpose-built raster badge and sit lower than the normal skill control. */
.stage-controls .skill-button.control-status{
  width:112px!important;height:34px!important;min-height:34px!important;padding:0 19px 1px!important;
  border:0!important;background:url("assets/generated/reward_modal_suite_1790109000000/combat-status-badge.png") center/100% 100% no-repeat!important;
  color:#eee5ff!important;font-size:9px!important;font-weight:1000!important;letter-spacing:.2px!important;
  text-shadow:0 2px 2px #090311,0 0 7px rgba(181,125,255,.72)!important;
  opacity:1!important;filter:drop-shadow(0 5px 7px rgba(0,0,0,.58))!important;transform:translateY(14px)!important;
}
.fighter .status-fx-img.status-sleep,.fighter .status-fx-img.status-stun,.fighter .status-fx-img.status-root,
.fighter .status-fx-img.status-bubble,.fighter .status-fx-img.status-time,.fighter .status-fx-img.status-seal{
  top:1px!important;width:32px!important;height:32px!important;filter:saturate(1.05) brightness(1.08) drop-shadow(0 0 6px rgba(151,113,255,.58))!important;
}

/* Result confirmation stays centered inside the painted bottom recess. */
.unlock-showcase.reward-result .unlock-confirm-button{
  left:18%!important;right:18%!important;bottom:7.1%!important;height:7.2%!important;display:grid!important;place-items:center!important;
}

/* First companion acquisition loop 1790125000001. */
#menuLobbyPanel #lobbyCompanionButton .lobby-companion-guide-badge {
  position: absolute; z-index: 5; top: -4px; right: -3px;
  min-width: 28px; height: 17px; display: grid; place-items: center; padding: 0 5px;
  border: 1px solid #fff0a3; border-radius: 999px;
  background: linear-gradient(180deg, #ef6072, #8b1839); color: #fffbe2;
  font-size: 8px; font-weight: 1000; line-height: 1;
  box-shadow: 0 0 0 2px rgba(6,14,29,.9), 0 0 10px rgba(255,97,129,.72);
}
#menuLobbyPanel #lobbyCompanionButton .lobby-companion-guide-badge[hidden] { display: none !important; }
#menuLobbyPanel #lobbyCompanionButton.guide-pending { filter: drop-shadow(0 0 10px rgba(255,221,107,.72)) !important; }

#menuCompanionPanel .companion-onboarding-guide {
  width: calc(100% - 12px); min-height: 72px;
  display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 8px;
  margin: 3px auto 7px; padding: 8px 10px; border: 9px solid transparent;
  border-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") 28 38 fill / 9px 11px / 0 stretch;
  background: rgba(5,18,34,.94) padding-box; color: #eef8ff;
  box-shadow: 0 0 18px rgba(60,191,255,.16);
}
#menuCompanionPanel .companion-onboarding-guide[hidden] { display: none !important; }
#menuCompanionPanel .companion-onboarding-guide > img {
  width: 48px; height: 48px; padding: 4px; object-fit: contain; border-radius: 50%;
  background: radial-gradient(circle, rgba(82,197,255,.36), rgba(5,14,29,.86) 72%);
  filter: drop-shadow(0 0 8px rgba(92,213,255,.58));
}
#menuCompanionPanel .companion-onboarding-guide > span { min-width: 0; display: grid; gap: 2px; }
#menuCompanionPanel .companion-onboarding-guide small { color: #75dcff; font-size: 8px; font-weight: 1000; }
#menuCompanionPanel .companion-onboarding-guide strong { color: #fff1a8; font-size: 12px; line-height: 1.15; }
#menuCompanionPanel .companion-onboarding-guide p { color: #d9e8f4; font-size: 8.5px; font-weight: 800; line-height: 1.3; }
#menuCompanionPanel .companion-onboarding-guide > button {
  min-width: 66px; min-height: 34px; padding: 4px 7px; border: 0;
  background: url("assets/generated/ui/tab-button.png") center / 100% 100% no-repeat;
  color: #fff2a8; font-size: 9px; font-weight: 1000; text-shadow: 0 1px 3px #000;
}
#menuCompanionPanel .first-companion-guide-card {
  box-shadow: inset 0 0 0 2px rgba(255,220,102,.72), 0 0 18px rgba(62,201,255,.3) !important;
}
#menuCompanionPanel .first-companion-guide-target {
  position: relative; z-index: 2; outline: 2px solid #ffe26d !important; outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,220,80,.16), 0 0 16px rgba(255,220,80,.62) !important;
  animation: first-companion-guide-pulse 1.25s ease-in-out infinite;
}
@keyframes first-companion-guide-pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }

.result-first-companion-reward {
  display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 8px;
  min-height: 54px; padding: 6px 9px; border: 1px solid rgba(255,221,108,.58); border-radius: 7px;
  background: linear-gradient(90deg, rgba(21,70,103,.82), rgba(20,31,58,.92));
  box-shadow: inset 0 0 12px rgba(86,206,255,.12);
}
.result-first-companion-reward img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(255,221,99,.58)); }
.result-first-companion-reward span { min-width: 0; display: grid; gap: 1px; }
.result-first-companion-reward small { color: #83ddff; font-size: 8px; font-weight: 1000; }
.result-first-companion-reward strong { color: #fff0a4; font-size: 12px; }
.result-first-companion-reward em { color: #dbeaf5; font-size: 8.5px; font-style: normal; font-weight: 800; }

@media (max-width: 380px) {
  #menuCompanionPanel .companion-onboarding-guide { grid-template-columns: 42px minmax(0,1fr); min-height: 68px; padding-inline: 8px; }
  #menuCompanionPanel .companion-onboarding-guide > img { width: 40px; height: 40px; }
  #menuCompanionPanel .companion-onboarding-guide > button { grid-column: 1 / -1; min-height: 29px; }
}

/* Split affinity map: five-element cycle above, light/dark pair below. */
#menuElementPanel .menu-element-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px 10px;
}

#menuElementPanel .element-affinity-guide {
  margin: 0 4px;
  color: #bedbe8;
  font-size: 8.5px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

#menuElementPanel .element-affinity-section {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(95, 196, 235, .3);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(11, 38, 59, .94), rgba(3, 13, 25, .98)),
    radial-gradient(circle at 50% 20%, rgba(63, 193, 239, .16), transparent 58%);
  box-shadow: inset 0 0 18px rgba(53, 178, 224, .08), 0 5px 12px rgba(0, 0, 0, .22);
}

#menuElementPanel .element-affinity-section > header {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  padding: 5px 10px 4px;
  border-bottom: 1px solid rgba(106, 205, 240, .2);
  background: linear-gradient(90deg, rgba(31, 91, 119, .24), transparent);
}

#menuElementPanel .element-affinity-section > header span {
  color: #fff0a4;
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}

#menuElementPanel .element-affinity-section > header small {
  min-width: 0;
  overflow: hidden;
  color: #86cce4;
  font-size: 7px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menuElementPanel .element-cycle-map {
  position: relative;
  width: min(282px, calc(100vw - 82px));
  aspect-ratio: 300 / 230;
  margin: 3px auto 0;
  isolation: isolate;
}

#menuElementPanel .element-cycle-map > svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(80, 205, 245, .32));
}

#menuElementPanel .element-cycle-map > svg > path {
  fill: none;
  stroke: rgba(105, 213, 247, .82);
  stroke-width: 2.2;
  stroke-linecap: round;
}

#menuElementPanel .element-cycle-map marker path {
  fill: #82dcf6;
}

#menuElementPanel .element-cycle-node,
#menuElementPanel .element-dual-node {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--element-color) 78%, #e7f8ff);
  border-radius: 50%;
  background: #061725;
  box-shadow:
    inset 0 0 0 3px rgba(1, 8, 15, .9),
    inset 0 0 13px color-mix(in srgb, var(--element-color) 27%, transparent),
    0 0 11px color-mix(in srgb, var(--element-color) 26%, transparent);
}

#menuElementPanel .element-cycle-node {
  position: absolute;
  z-index: 2;
  width: 49px;
  height: 49px;
  grid-template-rows: 26px 11px;
  padding: 4px 2px;
  transform: translate(-50%, -50%);
}

#menuElementPanel .element-cycle-node i,
#menuElementPanel .element-dual-node i,
#menuElementPanel .element-cycle-core i,
#menuElementPanel .element-neutral-note i {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--element-color) 22%, #071623);
  color: #fff8dc;
  font-style: normal;
  font-weight: 1000;
  text-shadow: 0 1px 3px #000;
}

#menuElementPanel .element-cycle-node i {
  width: 25px;
  height: 25px;
  font-size: 10px;
}

#menuElementPanel .element-cycle-node strong,
#menuElementPanel .element-dual-node strong {
  color: var(--element-color);
  font-size: 8px;
  font-weight: 1000;
  line-height: 1;
}

#menuElementPanel .element-cycle-core {
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 1;
  width: 68px;
  height: 68px;
  display: grid;
  grid-template-rows: 25px 14px 10px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255, 220, 115, .48);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 54, 75, .98), rgba(3, 14, 25, .98));
  box-shadow: inset 0 0 15px rgba(89, 204, 243, .12), 0 0 13px rgba(255, 218, 106, .1);
  transform: translate(-50%, -50%);
}

#menuElementPanel .element-cycle-core i {
  width: 23px;
  height: 23px;
  font-size: 9px;
}

#menuElementPanel .element-cycle-core strong { color: #fff0a5; font-size: 9px; }
#menuElementPanel .element-cycle-core small { color: #85b9cc; font-size: 6px; }

#menuElementPanel .element-cycle-sequence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: -2px 6px 7px;
  color: #a7cddd;
  font-size: 8px;
  font-weight: 1000;
  white-space: nowrap;
}

#menuElementPanel .element-cycle-sequence b {
  color: var(--element-color);
  font-size: 9px;
}

#menuElementPanel .element-cycle-sequence i { color: #76d8f4; font-style: normal; }

#menuElementPanel .element-affinity-dual {
  flex: 0 0 auto;
}

#menuElementPanel .element-dual-map {
  min-height: 82px;
  display: grid;
  grid-template-columns: 64px 92px 64px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 8px 0;
}

#menuElementPanel .element-dual-node {
  width: 61px;
  height: 61px;
  grid-template-rows: 32px 13px;
  padding: 5px 3px;
}

#menuElementPanel .element-dual-node i {
  width: 31px;
  height: 31px;
  font-size: 11px;
}

#menuElementPanel .element-dual-node strong { font-size: 9px; }

#menuElementPanel .element-dual-link {
  display: grid;
  place-items: center;
  gap: 0;
  color: #9de7ff;
  text-align: center;
  text-shadow: 0 0 8px rgba(92, 211, 249, .55);
}

#menuElementPanel .element-dual-link b {
  font-size: 25px;
  line-height: .9;
}

#menuElementPanel .element-dual-link small {
  color: #fff0a3;
  font-size: 7.5px;
  font-weight: 1000;
}

#menuElementPanel .element-dual-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: -1px 17px 7px;
  color: #bed8e4;
  font-size: 7px;
  font-weight: 850;
  text-align: center;
}

#menuElementPanel .element-dual-copy b:first-child { color: #ffe073; }
#menuElementPanel .element-dual-copy span + span b { color: #c88cff; }

#menuElementPanel .element-neutral-note {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 3px;
  color: #9ebcca;
  font-size: 7.5px;
  font-weight: 850;
}

#menuElementPanel .element-neutral-note i {
  --element-color: #a9c0cd;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(169, 192, 205, .4);
  font-size: 8px;
}

#menuElementPanel .element-neutral-note strong { color: #dce9ee; font-size: 8px; }

@media (max-width: 370px), (max-height: 760px) {
  #menuElementPanel .element-affinity-section > header { min-height: 27px; padding-block: 3px; }
  #menuElementPanel .element-cycle-map { width: min(244px, calc(100vw - 90px)); }
  #menuElementPanel .element-cycle-node { width: 43px; height: 43px; grid-template-rows: 23px 10px; }
  #menuElementPanel .element-cycle-node i { width: 22px; height: 22px; }
  #menuElementPanel .element-cycle-core { width: 60px; height: 60px; }
  #menuElementPanel .element-dual-map { min-height: 70px; grid-template-columns: 54px 82px 54px; }
  #menuElementPanel .element-dual-node { width: 52px; height: 52px; grid-template-rows: 27px 11px; }
  #menuElementPanel .element-dual-node i { width: 26px; height: 26px; }
  #menuElementPanel .element-neutral-note { min-height: 25px; }
}

/* Final tutorial layout override. This intentionally sits at the physical end
   of the stylesheet so older repair layers cannot pull the buttons sideways. */
.tutorial-panel,
.tutorial-panel[class*="tutorial-step-"],
.tutorial-panel[class*="tutorial-"]{
  box-sizing:border-box!important;
  width:min(354px,calc(100vw - 10px))!important;
  max-width:calc(100vw - 10px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:2098/749!important;
  display:none!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) 26px!important;
  align-items:stretch!important;
  align-content:stretch!important;
  gap:4px!important;
  padding:17px 20px 10px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/tutorial_mobile_ui_1790256000000/tutorial-guide-panel-transparent.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.56))!important;
}
.tutorial-panel.active,
.tutorial-panel.active[class*="tutorial-step-"],
.tutorial-panel.active[class*="tutorial-"]{display:grid!important}
.tutorial-panel>div:first-child{min-width:0!important;min-height:0!important;align-self:center!important;overflow:hidden!important}
.tutorial-panel strong{display:block!important;max-width:100%!important;margin:0 0 2px!important;overflow:hidden!important;color:#fff0ad!important;font-size:10.5px!important;line-height:1.15!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.tutorial-panel p{max-width:100%!important;max-height:none!important;margin:0!important;overflow:visible!important;color:#d7e8f2!important;font-size:9.1px!important;font-weight:760!important;line-height:1.22!important;letter-spacing:-.025em!important;white-space:normal!important;word-break:keep-all!important;overflow-wrap:break-word!important}
.tutorial-actions,
.tutorial-panel.tutorial-single-action .tutorial-actions,
.tutorial-panel.tutorial-final-actions .tutorial-actions{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:26px!important;
  min-height:26px!important;
  align-self:center!important;
  display:grid!important;
  grid-template-columns:repeat(2,86px)!important;
  grid-template-rows:26px!important;
  justify-content:center!important;
  align-content:center!important;
  gap:7px!important;
  overflow:visible!important;
}
.tutorial-panel.tutorial-single-action .tutorial-actions{grid-template-columns:86px!important}
.tutorial-actions button,
.tutorial-actions button:first-child,
.tutorial-actions button:last-child,
.tutorial-panel.tutorial-single-action .tutorial-actions button:not([hidden]),
.tutorial-panel.tutorial-final-actions .tutorial-actions button{
  box-sizing:border-box!important;
  width:86px!important;
  min-width:86px!important;
  max-width:86px!important;
  height:26px!important;
  min-height:26px!important;
  max-height:26px!important;
  margin:0!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center/100% 100% no-repeat!important;
  color:#e8f5ff!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:26px!important;
  text-align:center!important;
  text-shadow:0 1px 2px #000!important;
  box-shadow:none!important;
}
.tutorial-actions button:first-child:not([hidden]){background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-small-primary.png")!important;color:#fff0a9!important}
.tutorial-actions button[hidden]{display:none!important}
.tutorial-panel.tutorial-final-actions{min-height:0!important}
.tutorial-panel p{font-size:9px!important;line-height:1.18!important}
.tutorial-panel::before,
.tutorial-panel::after{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  display:block!important;
  left:var(--tutorial-pointer-x,50%)!important;
  border:0!important;
  box-shadow:none!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important;
}
.tutorial-panel::before{
  width:18px!important;
  height:12px!important;
  background:linear-gradient(90deg,#3484bd,#d3af55 50%,#3484bd)!important;
  filter:drop-shadow(0 0 5px rgba(74,184,255,.72))!important;
}
.tutorial-panel::after{
  width:12px!important;
  height:8px!important;
  background:linear-gradient(180deg,#102744,#040b18)!important;
}
.tutorial-panel[data-pointer-side="bottom"]::before{
  top:auto!important;
  bottom:-2px!important;
  clip-path:polygon(0 0,100% 0,50% 100%)!important;
}
.tutorial-panel[data-pointer-side="bottom"]::after{
  top:auto!important;
  bottom:1px!important;
  clip-path:polygon(0 0,100% 0,50% 100%)!important;
}
.tutorial-panel[data-pointer-side="top"]::before{
  top:-2px!important;
  bottom:auto!important;
  clip-path:polygon(50% 0,100% 100%,0 100%)!important;
}
.tutorial-panel[data-pointer-side="top"]::after{
  top:1px!important;
  bottom:auto!important;
  clip-path:polygon(50% 0,100% 100%,0 100%)!important;
}
.tutorial-panel>div{position:relative!important;z-index:3!important}
.tutorial-spotlight{
  box-shadow:0 0 0 9999px rgba(1,6,14,.6),0 0 0 4px rgba(255,212,82,.15),0 0 25px rgba(255,215,89,.54)!important;
}

/* Phone home screen must use the complete physical viewport. The desktop
   frame remains capped, while the Android/browser phone layout loses the
   legacy 14px presentation gutter. */
@media (max-width: 600px) {
  .main-menu {
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
  }

  .main-menu .menu-scene {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
  }
}

/* 완판 등급은 아이템의 C/B/A/S/SS/SSS 색을 그대로 공유한다. */
.board-passive-choice img,
.board-clear-supply-preview img {
  image-rendering: auto;
}

.board-passive-choice[data-rarity="C"],
.board-clear-supply-preview[data-rarity="C"] {
  border-color: #4ade80 !important;
  box-shadow: inset 0 0 14px rgba(74, 222, 128, 0.12), 0 0 8px rgba(74, 222, 128, 0.12);
}
.board-passive-choice[data-rarity="C"] b { color: #082514; background: #4ade80; }
.board-passive-choice[data-rarity="C"] strong,
.board-clear-supply-preview[data-rarity="C"] strong { color: #8dffb0; }

.board-passive-choice[data-rarity="B"],
.board-clear-supply-preview[data-rarity="B"] {
  border-color: #35c8ff !important;
  box-shadow: inset 0 0 16px rgba(53, 200, 255, 0.14), 0 0 9px rgba(53, 200, 255, 0.14);
}
.board-passive-choice[data-rarity="B"] b { color: #061d29; background: #35c8ff; }
.board-passive-choice[data-rarity="B"] strong,
.board-clear-supply-preview[data-rarity="B"] strong { color: #79ddff; }

.board-passive-choice[data-rarity="A"],
.board-clear-supply-preview[data-rarity="A"] {
  border-color: #b896ff !important;
  box-shadow: inset 0 0 18px rgba(184, 150, 255, 0.16), 0 0 10px rgba(184, 150, 255, 0.15);
}
.board-passive-choice[data-rarity="A"] b { color: #180b2b; background: #b896ff; }
.board-passive-choice[data-rarity="A"] strong,
.board-clear-supply-preview[data-rarity="A"] strong { color: #cdb8ff; }

.board-passive-choice[data-rarity="S"],
.board-clear-supply-preview[data-rarity="S"] {
  border-color: #ffdc73 !important;
  box-shadow: inset 0 0 20px rgba(255, 220, 115, 0.16), 0 0 11px rgba(255, 220, 115, 0.17);
}
.board-passive-choice[data-rarity="S"] b { color: #2a1e04; background: #ffdc73; }
.board-passive-choice[data-rarity="S"] strong,
.board-clear-supply-preview[data-rarity="S"] strong { color: #ffdc73; }

.board-passive-choice[data-rarity="SS"],
.board-clear-supply-preview[data-rarity="SS"] {
  border-color: #ff9fb8 !important;
  box-shadow: inset 0 0 22px rgba(255, 159, 184, 0.18), 0 0 12px rgba(255, 159, 184, 0.2);
}
.board-passive-choice[data-rarity="SS"] b { color: #2c0a15; background: #ff9fb8; }
.board-passive-choice[data-rarity="SS"] strong,
.board-clear-supply-preview[data-rarity="SS"] strong { color: #ffb7c9; }

.board-passive-choice[data-rarity="SSS"],
.board-clear-supply-preview[data-rarity="SSS"] {
  border-color: #ff4d59 !important;
  box-shadow: inset 0 0 24px rgba(255, 72, 64, 0.2), 0 0 15px rgba(229, 32, 48, 0.34);
}
.board-passive-choice[data-rarity="SSS"] b { color: #2b050b; background: #ff4d59; }
.board-passive-choice[data-rarity="SSS"] strong,
.board-clear-supply-preview[data-rarity="SSS"] strong { color: #fff0e8; text-shadow: 0 0 8px rgba(255, 78, 88, 0.56); }

/* Codex consolidation: the lobby has five destinations; recipes and elements live in the codex. */
#menuLobbyPanel .lobby-tools {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#menuCodexPanel.active {
  grid-template-rows: 48px 72px minmax(0, 1fr) !important;
}

#menuCodexPanel .codex-tabbar {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#menuCodexPanel .codex-tab {
  min-width: 0 !important;
  min-height: 72px !important;
  grid-template-columns: 25px minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto !important;
  column-gap: 4px !important;
  row-gap: 1px !important;
  padding: 7px 8px 6px !important;
}

#menuCodexPanel .codex-tab > img {
  grid-row: 1 / 3 !important;
  width: 25px !important;
  height: 25px !important;
  align-self: center !important;
}

#menuCodexPanel .codex-tab > span {
  align-self: end !important;
}

#menuCodexPanel .codex-tab > span small {
  font-size: 6.8px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#menuCodexPanel .codex-tab > span b {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
}

#menuCodexPanel .codex-tab > strong {
  grid-column: 2 !important;
  align-self: start !important;
  padding: 0 !important;
  font-size: 8.5px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#menuCodexPanel[data-codex-view="guides"] .codex-book {
  padding: 8px 9px 10px !important;
}

#menuCodexPanel #codexGuideBody.open {
  display: grid !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#codexGuideBody .guide-tabbar {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#codexGuideBody .guide-tabbar button {
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 5px !important;
  white-space: nowrap !important;
}

#codexGuideBody .guide-tab-view,
#codexGuideBody .guide-tab-view.active {
  min-height: 0 !important;
  height: 100% !important;
}

#codexGuideBody #guideUnlockView.active,
#codexGuideBody #guideElementView.active {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#codexGuideBody .menu-unlock-list,
#codexGuideBody .unlock-overview,
#codexGuideBody .menu-recipe-box,
#codexGuideBody .menu-recipe-body,
#codexGuideBody .menu-recipe-list {
  min-height: 0 !important;
}

#codexGuideBody .unlock-overview {
  height: 100% !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
}

#codexGuideBody .unlock-scroll,
#codexGuideBody .menu-recipe-list {
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 370px), (max-height: 700px) {
  #menuCodexPanel.active {
    grid-template-rows: 44px 64px minmax(0, 1fr) !important;
  }

  #menuCodexPanel .codex-tab {
    min-height: 64px !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    padding: 6px 6px 5px !important;
  }

  #menuCodexPanel .codex-tab > img {
    width: 22px !important;
    height: 22px !important;
  }

  #menuCodexPanel .codex-tab > span b {
    font-size: 9.5px !important;
  }

  #menuCodexPanel .codex-tab > strong {
    font-size: 7.8px !important;
  }
}


/* SOURCE: ui/styles/foundation/ui-popup-repair.css */
/* Popup-specific composition repair 1790113000000. */
.reward-modal-card,
.reward-panel.boss-reward .reward-modal-card {
  width: min(372px, calc(100vw - 14px));
  padding: 62px 34px 34px;
  gap: 10px;
}

.reward-modal-card > div:first-child {
  min-height: 70px;
  padding: 12px 20px 10px;
  display: grid;
  place-content: center;
  text-align: center;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png") center / 100% 100% no-repeat;
}

.reward-modal-card > div:first-child .label { font-size: 10px; }
.reward-modal-card > div:first-child > strong { font-size: 18px; line-height: 1.2; }

.reward-card,
.reward-panel.boss-reward .reward-card,
.reward-panel.boss-reward .reward-riskCoins,
.reward-panel.boss-reward .reward-riskPurge,
.reward-panel.boss-reward .reward-riskOverclock {
  min-height: 92px;
  padding: 12px 13px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
}

.reward-card .reward-icon { width: 46px; height: 46px; }
.reward-card .reward-copy { align-content: center; gap: 4px; }
.reward-card .reward-copy em { display: none; }
.reward-card .reward-copy strong { font-size: 14px; }
.reward-card .reward-copy small,
.reward-card .reward-copy b { color: #d9e7f2; font-size: 10.5px; line-height: 1.28; white-space: pre-line; }

.reward-panel.boss-reward .reward-modal-card { padding-top: 48px; }
.reward-panel.boss-reward .reward-modal-card > div:first-child { min-height: 118px; padding-top: 8px; }
.reward-panel.boss-reward .reward-boss-portrait {
  position: static;
  width: 74px;
  height: 74px;
  margin: -2px auto -3px;
  object-fit: contain;
  object-position: center bottom;
}
.reward-panel.boss-reward .reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.reward-panel.boss-reward .reward-card { min-height: 102px; padding: 9px 8px; grid-template-columns: 42px minmax(0, 1fr); }
.reward-panel.boss-reward .reward-card .reward-icon { width: 40px; height: 40px; }
.reward-panel.boss-reward .reward-card .reward-copy strong { font-size: 13px; }
.reward-panel.boss-reward .reward-card .reward-copy small { font-size: 9.5px; }

.unlock-showcase.reward-result .unlock-card {
  width: min(350px, calc(100vw - 24px));
  min-height: 430px;
  padding: 72px 42px 42px;
  grid-template-rows: 116px auto 40px;
  gap: 12px;
}
.unlock-showcase.reward-result .unlock-portal,
.unlock-showcase.reward-result .unlock-chest,
.unlock-showcase.reward-result .unlock-card > .label { display: none; }
.unlock-showcase.reward-result .unlock-icon {
  position: static;
  grid-row: 1;
  place-self: center;
  width: 104px;
  height: 104px;
  padding: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #27445a, #091521 70%);
  border: 3px solid #c89342;
  box-shadow: inset 0 0 0 5px #08121d, 0 0 24px rgba(229,179,80,.35);
}
.unlock-showcase.reward-result .unlock-card > strong,
.unlock-showcase.reward-result .unlock-card > p {
  grid-row: 2;
  width: 100%;
  margin: 0;
  padding-inline: 18px;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") center / 100% 100% no-repeat;
}
.unlock-showcase.reward-result .unlock-card > strong { padding-top: 18px; padding-bottom: 31px; font-size: 19px; }
.unlock-showcase.reward-result .unlock-card > p { align-self: end; padding-top: 47px; padding-bottom: 18px; color: #dceaf5; font-size: 12px; }

.item-info-card {
  width: min(356px, calc(100vw - 22px));
  padding: 26px 28px 24px;
  gap: 11px;
  overflow: hidden;
  border: 0;
  background: url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png") center / 100% 100% no-repeat;
}
.item-info-head { align-items: center; }
.item-info-icon { width: 58px; height: 58px; padding: 10px; }
.item-info-card > p,
.item-info-stats { width: 100%; box-sizing: border-box; }
.item-info-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; width: 100%; }
.item-info-actions .mini-button,
.fusion-card > .mini-button,
.sale-result-close,
.pull-reveal-card > .reveal-actions .mini-button {
  width: 100%; min-height: 42px; border: 0; border-radius: 0;
  background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png") center / 100% 100% no-repeat;
  color: #fff2bd; font-size: 11px; box-shadow: none;
}
.item-info-actions .mini-button:not(.accent) { background-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png"); }

.fusion-card {
  width: min(356px, calc(100vw - 22px));
  padding: 56px 38px 38px;
  gap: 9px;
  overflow: hidden;
  border: 0;
  background: url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png") center / 100% 100% no-repeat;
}
.fusion-result { min-height: 112px; padding: 12px; align-items: center; overflow: hidden; background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") center / 100% 100% no-repeat; }
.fusion-result-icon { width: 74px; height: 74px; padding: 12px; object-fit: contain; }
.fusion-result p { margin: 3px 0 0; padding: 0; border: 0; background: none; }

.pull-reveal-card { width: min(360px, calc(100vw - 20px)); padding: 54px 36px 38px; border: 0; background: url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png") center / 100% 100% no-repeat; }
.pull-reveal.high-rarity .pull-reveal-card { background: url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png") center / 100% 100% no-repeat; }
.pull-reveal.high-rarity .rare-showcase { min-height: 360px; padding: 18px; align-content: center; gap: 9px; border: 0; background: radial-gradient(circle at 50% 42%,rgba(168,244,255,.20),transparent 42%); }
.pull-reveal.high-rarity .rare-reveal-icon { width: 104px; height: 104px; padding: 16px; }
.pull-reveal.high-rarity .rare-showcase .name { font-size: 21px; }
.pull-reveal.high-rarity .rare-showcase .stats { font-size: 13px; }

.run-prep-section-head { padding-top: 9px; transform: translateY(3px); }
.run-prep-option > em { margin-right: 22px; min-width: 54px; }
.run-prep-card > p { margin-top: 5px; transform: translateY(3px); }

.board-passive-choice-card { padding: 62px 34px 36px; gap: 10px; }
.board-passive-choice-card > div:first-child { min-height: 76px; padding: 10px 14px; background: url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png") center / 100% 100% no-repeat; }
.board-passive-choice-card > div:first-child > strong { font-size: 18px; }
.board-passive-choice-card > div:first-child > small { font-size: 10.5px; }
.board-clear-supply-preview { min-height: 76px; grid-template-columns: 52px 1fr; }
.board-clear-supply-preview img { width: 48px; height: 48px; }
.board-passive-choice { min-height: 82px; grid-template-columns: 48px 1fr; }
.board-passive-choice img { width: 44px; height: 44px; }
.board-passive-choice strong { font-size: 14px; }
.board-passive-choice small,.board-passive-choice em { font-size: 10px; }

.sale-result-card { width: min(348px,calc(100vw - 24px)); padding: 62px 38px 40px; gap: 12px; text-align: center; background: url("assets/generated/modern_ui_1787660000000/run-prep-frame-clean-v2.png") center / 100% 100% no-repeat; }
.sale-result-kicker { font-size: 11px; }
.sale-result-card h2 { margin: 0; font-size: 19px; }
.sale-result-reward { min-height: 94px; padding: 14px 18px; grid-template-columns: 58px 1fr; text-align: left; }
.sale-result-reward img { width: 52px; height: 52px; }
.sale-result-reward small { font-size: 10px; }
.sale-result-reward strong { font-size: 14px; }

.enemy-info-card { width: min(360px,calc(100vw - 20px)); padding: 22px; }
.enemy-info-row { min-height: 0; padding: 14px 16px; gap: 7px; }
.enemy-info-row strong { font-size: 15px; }
.enemy-info-row span,.enemy-info-row p,.enemy-info-row small { font-size: 10.5px; line-height: 1.35; }

@media (max-height: 760px) {
  .reward-modal-card,.reward-panel.boss-reward .reward-modal-card { padding: 54px 31px 31px; }
  .reward-card { min-height: 82px; }
  .reward-panel.boss-reward .reward-modal-card > div:first-child { min-height: 104px; }
}

.effect-summary-chip img { width: 20px; }

/* Reward card geometry must not stretch with the modal grid. */
.reward-modal-card > div:first-child {
  border: 7px solid transparent;
  background: rgba(3, 14, 26, 0.9) padding-box;
  border-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png") 18 30 fill / 8px 10px / 0 stretch;
}
.reward-grid { grid-template-rows: 104px 104px; grid-auto-rows: 104px; align-content: center; }
.reward-card,.reward-panel.boss-reward .reward-card { height: 104px !important; min-height: 104px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; grid-template-columns: none !important; grid-template-rows: none !important; padding: 11px 14px !important; }
.reward-card .reward-copy { flex: 1; text-align: left; }
.reward-panel.boss-reward .reward-grid { grid-template-rows: repeat(3,112px); grid-auto-rows: 112px; align-content: start; }
.reward-panel.boss-reward .reward-card { height: 112px !important; min-height: 112px !important; display: flex !important; }

.unlock-showcase.reward-result .unlock-icon { padding: 9px !important; object-fit: contain; image-rendering: pixelated; }

.enemy-info-row { display: block !important; grid-template-columns: none !important; }
.enemy-info-row > div { width: 100%; display: grid; gap: 5px; margin-bottom: 8px; }
.enemy-info-row > div strong { width: 100%; white-space: normal; writing-mode: horizontal-tb; }
.enemy-info-row > div span { width: 100%; white-space: normal; }
.enemy-info-row p,.enemy-info-row small { display: block; margin-top: 5px; }

.end-card { min-height: min(610px,calc(100dvh - 24px)) !important; }
.end-text { padding: 12px; display: grid; align-content: center; gap: 8px; border: 8px solid transparent; background: rgba(4,14,25,.9) padding-box; border-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") 28 38 fill/9px 11px/0 stretch; }
.end-text .run-result-hero,.end-text .result-progress,.end-text .result-line,.end-text .result-upgrade-hint { border: 0; background: none; }
.end-text .result-summary-grid { gap: 5px; }
.end-text .result-mini-card { min-height: 48px; border-width: 1px; border-image: none; border-radius: 5px; background: rgba(10,31,48,.88); }
.end-text .result-best-item { border-width: 1px; border-image: none; border-radius: 6px; background: rgba(10,31,48,.88); }

.sale-result-reward { display: grid; grid-template-columns: 64px minmax(0,1fr) !important; align-items: center; }
.sale-result-reward img { width: 60px !important; height: 60px !important; padding: 7px; }

.reward-modal-card .reward-card:not(.reward-ad-reroll) {
  height: 104px !important;
  min-height: 104px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  grid-template: none !important;
  padding: 12px 14px !important;
}
.reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-icon { flex: 0 0 46px; margin: 0 !important; }
.reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-copy { align-self: center; }

.board-passive-choice-list .board-passive-choice {
  display: grid !important;
  grid-template-columns: 48px minmax(0,1fr) !important;
  align-items: center !important;
  min-height: 82px !important;
  padding: 9px 12px !important;
  border: 7px solid transparent !important;
  background: rgba(4,14,25,.94) padding-box !important;
  border-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-ledger.png") 18 30 fill/8px 10px/0 stretch !important;
  color: #fff !important;
  text-align: left !important;
}
.board-passive-choice-list .board-passive-choice > span { display:grid; gap:3px; }

.enemy-info-row > div { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto auto !important; }
.enemy-info-row > div strong,.enemy-info-row > div span { grid-column:1 !important; min-width:0 !important; }

.unlock-showcase.reward-result .unlock-icon { transform: scale(1.45); }

.reward-modal-card > div:first-child {
  border: 1px solid rgba(95,184,225,.65) !important;
  border-image: none !important;
  border-radius: 5px;
  background: linear-gradient(180deg,rgba(10,40,62,.96),rgba(3,15,27,.96)) !important;
  box-shadow: inset 0 0 18px rgba(60,174,226,.12),0 3px 10px rgba(0,0,0,.45);
}
.reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-icon { flex-basis: 38px; width: 38px; height: 38px; }
.reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-copy { min-width:0; gap:3px; }
.reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-copy strong { display:block !important; max-width:100%; overflow:visible !important; text-overflow:clip !important; white-space:normal !important; -webkit-line-clamp:unset !important; font-size:12px; line-height:1.15; }
.reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-copy small { max-width:100%; overflow:visible; text-overflow:clip; white-space:normal; font-size:9.5px; }

/* Focused reward composition 1790115000000. */
.reward-panel:not(.boss-reward) .reward-modal-card {
  min-height: 452px !important;
  max-height: 452px !important;
  padding: 58px 35px 34px !important;
  grid-template-rows: 64px auto !important;
  align-content: center !important;
}
.reward-panel:not(.boss-reward) .reward-grid {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: 124px 124px !important;
  grid-auto-rows: 124px !important;
  align-content: center !important;
  gap: 7px !important;
  overflow: visible !important;
}
.reward-panel:not(.boss-reward) .reward-modal-card .reward-card:not(.reward-ad-reroll) {
  width: 100% !important;
  height: 124px !important;
  min-height: 124px !important;
  padding: 10px 8px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: 46px auto !important;
  place-items: center !important;
  align-content: center !important;
  gap: 6px !important;
  text-align: center !important;
}
.reward-panel:not(.boss-reward) .reward-card:nth-child(3) { grid-column: 1/-1 !important; }
.reward-panel:not(.boss-reward) .reward-card .reward-icon {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.reward-panel:not(.boss-reward) .reward-card .reward-copy {
  width: 100% !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 4px !important;
  text-align: center !important;
}
.reward-panel:not(.boss-reward) .reward-card .reward-copy strong { font-size: 13px !important; line-height: 1.15 !important; }
.reward-panel:not(.boss-reward) .reward-card .reward-copy small { font-size: 10.5px !important; line-height: 1.2 !important; }

.reward-panel.boss-reward .reward-modal-card {
  width: min(372px,calc(100vw - 14px)) !important;
  min-height: 584px !important;
  max-height: 584px !important;
  padding: 47px 38px 35px !important;
  grid-template-rows: 112px auto !important;
  gap: 3px !important;
}
.reward-panel.boss-reward .reward-modal-card > div:first-child {
  min-height: 112px !important;
  padding: 0 !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.reward-panel.boss-reward .reward-boss-portrait {
  width: 82px !important;
  height: 82px !important;
  margin: 0 auto -5px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.reward-panel.boss-reward .reward-modal-card > div:first-child .label { font-size: 11px !important; }
.reward-panel.boss-reward .reward-modal-card > div:first-child > strong { font-size: 17px !important; }
.reward-panel.boss-reward .reward-grid {
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: repeat(4,64px) 52px !important;
  grid-auto-rows: 64px !important;
  align-content: start !important;
  gap: 5px !important;
  overflow: visible !important;
}
.reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll) {
  height: 64px !important;
  min-height: 64px !important;
  padding: 7px 13px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) !important;
  grid-template-rows: minmax(0,1fr) !important;
  gap: 10px !important;
}
.reward-panel.boss-reward .reward-card .reward-icon {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.reward-panel.boss-reward .reward-card .reward-copy strong { font-size: 13px !important; }
.reward-panel.boss-reward .reward-card .reward-copy small { font-size: 10px !important; line-height: 1.2 !important; }
.reward-panel.boss-reward .reward-ad-reroll { min-height: 52px !important; }
.reward-panel.boss-reward .reward-modal-card { grid-template-rows:126px auto !important; padding-top:39px !important; }
.reward-panel.boss-reward .reward-modal-card > div:first-child { height:126px !important; min-height:126px !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:25px 78px 18px !important; place-items:center !important; align-content:center !important; }
.reward-panel.boss-reward .reward-modal-card > div:first-child > strong { display:block !important; grid-column:1 !important; grid-row:1 !important; margin:0 !important; color:#fff1b0 !important; font-size:18px !important; line-height:1 !important; }
.reward-panel.boss-reward .reward-boss-portrait { grid-column:1 !important; grid-row:2 !important; }
.reward-panel.boss-reward .reward-modal-card > div:first-child > .label { grid-column:1 !important; grid-row:3 !important; margin:0 !important; color:#d7e8f3 !important; font-size:10.5px !important; }
.reward-panel.boss-reward .reward-ad-icon-wrap { border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; }
.reward-panel.boss-reward .reward-ad-icon-wrap .reward-icon { padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; }
.reward-panel.boss-reward .reward-ad-reroll {
  width:100% !important;
  height:54px !important;
  min-height:54px !important;
  padding:6px 12px !important;
  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) 18px !important;
  align-items:center !important;
  gap:8px !important;
  border:1px solid rgba(155,108,209,.55) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(35,18,52,.95),rgba(11,9,24,.97)) !important;
  box-shadow:inset 0 0 14px rgba(151,83,217,.16) !important;
}
.reward-panel.boss-reward .reward-ad-reroll .reward-copy { display:grid !important; gap:1px !important; text-align:left !important; }
.reward-panel.boss-reward .reward-ad-reroll .reward-copy strong { font-size:10.5px !important; white-space:normal !important; }
.reward-panel.boss-reward .reward-ad-reroll .reward-copy b { font-size:8.5px !important; white-space:normal !important; }
.reward-panel:not(.boss-reward) .reward-grid > .reward-card:nth-child(1),.reward-panel:not(.boss-reward) .reward-grid > .reward-card:nth-child(2){transform:translateY(-10px)!important}.reward-panel:not(.boss-reward) .reward-grid > .reward-card:nth-child(3){transform:translateY(12px)!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child{grid-template-rows:24px 86px!important;height:110px!important;min-height:110px!important;transform:translateY(-13px)}.reward-panel.boss-reward .reward-modal-card>div:first-child>strong{grid-row:1!important;transform:translateY(-7px)}.reward-panel.boss-reward .reward-boss-portrait{grid-row:2!important;transform:translateY(-2px)}.reward-panel.boss-reward .reward-modal-card{grid-template-rows:110px auto!important}.reward-panel.boss-reward .reward-grid{transform:translateY(-3px)}.reward-panel.boss-reward .reward-ad-reroll{transform:translateY(59px)!important}
.reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll){border:0!important;border-image:none!important;border-radius:0!important;background:none!important;box-shadow:none!important;filter:none!important;padding:8px 20px!important}.reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll):active{background:rgba(255,232,153,.06)!important}.reward-panel.boss-reward .reward-ad-reroll{border:0!important;border-image:none!important;border-radius:0!important;background:none!important;box-shadow:none!important;filter:none!important;padding:8px 22px!important}.reward-panel.boss-reward .reward-ad-reroll .reward-copy{justify-items:start!important}.reward-panel.boss-reward .reward-ad-reroll .reward-copy strong{color:#fff0ad!important}

/* King legacy redraw: exactly four live reward choices. */
.reward-panel.boss-reward .reward-modal-card{position:relative!important;width:min(96vw,370px)!important;height:min(790px,91vh)!important;aspect-ratio:1024/1536!important;padding:0!important;display:block!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:#05070b url("assets/generated/king_legacy_redraw_1790117000001/king-legacy-frame-redraw.png") center/100% 100% no-repeat!important;box-shadow:0 20px 42px rgba(0,0,0,.78)!important}
.reward-panel.boss-reward .reward-modal-card::before{content:"";position:absolute;z-index:1;left:18.2%;right:18.2%;top:45.4%;bottom:5.4%;background:linear-gradient(180deg,#080d14 0%,#0b1119 48%,#080c13 100%);box-shadow:inset 0 0 30px rgba(0,0,0,.94)}
.reward-panel.boss-reward .reward-modal-card>div:first-child{position:absolute!important;z-index:2!important;inset:9.7% 18.5% auto!important;width:auto!important;height:35.8%!important;min-height:0!important;display:block!important;transform:none!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child>strong{position:absolute!important;top:2.1%!important;left:0!important;right:0!important;transform:none!important;text-align:center!important;color:#fff0a7!important;font-size:18px!important;text-shadow:0 2px 3px #000,0 0 10px rgba(179,114,255,.55)!important}
.reward-panel.boss-reward .reward-boss-portrait{position:absolute!important;top:15%!important;left:50%!important;width:82%!important;height:82%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:contain!important;transform:translateX(-50%)!important;filter:drop-shadow(0 8px 8px rgba(0,0,0,.92)) drop-shadow(0 0 8px rgba(117,63,180,.28))!important}
.reward-panel.boss-reward .reward-grid{position:absolute!important;z-index:3!important;inset:46.4% 18.7% 7.2%!important;height:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:repeat(4,minmax(0,1fr)) 1.45fr!important;gap:1.05%!important;transform:none!important;overflow:visible!important}
.reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll){width:100%!important;height:auto!important;min-height:0!important;padding:4px 13px!important;grid-template-columns:37px minmax(0,1fr)!important;gap:10px!important;border:1px solid rgba(209,170,73,.72)!important;border-radius:3px!important;background:linear-gradient(90deg,rgba(11,17,26,.98),rgba(17,24,35,.96))!important;box-shadow:inset 0 0 10px rgba(99,59,151,.14)!important}
.reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-copy{min-width:0!important;text-align:left!important}.reward-panel.boss-reward .reward-card .reward-copy strong{font-size:12.5px!important}.reward-panel.boss-reward .reward-card .reward-copy small{font-size:9.5px!important}
.reward-panel.boss-reward .reward-ad-reroll{align-self:end!important;width:100%!important;height:72%!important;min-height:0!important;margin:0!important;padding:6px 16px!important;transform:none!important;border:1px solid rgba(218,184,91,.78)!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(28,18,39,.96),rgba(10,10,18,.98))!important;box-shadow:inset 0 0 16px rgba(119,60,174,.22)!important}
/* Reward result: clean art centered in the medallion. */
.unlock-showcase.reward-result .unlock-card .unlock-icon{display:block!important;width:92px!important;height:92px!important;margin:24px auto 12px!important;padding:0!important;object-fit:contain!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;filter:drop-shadow(0 5px 6px rgba(0,0,0,.8))!important}.unlock-showcase.reward-result .unlock-card>strong{display:block!important;width:100%!important;margin:4px auto 8px!important;text-align:center!important;font-size:21px!important}.unlock-showcase.reward-result .unlock-card>p{width:calc(100% - 48px)!important;min-height:54px!important;margin:0 auto 14px!important;padding:15px 12px!important;display:grid!important;place-items:center!important;font-size:14px!important;line-height:1.35!important;text-align:center!important}

/* Item detail refresh: painted stat plates and a cohesive three-button action bar. */
.item-info-card .item-info-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
  overflow:visible!important;
}
.item-info-card .item-info-stats>span{
  min-width:0!important;
  min-height:50px!important;
  padding:10px 9px 8px!important;
  display:grid!important;
  align-content:center!important;
  justify-items:start!important;
  gap:1px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/item_detail_refresh_1790118000000/stat-frame-cropped.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
}
.item-info-card .item-info-stats>span small{
  color:#a9cfe7!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
  text-shadow:0 1px 2px #000!important;
}
.item-info-card .item-info-stats>span strong{
  color:#fff0b0!important;
  font-size:13px!important;
  line-height:1.05!important;
  text-shadow:0 1px 3px #000,0 0 6px rgba(62,191,240,.24)!important;
}
.item-info-card .item-info-actions{
  position:relative!important;
  isolation:isolate!important;
  min-height:58px!important;
  padding:8px 12px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  overflow:visible!important;
  background:transparent url("assets/generated/item_detail_refresh_1790118000000/action-bar-cropped.png") center/100% 100% no-repeat!important;
}
.item-info-card .item-info-actions .mini-button,
#itemPlaceButton,#itemRemoveButton,#itemSellButton{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  margin:0!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#fff4c6!important;
  font-size:12px!important;
  font-weight:900!important;
  text-shadow:0 2px 3px #000,0 0 7px rgba(55,189,255,.42)!important;
  transform:none!important;
}
.item-info-card .item-info-actions .mini-button.danger,#itemSellButton{
  color:#ffe0d8!important;
  text-shadow:0 2px 3px #000,0 0 7px rgba(255,52,49,.5)!important;
}
.item-info-card .item-info-actions .mini-button:active,
#itemPlaceButton:active,#itemRemoveButton:active,#itemSellButton:active{
  filter:brightness(1.35)!important;
  transform:translateY(1px)!important;
}

/* Popup refinement 1790119000000 */
.fusion-card .fusion-result{
  min-height:104px!important;
  padding:10px 16px!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
}
.fusion-card .fusion-result-icon{
  width:56px!important;height:56px!important;margin:0 auto!important;padding:0!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  object-fit:contain!important;filter:drop-shadow(0 4px 5px rgba(0,0,0,.8))!important;
}
.fusion-card .fusion-result>div{min-width:0!important;padding-left:7px!important;text-align:left!important}
.fusion-card .fusion-result h2{margin:1px 0!important;font-size:18px!important}
.fusion-card .fusion-result p,
.fusion-card #fusionResultText{
  margin:2px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;font-size:10.5px!important;line-height:1.3!important;
}

.pull-reveal.sss-reveal .rare-showcase.rarity-SSS{
  position:relative!important;min-height:360px!important;padding:25px 22px 20px!important;gap:10px!important;
  overflow:hidden!important;border:1px solid rgba(255,220,112,.72)!important;border-radius:7px!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(132,61,198,.42),transparent 31%),
    radial-gradient(circle at 50% 40%,rgba(34,209,234,.18),transparent 52%),
    linear-gradient(155deg,#07101a 0%,#130a22 52%,#050910 100%)!important;
  box-shadow:inset 0 0 30px rgba(85,28,137,.45),0 0 18px rgba(220,173,67,.2)!important;
  color:#fff!important;text-shadow:none!important;
}
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS::before{
  content:""!important;position:absolute!important;inset:9px!important;border:1px solid rgba(167,105,238,.45)!important;
  background:linear-gradient(135deg,rgba(255,220,105,.11),transparent 28%,transparent 72%,rgba(57,211,241,.1))!important;
  animation:sssInnerPulse 1.9s ease-in-out infinite!important;pointer-events:none!important;
}
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS::after{
  content:"SSS"!important;position:absolute!important;top:20px!important;left:50%!important;width:auto!important;height:auto!important;
  transform:translateX(-50%)!important;background:none!important;color:#fff2a6!important;font-size:35px!important;font-weight:1000!important;
  letter-spacing:.12em!important;text-shadow:0 0 8px #fff,0 0 18px #a74eff,0 0 28px #31d7ff!important;opacity:.9!important;
}
@keyframes sssInnerPulse{50%{border-color:rgba(255,222,119,.82);box-shadow:inset 0 0 18px rgba(120,49,188,.34)}}
.pull-reveal.sss-reveal .rare-kicker{margin-top:50px!important;color:#d9c7ff!important;font-size:10px!important;font-weight:900!important}
.pull-reveal.sss-reveal .rare-grade{display:none!important}
.pull-reveal.sss-reveal .rare-item-focus{display:grid!important;justify-items:center!important;gap:7px!important}
.pull-reveal.sss-reveal .rare-reveal-icon{
  width:96px!important;height:96px!important;padding:5px!important;border:0!important;background:none!important;
  filter:drop-shadow(0 0 10px rgba(255,223,110,.72)) drop-shadow(0 0 18px rgba(132,64,238,.8))!important;
  animation:sssItemFloat 1.7s ease-in-out infinite!important;
}
@keyframes sssItemFloat{50%{transform:translateY(-5px) scale(1.04)}}
.pull-reveal.sss-reveal .rare-showcase .name{color:#fff0af!important;font-size:21px!important;text-shadow:0 2px 3px #000,0 0 9px rgba(255,205,77,.42)!important}
.pull-reveal.sss-reveal .rare-showcase .stats{color:#bceeff!important;font-size:12px!important;font-weight:900!important;background:rgba(2,8,18,.72)!important;border:1px solid rgba(80,190,226,.35)!important}
.pull-reveal.sss-reveal .rare-showcase .hint{color:#e2e9f5!important;font-size:10.5px!important;line-height:1.4!important;background:none!important}

.run-prep-section .run-prep-option{
  grid-template-columns:42px minmax(0,1fr) 58px!important;padding-left:16px!important;padding-right:15px!important;column-gap:10px!important;
}
.run-prep-section .run-prep-option>img{margin-left:5px!important}
.run-prep-section .run-prep-option>span{padding-left:4px!important;min-width:0!important}
.run-prep-section .run-prep-option>em{margin:0!important;min-width:50px!important;justify-self:start!important;transform:translateX(-9px)!important;text-align:center!important}

.board-passive-choice-card{gap:8px!important;padding-top:58px!important}
.board-passive-choice-card>div:first-child{min-height:62px!important;padding:8px 14px!important;background:none!important;border:0!important;box-shadow:none!important}
.board-passive-choice-card>div:first-child>strong{font-size:18px!important;color:#fff0ad!important;text-align:center!important}
.board-passive-choice-card>div:first-child>small{font-size:10px!important;text-align:center!important}
.board-clear-supply-preview{
  min-height:66px!important;padding:8px 15px!important;grid-template-columns:46px minmax(0,1fr)!important;
  border:1px solid rgba(224,184,76,.72)!important;border-radius:6px!important;
  background:radial-gradient(circle at 14% 50%,rgba(255,210,74,.2),transparent 23%),linear-gradient(90deg,rgba(31,22,7,.96),rgba(9,17,24,.96))!important;
  box-shadow:inset 0 0 15px rgba(255,207,75,.13)!important;
}
.board-clear-supply-preview img{width:40px!important;height:40px!important;padding:0!important;border:0!important;background:none!important}
.board-passive-choice-list{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;overflow:visible!important}
.board-passive-choice-list .board-passive-choice{
  min-height:66px!important;padding:8px 13px!important;grid-template-columns:42px minmax(0,1fr)!important;
  border:1px solid rgba(104,150,207,.58)!important;border-radius:5px!important;border-image:none!important;
  background:linear-gradient(90deg,rgba(7,19,31,.97),rgba(14,11,29,.96))!important;box-shadow:inset 0 0 12px rgba(84,61,156,.18)!important;
}
.board-passive-choice-list .board-passive-choice img{width:38px!important;height:38px!important;padding:0!important;border:0!important;background:none!important}
.board-passive-choice-list .board-passive-choice b,
.board-passive-choice-list .board-passive-choice small{display:none!important}
.board-passive-choice-list .board-passive-choice>span{gap:2px!important}
.board-passive-choice-list .board-passive-choice strong{font-size:13px!important;color:#fff0ad!important}
.board-passive-choice-list .board-passive-choice em{font-size:10px!important;color:#bee8ff!important}

.sale-result-reward>span{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;min-width:0!important}
.sale-result-reward small,.sale-result-reward strong{display:block!important;width:100%!important;white-space:normal!important;line-height:1.3!important}

.combat-stats-card .combat-core-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
.combat-stats-card .combat-core-stat{min-width:0!important;min-height:54px!important;padding:8px 10px!important;grid-template-columns:30px minmax(0,1fr)!important}
.combat-stats-card .combat-core-stat img{width:27px!important;height:27px!important}
.combat-stats-card .combat-core-stat span{min-width:0!important}
.combat-stats-card .combat-core-stat small,.combat-stats-card .combat-core-stat strong{overflow:visible!important;white-space:nowrap!important;text-overflow:clip!important}
.combat-stats-card .combat-core-stat strong{font-size:13px!important}

/* Keep result previews aligned with the actual, detailed expedition result layout. */
.end-panel .end-card{min-height:0!important;height:auto!important}
.end-panel .end-text{align-content:start!important}

/* Item detail and passive-frame correction 1790121000000 */
.item-info-card>p,#itemInfoText{
  width:calc(100% - 20px)!important;margin:0 auto!important;padding:7px 2px!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
}
.item-info-card .item-info-stats{
  width:calc(100% - 24px)!important;margin:0 auto!important;gap:4px!important;
}
.item-info-card .item-info-stats>span{
  min-height:43px!important;padding:8px 8px 7px!important;
  background-size:100% 100%!important;
}
.item-info-card .item-info-actions{
  width:calc(100% - 16px)!important;min-height:48px!important;margin:1px auto 0!important;padding:0!important;gap:6px!important;background:none!important;
}
.item-info-card .item-info-actions .mini-button,#itemPlaceButton,#itemRemoveButton,#itemSellButton{
  min-height:44px!important;height:44px!important;padding:0 8px 1px!important;
  background:transparent url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png") center/100% 100% no-repeat!important;
  color:#fff2bd!important;font-size:11px!important;filter:none!important;
}
.item-info-card .item-info-actions .mini-button:not(.accent),#itemRemoveButton{
  background-image:url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png")!important;
}
.item-info-card .item-info-actions .mini-button.danger,#itemSellButton{
  background-image:url("assets/generated/lobby_prep_refresh_1788102000000/prep-cancel.png")!important;
  color:#ffd3cc!important;filter:hue-rotate(120deg) saturate(1.35)!important;
}

.run-prep-section .run-prep-option>img{
  margin-left:0!important;transform:translateX(13px)!important;
}
.run-prep-section .run-prep-option>span{
  padding-left:10px!important;transform:translateX(5px)!important;
}

.board-passive-choice-card{
  position:relative!important;width:min(360px,calc(100vw - 18px))!important;height:auto!important;aspect-ratio:1024/1792!important;
  padding:0!important;display:block!important;overflow:hidden!important;border:0!important;border-radius:0!important;
  background:#030609 url("assets/generated/board_passive_refresh_1790121000000/board-passive-frame.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;filter:drop-shadow(0 16px 28px rgba(0,0,0,.82))!important;
}
.board-passive-choice-card>div:first-child{
  position:absolute!important;z-index:2!important;left:14%!important;right:14%!important;top:7.3%!important;height:12.8%!important;
  min-height:0!important;padding:0 8px!important;display:grid!important;place-content:center!important;gap:2px!important;background:none!important;
}
.board-passive-choice-card>div:first-child>.label{font-size:9px!important;color:#84dfff!important}
.board-passive-choice-card>div:first-child>strong{font-size:18px!important}
.board-passive-choice-card>div:first-child>small{font-size:9px!important;color:#c9d8e8!important}
.board-passive-choice-card>.board-clear-supply-preview{
  position:absolute!important;z-index:2!important;left:12.5%!important;right:12.5%!important;top:23.1%!important;height:13.5%!important;
  min-height:0!important;margin:0!important;padding:7px 22px!important;grid-template-columns:43px minmax(0,1fr)!important;
  border:0!important;border-radius:0!important;background:rgba(5,10,16,.58)!important;box-shadow:none!important;
}
.board-passive-choice-card>.board-passive-choice-list{
  position:absolute!important;z-index:2!important;left:12.2%!important;right:12.2%!important;top:39%!important;bottom:12%!important;
  display:grid!important;grid-template-columns:1fr!important;grid-template-rows:repeat(3,68px)!important;align-content:start!important;gap:8px!important;margin:0!important;padding:0!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice{
  width:100%!important;height:68px!important;min-height:68px!important;margin:0!important;padding:8px 13px!important;
  border:1px solid rgba(92,151,200,.58)!important;border-radius:5px!important;background:linear-gradient(90deg,rgba(5,16,28,.95),rgba(13,9,25,.94))!important;
}
@media(max-height:700px){.board-passive-choice-card{width:min(320px,calc(100vw - 18px))!important}}

/* Final visual alignment pass 1790123000000. */
.reward-panel.boss-reward .reward-modal-card::before{left:15.6%!important;right:15.6%!important;top:43.8%!important;bottom:1.4%!important;background:linear-gradient(180deg,#070b11 0%,#0a1018 52%,#060a10 100%)!important;box-shadow:inset 0 10px 25px rgba(0,0,0,.96),inset 0 -8px 22px rgba(0,0,0,.9)!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child{left:18.7%!important;right:18.7%!important;top:8.8%!important;width:auto!important;height:35.7%!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child>strong{display:block!important;top:1.5%!important;font-size:17px!important}
.reward-panel.boss-reward .reward-boss-portrait{top:15.5%!important;width:78%!important;height:80%!important;max-width:none!important;max-height:none!important;image-rendering:auto!important;transform:translateX(-50%)!important}
.reward-panel.boss-reward .reward-grid{inset:45.5% 18.7% 8.7%!important;grid-template-rows:repeat(4,minmax(0,1fr)) 1.25fr!important;gap:1.15%!important}
.reward-panel.boss-reward .reward-ad-reroll{height:78%!important;align-self:start!important;transform:translateY(2px)!important}

.unlock-showcase.reward-result .unlock-icon{left:50%!important;top:18.1%!important;width:76px!important;height:76px!important;margin:0!important;object-fit:contain!important;image-rendering:auto!important;transform:translateX(-50%)!important}
.unlock-showcase.reward-result .unlock-card>strong{position:absolute!important;left:14%!important;right:14%!important;top:43.2%!important;width:auto!important;height:8.5%!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;text-align:center!important;font-size:19px!important}
.unlock-showcase.reward-result .unlock-card>p{position:absolute!important;left:12%!important;right:12%!important;top:58.7%!important;width:auto!important;height:18.5%!important;min-height:0!important;margin:0!important;padding:9px 12px!important;display:grid!important;place-items:center!important;font-size:13px!important;line-height:1.35!important;text-align:center!important}

.item-info-card>p,#itemInfoText{display:none!important}
.item-info-card .item-info-actions .mini-button,#itemPlaceButton,#itemRemoveButton,#itemSellButton{background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-neutral.png")!important;color:#e7f1f7!important;text-shadow:0 2px 2px #000!important;filter:none!important}
.item-info-card .item-info-actions .mini-button.accent,#itemPlaceButton{background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-primary.png")!important;color:#fff0b0!important}
.item-info-card .item-info-actions .mini-button.danger,#itemSellButton{background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-neutral.png")!important;color:#ffc8c0!important;filter:none!important}

.run-prep-section .run-prep-option>img{transform:translateX(21px)!important}
.run-prep-section .run-prep-option>span{padding-left:11px!important;transform:translateX(11px)!important}

.board-passive-choice-card>.board-clear-supply-preview{top:26.2%!important;height:12.8%!important}
.board-passive-choice-card>.board-passive-choice-list{top:41.8%!important;bottom:9.5%!important}
.board-passive-choice-list .board-passive-choice b{display:inline-grid!important;width:max-content!important;min-height:14px!important;padding:1px 6px!important;place-items:center!important;border:1px solid currentColor!important;border-radius:999px!important;background:rgba(4,12,21,.78)!important;color:#83dcff!important;font-size:7.5px!important;line-height:1!important}
.board-passive-choice-list .board-passive-choice small{display:none!important}
.board-clear-supply-preview span{display:grid!important;align-content:center!important;gap:1px!important}
.board-clear-supply-preview span>b,.board-clear-supply-preview span>em{font-size:7.5px!important;line-height:1.05!important;color:#9fdcf2!important}
.board-clear-supply-preview span>strong{font-size:12px!important;line-height:1.1!important;color:#fff0a8!important}

.mini-button:not(.icon-close-button),.unlock-confirm-button,.sale-result-close{background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png")!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
.mini-button.accent,.unlock-confirm-button,.sale-result-close{background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-small-primary.png")!important}
.mini-button.danger{background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png")!important;color:#ffc8c0!important;filter:none!important}
.tab-button{background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png")!important}
.tab-button.active{background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png")!important}
#menuCompanionPanel .companion-summon-card.premium button.summon-store-link{display:grid!important;place-items:center!important;text-align:center!important;padding:0 18px!important;background-image:url("assets/generated/companion_summon_controls_v4/summon-store-button.png")!important}

/* Crisp popup controls and spacing pass 1790127000000. */
.reward-panel.boss-reward .reward-modal-card>div:first-child{top:8.1%!important;height:38.2%!important;overflow:visible!important}
.reward-panel.boss-reward .reward-boss-portrait{top:13.2%!important;width:76%!important;height:84%!important;object-position:center bottom!important}
.reward-panel.boss-reward .reward-grid{left:17.7%!important;right:17.7%!important;top:47.1%!important;bottom:7.8%!important;justify-items:stretch!important;align-items:stretch!important}
.reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll){box-sizing:border-box!important;width:100%!important;margin:0 auto!important;padding-left:15px!important;padding-right:15px!important}

.unlock-showcase.reward-result .unlock-card>p{left:17%!important;right:17%!important;top:61%!important;height:13.5%!important;padding:6px 10px!important;font-size:11px!important}
.unlock-showcase.reward-result .unlock-confirm-button{left:27%!important;right:27%!important;bottom:7.6%!important;width:auto!important;height:5.8%!important;min-height:0!important;background:transparent url("assets/generated/popup_buttons_crisp_1790127000000/button-blank-cropped.png") center/contain no-repeat!important;font-size:10px!important}

.item-info-card{padding-left:34px!important;padding-right:34px!important}
.item-info-card .item-info-head .icon-close-button{right:4px!important;transform:translateX(-7px)!important}
.item-info-card .item-info-stats{width:calc(100% - 12px)!important;gap:5px!important}
.item-info-card .item-info-actions{width:100%!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;padding:0!important}
.item-info-card .item-info-actions .mini-button,#itemPlaceButton,#itemRemoveButton,#itemSellButton{
  box-sizing:border-box!important;width:100%!important;height:34px!important;min-height:34px!important;padding:0 7px!important;
  background:transparent url("assets/generated/popup_buttons_crisp_1790127000000/button-blank-cropped.png") center/contain no-repeat!important;
  color:#eef7fb!important;font-size:10px!important;text-shadow:0 1px 2px #000!important;filter:none!important;
}
.item-info-card .item-info-actions .mini-button.accent,#itemPlaceButton{color:#fff0b0!important}
.item-info-card .item-info-actions .mini-button.danger,#itemSellButton{color:#ffc3ba!important}

.fusion-card>.mini-button{
  width:146px!important;height:40px!important;min-height:40px!important;margin-left:auto!important;margin-right:auto!important;
  background:transparent url("assets/generated/popup_buttons_crisp_1790127000000/button-blank-cropped.png") center/contain no-repeat!important;
}
.pull-reveal .reveal-card-actions.single .mini-button,.pull-reveal.high-rarity .reveal-card-actions .mini-button{
  width:166px!important;height:44px!important;min-height:44px!important;margin:0 auto!important;
  background:transparent url("assets/generated/popup_buttons_crisp_1790127000000/button-blank-cropped.png") center/contain no-repeat!important;
}
.sale-result-close{
  width:146px!important;height:40px!important;min-height:40px!important;margin-left:auto!important;margin-right:auto!important;
  background:transparent url("assets/generated/popup_buttons_crisp_1790127000000/button-blank-cropped.png") center/contain no-repeat!important;
}

.board-passive-choice-card>.board-clear-supply-preview{top:28.3%!important;height:10.8%!important;padding:4px 23px 0!important;background:transparent!important}
.board-passive-choice-card>.board-clear-supply-preview img{transform:translateY(7px)!important}
.board-passive-choice-card>.board-clear-supply-preview>span{transform:translateY(7px)!important}
.board-passive-choice-card>.board-clear-supply-preview>span>b{display:block!important}
.board-passive-choice-card>.board-passive-choice-list{top:42.2%!important}
.board-passive-choice-list .board-passive-choice[data-quality="common"]{border-color:#7c91a4!important;box-shadow:inset 0 0 12px rgba(124,145,164,.16)!important}
.board-passive-choice-list .board-passive-choice[data-quality="rare"]{border-color:#54c9ff!important;box-shadow:inset 0 0 14px rgba(84,201,255,.18)!important}
.board-passive-choice-list .board-passive-choice[data-quality="epic"]{border-color:#b675f0!important;box-shadow:inset 0 0 14px rgba(182,117,240,.2)!important}
.board-passive-choice-list .board-passive-choice[data-quality="legendary"]{border-color:#f0bf4e!important;box-shadow:inset 0 0 14px rgba(240,191,78,.2)!important}
.board-passive-choice-list .board-passive-choice[data-quality="mythic"]{border-color:#ff75bd!important;box-shadow:inset 0 0 14px rgba(255,117,189,.2)!important}

.combat-stats-card .combat-stats-detail-list{box-sizing:border-box!important;width:calc(100% - 22px)!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
.combat-stats-card .combat-core-grid{box-sizing:border-box!important;width:calc(100% - 12px)!important;margin-left:auto!important;margin-right:auto!important;gap:6px!important}
.combat-stats-card .combat-core-stat{min-height:49px!important;padding:7px 8px!important}
.combat-stats-card .combat-stat-detail{box-sizing:border-box!important;width:calc(100% - 12px)!important;min-height:43px!important;margin-left:auto!important;margin-right:auto!important;padding:7px 9px!important}
.combat-stats-card .combat-stats-effect-list{box-sizing:border-box!important;width:calc(100% - 22px)!important;margin-left:auto!important;margin-right:auto!important}

#menuCompanionPanel .companion-summon-card.premium button.summon-store-link{
  background-image:url("assets/generated/companion_summon_controls_v4/summon-premium-button.png")!important;
  background-size:contain!important;height:28px!important;min-height:28px!important;margin-top:3px!important;
}

/* Seamless King Legacy frame 1790128000000. */
.reward-panel.boss-reward .reward-modal-card{aspect-ratio:1024/1792!important;background-image:url("assets/generated/king_legacy_seamless_1790128000000/king-legacy-seamless-frame.png")!important;background-size:100% 100%!important}
.reward-panel.boss-reward .reward-modal-card::before{content:none!important;display:none!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child{left:20.5%!important;right:20.5%!important;top:10.1%!important;width:auto!important;height:39.5%!important;min-height:0!important;display:block!important;overflow:visible!important;background:transparent!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child .label{position:absolute!important;z-index:4!important;left:0!important;right:0!important;top:13.5%!important;display:block!important;margin:0!important;padding:0!important;text-align:center!important;color:#fff0ad!important;font-size:14px!important;font-weight:900!important;line-height:1!important;text-shadow:0 2px 2px #000,0 0 7px rgba(255,205,79,.42)!important}
.reward-panel.boss-reward .reward-boss-portrait{position:absolute!important;z-index:2!important;left:50%!important;top:18%!important;width:82%!important;height:80%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:contain!important;object-position:center bottom!important;transform:translateX(-50%)!important;transform-origin:center bottom!important}
.reward-panel.boss-reward .reward-grid{left:18.2%!important;right:18.2%!important;top:57%!important;bottom:6.9%!important;grid-template-rows:repeat(4,minmax(0,1fr)) 1.1fr!important;gap:1.35%!important}
.reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll){background:transparent!important;box-shadow:none!important}

/* Popup suite structural redraw 1790129000000. */
.unlock-showcase.reward-result .unlock-card{aspect-ratio:995/1581!important;background-image:url("assets/generated/popup_suite_refine_1790129000000/reward-result-clean-footer.png")!important;background-size:100% 100%!important}
.unlock-showcase.reward-result .unlock-confirm-button{left:28%!important;right:28%!important;bottom:4.1%!important;height:6%!important;min-height:0!important;border:0!important;background:transparent url("assets/generated/popup_buttons_crisp_1790127000000/button-blank-cropped.png") center/contain no-repeat!important;box-shadow:none!important;font-size:10px!important}

.item-info-card .item-info-stats{width:calc(100% - 16px)!important;gap:6px!important;margin-left:auto!important;margin-right:auto!important}
.item-info-card .item-info-stats>span{box-sizing:border-box!important;min-width:0!important;min-height:52px!important;padding:8px 9px!important;border:1px solid rgba(69,183,226,.64)!important;border-radius:5px!important;background:linear-gradient(155deg,rgba(9,25,38,.98),rgba(4,11,19,.98))!important;box-shadow:inset 0 0 10px rgba(52,171,216,.12)!important}
.item-info-card .item-info-stats>span:nth-child(2){border-color:rgba(83,195,151,.62)!important}
.item-info-card .item-info-stats>span:nth-child(3){border-color:rgba(171,111,223,.68)!important}
.item-info-card .item-info-stats>span small{font-size:9.5px!important}.item-info-card .item-info-stats>span strong{font-size:14px!important}
.item-info-card .item-info-actions{box-sizing:border-box!important;width:calc(100% - 8px)!important;height:60px!important;min-height:60px!important;margin:2px auto 0!important;padding:5px 9px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;background:transparent url("assets/generated/item_detail_refresh_1790118000000/action-bar-cropped.png") center/100% 100% no-repeat!important}
.item-info-card .item-info-actions .mini-button,#itemPlaceButton,#itemRemoveButton,#itemSellButton{box-sizing:border-box!important;width:100%!important;height:50px!important;min-height:50px!important;margin:0!important;padding:0 4px!important;border:0!important;background:transparent!important;box-shadow:none!important;filter:none!important;font-size:11px!important}
.item-info-card .item-info-actions .mini-button.danger,#itemSellButton{background:transparent!important;filter:none!important}

.pull-reveal.sss-reveal .rare-showcase.rarity-SSS{border:0!important}
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS::before{content:none!important;display:none!important}

.run-prep-section-head{justify-items:center!important;text-align:center!important}
.run-prep-section .run-prep-option>span{padding-left:0!important;transform:none!important;text-align:center!important}
.run-prep-section .run-prep-option>span strong,.run-prep-section .run-prep-option>span small{display:block!important;text-align:center!important}
.run-prep-card>p,#runPrepHint{transform:translateY(19px)!important;text-align:center!important}
.run-prep-actions{transform:translateY(14px)!important}
.run-prep-actions .mini-button{height:42px!important;min-height:42px!important;border:0!important;background:transparent url("assets/generated/popup_buttons_crisp_1790127000000/button-blank-cropped.png") center/contain no-repeat!important;box-shadow:none!important;filter:none!important}
.run-prep-actions .mini-button.accent{background:transparent url("assets/generated/popup_buttons_crisp_1790127000000/button-blank-cropped.png") center/contain no-repeat!important;color:#fff0ad!important;filter:none!important}

.board-passive-choice-card>.board-clear-supply-preview{left:16.5%!important;right:16.5%!important;top:25.8%!important;height:13.5%!important;padding:6px 13px!important;grid-template-columns:48px minmax(0,1fr)!important;border-top:1px solid rgba(240,192,75,.55)!important;border-bottom:1px solid rgba(74,194,231,.45)!important;background:radial-gradient(circle at 18% 50%,rgba(255,201,72,.19),transparent 28%)!important;box-shadow:none!important}
.board-passive-choice-card>.board-clear-supply-preview img{width:42px!important;height:42px!important;transform:none!important;filter:drop-shadow(0 0 7px rgba(255,208,72,.45))!important}
.board-passive-choice-card>.board-clear-supply-preview>span{transform:none!important;gap:3px!important;align-content:center!important;text-align:left!important}
.board-passive-choice-card>.board-clear-supply-preview>span>b{display:block!important;color:#fff8d0!important;font-size:11.5px!important;font-weight:1000!important;line-height:1.1!important;text-shadow:0 1px 2px #000,0 0 8px rgba(255,205,78,.58)!important}
.board-passive-choice-card>.board-clear-supply-preview>span>strong{font-size:13px!important}.board-passive-choice-card>.board-passive-choice-list{top:42.5%!important}

.end-panel .end-card{position:relative!important;box-sizing:border-box!important;width:min(342px,calc(100vw - 18px))!important;height:auto!important;min-height:0!important;aspect-ratio:973/1616!important;margin:0!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 15px 25px rgba(0,0,0,.78))!important}
.end-panel.clear .end-card{background:transparent url("assets/generated/popup_suite_refine_1790129000000/expedition-victory-frame.png") center/100% 100% no-repeat!important}
.end-panel:is(.defeat, .victory) .end-card{background:transparent url("assets/generated/popup_suite_refine_1790129000000/expedition-defeat-frame.png") center/100% 100% no-repeat!important}
.end-card>.label{position:absolute!important;z-index:3!important;left:12%!important;right:12%!important;top:3%!important;margin:0!important;text-align:center!important;font-size:8px!important}
.end-card>strong{position:absolute!important;z-index:3!important;left:12%!important;right:12%!important;top:5.1%!important;margin:0!important;text-align:center!important;font-size:22px!important}
.end-panel .end-text{position:absolute!important;z-index:2!important;left:9%!important;right:9%!important;top:10.3%!important;bottom:20.5%!important;display:grid!important;grid-template-rows:2.25fr 1.05fr .48fr 1.25fr .4fr!important;gap:2.1%!important;margin:0!important;padding:0!important;overflow:visible!important}
.end-panel .run-result-hero,.end-panel .result-summary-grid,.end-panel .result-progress,.end-panel .result-best-item,.end-panel .result-line{box-sizing:border-box!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important}
.end-panel .run-result-hero{padding:9px 12px!important;align-self:stretch!important}.end-panel .result-summary-grid{gap:5px!important}.end-panel .result-mini-card{min-height:0!important;padding:6px 4px!important}.end-panel .result-progress{padding:5px 8px!important}.end-panel .result-best-item{padding:7px 11px!important}.end-panel .result-line{display:grid!important;place-items:center!important;padding:2px 8px!important;text-align:center!important;font-size:8px!important}
.end-panel .end-actions{position:absolute!important;z-index:3!important;left:7.5%!important;right:7.5%!important;bottom:5.2%!important;height:8.8%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:center!important;gap:4px!important;margin:0!important;padding:0!important}
.end-panel:is(.defeat, .victory) .end-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.end-panel .end-actions .mini-button{box-sizing:border-box!important;width:100%!important;height:38px!important;min-height:38px!important;margin:0!important;padding:0 4px!important;border:0!important;background:transparent url("assets/generated/popup_buttons_crisp_1790127000000/button-blank-cropped.png") center/contain no-repeat!important;box-shadow:none!important;filter:none!important;font-size:9px!important}
.end-panel:is(.defeat, .victory) .end-actions .mini-button{font-size:7.7px!important}

.combat-stats-card .combat-core-stat small{font-size:9.5px!important}
.combat-stats-card .combat-stat-detail small{font-size:9px!important}.combat-stats-card .combat-stat-detail strong{font-size:13.5px!important}
.combat-stats-card .combat-stats-effect-list{min-height:74px!important;padding:10px 12px!important;border:1px solid rgba(79,164,205,.48)!important;border-radius:5px!important;background:linear-gradient(155deg,rgba(6,20,31,.93),rgba(4,10,18,.92))!important;box-shadow:inset 0 0 12px rgba(67,177,221,.11)!important}
.combat-stats-card .combat-stats-effect-list small,.combat-stats-card .combat-stats-effect-list strong{font-size:10px!important}

#menuCompanionPanel .companion-summon-card.premium button.summon-store-link{background-image:url("assets/generated/companion_summon_controls_v4/summon-store-button.png")!important;background-size:contain!important;filter:none!important}

/* Balanced King Legacy composition 1790130000000. */
.reward-panel.boss-reward .reward-modal-card{aspect-ratio:1000/1573!important;background-image:url("assets/generated/king_legacy_balanced_1790130000000/king-legacy-balanced-frame.png")!important;background-size:100% 100%!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child{position:absolute!important;z-index:2!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;display:block!important;transform:none!important;pointer-events:none!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child>.label{display:none!important}
.reward-panel.boss-reward .reward-modal-card>div:first-child>strong{position:absolute!important;z-index:4!important;left:25%!important;right:25%!important;top:13.85%!important;display:block!important;margin:0!important;padding:0!important;color:#fff0ad!important;font-size:15px!important;font-weight:1000!important;line-height:1.05!important;letter-spacing:.03em!important;text-align:center!important;text-shadow:0 2px 2px #000,0 0 7px rgba(255,203,66,.5)!important;transform:none!important}
.reward-panel.boss-reward .reward-boss-portrait{position:absolute!important;z-index:2!important;left:50%!important;top:20.4%!important;width:58%!important;height:27.2%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:contain!important;object-position:center center!important;transform:translateX(-50%) scale(1.28)!important;transform-origin:center center!important;filter:drop-shadow(0 7px 7px rgba(0,0,0,.75)) drop-shadow(0 0 8px rgba(174,104,255,.3))!important}
.reward-panel.boss-reward .reward-grid{left:18.4%!important;right:18.4%!important;top:51.1%!important;bottom:6.7%!important;grid-template-rows:repeat(4,minmax(0,1fr)) .94fr!important;gap:1.15%!important}
.reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll){min-height:0!important;padding:5px 13px!important;border:1px solid rgba(213,174,77,.62)!important;border-radius:4px!important;background:linear-gradient(90deg,rgba(9,16,25,.78),rgba(13,18,27,.7))!important;box-shadow:inset 0 0 10px rgba(110,70,167,.1)!important}
.reward-panel.boss-reward .reward-card .reward-copy{align-content:center!important;gap:2px!important}.reward-panel.boss-reward .reward-card .reward-copy strong{font-size:11.5px!important}.reward-panel.boss-reward .reward-card .reward-copy small{font-size:8.5px!important;line-height:1.18!important}
.reward-panel.boss-reward .reward-ad-reroll{align-self:stretch!important;height:auto!important;min-height:0!important;padding:4px 13px!important;grid-template-columns:25px minmax(0,1fr) 17px!important;gap:6px!important;border:1px solid rgba(215,177,80,.7)!important;background:linear-gradient(90deg,rgba(28,15,37,.76),rgba(11,13,21,.72))!important;transform:none!important}
.reward-panel.boss-reward .reward-ad-reroll .reward-copy{display:grid!important;align-content:center!important;gap:0!important;overflow:visible!important}.reward-panel.boss-reward .reward-ad-reroll .reward-copy strong{font-size:8.4px!important;line-height:1.1!important;white-space:nowrap!important;text-align:center!important}.reward-panel.boss-reward .reward-ad-reroll .reward-copy b{display:none!important}

/* Result-frame bay alignment verified against captures 1790130000001. */
.end-panel .end-text{position:absolute!important;z-index:2!important;inset:0 9%!important;display:block!important;margin:0!important;padding:0!important;overflow:visible!important}
.end-panel .run-result-hero,.end-panel .result-summary-grid,.end-panel .result-progress,.end-panel .result-best-item,.end-panel .result-line{position:absolute!important;left:0!important;right:0!important;box-sizing:border-box!important;width:100%!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.end-panel .run-result-hero{top:10.8%!important;height:24.2%!important;padding:10px 12px!important}
.end-panel .result-summary-grid{top:37.3%!important;height:16.4%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;padding:4px!important}
.end-panel .result-mini-card{height:100%!important;min-height:0!important;padding:8px 4px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.end-panel .result-progress{top:56.1%!important;height:5.5%!important;padding:3px 7px!important;border:0!important;background:transparent!important}
.end-panel .result-best-item{top:63.1%!important;height:14.1%!important;padding:8px 12px!important;border:0!important;background:transparent!important;box-shadow:none!important}
.end-panel .result-line{top:79.4%!important;height:4.5%!important;display:grid!important;place-items:center!important;padding:0 8px!important;border:0!important;background:transparent!important;text-align:center!important;font-size:8px!important}
.end-panel .end-actions{bottom:4.6%!important;height:8.2%!important}

/* Keep result information readable inside the painted bays without introducing
   another oversized modal over the generated victory/defeat frame. */
.end-panel .run-result-hero{
  border:1px solid rgba(217,183,94,.42)!important;
  border-radius:5px!important;
  background:linear-gradient(100deg,rgba(5,14,24,.72),rgba(7,23,35,.34),rgba(5,14,24,.72))!important;
  box-shadow:inset 0 0 14px rgba(42,151,210,.08)!important;
}
.end-panel:is(.defeat, .victory) .run-result-hero{
  border-color:rgba(194,99,78,.48)!important;
  background:linear-gradient(100deg,rgba(20,9,13,.72),rgba(20,15,24,.38),rgba(20,9,13,.72))!important;
}
.end-panel .result-mini-card{
  border:1px solid rgba(76,157,199,.38)!important;
  border-radius:4px!important;
  background:linear-gradient(155deg,rgba(6,21,33,.72),rgba(4,10,18,.48))!important;
  box-shadow:inset 0 0 8px rgba(52,173,226,.07)!important;
}
.end-panel:is(.defeat, .victory) .result-mini-card{border-color:rgba(168,91,78,.38)!important;background:linear-gradient(155deg,rgba(25,11,16,.7),rgba(8,8,14,.48))!important}
.end-panel .result-progress{
  border-top:1px solid rgba(90,165,197,.28)!important;
  border-bottom:1px solid rgba(90,165,197,.28)!important;
  background:rgba(3,12,20,.42)!important;
}
.end-panel:is(.defeat, .victory) .result-progress{border-color:rgba(165,84,69,.3)!important;background:rgba(19,7,10,.4)!important}
.end-panel .result-best-item{
  border:1px solid rgba(218,180,78,.44)!important;
  border-radius:5px!important;
  background:linear-gradient(100deg,rgba(13,18,28,.72),rgba(12,12,24,.42),rgba(13,18,28,.72))!important;
  box-shadow:inset 0 0 12px rgba(229,193,83,.07)!important;
}
.end-panel:is(.defeat, .victory) .result-best-item{border-color:rgba(183,86,111,.43)!important;background:linear-gradient(100deg,rgba(25,9,17,.69),rgba(13,9,19,.42),rgba(25,9,17,.69))!important}
.end-panel .result-line{
  border-top:1px solid rgba(95,153,177,.2)!important;
  border-bottom:1px solid rgba(95,153,177,.2)!important;
  background:rgba(2,9,15,.34)!important;
}

.combat-stats-card .combat-core-stat small{font-size:10px!important}.combat-stats-card .combat-core-stat strong{font-size:15px!important}
.combat-stats-card .combat-stat-detail small{font-size:9.5px!important}.combat-stats-card .combat-stat-detail strong{font-size:14px!important}
.combat-stats-card .combat-stats-effect-list{min-height:58px!important;padding-top:8px!important;padding-bottom:8px!important}

/* Enemy information: compact identity art plus readable combat facts. */
.enemy-info-row>.enemy-info-main{
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  gap:11px!important;
  width:100%!important;
  margin:0 0 9px!important;
}
.enemy-info-portrait-frame{
  display:grid!important;
  place-items:center!important;
  width:62px!important;
  height:62px!important;
  overflow:hidden!important;
  border:1px solid rgba(221,175,74,.66)!important;
  border-radius:7px!important;
  background:radial-gradient(circle at 50% 42%,rgba(106,65,147,.3),rgba(4,12,21,.92) 70%)!important;
  box-shadow:inset 0 0 12px rgba(194,125,255,.12),0 3px 9px rgba(0,0,0,.38)!important;
}
.enemy-info-portrait{width:58px!important;height:58px!important;object-fit:contain!important;image-rendering:pixelated!important;filter:drop-shadow(0 4px 4px rgba(0,0,0,.55))!important}
.enemy-info-row>.enemy-info-main>.enemy-info-copy{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:5px!important;min-width:0!important;margin:0!important}
.enemy-info-row>.enemy-info-main>.enemy-info-copy strong{font-size:15px!important;line-height:1.16!important;color:#fff2ba!important}
.enemy-info-row>.enemy-info-main>.enemy-info-copy span{font-size:10.5px!important;line-height:1.36!important;color:#ffd568!important;white-space:normal!important}
.enemy-info-row>.enemy-info-main>.enemy-info-copy .enemy-info-stats{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:3px 5px!important}
.enemy-info-stats>b{display:inline-flex!important;align-items:center!important;min-height:18px!important;padding:2px 5px!important;border:1px solid rgba(212,164,69,.28)!important;border-radius:3px!important;background:rgba(6,13,22,.46)!important;color:#ffd568!important;font-size:9px!important;line-height:1!important;font-weight:900!important;white-space:nowrap!important}
.enemy-info-row .enemy-info-weak{color:#7de8ff!important}
.enemy-info-row .enemy-info-resist{color:#f3a1a1!important}

/* Three popup corrections verified against user captures 1790134000000. */
/* 1) Reward result: compact frame, no black-hole medallion and no empty tray. */
.unlock-showcase.reward-result .unlock-card{
  position:relative!important;
  box-sizing:border-box!important;
  width:min(336px,calc(100vw - 22px))!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1086/1448!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/reward_result_compact_1790134000000/reward-result-compact-frame.png") center/100% 100% no-repeat!important;
  filter:drop-shadow(0 15px 28px rgba(0,0,0,.76))!important;
}
.unlock-showcase.reward-result .unlock-card::before{content:none!important}
.unlock-showcase.reward-result .unlock-card>.label{display:none!important}
.unlock-showcase.reward-result .unlock-icon{
  position:absolute!important;
  z-index:2!important;
  left:50%!important;
  top:29.2%!important;
  width:68px!important;
  height:68px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
  transform:translate(-50%,-50%)!important;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.62)) drop-shadow(0 0 12px rgba(167,93,255,.48))!important;
}
.unlock-showcase.reward-result .unlock-card>strong{
  position:absolute!important;
  z-index:3!important;
  left:23%!important;
  right:23%!important;
  top:55.2%!important;
  width:auto!important;
  height:7.3%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  color:#fff0ad!important;
  font-size:18px!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 2px 3px #000,0 0 8px rgba(255,204,67,.36)!important;
}
.unlock-showcase.reward-result .unlock-card>p{
  position:absolute!important;
  z-index:3!important;
  left:10.5%!important;
  right:10.5%!important;
  top:68.7%!important;
  width:auto!important;
  height:8.8%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0 10px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#dcebf5!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  text-align:center!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
.unlock-showcase.reward-result .unlock-confirm-button{
  position:absolute!important;
  z-index:3!important;
  left:31%!important;
  right:31%!important;
  bottom:8.7%!important;
  width:auto!important;
  height:6.7%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff2b5!important;
  font-size:11px!important;
  font-weight:1000!important;
  text-shadow:0 2px 2px #000!important;
  box-shadow:none!important;
  filter:none!important;
}

.pull-reveal.sss-reveal .pull-reveal-card>.panel-head.compact{
  justify-content:center!important;
  justify-items:center!important;
}
.pull-reveal.sss-reveal .pull-reveal-card>.panel-head.compact>div:first-child{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  display:grid!important;
  place-items:center!important;
}
.pull-reveal.sss-reveal .pull-reveal-card>.panel-head.compact h2{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:50%!important;
  width:100%!important;
  transform:translateY(-50%)!important;
}
.pull-reveal.sss-reveal .pull-reveal-card>.panel-head.compact .icon-close-button{
  right:-20%!important;
  top:18%!important;
  width:29px!important;
  min-width:29px!important;
  height:29px!important;
  min-height:29px!important;
  overflow:hidden!important;
  border:1px solid rgba(124,206,237,.52)!important;
  border-radius:50%!important;
  background:rgba(5,19,30,.88)!important;
  color:transparent!important;
}
.pull-reveal.sss-reveal .pull-reveal-card>.panel-head.compact .icon-close-button::before,
.pull-reveal.sss-reveal .pull-reveal-card>.panel-head.compact .icon-close-button::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:11px!important;
  height:1.5px!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  border:0!important;
  border-radius:2px!important;
  background:#d9f5ff!important;
  box-shadow:none!important;
  transform-origin:center!important;
}
.pull-reveal.sss-reveal .pull-reveal-card>.panel-head.compact .icon-close-button::before{transform:translate(-50%,-50%) rotate(45deg)!important}
.pull-reveal.sss-reveal .pull-reveal-card>.panel-head.compact .icon-close-button::after{transform:translate(-50%,-50%) rotate(-45deg)!important}

/* 2) Item detail: three equal scalable buttons, no stretched action bitmap. */
.item-info-card .item-info-actions{
  box-sizing:border-box!important;
  width:calc(100% - 16px)!important;
  height:46px!important;
  min-height:46px!important;
  margin:6px auto 0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:7px!important;
  overflow:visible!important;
  background:none!important;
}
.item-info-card .item-info-actions .mini-button,#itemPlaceButton,#itemRemoveButton,#itemSellButton{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:0 5px!important;
  display:grid!important;
  place-items:center!important;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)!important;
  border:1px solid rgba(74,166,207,.72)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(13,50,72,.96),rgba(4,17,29,.98))!important;
  color:#e8f5fb!important;
  font-size:11px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-shadow:0 2px 2px #000!important;
  box-shadow:inset 0 0 0 2px rgba(3,10,18,.72),inset 0 0 14px rgba(44,188,241,.13),0 3px 7px rgba(0,0,0,.4)!important;
  filter:none!important;
  transform:none!important;
}
.item-info-card .item-info-actions .mini-button.accent,#itemPlaceButton{
  border-color:rgba(70,211,246,.92)!important;
  background:linear-gradient(180deg,rgba(14,83,116,.98),rgba(4,31,50,.98))!important;
  color:#fff1ad!important;
  box-shadow:inset 0 0 0 2px rgba(4,18,29,.78),inset 0 0 16px rgba(59,223,255,.23),0 3px 7px rgba(0,0,0,.42)!important;
}
.item-info-card .item-info-actions .mini-button.danger,#itemSellButton{
  border-color:rgba(211,73,67,.9)!important;
  background:linear-gradient(180deg,rgba(106,24,27,.98),rgba(43,8,13,.99))!important;
  color:#ffe1d8!important;
  box-shadow:inset 0 0 0 2px rgba(30,4,8,.78),inset 0 0 16px rgba(246,66,57,.2),0 3px 7px rgba(0,0,0,.42)!important;
}
.item-info-card .item-info-actions .mini-button:active,#itemPlaceButton:active,#itemRemoveButton:active,#itemSellButton:active{transform:translateY(1px)!important;filter:brightness(1.16)!important}

/* 3) SSS reveal: circular aura and sparks only; remove the giant purple slab. */
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS{
  position:relative!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-height:378px!important;
  padding:14px 20px 16px!important;
  display:grid!important;
  grid-template-rows:24px minmax(205px,1fr) 35px 35px 46px!important;
  align-items:center!important;
  gap:5px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  animation:none!important;
}
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:61px auto auto 50%!important;
  width:224px!important;
  height:224px!important;
  display:block!important;
  border:1px solid rgba(255,224,117,.32)!important;
  border-radius:50%!important;
  background:repeating-conic-gradient(from 0deg,rgba(255,231,137,.16) 0 3deg,transparent 3deg 16deg),radial-gradient(circle,rgba(147,72,216,.34) 0%,rgba(51,205,238,.13) 42%,transparent 69%)!important;
  transform:translateX(-50%)!important;
  animation:sssCompactRays 8s linear infinite!important;
  pointer-events:none!important;
}
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:8px!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  background:radial-gradient(circle at 16% 22%,#fff 0 1px,transparent 2px),radial-gradient(circle at 83% 29%,#73efff 0 1.5px,transparent 2.5px),radial-gradient(circle at 72% 68%,#ffe47d 0 1px,transparent 2px),radial-gradient(circle at 24% 76%,#df9dff 0 1.5px,transparent 2.5px)!important;
  background-size:47px 53px,59px 43px,41px 61px,53px 47px!important;
  color:transparent!important;
  font-size:0!important;
  opacity:.72!important;
  transform:none!important;
  animation:sssCompactStars 1.2s steps(2,end) infinite alternate!important;
  pointer-events:none!important;
}
@keyframes sssCompactRays{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes sssCompactStars{from{opacity:.38}to{opacity:.88}}
.pull-reveal.sss-reveal .rare-kicker{margin:0!important;color:#aeefff!important;font-size:9px!important;letter-spacing:.05em!important}
.pull-reveal.sss-reveal .rare-item-focus{min-height:0!important;display:grid!important;place-items:center!important;align-content:center!important;gap:5px!important}
.pull-reveal.sss-reveal .rare-grade{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:#fff0a8!important;
  font-size:33px!important;
  line-height:1!important;
  letter-spacing:.1em!important;
  text-shadow:0 0 5px #fff,0 0 14px rgba(168,74,255,.92),0 0 24px rgba(52,216,255,.66)!important;
  filter:none!important;
}
.pull-reveal.sss-reveal .rare-reveal-icon{
  width:76px!important;
  height:76px!important;
  margin:1px auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
  filter:drop-shadow(0 5px 3px rgba(0,0,0,.72)) drop-shadow(0 0 9px rgba(255,223,110,.68)) drop-shadow(0 0 15px rgba(132,64,238,.68))!important;
  animation:sssItemFloat 1.7s ease-in-out infinite!important;
}
.pull-reveal.sss-reveal .rare-showcase .name{font-size:19px!important;line-height:1.1!important}
.pull-reveal.sss-reveal .rare-showcase .stats,.pull-reveal.sss-reveal .rare-showcase .hint{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:32px!important;
  margin:0!important;
  padding:5px 8px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(96,181,220,.27)!important;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)!important;
  border-radius:0!important;
  background:rgba(2,10,19,.6)!important;
}
.pull-reveal.sss-reveal .reveal-card-actions.single{align-self:center!important}
.pull-reveal.sss-reveal .reveal-card-actions.single .mini-button{
  width:156px!important;
  height:42px!important;
  min-height:42px!important;
  margin:0 auto!important;
  border:1px solid rgba(72,205,238,.72)!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,rgba(12,70,99,.96),rgba(4,24,39,.98))!important;
  color:#fff0ad!important;
  box-shadow:inset 0 0 0 2px rgba(3,13,23,.72),inset 0 0 14px rgba(45,209,247,.16),0 3px 8px rgba(0,0,0,.44)!important;
  filter:none!important;
}

/* Popup art correction 1790136000000.
   The final three screens use painted game-frame bays instead of generic CSS cards. */

/* Reward result: transparent outer silhouette, smaller centered item, compact copy. */
.unlock-showcase.reward-result .unlock-card{
  width:min(332px,calc(100vw - 24px))!important;
  aspect-ratio:1086/1448!important;
  overflow:visible!important;
  background:transparent url("assets/generated/popup_rework_1790136000000/reward-result-frame-alpha.png") center/100% 100% no-repeat!important;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.72))!important;
}
.unlock-showcase.reward-result .unlock-card::before,
.unlock-showcase.reward-result .unlock-card::after{content:none!important;display:none!important}
.unlock-showcase.reward-result .unlock-icon{
  left:50%!important;
  top:32.8%!important;
  width:48px!important;
  height:48px!important;
  image-rendering:auto!important;
  transform:translate(-50%,-50%)!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(129,83,222,.34))!important;
}
.unlock-showcase.reward-result .unlock-card>strong{
  left:22%!important;
  right:22%!important;
  top:58.6%!important;
  height:7.2%!important;
  font-size:17px!important;
}
.unlock-showcase.reward-result .unlock-card>p{
  left:11.5%!important;
  right:11.5%!important;
  top:70.2%!important;
  height:10.4%!important;
  padding:0 8px!important;
  border:0!important;
  background:transparent!important;
  font-size:11px!important;
}
.unlock-showcase.reward-result .unlock-confirm-button{
  left:29%!important;
  right:29%!important;
  bottom:7.1%!important;
  height:7.2%!important;
  background:transparent!important;
  font-size:11px!important;
}
.unlock-showcase.reward-result .unlock-confirm-button::before,
.unlock-showcase.reward-result .unlock-confirm-button::after{content:none!important;display:none!important}

/* 2026-08-19 boss relic result: only grade/category and item name remain. */
.unlock-showcase.boss-relic .unlock-card{
  box-sizing:border-box!important;
  width:min(350px,calc(100vw - 18px))!important;
  min-height:300px!important;
  grid-template-rows:94px 18px 42px 38px!important;
  align-content:center!important;
  gap:4px!important;
  padding:34px 34px 28px!important;
}
.unlock-showcase.boss-relic .unlock-icon{
  width:88px!important;
  height:88px!important;
  margin:0!important;
  image-rendering:auto!important;
}
.unlock-showcase.boss-relic .unlock-card>.label{
  margin:0!important;
  color:#f3d36d!important;
  font-size:11px!important;
  line-height:1!important;
  letter-spacing:.02em!important;
}
.unlock-showcase.boss-relic .unlock-card>strong{
  max-width:280px!important;
  font-size:20px!important;
  line-height:1.15!important;
  word-break:keep-all!important;
}
.unlock-showcase.boss-relic .unlock-card>p{
  display:none!important;
}
.unlock-showcase.boss-relic .unlock-confirm-button{
  min-width:132px!important;
  min-height:38px!important;
  margin:0!important;
  align-self:center!important;
}
.unlock-showcase.boss-relic .unlock-confirm-button:focus,
.unlock-showcase.boss-relic .unlock-confirm-button:focus-visible{
  outline:0!important;
  filter:brightness(1.18) saturate(1.12) drop-shadow(0 0 8px rgba(94,205,255,.38))!important;
}

/* Boss-relic acquisition polish 1792936800000.
   The legacy panel PNG has an opaque black rim baked into its canvas. Slightly
   overscanning that artwork puts the painted metal edge on the card bounds, so
   the square black surround no longer peeks out. The confirmation control uses
   a dedicated text-free forged-metal raster instead of the generic neon bar. */
.unlock-showcase.boss-relic .unlock-card{
  overflow:visible!important;
  grid-template-rows:94px 18px 42px 42px!important;
  background-color:transparent!important;
  background-image:url("assets/generated/reward_attendance_v2_1790106000000/stage-reward-panel.png")!important;
  background-position:center!important;
  background-size:104% 102.5%!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 13px 20px rgba(0,0,0,.56))!important;
}
.unlock-showcase.boss-relic .unlock-confirm-button{
  box-sizing:border-box!important;
  width:150px!important;
  min-width:150px!important;
  height:42px!important;
  min-height:42px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0 0 1px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:url("assets/generated/unlock_showcase_relic_v1_1792936800000/relic-confirm-button-alpha.png")!important;
  background-position:center!important;
  background-size:100% 116%!important;
  background-repeat:no-repeat!important;
  color:#fff2c4!important;
  font-size:13px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-shadow:0 2px 2px rgba(0,0,0,.96),0 0 6px rgba(87,206,255,.34)!important;
  box-shadow:none!important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.48))!important;
}
.unlock-showcase.boss-relic .unlock-confirm-button:hover{
  filter:brightness(1.08) drop-shadow(0 3px 5px rgba(0,0,0,.5))!important;
}
.unlock-showcase.boss-relic .unlock-confirm-button:active{
  transform:translateY(1px)!important;
  filter:brightness(.96) drop-shadow(0 2px 3px rgba(0,0,0,.48))!important;
}
.unlock-showcase.boss-relic .unlock-confirm-button:focus,
.unlock-showcase.boss-relic .unlock-confirm-button:focus-visible{
  outline:0!important;
  box-shadow:none!important;
  filter:brightness(1.08) drop-shadow(0 0 6px rgba(67,193,235,.34))!important;
}

/* Item detail actions: one coherent three-slot carved action bar. */
.item-info-card .item-info-actions{
  box-sizing:border-box!important;
  width:calc(100% - 10px)!important;
  height:58px!important;
  min-height:58px!important;
  margin:4px auto 0!important;
  padding:2px 8px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  overflow:visible!important;
  background:transparent url("assets/generated/popup_rework_1790136000000/item-action-bar.png") center/100% 100% no-repeat!important;
}
.item-info-card .item-info-actions .mini-button,
#itemPlaceButton,#itemRemoveButton,#itemSellButton{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:54px!important;
  min-height:54px!important;
  margin:0!important;
  padding:0 5px!important;
  display:grid!important;
  place-items:center!important;
  clip-path:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff0b0!important;
  font-size:11px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-shadow:0 2px 2px #000,0 0 4px rgba(255,226,145,.18)!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
.item-info-card .item-info-actions .mini-button.danger,#itemSellButton{background:transparent!important;color:#ffd8ce!important}
.item-info-card .item-info-actions .mini-button::before,
.item-info-card .item-info-actions .mini-button::after,
#itemPlaceButton::before,#itemPlaceButton::after,
#itemRemoveButton::before,#itemRemoveButton::after,
#itemSellButton::before,#itemSellButton::after{content:none!important;display:none!important}
.item-info-card .item-info-actions .mini-button:active,
#itemPlaceButton:active,#itemRemoveButton:active,#itemSellButton:active{transform:translateY(1px)!important;filter:brightness(1.12)!important}

/* SSS reveal: a dedicated abyssal relic shrine; no wheel, confetti, or purple slab. */
.pull-reveal.sss-reveal .pull-reveal-card,
.pull-reveal.high-rarity.sss-reveal .pull-reveal-card{
  position:relative!important;
  box-sizing:border-box!important;
  width:min(350px,calc(100vw - 18px))!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 14px)!important;
  aspect-ratio:1046/1504!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#020711 url("assets/generated/popup_rework_single_info_1790601600061/sss-reveal-frame-single-info.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 15px 26px rgba(0,0,0,.76))!important;
  animation:sssRevealCard 520ms cubic-bezier(.14,.86,.2,1.08) both!important;
}
.pull-reveal.sss-reveal .pull-reveal-card>.panel-head.compact{
  position:absolute!important;
  z-index:5!important;
  left:20%!important;
  right:20%!important;
  top:4.5%!important;
  width:auto!important;
  height:10.5%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:1px!important;
  border:0!important;
  background:transparent!important;
}
.pull-reveal.sss-reveal .panel-head.compact>div{width:100%!important;display:grid!important;place-items:center!important;gap:0!important;text-align:center!important}
.pull-reveal.sss-reveal .panel-head.compact .label{display:none!important}
.pull-reveal.sss-reveal .panel-head.compact h2{margin:0!important;color:#fff1b0!important;font-size:16px!important;line-height:1.05!important;text-align:center!important;text-shadow:0 2px 2px #000!important}
.pull-reveal.sss-reveal .panel-head.compact .icon-close-button{
  position:absolute!important;
  left:auto!important;
  right:-29%!important;
  top:18%!important;
  width:27px!important;
  min-width:27px!important;
  height:27px!important;
  min-height:27px!important;
}
.pull-reveal.sss-reveal .pull-reveal-list{
  position:absolute!important;
  z-index:3!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  display:block!important;
  overflow:visible!important;
}
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS{
  position:absolute!important;
  inset:0!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  animation:none!important;
}
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS::before,
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS::after{content:none!important;display:none!important;animation:none!important}
.pull-reveal.sss-reveal .rare-kicker{
  position:absolute!important;
  left:20%!important;
  right:20%!important;
  top:18.2%!important;
  margin:0!important;
  color:#9beaff!important;
  font-size:8.5px!important;
  line-height:1!important;
  text-align:center!important;
  letter-spacing:.05em!important;
}
.pull-reveal.sss-reveal .rare-item-focus{
  position:absolute!important;
  left:16%!important;
  right:16%!important;
  top:21.7%!important;
  height:34.8%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:31px 78px 28px!important;
  place-items:center!important;
  align-content:center!important;
  gap:3px!important;
}
.pull-reveal.sss-reveal .rare-grade{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#fff0a5!important;
  font-size:29px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  text-shadow:0 1px 2px #000,0 0 7px rgba(255,219,106,.72),0 0 14px rgba(88,181,255,.42)!important;
}
.pull-reveal.sss-reveal .rare-reveal-icon{
  width:66px!important;
  height:66px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  object-fit:contain!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.76)) drop-shadow(0 0 8px rgba(181,111,255,.42))!important;
  animation:sssItemFloat 1.9s ease-in-out infinite!important;
}
.pull-reveal.sss-reveal .rare-showcase .name{
  max-width:100%!important;
  color:#fff0ae!important;
  font-size:18px!important;
  line-height:1.05!important;
  text-align:center!important;
  text-shadow:0 2px 3px #000!important;
}
.pull-reveal.sss-reveal .rare-showcase .stats,
.pull-reveal.sss-reveal .rare-showcase .hint{
  position:absolute!important;
  left:16.5%!important;
  right:16.5%!important;
  box-sizing:border-box!important;
  width:auto!important;
  height:8.2%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 10px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  clip-path:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  text-align:center!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
.pull-reveal.sss-reveal .rare-showcase .stats{top:60.2%!important;color:#e4f6ff!important;font-size:10.5px!important}
.pull-reveal.sss-reveal .rare-showcase .hint{top:69.5%!important;color:#c8d9e7!important;font-size:9.5px!important}
.pull-reveal.sss-reveal .reveal-card-actions.single{
  position:absolute!important;
  left:22%!important;
  right:22%!important;
  top:81.4%!important;
  width:auto!important;
  height:10.6%!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
}
.pull-reveal.sss-reveal .reveal-card-actions.single .mini-button{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff0af!important;
  font-size:11px!important;
  text-shadow:0 2px 2px #000!important;
  box-shadow:none!important;
  filter:none!important;
}
.pull-reveal.sss-reveal .reveal-card-actions.single .mini-button::before,
.pull-reveal.sss-reveal .reveal-card-actions.single .mini-button::after{content:none!important;display:none!important}
.pull-reveal.sss-reveal .pull-reveal-card>.reveal-actions{display:none!important}

/* Neutralize higher-specificity legacy fills so the painted three-slot bar remains intact. */
.item-info-card .item-info-actions .mini-button.accent,
.item-info-card .item-info-actions .mini-button:not(.accent),
.item-info-card .item-info-actions .mini-button.danger,
#itemPlaceButton,#itemRemoveButton,#itemSellButton{
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Popup structure rebuild 1790137000000.
   These three dialogs now place live content into dedicated painted bays. */

/* Item detail: one engraved stat rail and one matching action rail. */
.item-info-card .item-info-stats{
  box-sizing:border-box!important;
  width:calc(100% - 8px)!important;
  height:64px!important;
  min-height:64px!important;
  margin:1px auto 0!important;
  padding:7px 10px 6px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  overflow:visible!important;
  background:transparent url("assets/generated/popup_rework_1790137000000/item-stat-strip.png") center/100% 100% no-repeat!important;
}
.item-info-card .item-info-stats>span,
.item-info-card .item-info-stats>span:nth-child(2),
.item-info-card .item-info-stats>span:nth-child(3){
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:51px!important;
  margin:0!important;
  padding:7px 5px 3px!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  gap:1px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.item-info-card .item-info-stats>span small{
  color:#a8c7d9!important;
  font-size:8.5px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
}
.item-info-card .item-info-stats>span strong{
  color:#fff0b0!important;
  font-size:14px!important;
  line-height:1.05!important;
  text-align:center!important;
  text-shadow:0 2px 2px #000,0 0 5px rgba(255,218,118,.18)!important;
}
.item-info-card .item-info-actions{
  box-sizing:border-box!important;
  width:calc(100% - 8px)!important;
  height:62px!important;
  min-height:62px!important;
  margin:2px auto 0!important;
  padding:4px 10px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:0!important;
  overflow:visible!important;
  background:transparent url("assets/generated/popup_rework_1790137000000/item-action-bar.png") center/100% 100% no-repeat!important;
}
.item-info-card .item-info-actions .mini-button,
#itemPlaceButton,#itemRemoveButton,#itemSellButton{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:54px!important;
  min-height:54px!important;
  margin:0!important;
  padding:1px 5px 0!important;
  display:grid!important;
  place-items:center!important;
  clip-path:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#f7e9bd!important;
  font-size:11px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-shadow:0 2px 2px #000!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
.item-info-card .item-info-actions .mini-button.accent,#itemPlaceButton{color:#fff0aa!important}
.item-info-card .item-info-actions .mini-button.danger,#itemSellButton{color:#ffd8ce!important}

/* Expedition prep: compact two-bay frame with no nested card art. */
.run-prep-card{
  position:relative!important;
  box-sizing:border-box!important;
  width:min(356px,calc(100vw - 14px))!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 12px)!important;
  aspect-ratio:1065/1477!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#020711 url("assets/generated/popup_rework_1790137000000/run-prep-frame.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 15px 25px rgba(0,0,0,.76))!important;
}
.run-prep-card .run-prep-head{
  position:absolute!important;
  z-index:2!important;
  left:15%!important;
  right:15%!important;
  top:5.2%!important;
  height:12.4%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  gap:3px!important;
  text-align:center!important;
}
.run-prep-card .run-prep-kicker{color:#8ee5ff!important;font-size:8.5px!important;line-height:1!important}
.run-prep-card .run-prep-head>strong{color:#fff0b0!important;font-size:20px!important;line-height:1.05!important;text-shadow:0 2px 3px #000!important}
.run-prep-card .run-prep-sections{
  position:absolute!important;
  z-index:2!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
}
.run-prep-card .run-prep-section{
  position:absolute!important;
  left:7.2%!important;
  right:7.2%!important;
  height:27.1%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.run-prep-card .run-prep-section.inventory-section{top:20.7%!important}
.run-prep-card .run-prep-section.shard-section{top:49.4%!important}
.run-prep-card .run-prep-section-head{
  position:absolute!important;
  left:3%!important;
  right:3%!important;
  top:0!important;
  height:18.8%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 9%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  justify-items:center!important;
  gap:5px!important;
  text-align:center!important;
  transform:none!important;
}
.run-prep-card .run-prep-section-head img{display:none!important}
.run-prep-card .run-prep-section-head strong{justify-self:center!important;color:#fff0b0!important;font-size:10px!important;line-height:1!important;text-align:center!important;text-shadow:0 2px 2px #000!important}
.run-prep-card .run-prep-section-head span{justify-self:end!important;color:#9edff6!important;font-size:7.5px!important;line-height:1!important;text-align:right!important}
.run-prep-card .run-prep-option{
  position:absolute!important;
  left:2%!important;
  right:2%!important;
  top:19%!important;
  bottom:0!important;
  box-sizing:border-box!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:4px 10.5% 3px 10%!important;
  display:grid!important;
  grid-template-columns:43px minmax(0,1fr) 43px!important;
  align-items:center!important;
  column-gap:8px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
.run-prep-card .run-prep-option:has(input:checked){filter:brightness(1.12) saturate(1.08)!important}
.run-prep-card .run-prep-option>img{
  justify-self:center!important;
  width:40px!important;
  height:40px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  transform:none!important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.72)) drop-shadow(0 0 6px rgba(83,207,255,.26))!important;
}
.run-prep-card .run-prep-option>span{
  min-width:0!important;
  padding:0!important;
  display:grid!important;
  align-content:center!important;
  gap:3px!important;
  text-align:left!important;
  transform:none!important;
}
.run-prep-card .run-prep-option>span strong{color:#fff0b0!important;font-size:12px!important;line-height:1.05!important;text-align:left!important}
.run-prep-card .run-prep-option>span small{color:#bcd2e2!important;font-size:8px!important;line-height:1.1!important;text-align:left!important}
.run-prep-card .run-prep-option>em{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  justify-self:center!important;
  gap:2px!important;
  color:#e7d7ff!important;
  line-height:1!important;
  text-align:center!important;
  transform:none!important;
}
.run-prep-card .run-prep-option>em b{font-size:17px!important}.run-prep-card .run-prep-option>em small{color:#9fb2c8!important;font-size:7px!important}
.run-prep-card>p,#runPrepHint{
  position:absolute!important;
  z-index:2!important;
  left:11%!important;
  right:11%!important;
  top:78.2%!important;
  height:5.2%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 7px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  background:none!important;
  color:#d7e9f5!important;
  font-size:8.5px!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 2px 2px #000!important;
  filter:none!important;
  transform:none!important;
}
.run-prep-card .run-prep-actions{
  position:absolute!important;
  z-index:2!important;
  left:7.2%!important;
  right:7.2%!important;
  top:85.2%!important;
  height:9.3%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:.76fr 1.24fr!important;
  align-items:stretch!important;
  gap:2.4%!important;
}
.run-prep-card .run-prep-actions .mini-button,
.run-prep-card .run-prep-actions .mini-button.accent{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#e5edf4!important;
  font-size:11px!important;
  text-shadow:0 2px 2px #000!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Board-clear passive: integrated reward bay plus exactly three painted choices. */
.board-passive-choice-card{
  position:relative!important;
  box-sizing:border-box!important;
  width:min(352px,calc(100vw - 14px))!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 12px)!important;
  aspect-ratio:1036/1519!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#020711 url("assets/generated/popup_rework_1790137000000/board-passive-frame.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 15px 25px rgba(0,0,0,.78))!important;
}
.board-passive-choice-card>div:first-child{
  position:absolute!important;
  z-index:2!important;
  left:15%!important;
  right:15%!important;
  top:9.6%!important;
  height:19.2%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 8px!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  gap:4px!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  text-align:center!important;
}
.board-passive-choice-card>div:first-child>.label{color:#8ee5ff!important;font-size:8.5px!important;line-height:1!important}
.board-passive-choice-card>div:first-child>strong{color:#fff0b0!important;font-size:18px!important;line-height:1.08!important;text-align:center!important;text-shadow:0 2px 3px #000!important}
.board-passive-choice-card>div:first-child>small{color:#c4d5e2!important;font-size:9px!important;line-height:1.15!important;text-align:center!important}
.board-passive-choice-card>.board-clear-supply-preview{
  position:absolute!important;
  z-index:2!important;
  left:10.6%!important;
  right:10.6%!important;
  top:32.2%!important;
  height:11.8%!important;
  min-height:0!important;
  margin:0!important;
  padding:1px 9% 0 8.5%!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  align-items:center!important;
  gap:11px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  transform:none!important;
}
.board-passive-choice-card>.board-clear-supply-preview img{
  justify-self:center!important;
  width:46px!important;
  height:46px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  object-fit:contain!important;
  transform:none!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.72)) drop-shadow(0 0 7px rgba(255,211,76,.38))!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>b{display:block!important;color:#fff6c9!important;font-size:10px!important;line-height:1!important;text-align:left!important}
.board-passive-choice-card>.board-clear-supply-preview>span>strong{color:#fff0a8!important;font-size:13px!important;line-height:1.05!important;text-align:left!important}
.board-passive-choice-card>.board-passive-choice-list{
  position:absolute!important;
  z-index:2!important;
  left:9.2%!important;
  right:9.2%!important;
  top:45.1%!important;
  bottom:7.5%!important;
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  align-content:stretch!important;
  gap:1.35%!important;
  overflow:visible!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:2px 8.5% 1px 6%!important;
  display:grid!important;
  grid-template-columns:57px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  overflow:visible!important;
  clip-path:none!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice img{
  justify-self:center!important;
  width:42px!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  object-fit:contain!important;
  transform:none!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.7))!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice b{
  display:block!important;
  width:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#84dfff!important;
  font-size:7.5px!important;
  line-height:1!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice strong{color:#fff0b0!important;font-size:13px!important;line-height:1.05!important;text-align:left!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice em{color:#c4d9e7!important;font-size:9px!important;line-height:1.05!important;text-align:left!important}
.board-passive-choice-card .board-passive-choice[data-quality="rare"] b{color:#72d8ff!important}
.board-passive-choice-card .board-passive-choice[data-quality="epic"] b{color:#d39aff!important}
.board-passive-choice-card .board-passive-choice[data-quality="legendary"] b{color:#ffd66c!important}
.board-passive-choice-card .board-passive-choice[data-quality="mythic"] b{color:#ff8fc9!important}
.board-passive-choice-card .board-passive-choice:active{filter:brightness(1.14)!important;transform:translateY(1px)!important}

@media(max-height:700px){
  .run-prep-card{width:min(315px,calc(100vw - 12px))!important}
}

/* Capture-driven popup rebuild 1790138000000. */

/* Expedition prep: reduce empty option wells and increase live-content density. */
.run-prep-card{
  width:min(356px,calc(100vw - 14px))!important;
  aspect-ratio:1101/1429!important;
  background-image:url("assets/generated/popup_rework_1790138000000/run-prep-frame-compact.png")!important;
}
.run-prep-card .run-prep-head{
  left:16%!important;
  right:16%!important;
  top:7.4%!important;
  height:14.2%!important;
  gap:4px!important;
}
.run-prep-card .run-prep-kicker{font-size:9px!important}
.run-prep-card .run-prep-head>strong{font-size:21px!important}
.run-prep-card .run-prep-section{
  left:8.6%!important;
  right:8.6%!important;
  height:23.8%!important;
}
.run-prep-card .run-prep-section.inventory-section{top:24.1%!important}
.run-prep-card .run-prep-section.shard-section{top:49.3%!important}
.run-prep-card .run-prep-section-head{
  left:2%!important;
  right:2%!important;
  height:27.5%!important;
  padding:0 8%!important;
}
.run-prep-card .run-prep-section-head strong{font-size:10.5px!important}
.run-prep-card .run-prep-section-head span{font-size:8px!important}
.run-prep-card .run-prep-option{
  left:2.2%!important;
  right:2.2%!important;
  top:27.5%!important;
  padding:3px 9% 2px 9%!important;
  grid-template-columns:50px minmax(0,1fr) 48px!important;
  column-gap:10px!important;
}
.run-prep-card .run-prep-option>img{
  width:46px!important;
  height:46px!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.76)) drop-shadow(0 0 7px rgba(83,207,255,.3))!important;
}
.run-prep-card .run-prep-option>span{gap:4px!important}
.run-prep-card .run-prep-option>span strong{font-size:13.5px!important}
.run-prep-card .run-prep-option>span small{font-size:9px!important}
.run-prep-card .run-prep-option>em b{font-size:19px!important}
.run-prep-card .run-prep-option>em small{font-size:8px!important}
.run-prep-card>p,#runPrepHint{
  left:11.5%!important;
  right:11.5%!important;
  top:74.3%!important;
  height:4.8%!important;
  font-size:9px!important;
}
.run-prep-card .run-prep-actions{
  left:9.2%!important;
  right:9.2%!important;
  top:81.4%!important;
  height:8.8%!important;
  gap:4.2%!important;
}
.run-prep-card .run-prep-actions .mini-button{font-size:11px!important}
.run-prep-card .run-prep-actions .mini-button.accent{font-size:13px!important}

/* Board-clear passive: make reward state and rarity hierarchy immediately readable. */
.board-passive-choice-card{
  width:min(348px,calc(100vw - 14px))!important;
}
.board-passive-choice-card>.board-clear-supply-preview{
  left:10.2%!important;
  right:10.2%!important;
  top:32.15%!important;
  height:11.9%!important;
  padding:1px 8.5% 0 8%!important;
  grid-template-columns:49px minmax(0,1fr)!important;
  gap:10px!important;
}
.board-passive-choice-card>.board-clear-supply-preview img{
  width:42px!important;
  height:42px!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span{gap:2px!important}
.board-passive-choice-card>.board-clear-supply-preview>span>b{
  width:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#9eeaff!important;
  font-size:8.5px!important;
  line-height:1!important;
  text-shadow:0 1px 2px #000!important;
  box-shadow:none!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>strong{
  font-size:14.5px!important;
  line-height:1.05!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>em{
  display:block!important;
  margin:0!important;
  color:#c4d4de!important;
  font-size:8px!important;
  line-height:1!important;
}
.board-passive-choice-card>.board-passive-choice-list{
  left:8.8%!important;
  right:8.8%!important;
  top:45.15%!important;
  bottom:7.7%!important;
  gap:1.1%!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice{
  padding:2px 7.5% 1px 5.5%!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:10px!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice img{
  width:44px!important;
  height:44px!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice>span{gap:4px!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice b{font-size:8.5px!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice strong{font-size:14px!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice em{font-size:9.5px!important}
.board-passive-choice-card .board-passive-choice[data-quality="rare"] img{filter:drop-shadow(0 4px 4px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(79,202,255,.3))!important}
.board-passive-choice-card .board-passive-choice[data-quality="epic"] img{filter:drop-shadow(0 4px 4px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(190,112,255,.32))!important}
.board-passive-choice-card .board-passive-choice[data-quality="legendary"] img{filter:drop-shadow(0 4px 4px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(255,204,77,.34))!important}
.board-passive-choice-card .board-passive-choice[data-quality="rare"]{box-shadow:inset 0 1px rgba(78,207,255,.42),inset 0 -1px rgba(78,207,255,.32)!important}
.board-passive-choice-card .board-passive-choice[data-quality="epic"]{box-shadow:inset 0 1px rgba(189,103,255,.46),inset 0 -1px rgba(189,103,255,.34)!important}
.board-passive-choice-card .board-passive-choice[data-quality="legendary"]{box-shadow:inset 0 1px rgba(255,204,77,.5),inset 0 -1px rgba(255,204,77,.36)!important}

/* Victory: one compact result frame; every live block sits in a painted bay. */
.end-panel.clear .end-card{
  position:relative!important;
  box-sizing:border-box!important;
  width:min(378px,calc(100vw - 8px))!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 12px)!important;
  aspect-ratio:1093/1439!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#020711 url("assets/generated/popup_rework_1790138000000/expedition-victory-frame.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 15px 25px rgba(0,0,0,.8))!important;
}
.end-panel.clear .end-card::before,.end-panel.clear .end-card::after{content:none!important;display:none!important}
.end-panel.clear .end-card>.label{
  position:absolute!important;
  z-index:3!important;
  left:18%!important;
  right:18%!important;
  top:8.4%!important;
  margin:0!important;
  color:#9eeaff!important;
  font-size:9.5px!important;
  line-height:1!important;
  text-align:center!important;
}
.end-panel.clear .end-card>strong{
  position:absolute!important;
  z-index:3!important;
  left:18%!important;
  right:18%!important;
  top:11.2%!important;
  margin:0!important;
  color:#fff0aa!important;
  font-size:27px!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 2px 3px #000,0 0 8px rgba(255,205,77,.36)!important;
}
.end-panel.clear .end-text{
  position:absolute!important;
  z-index:2!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.end-panel.clear .run-result-hero,
.end-panel.clear .result-summary-grid,
.end-panel.clear .result-progress,
.end-panel.clear .result-best-item,
.end-panel.clear .result-line{
  position:absolute!important;
  box-sizing:border-box!important;
  margin:0!important;
  min-height:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
.end-panel.clear .run-result-hero{
  left:7.5%!important;
  right:7.5%!important;
  top:19.7%!important;
  width:auto!important;
  height:14.4%!important;
  padding:0 8px!important;
  display:grid!important;
  grid-template-columns:61px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
}
.end-panel.clear .run-result-hero img{
  justify-self:center!important;
  width:54px!important;
  height:54px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.72)) drop-shadow(0 0 6px rgba(72,197,255,.28))!important;
}
.end-panel.clear .run-result-hero span{display:grid!important;align-content:center!important;gap:4px!important;text-align:left!important}
.end-panel.clear .run-result-hero b{color:#fff0aa!important;font-size:18px!important;line-height:1.05!important}
.end-panel.clear .run-result-hero small{margin:0!important;color:#d3e2ec!important;font-size:10.5px!important;line-height:1.1!important}
.end-panel.clear .result-summary-grid{
  left:7.8%!important;
  right:7.8%!important;
  top:35.8%!important;
  width:auto!important;
  height:18.1%!important;
  padding:2px 4px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:4.5%!important;
}
.end-panel.clear .result-mini-card{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:8px 3px!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  gap:5px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
.end-panel.clear .result-mini-card small{color:#a9c7d9!important;font-size:10px!important;line-height:1!important}
.end-panel.clear .result-mini-card strong{color:#fff0ad!important;font-size:18px!important;line-height:1.05!important;text-shadow:0 2px 2px #000!important}
.end-panel.clear .result-progress{
  left:9.2%!important;
  right:9.2%!important;
  top:55.55%!important;
  width:auto!important;
  height:5.2%!important;
  padding:2px 18px!important;
  display:grid!important;
  place-content:center!important;
  gap:1px!important;
  overflow:hidden!important;
  text-align:center!important;
}
.end-panel.clear .result-progress>span{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}
.end-panel.clear .result-progress img{width:14px!important;height:14px!important}
.end-panel.clear .result-progress strong,.end-panel.clear .result-progress b{color:#fff0ad!important;font-size:10.5px!important;line-height:1!important}
.end-panel.clear .result-progress em{color:#9eeaff!important;font-size:9.5px!important;line-height:1!important}
.end-panel.clear .result-progress small{color:#bfd1dd!important;font-size:8.5px!important;line-height:1!important;white-space:nowrap!important}
.end-panel.clear .result-progress>i{display:none!important}
.end-panel.clear .result-best-item{
  left:7.8%!important;
  right:7.8%!important;
  top:61.6%!important;
  width:auto!important;
  height:17.2%!important;
  padding:5px 10px!important;
  display:grid!important;
  grid-template-columns:68px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
}
.end-panel.clear .result-best-item img{justify-self:center!important;width:62px!important;height:62px!important;object-fit:contain!important;filter:drop-shadow(0 4px 4px rgba(0,0,0,.72)) drop-shadow(0 0 7px rgba(173,101,255,.26))!important}
.end-panel.clear .result-best-item span{display:grid!important;align-content:center!important;gap:4px!important;text-align:left!important}
.end-panel.clear .result-best-item small,.end-panel.clear .result-best-item em{color:#9eeaff!important;font-size:10px!important;line-height:1!important}
.end-panel.clear .result-best-item strong{color:#fff0ad!important;font-size:16px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.end-panel.clear .result-line{
  left:9.2%!important;
  right:9.2%!important;
  top:80.1%!important;
  width:auto!important;
  height:4.25%!important;
  padding:0 10px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  color:#c9d9e4!important;
  font-size:9.5px!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.end-panel.clear .end-actions{
  position:absolute!important;
  z-index:3!important;
  left:8.3%!important;
  right:8.3%!important;
  top:86.1%!important;
  bottom:auto!important;
  width:auto!important;
  height:8.4%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:5%!important;
}
.end-panel.clear .end-actions .mini-button,
.end-panel.clear .end-actions #endRestartButton,
.end-panel.clear .end-actions #endHomeButton,
.end-panel.clear .end-actions #endDepthsButton,
.end-panel.clear .end-actions #endShardBonusButton{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 7px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#e5edf4!important;
  font-size:12.5px!important;
  line-height:1!important;
  text-shadow:0 2px 2px #000!important;
  box-shadow:none!important;
  filter:none!important;
}
.end-panel.clear .end-actions .mini-button.accent,.end-panel.clear .end-actions #endRestartButton{color:#fff0ad!important}

@media(max-height:700px){
  .run-prep-card{width:min(320px,calc(100vw - 12px))!important}
  .end-panel.clear .end-card{width:min(310px,calc(100vw - 12px))!important}
}

/* Integrated loot/bag navigation and separated battle skill control 1790139000000. */
.combat-panel+.tabs,.tabs{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:54px!important;
  height:54px!important;
  margin-top:18px!important;
  margin-bottom:0!important;
  padding:6px 14px 7px!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/loot_bag_tabs_1790139000000/loot-bag-tabs-integrated.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))!important;
}
.tabs .tab-button,.tab-button{
  position:relative!important;
  z-index:1!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 12px 1px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:22px!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  color:#cfe6f5!important;
  font-size:11px!important;
  line-height:1!important;
  text-shadow:0 2px 2px #000,0 0 6px rgba(75,189,255,.28)!important;
}
.tabs .tab-button.active,.tab-button.active{
  background:radial-gradient(ellipse at center,rgba(41,143,211,.28) 0%,rgba(20,79,127,.13) 45%,transparent 73%)!important;
  color:#fff0ac!important;
  text-shadow:0 2px 2px #000,0 0 8px rgba(255,210,92,.46)!important;
}
.stage-controls{
  left:auto!important;
  right:11px!important;
  top:8px!important;
  bottom:auto!important;
  gap:0!important;
  transform:none!important;
}
.stage-controls .skill-button:not(.control-status),
.stage-controls .skill-button:only-child:not(.control-status){
  box-sizing:border-box!important;
  width:96px!important;
  min-width:96px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0 12px 1px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/ui_controls_purpose_1788505000000/button-skill-neutral.png") center/100% 100% no-repeat!important;
  color:#a9d9ee!important;
  font-size:9px!important;
  line-height:1!important;
  text-shadow:0 2px 2px #000!important;
  box-shadow:none!important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.52))!important;
}
.stage-controls .skill-button.ready:not(.control-status){
  background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-skill-neutral.png")!important;
  color:#fff0a8!important;
  filter:brightness(1.16) saturate(1.12) drop-shadow(0 0 7px rgba(72,194,255,.5)) drop-shadow(0 3px 4px rgba(0,0,0,.52))!important;
}
.stage-controls:has(.skill-button.control-status){
  left:50%!important;
  right:auto!important;
  top:47px!important;
  transform:translateX(-50%)!important;
}

/* Loot board, battle bag and player-hit reconciliation 1790140000000. */
/* Rolled back at the user's request on 1790146000000. Keep only the later
   centered skill control and incoming-damage treatment active. */
@media not all {
.combat-panel+.tabs,
.tabs{
  width:auto!important;
  min-height:50px!important;
  height:50px!important;
  margin-top:8px!important;
  padding:5px 12px 6px!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.48))!important;
}
.tabs .tab-button,
.tab-button{
  padding-bottom:0!important;
  font-size:12px!important;
  letter-spacing:-.02em!important;
}

/* Both lower surfaces share one exact width and stop stretching to the screen bottom. */
#capsulesPanel.active,
#bagPanel.active{
  box-sizing:border-box!important;
  width:auto!important;
  min-height:0!important;
  height:auto!important;
  flex:0 0 auto!important;
  margin-top:0!important;
  padding:12px 13px 14px!important;
  overflow:hidden!important;
  border:9px solid transparent!important;
  border-radius:0!important;
  border-image:url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") 38 48 fill/9px 11px/0 stretch!important;
  background:linear-gradient(180deg,rgba(5,18,31,.96),rgba(2,8,15,.99)) padding-box!important;
  box-shadow:0 8px 16px rgba(0,0,0,.44)!important;
}
#capsulesPanel::before,
#bagPanel::before{
  content:none!important;
  display:none!important;
}
#capsulesPanel>.panel-head,
#bagPanel>.panel-head{
  box-sizing:border-box!important;
  min-height:40px!important;
  margin:0 0 6px!important;
  padding:1px 3px 7px!important;
  align-items:center!important;
  border-bottom:1px solid rgba(230,197,101,.32)!important;
}
#capsulesPanel>.panel-head h2,
#bagPanel>.panel-head h2{
  margin:0!important;
  color:#fff0ad!important;
  font-size:15px!important;
  line-height:1.05!important;
  text-shadow:0 2px 2px #000,0 0 8px rgba(255,211,96,.2)!important;
}
#capsulesPanel>.panel-head p{
  max-width:142px!important;
  margin:3px 0 0!important;
  overflow:hidden!important;
  color:#9fc9df!important;
  font-size:8.5px!important;
  line-height:1.1!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Authored buttons are kept at their intended aspect and use the same game language. */
#capsulesPanel>.panel-head>.button-row,
#bagPanel>.panel-head>.button-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:center!important;
  width:154px!important;
  gap:5px!important;
}
#pullOneButton,
#pullFiveButton,
#bagMultiSellButton,
#clearBagButton{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0 8px 1px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.46))!important;
  color:#e7f4fb!important;
  font-size:9.5px!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 2px 2px #000!important;
}
#pullFiveButton,
#bagMultiSellButton.active{
  background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png")!important;
  color:#fff0ad!important;
}
#clearBagButton{
  filter:hue-rotate(135deg) saturate(1.28) brightness(.9) drop-shadow(0 2px 3px rgba(0,0,0,.46))!important;
  color:#ffd9d1!important;
}
#pullOneButton:disabled,
#pullFiveButton:disabled{
  opacity:.5!important;
  filter:grayscale(.45) brightness(.72)!important;
}

/* Loot board: readable actions and larger, weightier capsules with no dead textile below. */
#capsulesPanel .chance-strip.board-actions{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:2px 0 9px!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:39px!important;
  height:39px!important;
  padding:4px 6px!important;
  background-size:100% 100%!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button span{
  font-size:9px!important;
  line-height:1.05!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button small{
  margin-top:2px!important;
  font-size:7.2px!important;
  line-height:1!important;
}
#capsulesPanel .capsule-board,
#capsulesPanel .capsule-board.board-size-16,
#capsulesPanel .capsule-board.board-size-20,
#capsulesPanel .capsule-board.board-size-24{
  box-sizing:border-box!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  width:min(100%,286px)!important;
  margin:0 auto!important;
  gap:7px!important;
  align-content:start!important;
}
#capsulesPanel .capsule{
  aspect-ratio:1!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border:2px solid rgba(128,153,184,.74)!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 34% 27%,rgba(255,255,255,.28) 0 7%,transparent 8%),
    radial-gradient(circle at 50% 43%,#263446 0 35%,#101927 37% 58%,#050a12 61% 100%)!important;
  box-shadow:
    inset 0 0 0 2px rgba(5,10,17,.9),
    inset 0 0 9px rgba(104,169,214,.2),
    0 2px 0 rgba(0,0,0,.72),
    0 0 7px rgba(78,151,201,.12)!important;
  color:#dce7f2!important;
  font-size:12px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-shadow:0 2px 2px #000!important;
}
#capsulesPanel .capsule:not(.opened):active{
  transform:scale(.94)!important;
}
#capsulesPanel .capsule.purged{
  border-color:rgba(229,112,112,.72)!important;
  background:radial-gradient(circle at 50% 42%,#432329 0 40%,#140a0d 64% 100%)!important;
  color:#ffd1c9!important;
  font-size:8px!important;
}
#capsulesPanel .capsule.opened{
  opacity:.34!important;
  filter:saturate(.72)!important;
}
#capsulesPanel .pull-inline-panel.active{
  margin-top:9px!important;
}

/* Battle bag: balanced header, readable effect copy, and content-sized waiting tray. */
#bagPanel .bag-board-row{
  grid-template-columns:minmax(128px,.92fr) minmax(0,1.08fr)!important;
  gap:7px!important;
  min-height:var(--bag-board-height,124px)!important;
  height:var(--bag-board-height,124px)!important;
  margin:0!important;
  padding:6px!important;
  border-color:rgba(108,187,225,.28)!important;
  background:rgba(2,10,18,.5)!important;
}
#bagPanel .bag-grid{
  padding:5px!important;
  background:rgba(4,15,25,.54)!important;
}
#bagPanel .bag-effect-summary,
#bagPanel .bag-effect-summary.is-empty{
  padding:7px 6px 5px!important;
  background:rgba(4,15,25,.54)!important;
}
#bagPanel .effect-summary-head{
  min-height:20px!important;
  margin-bottom:5px!important;
}
#bagPanel .effect-summary-head strong{
  font-size:10.5px!important;
}
#bagPanel .effect-summary-head small{
  font-size:7.5px!important;
}
#bagPanel .effect-summary-chip{
  min-height:42px!important;
  height:42px!important;
  padding:5px 7px!important;
  gap:6px!important;
  align-items:center!important;
}
#bagPanel .effect-summary-chip img{
  width:28px!important;
  height:28px!important;
}
#bagPanel .effect-summary-chip b{
  display:block!important;
  overflow:hidden!important;
  font-size:9px!important;
  line-height:1.15!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#bagPanel .effect-summary-chip small{
  display:none!important;
}
#bagPanel.active .bag-tray,
#bagPanel.active .bag-tray:not(.is-empty){
  box-sizing:border-box!important;
  min-height:0!important;
  max-height:168px!important;
  height:auto!important;
  flex:0 0 auto!important;
  margin:5px 0 0!important;
  padding:7px 7px 6px!important;
  overflow:hidden!important;
}
#bagPanel .bag-tray.is-empty{
  display:none!important;
}
#bagPanel .tray-head{
  min-height:18px!important;
  margin:0 0 5px!important;
  padding:0 2px 4px!important;
}
#bagPanel .tray-head strong{
  font-size:10.5px!important;
}
#bagPanel .tray-head strong::after{
  content:var(--i18n-css-stored, " · 보관 중")!important;
  font-size:8px!important;
}
#bagPanel .bag-tray-list{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:61px!important;
  min-height:61px!important;
  max-height:127px!important;
  flex:0 0 auto!important;
  gap:4px!important;
  padding:0 1px 1px!important;
}
#bagPanel .tray-item{
  min-height:61px!important;
  height:61px!important;
}
}

/* The user skill returns to the center directly under the battle-start plate. */
.stage-controls,
.stage-controls:has(.skill-button:not(.control-status)){
  left:50%!important;
  right:auto!important;
  top:47px!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
}
.stage-controls .skill-button:not(.control-status),
.stage-controls .skill-button:only-child:not(.control-status){
  width:102px!important;
  min-width:102px!important;
  height:27px!important;
  min-height:27px!important;
  font-size:9.5px!important;
}

/* Incoming damage mirrors the enemy hit-number treatment: number only, no pill. */
.player-damage-float.player-damage{
  right:auto!important;
  left:clamp(43px,12vw,55px)!important;
  top:32px!important;
  z-index:31!important;
  min-width:72px!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#ff9b83!important;
  font-size:20px!important;
  font-style:italic!important;
  font-weight:1000!important;
  letter-spacing:-.5px!important;
  line-height:1.05!important;
  text-align:center!important;
  -webkit-text-stroke:.7px rgba(74,10,12,.92)!important;
  text-shadow:0 3px 0 #4a090d,0 0 5px #ffe4d8,0 0 13px rgba(255,67,55,.9),0 5px 9px rgba(0,0,0,.75)!important;
  transform:rotate(5deg)!important;
}
.player-damage-float.player-damage::before{
  content:none!important;
  display:none!important;
}
.player-damage-float.player-damage.show{
  animation:playerDamageHeroRise 900ms cubic-bezier(.18,.72,.2,1) both!important;
}
body.qa-float-freeze .player-damage-float.player-damage.show{
  opacity:1!important;
  animation:none!important;
}
@keyframes playerDamageHeroRise{
  0%{opacity:0;transform:translateY(14px) rotate(8deg) scale(.55)}
  18%,70%{opacity:1;transform:translateY(0) rotate(5deg) scale(1.08)}
  100%{opacity:0;transform:translateY(-24px) rotate(3deg) scale(.98)}
}

/* Shared loot-board and bag shell, attached layout and authored controls 1790147000000. */
.combat-panel+.tabs,
.tabs{
  box-sizing:border-box!important;
  width:auto!important;
  min-height:54px!important;
  height:54px!important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding:6px 12px 7px!important;
  gap:0!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))!important;
}
.tabs+.panel,
.tabs+#capsulesPanel,
.tabs+#bagPanel{
  margin-top:0!important;
}

#capsulesPanel.active,
#bagPanel.active{
  position:relative!important;
  box-sizing:border-box!important;
  width:auto!important;
  min-height:0!important;
  flex:1 1 0!important;
  margin-top:0!important;
  padding:10px 8px 9px!important;
  border:12px solid transparent!important;
  border-radius:0!important;
  border-image:url("assets/generated/loot_bag_shell_clean_1790860800002/panel-frame-9slice-quiet-sides.png") 170/13px/0 stretch!important;
  background:
    radial-gradient(ellipse at 50% 0,rgba(37,85,129,.13),transparent 45%),
    linear-gradient(180deg,rgba(5,16,29,.985),rgba(1,6,13,.995)) padding-box!important;
  box-shadow:0 7px 14px rgba(0,0,0,.42)!important;
}
#capsulesPanel.active{
  overflow:hidden!important;
}
#bagPanel.active{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
#capsulesPanel::before,
#bagPanel::before{
  content:none!important;
  display:none!important;
}
#capsulesPanel>* ,
#bagPanel>*{
  position:relative!important;
  z-index:1!important;
}
#capsulesPanel>.panel-head,
#bagPanel>.panel-head{
  box-sizing:border-box!important;
  min-height:39px!important;
  margin:0 0 5px!important;
  padding:1px 3px 6px!important;
  align-items:center!important;
  border-bottom:1px solid rgba(200,170,88,.26)!important;
}
#capsulesPanel>.panel-head h2,
#bagPanel>.panel-head h2{
  color:#fff0ad!important;
  font-size:15px!important;
  line-height:1!important;
  text-shadow:0 2px 2px #000,0 0 8px rgba(95,197,255,.22)!important;
}

/* One authored control plate is 9-sliced so short and long labels keep the same ends. */
#capsulesPanel>.panel-head>.button-row,
#bagPanel>.panel-head>.button-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:156px!important;
  gap:5px!important;
}
#pullOneButton,
#pullFiveButton,
#bagMultiSellButton,
#clearBagButton,
#capsulesPanel .chance-strip.board-actions .chance-button{
  box-sizing:border-box!important;
  min-width:0!important;
  margin:0!important;
  border:7px solid transparent!important;
  border-width:7px 14px!important;
  border-radius:0!important;
  border-image:url("assets/generated/loot_bag_shell_1790147000000/button-plate-9slice.png") 70 200 fill/7px 14px/0 stretch!important;
  background:rgba(5,13,25,.72) padding-box!important;
  box-shadow:none!important;
  color:#e8f4fb!important;
  font-weight:1000!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 2px 2px #000!important;
}
#pullOneButton,
#pullFiveButton,
#bagMultiSellButton,
#clearBagButton{
  width:100%!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 2px!important;
  font-size:9.5px!important;
}
#pullFiveButton,
#bagMultiSellButton.active{
  color:#fff0a9!important;
  filter:brightness(1.15) saturate(1.12) drop-shadow(0 0 5px rgba(55,179,239,.34))!important;
}
#clearBagButton{
  color:#ffd4cd!important;
  filter:hue-rotate(130deg) saturate(1.28) brightness(.88) drop-shadow(0 0 4px rgba(220,56,54,.32))!important;
}
#pullOneButton:disabled,
#pullFiveButton:disabled,
#capsulesPanel .chance-strip.board-actions .chance-button:disabled{
  opacity:.48!important;
  filter:grayscale(.48) brightness(.7)!important;
}

/* Keep the requested four actions per row and the original two-row reveal scroller. */
#capsulesPanel .chance-strip.board-actions{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
  min-height:0!important;
  height:auto!important;
  margin:4px 0 4px!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button{
  width:100%!important;
  min-height:34px!important;
  height:34px!important;
  padding:0 1px!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button span{
  font-size:8px!important;
  line-height:1!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button small{
  margin-top:2px!important;
  font-size:6.5px!important;
  line-height:1!important;
}
#capsulesPanel .pull-inline-panel.active{
  min-height:96px!important;
  max-height:148px!important;
  margin-top:7px!important;
}
#capsulesPanel .pull-inline-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:44px!important;
  min-height:44px!important;
  max-height:94px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

/* Capsule geometry and dynamic bag sizing remain on their original rules. */

/* Count-aware stage rewards and capture-aligned board-clear reward 1790149000000. */
.reward-panel:not(.boss-reward) .reward-modal-card{
  position:relative!important;
  box-sizing:border-box!important;
  width:min(370px,calc(100vw - 10px))!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 10px)!important;
  aspect-ratio:550/764!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:url("assets/generated/reward_modal_suite_1790109000000/stage-reward-choice-frame.png")!important;
  background-position:center!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 15px 25px rgba(0,0,0,.8))!important;
}
.reward-panel:not(.boss-reward)[data-reward-count="4"] .reward-modal-card,
.reward-panel:not(.boss-reward).reward-four .reward-modal-card{
  background-image:url("assets/generated/stage_reward_four_1790149000000/stage-reward-four-frame-v2.png")!important;
}
.reward-panel:not(.boss-reward) .reward-modal-card>div:first-child{
  position:absolute!important;
  z-index:3!important;
  box-sizing:border-box!important;
  left:15.2%!important;
  right:15.2%!important;
  top:8.8%!important;
  width:auto!important;
  height:9.2%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 10px 1px!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  place-content:center!important;
  justify-items:center!important;
  gap:2px!important;
  overflow:visible!important;
  border:7px solid transparent!important;
  border-width:7px 14px!important;
  border-radius:0!important;
  border-image:url("assets/generated/loot_bag_shell_1790147000000/button-plate-9slice.png") 70 200 fill/7px 14px/0 stretch!important;
  background:rgba(3,12,22,.66) padding-box!important;
  box-shadow:none!important;
  text-align:center!important;
}
.reward-panel:not(.boss-reward) .reward-modal-card>div:first-child>.label{
  display:block!important;
  margin:0!important;
  color:#8ee6ff!important;
  font-size:7.5px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.04em!important;
}
.reward-panel:not(.boss-reward) .reward-modal-card>div:first-child>strong{
  display:block!important;
  margin:0!important;
  color:#fff0ad!important;
  font-size:15px!important;
  font-weight:1000!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-shadow:0 2px 2px #000,0 0 8px rgba(255,205,70,.35)!important;
}
.reward-panel:not(.boss-reward) .reward-grid{
  position:absolute!important;
  z-index:2!important;
  left:13.1%!important;
  right:13.1%!important;
  top:20.3%!important;
  bottom:9.4%!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,1.4fr) minmax(0,1fr)!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  align-content:stretch!important;
  gap:2.4% 3.4%!important;
  overflow:visible!important;
  transform:none!important;
}
.reward-panel:not(.boss-reward)[data-reward-count="4"] .reward-grid,
.reward-panel:not(.boss-reward).reward-four .reward-grid{
  left:11.6%!important;
  right:11.6%!important;
  top:20.1%!important;
  bottom:10.5%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,1.08fr) minmax(0,1fr)!important;
  gap:2.1% 2.6%!important;
}
.reward-panel:not(.boss-reward) .reward-modal-card .reward-card:not(.reward-ad-reroll){
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:11px 8px 9px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:48px auto!important;
  place-items:center!important;
  align-content:center!important;
  gap:6px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  text-align:center!important;
}
.reward-panel:not(.boss-reward) .reward-grid>.reward-card:nth-child(3){grid-column:1/-1!important}
.reward-panel:not(.boss-reward)[data-reward-count="4"] .reward-grid>.reward-card:nth-child(3),
.reward-panel:not(.boss-reward).reward-four .reward-grid>.reward-card:nth-child(3){grid-column:auto!important}
.reward-panel:not(.boss-reward) .reward-card .reward-icon{
  align-self:end!important;
  justify-self:center!important;
  width:46px!important;
  height:46px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.72)) drop-shadow(0 0 5px rgba(80,199,255,.2))!important;
}
.reward-panel:not(.boss-reward) .reward-card .reward-copy{
  align-self:start!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  align-content:start!important;
  justify-items:center!important;
  gap:4px!important;
  overflow:visible!important;
  text-align:center!important;
}
.reward-panel:not(.boss-reward) .reward-card .reward-copy em{display:none!important}
.reward-panel:not(.boss-reward) .reward-card .reward-copy strong{
  max-width:100%!important;
  color:#fff0ad!important;
  font-size:13px!important;
  line-height:1.12!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:center!important;
}
.reward-panel:not(.boss-reward) .reward-card .reward-copy small{
  max-width:100%!important;
  color:#d7e4ec!important;
  font-size:9.5px!important;
  line-height:1.16!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:center!important;
}
.reward-panel:not(.boss-reward)[data-reward-count="4"] .reward-card .reward-copy strong,
.reward-panel:not(.boss-reward).reward-four .reward-card .reward-copy strong{font-size:12.5px!important}
.reward-panel:not(.boss-reward)[data-reward-count="4"] .reward-card .reward-copy small,
.reward-panel:not(.boss-reward).reward-four .reward-card .reward-copy small{font-size:9px!important}

/* The painted board-clear frame already supplies its separators; live content must not redraw them. */
.board-passive-choice-card>div:first-child{
  left:14%!important;
  right:14%!important;
  top:8.6%!important;
  height:18.8%!important;
  padding:0 8px!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  gap:4px!important;
  text-align:center!important;
}
.board-passive-choice-card>div:first-child>.label{font-size:8.5px!important;line-height:1!important}
.board-passive-choice-card>div:first-child>strong{font-size:18px!important;line-height:1.06!important}
.board-passive-choice-card>div:first-child>small{font-size:8.7px!important;line-height:1.12!important}
.board-passive-choice-card>.board-clear-supply-preview{
  left:16.5%!important;
  right:16.5%!important;
  top:32.05%!important;
  height:12.15%!important;
  padding:3px 13px!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.board-passive-choice-card>.board-clear-supply-preview img{
  width:42px!important;
  height:42px!important;
  margin:0!important;
  object-fit:contain!important;
  transform:none!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span{
  min-width:0!important;
  display:grid!important;
  align-content:center!important;
  gap:3px!important;
  text-align:left!important;
  transform:none!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>b{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:#9eeaff!important;
  font-size:8.5px!important;
  line-height:1!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>em{display:none!important}
.board-passive-choice-card>.board-clear-supply-preview>span>strong{
  color:#fff0ad!important;
  font-size:14px!important;
  line-height:1.05!important;
  text-align:left!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>small{
  display:block!important;
  color:#d0dce5!important;
  font-size:8.5px!important;
  line-height:1.12!important;
  text-align:left!important;
}
.board-passive-choice-card>.board-passive-choice-list{
  left:8.8%!important;
  right:8.8%!important;
  top:45.1%!important;
  bottom:7.7%!important;
  grid-template-columns:1fr!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  gap:1.15%!important;
  overflow:visible!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:2px 7.5% 1px 5.5%!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice::before,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice::after{
  content:none!important;
  display:none!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice img{
  justify-self:center!important;
  width:44px!important;
  height:44px!important;
  margin:0!important;
  object-fit:contain!important;
  transform:none!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice>span{
  min-width:0!important;
  display:grid!important;
  align-content:center!important;
  justify-items:start!important;
  gap:3px!important;
  text-align:left!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice b{
  display:block!important;
  width:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  font-size:8.5px!important;
  line-height:1!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice strong{font-size:14px!important;line-height:1.04!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice small{display:none!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice em{
  display:block!important;
  margin:0!important;
  font-size:9px!important;
  line-height:1.08!important;
}
.board-passive-choice-card .board-passive-choice[data-quality]{box-shadow:none!important}

@media(max-height:700px){
  .reward-panel:not(.boss-reward) .reward-modal-card{width:min(320px,calc(100vw - 10px))!important}
  .board-passive-choice-card{width:min(305px,calc(100vw - 12px))!important}
}

/* Compact readable loot and bag controls 1790151000000. */
#capsulesPanel>.panel-head>.button-row,
#bagPanel>.panel-head>.button-row{
  width:170px!important;
  gap:6px!important;
}
#pullOneButton,
#pullFiveButton,
#bagMultiSellButton,
#clearBagButton,
#capsulesPanel .chance-strip.board-actions .chance-button,
#bagPanel .bag-sell-actions .mini-button{
  box-sizing:border-box!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid rgba(77,171,218,.76)!important;
  border-image:none!important;
  border-radius:5px!important;
  background:
    linear-gradient(180deg,rgba(20,55,78,.98) 0%,rgba(7,28,44,.99) 55%,rgba(3,15,26,.99) 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(3,10,17,.86),
    inset 0 1px 0 rgba(214,241,255,.15),
    0 2px 3px rgba(0,0,0,.42)!important;
  filter:none!important;
  color:#f2f7fa!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-shadow:0 1px 1px rgba(0,0,0,.9)!important;
}
#pullOneButton,
#pullFiveButton,
#bagMultiSellButton,
#clearBagButton{
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 6px!important;
  font-size:10.5px!important;
}
#pullFiveButton{
  border-color:rgba(218,180,83,.8)!important;
  background:linear-gradient(180deg,rgba(58,49,34,.98),rgba(24,28,32,.99) 56%,rgba(8,17,26,.99))!important;
  color:#fff0ae!important;
}
#bagMultiSellButton.active{
  border-color:rgba(94,209,255,.9)!important;
  background:linear-gradient(180deg,rgba(25,91,126,.98),rgba(7,44,69,.99) 58%,rgba(3,21,36,.99))!important;
  color:#fff1ad!important;
  filter:none!important;
  box-shadow:
    inset 0 0 0 1px rgba(4,14,23,.9),
    inset 0 0 8px rgba(79,195,245,.18),
    0 0 6px rgba(61,183,238,.16)!important;
}
#clearBagButton{
  border-color:rgba(189,82,78,.86)!important;
  background:linear-gradient(180deg,rgba(86,27,31,.98),rgba(47,14,21,.99) 56%,rgba(23,8,14,.99))!important;
  color:#ffd3cc!important;
}
#boardSummary{
  margin-top:3px!important;
  color:#b7d0df!important;
  font-size:8.5px!important;
  line-height:1.05!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}
#capsulesPanel .chance-strip.board-actions{
  box-sizing:border-box!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:5px!important;
  margin:5px 0!important;
  height:83px!important;
  min-height:83px!important;
  max-height:83px!important;
  flex:0 0 83px!important;
  overflow:visible!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button{
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  padding:4px 3px!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  place-content:center!important;
  gap:3px!important;
  white-space:normal!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button span{
  display:block!important;
  color:#edf6fa!important;
  font-size:9.5px!important;
  font-weight:1000!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-shadow:0 1px 1px rgba(0,0,0,.88)!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button small{
  display:block!important;
  margin:0!important;
  color:#aed0e1!important;
  font-size:7.4px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-shadow:none!important;
}
#pullOneButton:disabled,
#pullFiveButton:disabled,
#capsulesPanel .chance-strip.board-actions .chance-button:disabled,
#bagPanel .bag-sell-actions .mini-button:disabled{
  opacity:.58!important;
  filter:grayscale(.18) brightness(.82)!important;
  color:#b7c8d2!important;
}
#bagPanel .bag-sell-bar{
  box-sizing:border-box!important;
  min-height:56px!important;
  margin:0 0 7px!important;
  padding:7px 8px!important;
  display:grid!important;
  grid-template-columns:98px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  overflow:visible!important;
  border:1px solid rgba(80,158,198,.52)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,rgba(10,35,53,.97),rgba(3,17,29,.99))!important;
  box-shadow:inset 0 1px 0 rgba(217,243,255,.07)!important;
}
#bagPanel .bag-sell-bar>span{
  min-width:0!important;
  display:grid!important;
  align-content:center!important;
  gap:4px!important;
}
#bagPanel .bag-sell-bar>span strong{
  color:#fff0ad!important;
  font-size:11.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-shadow:none!important;
}
#bagPanel .bag-sell-bar>span small{
  color:#aac9d9!important;
  font-size:9px!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-shadow:none!important;
}
#bagPanel .bag-sell-actions{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:.95fr 1.18fr .78fr!important;
  align-items:stretch!important;
  gap:5px!important;
}
#bagPanel .bag-sell-actions .mini-button{
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 3px!important;
  font-size:9.5px!important;
}
#bagPanel .bag-sell-actions #bagSellConfirmButton{
  border-color:rgba(216,178,77,.8)!important;
  background:linear-gradient(180deg,rgba(65,53,32,.98),rgba(31,29,26,.99) 58%,rgba(11,18,24,.99))!important;
  color:#fff0ad!important;
}
#bagPanel .bag-sell-actions #bagSellCancelButton{
  color:#c8d8e2!important;
}

/* Authored PNG controls, inline sell mode, and fixed 2x2 loot tray 1790153000000. */
#capsulesPanel>.panel-head>.button-row,
#bagPanel>.panel-head>.button-row{
  width:166px!important;
  gap:6px!important;
}
#pullOneButton,
#pullFiveButton,
#bagMultiSellButton,
#clearBagButton,
#capsulesPanel .chance-strip.board-actions .chance-button,
#bagPanel .bag-sell-actions .mini-button,
#capsulesPanel .inline-reveal-item [data-action="place"]{
  position:relative!important;
  overflow:hidden!important;
  border:0!important;
  border-image:none!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  clip-path:none!important;
  box-shadow:none!important;
  filter:none!important;
  color:#f1f8fc!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
  text-shadow:0 1px 1px #000!important;
}
#pullOneButton::before,
#pullFiveButton::before,
#bagMultiSellButton::before,
#clearBagButton::before,
#capsulesPanel .chance-strip.board-actions .chance-button::before,
#bagPanel .bag-sell-actions .mini-button::before,
#capsulesPanel .inline-reveal-item [data-action="place"]::before{
  content:none!important;
  display:none!important;
}
#pullOneButton,
#bagMultiSellButton{
  background-image:url("assets/generated/loot_bag_controls_1790153000000/button-header-neutral.png")!important;
}
#pullFiveButton,
#bagMultiSellButton.active{
  background-image:url("assets/generated/loot_bag_controls_1790153000000/button-header-primary.png")!important;
  color:#fff0a9!important;
}
#clearBagButton{
  background-image:url("assets/generated/loot_bag_controls_1790153000000/button-header-danger.png")!important;
  color:#ffd7cf!important;
}
#pullOneButton,
#pullFiveButton,
#bagMultiSellButton,
#clearBagButton{
  height:34px!important;
  min-height:34px!important;
  padding:0 10px!important;
  font-size:10.5px!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button{
  height:39px!important;
  min-height:39px!important;
  padding:4px 4px!important;
  background-image:url("assets/generated/loot_bag_controls_1790153000000/button-action-neutral.png")!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button.premium{
  background-image:url("assets/generated/loot_bag_controls_1790153000000/button-action-primary.png")!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button span{
  color:#f4f8fb!important;
  font-size:9.5px!important;
  text-shadow:0 1px 1px #000!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button small{
  color:#a9cbdc!important;
  font-size:7.2px!important;
  text-shadow:none!important;
}

/* Sell controls replace the header only while selection mode is active. */
#bagPanel>.panel-head{
  position:relative!important;
}
#bagPanel.sell-mode>.panel-head>div:not(.bag-sell-bar){
  visibility:hidden!important;
}
#bagPanel>.panel-head>.bag-sell-bar{
  position:absolute!important;
  z-index:3!important;
  inset:0!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:39px!important;
  min-height:39px!important;
  margin:0!important;
  padding:2px 3px!important;
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  align-items:center!important;
  gap:6px!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/lobby_prep_refresh_1788102000000/prep-hint.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
}
#bagPanel>.panel-head>.bag-sell-bar[hidden]{
  display:none!important;
}
#bagPanel .bag-sell-bar>span{
  display:grid!important;
  gap:2px!important;
  padding-left:5px!important;
}
#bagPanel .bag-sell-bar>span strong{
  font-size:10px!important;
  color:#fff0a9!important;
}
#bagPanel .bag-sell-bar>span small{
  font-size:7.6px!important;
  color:#9fc9dc!important;
}
#bagPanel .bag-sell-actions{
  display:grid!important;
  grid-template-columns:.92fr 1.12fr .72fr!important;
  gap:4px!important;
}
#bagPanel .bag-sell-actions .mini-button{
  height:31px!important;
  min-height:31px!important;
  padding:0 6px!important;
  font-size:8.8px!important;
}
#bagPanel #bagSellLowButton{
  background-image:url("assets/generated/loot_bag_controls_1790153000000/button-sell-low.png")!important;
}
#bagPanel #bagSellConfirmButton{
  background-image:url("assets/generated/loot_bag_controls_1790153000000/button-sell-confirm.png")!important;
  color:#fff0a9!important;
}
#bagPanel #bagSellCancelButton{
  background-image:url("assets/generated/loot_bag_controls_1790153000000/button-sell-cancel.png")!important;
}
#bagPanel .bag-sell-actions .mini-button:disabled{
  opacity:.5!important;
  filter:saturate(.45) brightness(.72)!important;
}

/* Keep a stable four-slot acquisition tray from the first frame onward. */
#capsulesPanel .pull-inline-panel,
#capsulesPanel .pull-inline-panel.active{
  box-sizing:border-box!important;
  display:flex!important;
  width:100%!important;
  height:166px!important;
  min-height:166px!important;
  max-height:166px!important;
  flex:0 0 166px!important;
  margin:7px 0 0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-image:none!important;
  background:transparent url("assets/generated/loot_bag_controls_1790153000000/loot-tray-frame.png") center/100% 100% no-repeat!important;
}
#capsulesPanel .pull-inline-panel .panel-head.compact{
  position:absolute!important;
  z-index:2!important;
  left:23px!important;
  right:14px!important;
  top:14px!important;
  height:31px!important;
  min-height:31px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}
#capsulesPanel .pull-inline-panel .panel-head.compact h2{
  color:#fff0ad!important;
  font-size:12.5px!important;
  text-shadow:0 2px 2px #000!important;
}
#capsulesPanel .pull-inline-panel .icon-close-button{
  position:absolute!important;
  right:0!important;
  top:-5px!important;
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:none!important;
  color:transparent!important;
  font-size:0!important;
}
#capsulesPanel .pull-inline-panel .icon-close-button::before,
#capsulesPanel .pull-inline-panel .icon-close-button::after{
  content:none!important;
  display:none!important;
}
#capsulesPanel .pull-inline-panel.empty .icon-close-button{
  display:none!important;
}
#capsulesPanel .pull-inline-list{
  position:absolute!important;
  z-index:1!important;
  left:24px!important;
  right:16px!important;
  top:54px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:48px!important;
  align-content:start!important;
  gap:5px!important;
  width:auto!important;
  height:102px!important;
  min-height:102px!important;
  max-height:102px!important;
  padding:0 16px 0 0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(79,184,229,.65) rgba(3,13,23,.7)!important;
}
#capsulesPanel .inline-reveal-item,
#capsulesPanel .inline-reveal-item:only-child,
#capsulesPanel .inline-reveal-placeholder{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  border-radius:0!important;
}
#capsulesPanel .inline-reveal-item{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 44px!important;
  align-items:center!important;
  gap:3px!important;
  padding:5px 2px 5px 4px!important;
  overflow:hidden!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
#capsulesPanel .inline-reveal-main{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr)!important;
  align-items:center!important;
  gap:3px!important;
  overflow:hidden!important;
}
#capsulesPanel .inline-item-icon{
  box-sizing:border-box!important;
  width:24px!important;
  height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
  padding:1px!important;
  border:0!important;
  border-radius:4px!important;
  background:transparent!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.72))!important;
}
#capsulesPanel .inline-reveal-copy{
  min-width:0!important;
  max-height:34px!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  color:#edf5f9!important;
  font-size:9.2px!important;
  font-weight:900!important;
  line-height:1.12!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  text-shadow:0 1px 1px #000!important;
}
#capsulesPanel .inline-reveal-copy .reveal-grade{
  display:inline!important;
  margin-right:3px!important;
  color:#ffe17a!important;
  font-size:9.2px!important;
}
#capsulesPanel .inline-reveal-name{
  display:inline!important;
  max-width:100%!important;
  color:inherit!important;
  font:inherit!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}
#capsulesPanel .inline-reveal-item .reveal-card-actions{
  width:44px!important;
}
#capsulesPanel .inline-reveal-item [data-action="place"]{
  width:44px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 6px!important;
  background-image:url("assets/generated/loot_bag_controls_1790153000000/button-item-insert.png")!important;
  background-size:contain!important;
  color:#fff0a8!important;
  font-size:9.2px!important;
}
#capsulesPanel .inline-reveal-placeholder{
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  place-content:center!important;
  align-items:center!important;
  gap:0!important;
  border:0!important;
  background:transparent!important;
  color:#6f8b9b!important;
}
#capsulesPanel .inline-reveal-placeholder span{
  display:none!important;
}
#capsulesPanel .inline-reveal-placeholder small{
  font-size:7.8px!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
}

/* Preserve the authored control and loot heights on short screens instead of
   compressing the two action rows into the capsule grid. */
#capsulesPanel.active{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(79,184,229,.58) rgba(2,10,18,.64)!important;
}

/* Compact loot/bag navigation and return its height to the active panel 1790155000000. */
.combat-panel+.tabs,
.tabs{
  min-height:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  padding:5px 12px 6px!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.48))!important;
}
.tabs .tab-button,
.tab-button{
  padding:0 10px!important;
  border-radius:18px!important;
  font-size:10.5px!important;
}

/* Release-safe mobile layouts and authored sell controls 1790156000000. */
#menuCompanionPanel.active{
  display:grid!important;
  grid-template-rows:44px 44px 38px minmax(0,1fr)!important;
  gap:7px!important;
  padding:15px 12px max(13px,env(safe-area-inset-bottom))!important;
}
#menuCompanionPanel .menu-panel-head{
  position:relative!important;
  inset:auto!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) 64px!important;
  align-items:center!important;
  gap:4px!important;
  margin:0!important;
  padding:4px 8px!important;
}
#menuCompanionPanel .menu-panel-head>strong{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
  width:calc(100% - 144px)!important;
  max-width:calc(100% - 144px)!important;
  height:auto!important;
  min-height:0!important;
  min-width:0!important;
  display:block!important;
  margin:0!important;
  writing-mode:horizontal-tb!important;
  white-space:nowrap!important;
  text-align:center!important;
  line-height:1!important;
  transform:translate(-50%,-50%)!important;
}
#menuCompanionPanel .menu-panel-head>.menu-back-button{
  position:static!important;
  inset:auto!important;
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  width:64px!important;
  min-width:64px!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  transform:none!important;
}
#menuCompanionPanel .menu-panel-head::after{
  grid-column:3!important;
  grid-row:1!important;
  width:64px!important;
  height:30px!important;
}
#menuCompanionPanel .companion-currency-bar,
#menuCompanionPanel .companion-menu-tabs,
#menuCompanionPanel .companion-tab-view{
  position:static!important;
  inset:auto!important;
  width:auto!important;
  margin:0!important;
}
#menuCompanionPanel .companion-tab-view{
  min-height:0!important;
  padding:0 2px 18px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
#bagPanel>.panel-head>.bag-sell-bar{
  grid-template-columns:76px minmax(0,1fr)!important;
  gap:4px!important;
  height:44px!important;
  min-height:44px!important;
  padding:3px!important;
}
#bagPanel.sell-mode>.panel-head{
  height:47px!important;
  min-height:47px!important;
}
#bagPanel>.panel-head>.bag-sell-bar>span{
  min-width:0!important;
  padding-left:4px!important;
  overflow:hidden!important;
}
#bagPanel>.panel-head>.bag-sell-bar>span strong{
  font-size:9.5px!important;
}
#bagPanel>.panel-head>.bag-sell-bar>span small{
  font-size:7.2px!important;
}
#bagPanel>.panel-head>.bag-sell-bar .bag-sell-actions{
  grid-template-columns:.98fr 1.16fr .76fr!important;
  gap:3px!important;
}
#bagPanel>.panel-head>.bag-sell-bar .bag-sell-actions .mini-button{
  min-width:0!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 3px!important;
  font-size:9.8px!important;
}
#bagPanel>.panel-head>.bag-sell-bar .bag-sell-actions #bagSellLowButton{
  background:transparent url("assets/generated/loot_bag_controls_1790153000000/button-sell-low.png") center/100% 100% no-repeat!important;
}
#bagPanel>.panel-head>.bag-sell-bar .bag-sell-actions #bagSellConfirmButton{
  background:transparent url("assets/generated/loot_bag_controls_1790153000000/button-sell-confirm.png") center/100% 100% no-repeat!important;
  color:#fff0a9!important;
}
#bagPanel>.panel-head>.bag-sell-bar .bag-sell-actions #bagSellCancelButton{
  background:transparent url("assets/generated/loot_bag_controls_1790153000000/button-sell-cancel.png") center/100% 100% no-repeat!important;
}
#bagPanel>.panel-head>.bag-sell-bar .bag-sell-actions .mini-button:disabled{
  opacity:.68!important;
  filter:saturate(.55) brightness(.82)!important;
}

/* Phone-capture reconciliation: result, item detail, board passive and loot board 1790157000000. */

/* Defeat result: every optional block participates in one compact flow, so unlock
   notices and upgrade hints can never sit on top of the painted title. */
.end-panel:is(.defeat, .victory) .end-text{
  position:absolute!important;
  left:9%!important;
  right:9%!important;
  top:10.5%!important;
  bottom:24%!important;
  width:auto!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-content:stretch!important;
  justify-content:flex-start!important;
  gap:4px!important;
  padding:0!important;
  overflow:hidden!important;
}
.end-panel:is(.defeat, .victory) .end-text>*{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
}
.end-panel:is(.defeat, .victory) .run-result-hero{
  height:72px!important;
  min-height:72px!important;
  padding:7px 11px!important;
}
.end-panel:is(.defeat, .victory) .run-result-hero img{width:42px!important;height:42px!important;object-fit:contain!important}
.end-panel:is(.defeat, .victory) .run-result-hero b{font-size:17px!important;line-height:1.05!important}
.end-panel:is(.defeat, .victory) .run-result-hero small{font-size:9.5px!important;line-height:1.1!important}
.end-panel:is(.defeat, .victory) .result-summary-grid{
  height:61px!important;
  min-height:61px!important;
  padding:3px!important;
}
.end-panel:is(.defeat, .victory) .result-mini-card{height:55px!important;padding:5px 3px!important}
.end-panel:is(.defeat, .victory) .result-mini-card small{font-size:8.5px!important;line-height:1!important}
.end-panel:is(.defeat, .victory) .result-mini-card strong{font-size:15px!important;line-height:1.05!important}
.end-panel:is(.defeat, .victory) .result-first-companion-reward,
.end-panel:is(.defeat, .victory) .result-depths-preview{height:42px!important;min-height:42px!important;padding:4px 8px!important}
.end-panel:is(.defeat, .victory) .result-progress{
  height:34px!important;
  min-height:34px!important;
  padding:3px 7px!important;
}
.end-panel:is(.defeat, .victory) .result-progress strong{font-size:9px!important}
.end-panel:is(.defeat, .victory) .result-progress small{font-size:7.8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.end-panel:is(.defeat, .victory) .result-unlock-list{
  position:relative!important;
  inset:auto!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:98px minmax(0,1fr)!important;
  align-items:center!important;
  gap:5px!important;
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  margin:0!important;
  padding:4px 7px!important;
  overflow:hidden!important;
  border:1px solid rgba(188,80,91,.38)!important;
  border-radius:4px!important;
  background:rgba(24,7,13,.56)!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-list>strong{
  min-width:0!important;
  color:#ffe4a4!important;
  font-size:8.3px!important;
  line-height:1.15!important;
  white-space:normal!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-chip{
  box-sizing:border-box!important;
  min-width:0!important;
  height:36px!important;
  padding:2px 4px!important;
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr)!important;
  align-items:center!important;
  gap:4px!important;
  overflow:hidden!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-chip img{width:27px!important;height:27px!important;object-fit:contain!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip>span{min-width:0!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip small{display:none!important}
.end-panel:is(.defeat, .victory) .result-best-item{
  height:56px!important;
  min-height:56px!important;
  padding:5px 10px!important;
}
.end-panel:is(.defeat, .victory) .result-best-item img{width:43px!important;height:43px!important;object-fit:contain!important}
.end-panel:is(.defeat, .victory) .result-best-item small,.end-panel:is(.defeat, .victory) .result-best-item em{font-size:8px!important}
.end-panel:is(.defeat, .victory) .result-best-item strong{font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.end-panel:is(.defeat, .victory) .result-line{
  height:20px!important;
  min-height:20px!important;
  padding:0 5px!important;
  font-size:7.2px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.end-panel:is(.defeat, .victory) .result-upgrade-hint{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  height:18px!important;
  min-height:18px!important;
  padding:2px 7px!important;
  color:#b9d5e3!important;
  font-size:7.5px!important;
  line-height:14px!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.end-panel:is(.defeat, .victory) .end-actions{
  left:8%!important;
  right:8%!important;
  bottom:4.2%!important;
  width:auto!important;
  height:106px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:32px!important;
  align-content:start!important;
  gap:4px!important;
  overflow:hidden!important;
}
.end-panel:is(.defeat, .victory) .end-actions .mini-button{
  grid-column:auto!important;
  width:100%!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 5px!important;
  font-size:7.6px!important;
  line-height:1.05!important;
  white-space:normal!important;
}

/* Item detail: the description and all stat/effect rows get real height instead
   of overflowing a single 64px rail. The authored frame and button art remain. */
.item-info-panel .item-info-card{
  box-sizing:border-box!important;
  width:min(346px,calc(100vw - 16px))!important;
  height:auto!important;
  min-height:396px!important;
  max-height:calc(100dvh - 18px)!important;
  padding:54px 30px 38px!important;
  display:grid!important;
  grid-template-rows:70px 46px auto 62px!important;
  align-content:stretch!important;
  gap:5px!important;
  overflow:hidden!important;
}
.item-info-card .item-info-head{
  box-sizing:border-box!important;
  width:100%!important;
  height:70px!important;
  min-height:70px!important;
  margin:0!important;
  overflow:hidden!important;
}
.item-info-card .item-info-head>div{min-width:0!important}
.item-info-card .item-info-head .label{font-size:8.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.item-info-card .item-info-head strong{font-size:17px!important;line-height:1.08!important;white-space:normal!important}
.item-info-card .item-info-head .icon-close-button{right:1px!important;transform:none!important}
.item-info-card>#itemInfoText{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:7px 10px!important;
  overflow:hidden!important;
  color:#d8e7ef!important;
  font-size:9px!important;
  line-height:1.22!important;
  text-align:left!important;
}
.item-info-card .item-info-stats{
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  min-height:123px!important;
  margin:0!important;
  padding:3px 6px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:60px!important;
  align-content:start!important;
  gap:3px 0!important;
  overflow:hidden!important;
  background:transparent url("assets/generated/popup_rework_1790137000000/item-stat-strip.png") center top/100% 63px repeat-y!important;
}
.item-info-card .item-info-stats>span,
.item-info-card .item-info-stats>span:nth-child(2),
.item-info-card .item-info-stats>span:nth-child(3){
  box-sizing:border-box!important;
  width:100%!important;
  height:60px!important;
  min-height:60px!important;
  margin:0!important;
  padding:5px 4px!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  gap:2px!important;
  overflow:hidden!important;
}
.item-info-card .item-info-stats>span small{font-size:8.5px!important;line-height:1!important}
.item-info-card .item-info-stats>span strong{max-width:100%!important;font-size:12px!important;line-height:1.08!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important}
.item-info-card .item-info-stats>span:nth-child(n+4) strong{font-size:11px!important;line-height:1.12!important}
.item-info-card .item-info-stats>.active-effect-chip{
  grid-column:1/-1!important;
  height:48px!important;
  min-height:48px!important;
  padding:5px 10px!important;
  background:rgba(3,13,23,.62)!important;
}
.item-info-card .item-info-stats>.item-secret-recipe-hint{
  grid-column:1/-1!important;
  box-sizing:border-box!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:3px 8px!important;
  overflow:hidden!important;
}
.item-info-card .item-info-actions{
  align-self:end!important;
  width:100%!important;
  height:62px!important;
  min-height:62px!important;
  margin:0!important;
}
.item-info-card .item-info-actions:has(#itemPlaceButton[hidden]) #itemRemoveButton{grid-column:1!important}

/* Board-clear reward: shorter labels and a tighter text rhythm inside the
   existing painted bays. */
.board-passive-choice-card>div:first-child>strong{font-size:17px!important;letter-spacing:-.03em!important}
.board-passive-choice-card>div:first-child>small{font-size:8.4px!important;white-space:nowrap!important}
.board-passive-choice-card>.board-clear-supply-preview>span>b{font-size:8.2px!important}
.board-passive-choice-card>.board-clear-supply-preview>span>strong{font-size:13.5px!important}
.board-passive-choice-card>.board-clear-supply-preview>span>small{font-size:8.2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice>span{gap:2px!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice b{font-size:8.2px!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice strong{font-size:14.5px!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice em{font-size:9px!important;line-height:1.14!important}

/* At phone height the battle header gives unused vertical space back to the
   lower surface. This lets the complete loot board fit without its own scroll. */
@media (max-width:480px) and (max-height:900px){
  .battle-core{
    grid-template-rows:124px 32px 34px!important;
    gap:3px!important;
  }
  .fight-stage{height:124px!important;min-height:124px!important}
  .combat-stats-mini{height:32px!important;min-height:32px!important}
  .wave-preview{height:34px!important;min-height:34px!important;padding-top:3px!important;padding-bottom:3px!important}
  .combat-panel+.tabs,.tabs{
    height:38px!important;
    min-height:38px!important;
    flex:0 0 38px!important;
    padding:4px 11px 5px!important;
  }
  .tabs .tab-button,.tab-button{height:29px!important;min-height:29px!important;font-size:10px!important}
  #capsulesPanel.active{
    overflow-x:hidden!important;
    overflow-y:hidden!important;
    overscroll-behavior:auto!important;
    scrollbar-width:none!important;
  }
  #capsulesPanel>.panel-head{
    height:36px!important;
    min-height:36px!important;
    margin-bottom:3px!important;
    padding-bottom:3px!important;
  }
  #capsulesPanel .chance-strip.board-actions{
    height:77px!important;
    min-height:77px!important;
    max-height:77px!important;
    flex:0 0 77px!important;
    margin:2px 0 3px!important;
    gap:3px 4px!important;
  }
  #capsulesPanel .chance-strip.board-actions .chance-button{
    height:36px!important;
    min-height:36px!important;
    padding:3px!important;
  }
  #capsulesPanel .capsule{
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #capsulesPanel .pull-inline-panel,
  #capsulesPanel .pull-inline-panel.active{
    height:148px!important;
    min-height:148px!important;
    max-height:148px!important;
    flex:0 0 148px!important;
    margin-top:3px!important;
  }
  #capsulesPanel .pull-inline-panel .panel-head.compact{
    top:11px!important;
    height:29px!important;
    min-height:29px!important;
  }
  #capsulesPanel .pull-inline-list{
    top:48px!important;
    height:91px!important;
    min-height:91px!important;
    max-height:91px!important;
    grid-auto-rows:43px!important;
    gap:4px!important;
  }
  #capsulesPanel .inline-reveal-item,
  #capsulesPanel .inline-reveal-item:only-child,
  #capsulesPanel .inline-reveal-placeholder{
    height:43px!important;
    min-height:43px!important;
  }
}

/* Store / recipe mobile polish 1790159000000.
   Keep the authored panel and button art, but align every sub-page header to
   one optical grid instead of letting older per-page offsets accumulate. */
.menu-sub-panel .menu-panel-head,
#menuSettingsPanel .menu-panel-head{
  grid-template-columns:66px minmax(0,1fr) 66px!important;
  align-items:center!important;
  padding-inline:8px!important;
}
.menu-sub-panel .menu-panel-head>.menu-back-button,
#menuSettingsPanel .menu-panel-head>.menu-back-button,
#menuCompanionPanel .menu-panel-head>.menu-back-button{
  position:static!important;
  inset:auto!important;
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  width:62px!important;
  min-width:62px!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0 8px!important;
  transform:none!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.32))!important;
  background-size:100% 100%!important;
  font-size:9.5px!important;
  line-height:30px!important;
}
.menu-sub-panel .menu-panel-head>strong,
#menuSettingsPanel .menu-panel-head>strong,
.menu-store-panel .menu-panel-head .store-panel-title{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:stretch!important;
  align-self:center!important;
  margin:0!important;
  text-align:center!important;
}
+
/* 2026-08-12 mixed-enhancement fusion and premium grade separation. */
.rarity-SSS{
  border-color:#d9d3ff!important;
  color:#fff!important;
  text-shadow:0 1px 2px #000,0 0 6px rgba(157,132,255,.82)!important;
  box-shadow:0 0 0 1px rgba(112,207,255,.42),0 0 10px rgba(132,99,255,.48),inset 0 0 10px rgba(255,255,255,.15)!important;
}
.capsule.rarity-SSS{
  border-color:#ddd7ff!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 34% 25%,rgba(255,255,255,.48) 0 6%,transparent 8%),
    radial-gradient(circle at 50% 43%,#6955aa 0 32%,#292557 36% 59%,#0b1527 63% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(4,8,20,.94),inset 0 0 12px rgba(204,194,255,.34),0 0 9px rgba(116,202,255,.42),0 0 14px rgba(139,101,255,.34)!important;
}
.item-tile.rarity-SSS,
.tray-item.rarity-SSS,
.placed-item.rarity-SSS,
.inline-reveal-item.rarity-SSS,
.fusion-material.rarity-SSS,
.fusion-result-pop.rarity-SSS,
.rare-showcase.rarity-SSS,
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS{
  --item-grade-surface:
    radial-gradient(circle at 20% 12%,rgba(255,255,255,.28),transparent 27%),
    linear-gradient(145deg,#45377a 0%,#1e214c 48%,#081722 100%)!important;
  border-color:#d9d3ff!important;
  color:#f8f6ff!important;
  background:
    radial-gradient(circle at 20% 12%,rgba(255,255,255,.28),transparent 27%),
    linear-gradient(145deg,#45377a 0%,#1e214c 48%,#081722 100%)!important;
  text-shadow:0 1px 2px #000,0 0 5px rgba(160,139,255,.62)!important;
  box-shadow:inset 0 0 12px rgba(180,170,255,.2),0 0 7px rgba(99,193,238,.25)!important;
}
#capsulesPanel .inline-reveal-item.rarity-SSS .reveal-grade{color:#e6e0ff!important}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="common"]{
  background:transparent!important;
  box-shadow:none!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="common"] b,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="common"] strong{
  color:#d5e0eb!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="rare"]{
  background:transparent!important;
  box-shadow:none!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="rare"] b,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="rare"] strong{
  color:#7af0c2!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="common"] img{
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.72)) drop-shadow(0 0 5px rgba(177,198,219,.25))!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="rare"] img{
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.72)) drop-shadow(0 0 7px rgba(83,232,178,.34))!important;
}

.fusion-absorb{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  min-height:112px!important;
  gap:12px!important;
  padding:10px 8px!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(126,197,255,.13),transparent 31%),
    linear-gradient(180deg,rgba(3,10,23,.76),rgba(8,7,25,.84))!important;
  box-shadow:inset 0 0 0 1px rgba(99,176,224,.19),inset 0 0 18px rgba(89,84,194,.12)!important;
}
.fusion-absorb[data-material-count="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:30px!important;
  padding-inline:34px!important;
}
.fusion-material{
  min-height:78px!important;
  overflow:visible!important;
}
.fusion-material.material-0::after,
.fusion-absorb[data-material-count="3"] .fusion-material.material-1::after{
  content:"+";
  position:absolute;
  right:-14px;
  top:50%;
  z-index:5;
  color:#91dfff;
  font-size:18px;
  font-weight:1000;
  line-height:1;
  text-shadow:0 0 7px rgba(104,210,255,.8),0 2px 2px #000;
  transform:translate(50%,-50%);
}
.fusion-absorb[data-material-count="2"] .fusion-material.material-0::after{right:-16px}
.fusion-core{
  width:66px!important;
  height:66px!important;
  background:radial-gradient(circle,#fff 0 7%,#c9ecff 12%,rgba(135,109,255,.66) 32%,rgba(80,183,236,.26) 55%,transparent 72%)!important;
  filter:drop-shadow(0 0 12px rgba(119,213,255,.72))!important;
}
.fusion-result-pop{
  width:78px!important;
  min-height:78px!important;
  border-width:2px!important;
}
.fusion-panel.active .material-0{animation:fusionGatherLeft 1350ms cubic-bezier(.34,.05,.24,1) both!important}
.fusion-panel.active .material-1{animation:fusionGatherCenter 1350ms cubic-bezier(.34,.05,.24,1) both!important}
.fusion-panel.active .material-2{animation:fusionGatherRight 1350ms cubic-bezier(.34,.05,.24,1) both!important}
.fusion-panel.active .fusion-core{animation:fusionCoreForge 1350ms ease-out both!important}
.fusion-panel.active .fusion-result-pop{animation:fusionResultForge 1350ms cubic-bezier(.2,.8,.25,1) both!important}
@keyframes fusionGatherLeft{
  0%,38%{opacity:1;transform:translateX(0) scale(1)}
  72%{opacity:1;transform:translateX(calc(100% + 12px)) scale(.66)}
  88%,100%{opacity:0;transform:translateX(calc(100% + 12px)) scale(.08)}
}
@keyframes fusionGatherCenter{
  0%,38%{opacity:1;transform:scale(1)}
  72%{opacity:1;transform:scale(.66)}
  88%,100%{opacity:0;transform:scale(.08)}
}
@keyframes fusionGatherRight{
  0%,38%{opacity:1;transform:translateX(0) scale(1)}
  72%{opacity:1;transform:translateX(calc(-100% - 12px)) scale(.66)}
  88%,100%{opacity:0;transform:translateX(calc(-100% - 12px)) scale(.08)}
}
@keyframes fusionCoreForge{
  0%,36%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  54%{opacity:.75;transform:translate(-50%,-50%) scale(.72)}
  76%{opacity:1;transform:translate(-50%,-50%) scale(1.28)}
  90%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.85)}
}
@keyframes fusionResultForge{
  0%,80%{opacity:0;transform:translate(-50%,-50%) scale(.05) rotate(-8deg)}
  91%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(2deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
}


/* 2026-08-12 rarity palette separation. F/D/S used to share three adjacent
   warm browns; steel, ember-orange and solar-gold now remain distinct even on
   the darkest board and bag surfaces. */
.rarity-F{
  border-color:#91a4b8!important;
  color:#d9e3ed!important;
}
.rarity-D{
  border-color:#ff6848!important;
  color:#ff9c7d!important;
}
.rarity-S{
  border-color:#ffe052!important;
  color:#fff18a!important;
}
.item-tile.rarity-F,
.tray-item.rarity-F,
.placed-item.rarity-F,
.fusion-material.rarity-F,
.fusion-result-pop.rarity-F{
  --item-grade-surface:
    radial-gradient(circle at 18% 12%,rgba(184,205,224,.27),transparent 36%),
    linear-gradient(145deg,#2b3846,#111820 74%)!important;
}
.item-tile.rarity-D,
.tray-item.rarity-D,
.placed-item.rarity-D,
.fusion-material.rarity-D,
.fusion-result-pop.rarity-D{
  --item-grade-surface:
    radial-gradient(circle at 18% 12%,rgba(255,104,72,.3),transparent 36%),
    linear-gradient(145deg,#4a2118,#211313 74%)!important;
}
.item-tile.rarity-S,
.tray-item.rarity-S,
.placed-item.rarity-S,
.fusion-material.rarity-S,
.fusion-result-pop.rarity-S{
  --item-grade-surface:
    radial-gradient(circle at 18% 12%,rgba(255,230,88,.34),transparent 35%),
    linear-gradient(145deg,#51410d,#201b0b 73%)!important;
}
.item-tile.rarity-F,
.tray-item.rarity-F,
.placed-item.rarity-F,
.fusion-material.rarity-F,
.fusion-result-pop.rarity-F{
  color:#d9e3ed!important;
  background:var(--item-grade-surface)!important;
  box-shadow:inset 0 0 12px rgba(164,190,214,.2)!important;
}
.item-tile.rarity-D,
.tray-item.rarity-D,
.placed-item.rarity-D,
.fusion-material.rarity-D,
.fusion-result-pop.rarity-D{
  color:#ff9c7d!important;
  background:var(--item-grade-surface)!important;
  box-shadow:inset 0 0 12px rgba(255,88,52,.24)!important;
}
.item-tile.rarity-S,
.tray-item.rarity-S,
.placed-item.rarity-S,
.fusion-material.rarity-S,
.fusion-result-pop.rarity-S{
  color:#fff18a!important;
  background:var(--item-grade-surface)!important;
  box-shadow:inset 0 0 13px rgba(255,224,82,.25)!important;
}
.capsule.rarity-F{
  border-color:#91a4b8!important;
  color:#e6edf4!important;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.32) 0 7%,transparent 8%),
    radial-gradient(circle at 50% 43%,#435467 0 35%,#202b37 38% 59%,#0d131a 62% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(5,10,17,.9),inset 0 0 10px rgba(190,213,232,.28),0 0 8px rgba(157,183,205,.24)!important;
}
.capsule.rarity-D{
  border-color:#ff6848!important;
  color:#ffb094!important;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,228,206,.34) 0 7%,transparent 8%),
    radial-gradient(circle at 50% 43%,#773323 0 35%,#3a1b17 38% 59%,#190d0d 62% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(18,7,6,.92),inset 0 0 10px rgba(255,98,58,.34),0 0 9px rgba(255,87,49,.3)!important;
}
.capsule.rarity-S{
  border-color:#ffe052!important;
  color:#fff5a4!important;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,255,224,.42) 0 7%,transparent 8%),
    radial-gradient(circle at 50% 43%,#806b18 0 35%,#40340d 38% 59%,#181405 62% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(18,14,3,.92),inset 0 0 11px rgba(255,228,68,.38),0 0 10px rgba(255,218,53,.34)!important;
}
#capsulesPanel .inline-reveal-item.rarity-F .reveal-grade{color:#d9e3ed!important}
#capsulesPanel .inline-reveal-item.rarity-D .reveal-grade{color:#ff8d6b!important}
#capsulesPanel .inline-reveal-item.rarity-S .reveal-grade{color:#ffe052!important}
.menu-sub-panel .menu-panel-head::after,
#menuSettingsPanel .menu-panel-head::after{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  width:62px!important;
  height:30px!important;
}

/* The four wallet pictures use very different source canvases. Give them one
   common optical box and reserve enough width for the full Korean labels. */
#menuStorePanel .store-inventory{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
}
#menuStorePanel .store-inventory>div{
  grid-template-columns:29px minmax(0,1fr)!important;
  grid-template-rows:21px 21px!important;
  column-gap:2px!important;
  padding:7px 4px!important;
}
#menuStorePanel .store-inventory>div::before{
  left:4px!important;
  top:50%!important;
  width:29px!important;
  height:29px!important;
  transform:translateY(-50%)!important;
  border-radius:8px!important;
}
#menuStorePanel .store-inventory img{
  top:auto!important;
  width:21px!important;
  height:21px!important;
  justify-self:center!important;
  align-self:center!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.78))!important;
}
#menuStorePanel .store-inventory>div:nth-child(4) img{
  width:24px!important;
  height:19px!important;
  transform:none!important;
}
#menuStorePanel .store-inventory span{
  padding:0 0 1px!important;
  overflow:visible!important;
  color:#d9f1fb!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:-.08em!important;
  line-height:1!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
#menuStorePanel .store-inventory>div:nth-child(3) span,
#menuStorePanel .store-inventory>div:nth-child(4) span{
  font-size:6.6px!important;
}
#menuStorePanel .store-inventory strong{
  padding:1px 0 0!important;
  font-size:12px!important;
  line-height:1!important;
}

/* SSS keeps a cyan-gold identity, but the glow now stays on the frame instead
   of bleaching the locked item name and unlock condition. */
#menuRecipePanel .unlock-pill.rarity-SSS,
#menuRecipePanel button.unlock-pill.rarity-SSS{
  opacity:.88!important;
  border-color:rgba(104,220,235,.72)!important;
  color:#eaf7fb!important;
  text-shadow:0 1px 2px rgba(0,0,0,.94)!important;
  background:
    linear-gradient(90deg,rgba(33,117,139,.13),transparent 38%),
    linear-gradient(180deg,rgba(15,37,49,.98),rgba(5,17,26,.99))!important;
  box-shadow:
    0 0 0 1px rgba(93,211,225,.24),
    0 0 7px rgba(58,201,222,.2),
    inset 0 1px 0 rgba(255,226,138,.12),
    inset 2px 0 0 rgba(88,213,226,.42)!important;
}
#menuRecipePanel .unlock-pill.rarity-SSS *,
#menuRecipePanel button.unlock-pill.rarity-SSS *{
  text-shadow:0 1px 2px rgba(0,0,0,.96)!important;
}
#menuRecipePanel .unlock-pill.rarity-SSS .unlock-pill-copy b{
  color:#dcecf1!important;
}
#menuRecipePanel .unlock-pill.rarity-SSS .unlock-pill-copy small{
  color:#8fb0bd!important;
}
#menuRecipePanel button.unlock-pill.rarity-SSS.discovered{
  opacity:1!important;
  border-color:rgba(126,231,239,.82)!important;
  box-shadow:
    0 0 0 1px rgba(255,214,109,.25),
    0 0 8px rgba(65,207,224,.24),
    inset 0 1px 0 rgba(255,229,153,.18),
    inset 2px 0 0 rgba(102,229,238,.58)!important;
}

/* Authored 28-day attendance calendar v3: one compact 7-day row per week. */
#menuAttendancePanel.active{
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:min(720px,calc(100dvh - 12px))!important;
  grid-template-rows:52px auto 28px!important;
  align-content:start!important;
  gap:4px!important;
  padding:8px 7px 10px!important;
  border-width:10px!important;
  border-image-width:10px!important;
  overflow:hidden!important;
}
#menuAttendancePanel .menu-panel-head{
  min-height:52px!important;
  margin:-2px -3px 0!important;
}
#menuAttendancePanel .attendance-board-shell{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:340px!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:2/3!important;
  justify-self:center!important;
  display:grid!important;
  grid-template-rows:76px 36px minmax(0,1fr)!important;
  gap:5px!important;
  padding:33px 20px 39px!important;
  overflow:hidden!important;
  border:0!important;
  background:url("assets/generated/attendance_board_v3_1790163000000/attendance-board-28-v3.png") center/100% 100% no-repeat!important;
  filter:drop-shadow(0 11px 15px rgba(0,0,0,.64))!important;
}
#menuAttendancePanel .attendance-summary{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:minmax(0,1fr) 6px!important;
  align-items:center!important;
  gap:4px 8px!important;
  margin:0!important;
  padding:8px 12px 6px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#eaf6ff!important;
  text-align:left!important;
  box-shadow:none!important;
}
#menuAttendancePanel .attendance-summary-copy{
  min-width:0;
  display:grid;
  align-content:center;
  gap:1px;
}
#menuAttendancePanel .attendance-summary-copy small{
  color:#83def3;
  font-size:7px;
  font-weight:950;
  letter-spacing:.04em;
}
#menuAttendancePanel .attendance-summary-copy strong{
  overflow:hidden;
  color:#fff0ad;
  font-size:14px;
  font-weight:1000;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 2px 3px #000,0 0 9px rgba(225,181,69,.22);
}
#menuAttendancePanel .attendance-summary-copy span{
  overflow:hidden;
  color:#b6cbe0;
  font-size:7px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#menuAttendancePanel .attendance-summary-count{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:2px;
  color:#b8c9df;
  text-shadow:0 2px 3px #000;
}
#menuAttendancePanel .attendance-summary-count b{
  color:#fff2a9;
  font-size:22px;
  font-weight:1000;
  line-height:1;
}
#menuAttendancePanel .attendance-summary-count span{
  font-size:9px;
  font-weight:950;
}
#menuAttendancePanel .attendance-progress-track{
  grid-column:1/-1;
  height:6px;
  overflow:hidden;
  border:1px solid rgba(166,188,219,.25);
  border-radius:6px;
  background:rgba(1,6,16,.78);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
}
#menuAttendancePanel .attendance-progress-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#6d35a8,#bf63e4 58%,#ffe177);
  box-shadow:0 0 8px rgba(205,92,239,.62);
}
#menuAttendancePanel .attendance-claim-button{
  box-sizing:border-box!important;
  width:84%!important;
  min-height:32px!important;
  height:32px!important;
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0!important;
  padding:3px 18px!important;
  border:0!important;
  border-radius:0!important;
  background:url("assets/generated/ui_controls_purpose_1788505000000/button-wide-primary.png") center/100% 100% no-repeat!important;
  color:#fff0b1!important;
  text-shadow:0 2px 3px #000!important;
  box-shadow:none!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
#menuAttendancePanel .attendance-claim-button img{
  width:23px;
  height:23px;
  flex:0 0 23px;
  object-fit:contain;
  filter:drop-shadow(0 1px 2px #000);
}
#menuAttendancePanel .attendance-claim-button span{
  min-width:0;
  display:grid;
  justify-items:start;
  gap:0;
}
#menuAttendancePanel .attendance-claim-button small{
  color:#70dff3;
  font-size:6px;
  font-weight:950;
  line-height:1;
}
#menuAttendancePanel .attendance-claim-button strong{
  color:#fff0b1;
  font-size:10px;
  font-weight:1000;
  line-height:1.12;
  white-space:nowrap;
}
#menuAttendancePanel .attendance-claim-button:disabled{
  opacity:.72!important;
  filter:grayscale(.55) drop-shadow(0 3px 5px rgba(0,0,0,.5))!important;
}
#menuAttendancePanel .attendance-grid{
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  grid-template-rows:repeat(4,minmax(0,1fr))!important;
  gap:3px!important;
  padding:0!important;
  overflow:hidden!important;
}
#menuAttendancePanel .attendance-day{
  position:relative!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:12px minmax(0,1fr) 20px!important;
  place-content:stretch!important;
  place-items:center!important;
  gap:0!important;
  padding:4px 2px 5px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:1px!important;
  background:linear-gradient(180deg,rgba(19,15,34,.08),rgba(3,8,18,.2))!important;
  box-shadow:none!important;
  color:#dce8f3!important;
  text-align:center!important;
}
#menuAttendancePanel .attendance-day>b{
  align-self:start;
  display:flex!important;
  align-items:baseline;
  justify-content:center;
  gap:1px;
  margin:0!important;
  color:#c9d9e7!important;
  line-height:1!important;
  text-shadow:0 1px 2px #000;
}
#menuAttendancePanel .attendance-day>b strong{
  color:#fff0ad;
  font-size:8px;
  font-weight:1000;
}
#menuAttendancePanel .attendance-day>b span{
  margin:0!important;
  color:#a9bed1;
  font-size:5px!important;
  font-weight:900;
}
#menuAttendancePanel .attendance-day>img{
  width:23px;
  height:23px;
  max-width:82%;
  object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.86));
}
#menuAttendancePanel .attendance-day[data-reward-type="common"]>img{
  border-radius:50%;
}
#menuAttendancePanel .attendance-reward-copy{
  min-width:0;
  align-self:end;
  display:grid!important;
  justify-items:center;
  gap:0;
  margin:0!important;
  line-height:1!important;
}
#menuAttendancePanel .attendance-reward-copy strong{
  max-width:100%;
  overflow:hidden;
  color:#dbe9f4;
  font-size:6px;
  font-weight:950;
  text-overflow:clip;
  white-space:nowrap;
}
#menuAttendancePanel .attendance-reward-copy small{
  color:#fff0a7;
  font-size:7px;
  font-weight:1000;
  line-height:1.05;
}
#menuAttendancePanel .attendance-day>em{
  position:absolute!important;
  inset:3px 3px auto auto!important;
  width:12px;
  height:12px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#2a825f;
  color:#eaffd9!important;
  font-size:8px!important;
  font-style:normal;
  font-weight:1000;
  line-height:1;
  box-shadow:0 0 5px rgba(71,235,169,.48);
}
#menuAttendancePanel .attendance-day>em:empty{display:none;}
#menuAttendancePanel .attendance-day.claimed{
  opacity:.64!important;
  background:linear-gradient(180deg,rgba(18,70,60,.18),rgba(2,11,16,.44))!important;
}
#menuAttendancePanel .attendance-day.claimed>img{
  filter:grayscale(.35) brightness(.75) drop-shadow(0 2px 2px rgba(0,0,0,.86));
}
#menuAttendancePanel .attendance-day.today{
  opacity:1!important;
  background:radial-gradient(circle at 50% 45%,rgba(255,213,88,.28),rgba(88,38,111,.18) 52%,rgba(3,8,18,.1))!important;
  box-shadow:inset 0 0 0 2px rgba(255,220,103,.88),0 0 10px rgba(219,126,255,.38)!important;
  animation:attendanceTodayPulse 1800ms ease-in-out infinite;
}
#menuAttendancePanel .attendance-day.milestone .attendance-reward-copy strong,
#menuAttendancePanel .attendance-day.milestone>b strong{
  color:#ffe18a!important;
}
#menuAttendancePanel .attendance-day.milestone>img{
  transform:scale(1.06);
}
#menuAttendancePanel .attendance-note{
  align-self:center!important;
  margin:0 9px!important;
  overflow:hidden;
  color:#91a9c0!important;
  font-size:7px!important;
  font-weight:800;
  line-height:1.25!important;
  text-align:center;
  white-space:nowrap;
  text-overflow:ellipsis;
}
@keyframes attendanceTodayPulse{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.14);}
}
@media (max-width:370px){
  #menuAttendancePanel .attendance-board-shell{
    padding:31px 18px 36px!important;
    grid-template-rows:72px 34px minmax(0,1fr)!important;
  }
  #menuAttendancePanel .attendance-summary{padding-inline:9px!important;}
  #menuAttendancePanel .attendance-summary-copy strong{font-size:13px;}
  #menuAttendancePanel .attendance-summary-count b{font-size:20px;}
  #menuAttendancePanel .attendance-day>img{width:21px;height:21px;}
  #menuAttendancePanel .attendance-reward-copy strong{font-size:5.5px;}
  #menuAttendancePanel .attendance-reward-copy small{font-size:6.5px;}
}

/* Attendance header / claim alignment v4 1790164000000.
   Keep the title on the true panel centre while the back control sits against
   the left inner frame.  The claim row is a single centred icon + label. */
#menuAttendancePanel .menu-panel-head{
  position:relative!important;
  grid-template-columns:82px minmax(0,1fr) 82px!important;
  padding:4px 3px!important;
}
#menuAttendancePanel .menu-panel-head>strong{
  position:static!important;
  inset:auto!important;
  grid-column:2!important;
  grid-row:1!important;
  justify-self:stretch!important;
  align-self:center!important;
  width:auto!important;
  max-width:none!important;
  transform:none!important;
  margin:0!important;
  text-align:center!important;
  white-space:nowrap!important;
}
#menuAttendancePanel .menu-panel-head>.menu-back-button{
  position:relative!important;
  inset:auto!important;
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  width:78px!important;
  min-width:78px!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 10px 1px!important;
  transform:none!important;
  background:url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center/100% 100% no-repeat!important;
  color:#e8f6ff!important;
  font-size:10.5px!important;
  font-weight:1000!important;
  line-height:34px!important;
  text-align:center!important;
  text-shadow:0 2px 3px #000!important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))!important;
}
#menuAttendancePanel .menu-panel-head::after{
  grid-column:3!important;
  width:78px!important;
  height:34px!important;
}
#menuAttendancePanel .attendance-claim-button{
  gap:6px!important;
  padding:3px 16px!important;
  text-align:center!important;
}
#menuAttendancePanel .attendance-claim-button img{
  width:21px!important;
  height:21px!important;
  flex:0 0 21px!important;
}
#menuAttendancePanel .attendance-claim-button>strong{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  color:#fff0b1!important;
  font-size:10.5px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
}

/* Attendance artwork registration v5 1790165000000.
   Every live element is registered to the matching safe area in the authored
   1024 x 1536 board instead of sharing one approximate padding box. */
#menuAttendancePanel .attendance-board-shell{
  position:relative!important;
  display:block!important;
  padding:0!important;
}
#menuAttendancePanel .attendance-summary{
  position:absolute!important;
  left:11.7%!important;
  right:11.7%!important;
  top:5.9%!important;
  width:auto!important;
  height:15.1%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 46px!important;
  grid-template-rows:25px 17px 6px!important;
  align-content:center!important;
  align-items:center!important;
  column-gap:8px!important;
  row-gap:2px!important;
  margin:0!important;
  padding:7px 15px 6px!important;
  overflow:hidden!important;
}
#menuAttendancePanel .attendance-summary-title{
  min-width:0!important;
  display:flex!important;
  align-items:baseline!important;
  gap:5px!important;
  overflow:hidden!important;
  line-height:1!important;
}
#menuAttendancePanel .attendance-summary-title small{
  flex:0 0 auto!important;
  color:#77d8ee!important;
  font-size:7px!important;
  font-weight:950!important;
  letter-spacing:.03em!important;
}
#menuAttendancePanel .attendance-summary-title strong{
  min-width:0!important;
  overflow:hidden!important;
  color:#fff0ad!important;
  font-size:13px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-shadow:0 2px 3px #000,0 0 8px rgba(225,181,69,.2)!important;
}
#menuAttendancePanel .attendance-summary-count{
  grid-column:2!important;
  grid-row:1/3!important;
  align-self:center!important;
  justify-self:end!important;
  min-width:42px!important;
  justify-content:center!important;
}
#menuAttendancePanel .attendance-summary-count b{
  font-size:21px!important;
}
#menuAttendancePanel .attendance-summary-count span{
  font-size:8px!important;
}
#menuAttendancePanel .attendance-summary-next{
  grid-column:1!important;
  grid-row:2!important;
  min-width:0!important;
  overflow:hidden!important;
  color:#b7cce0!important;
  font-size:7px!important;
  font-weight:850!important;
  line-height:1!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#menuAttendancePanel .attendance-progress-track{
  grid-column:1/-1!important;
  grid-row:3!important;
  align-self:end!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:5px!important;
}
#menuAttendancePanel .attendance-claim-button{
  position:absolute!important;
  left:17.2%!important;
  right:17.2%!important;
  top:23.7%!important;
  width:65.6%!important;
  height:6.4%!important;
  min-height:0!important;
  max-height:33px!important;
  gap:5px!important;
  padding:2px 14px!important;
  overflow:hidden!important;
}
#menuAttendancePanel .attendance-claim-button img{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  object-fit:contain!important;
  filter:brightness(1.22) drop-shadow(0 0 3px rgba(197,151,255,.64)) drop-shadow(0 1px 2px #000)!important;
}
#menuAttendancePanel .attendance-claim-button>strong{
  font-size:10px!important;
}
#menuAttendancePanel .attendance-grid{
  position:absolute!important;
  left:5.9%!important;
  right:5.9%!important;
  top:31.55%!important;
  bottom:9.65%!important;
  width:auto!important;
  height:auto!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  grid-template-rows:repeat(4,minmax(0,1fr))!important;
  column-gap:.9%!important;
  row-gap:1.25%!important;
  padding:0!important;
}
#menuAttendancePanel .attendance-day{
  grid-template-rows:9px minmax(0,1fr) 14px!important;
  padding:7px 4px 8px!important;
  overflow:hidden!important;
  background:transparent!important;
}
#menuAttendancePanel .attendance-day>b{
  align-self:center!important;
}
#menuAttendancePanel .attendance-day>b strong{
  font-size:7px!important;
}
#menuAttendancePanel .attendance-day>b span{
  font-size:4.5px!important;
}
#menuAttendancePanel .attendance-day>img{
  width:20px!important;
  height:20px!important;
  max-width:74%!important;
  align-self:center!important;
}
#menuAttendancePanel .attendance-reward-copy{
  width:100%!important;
  align-self:center!important;
  overflow:hidden!important;
}
#menuAttendancePanel .attendance-reward-copy strong{
  font-size:5.2px!important;
  line-height:1!important;
}
#menuAttendancePanel .attendance-reward-copy small{
  font-size:6px!important;
  line-height:1!important;
}
#menuAttendancePanel .attendance-day>em{
  inset:6px 5px auto auto!important;
  width:9px!important;
  height:9px!important;
  font-size:6px!important;
}
#menuAttendancePanel .attendance-day.today{
  box-shadow:inset 0 0 0 1px rgba(255,220,103,.88),0 0 7px rgba(219,126,255,.32)!important;
}
@media (max-width:370px){
  #menuAttendancePanel .attendance-board-shell{
    padding:0!important;
  }
  #menuAttendancePanel .attendance-summary{
    padding-inline:13px!important;
  }
  #menuAttendancePanel .attendance-day{
    padding-inline:3px!important;
  }
}

/* 2026-08-12 item detail rebuild. The art is a single portrait frame with
   dedicated identity, description, stats, relations, and action chambers. */
.item-info-panel .item-info-card,
.item-info-panel.mythic-item .item-info-card{
  position:relative!important;
  box-sizing:border-box!important;
  width:min(350px,calc(100vw - 10px))!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 10px)!important;
  aspect-ratio:1047/1503!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/tutorial_mobile_ui_1790256000000/item-detail-panel-compact-transparent.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
}
.item-info-card .item-info-head{
  position:absolute!important;
  left:10.2%!important;
  right:10.2%!important;
  top:4.4%!important;
  width:auto!important;
  height:11.4%!important;
  min-height:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:39px minmax(0,1fr) 28px!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
  padding:5px 2px!important;
  overflow:hidden!important;
  background:none!important;
}
.item-info-card .item-info-icon{
  width:36px!important;
  height:36px!important;
  margin:0!important;
  object-fit:contain!important;
}
.item-info-card .item-info-head>div{
  min-width:0!important;
  overflow:hidden!important;
}
.item-info-card .item-info-head .label{
  display:block!important;
  margin:0 0 3px!important;
  color:#9beaff!important;
  font-size:7.8px!important;
  line-height:1.1!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
.item-info-card .item-info-head strong{
  display:block!important;
  color:#fff0af!important;
  font-size:14.5px!important;
  line-height:1.05!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
.item-info-card .item-info-head .icon-close-button{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  box-sizing:border-box!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(111,220,255,.7)!important;
  border-radius:50%!important;
  background:rgba(5,20,32,.86)!important;
  color:#dff8ff!important;
  font-size:18px!important;
  line-height:25px!important;
  text-align:center!important;
  box-shadow:inset 0 0 8px rgba(64,191,239,.22),0 0 8px rgba(64,191,239,.18)!important;
}
.item-info-card>#itemInfoText{
  position:absolute!important;
  left:11.7%!important;
  right:11.7%!important;
  top:17.4%!important;
  box-sizing:border-box!important;
  display:block!important;
  width:auto!important;
  height:12.8%!important;
  min-height:0!important;
  margin:0!important;
  padding:7px 10px!important;
  overflow-y:hidden!important;
  overflow-x:hidden!important;
  color:#d7e8ef!important;
  font-size:8.7px!important;
  font-weight:700!important;
  line-height:1.22!important;
  letter-spacing:-.02em!important;
  text-align:left!important;
  text-overflow:clip!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
  background:none!important;
}
.item-info-card .item-info-stats{
  position:absolute!important;
  left:11.7%!important;
  right:11.7%!important;
  top:32.4%!important;
  box-sizing:border-box!important;
  width:auto!important;
  height:21.6%!important;
  min-height:0!important;
  margin:0!important;
  padding:3px 4px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:minmax(0,1fr)!important;
  align-content:stretch!important;
  gap:3px 7px!important;
  overflow-y:hidden!important;
  overflow-x:hidden!important;
  background:none!important;
}
.item-info-card .item-info-stats>span,
.item-info-card .item-info-stats>span:nth-child(2),
.item-info-card .item-info-stats>span:nth-child(3){
  box-sizing:border-box!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:4px!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  gap:2px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
.item-info-card .item-info-stats>span small{
  max-width:100%!important;
  color:#a7cbd9!important;
  font-size:7.5px!important;
  line-height:1.05!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.item-info-card .item-info-stats>span strong,
.item-info-card .item-info-stats>span:nth-child(n+4) strong{
  max-width:100%!important;
  color:#fff0ac!important;
  font-size:11px!important;
  line-height:1.08!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
}
.item-info-card .item-info-stats>.active-effect-chip{
  grid-column:auto!important;
  min-height:0!important;
  padding:4px!important;
  border:0!important;
  background:none!important;
}
.item-info-card .item-info-stats>.compact-overflow strong{
  font-size:7.5px!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
}
.item-info-card .item-info-stats>.item-secret-recipe-hint{
  display:none!important;
}
.item-info-card .item-info-relations{
  position:absolute!important;
  left:11.7%!important;
  right:11.7%!important;
  top:56.1%!important;
  box-sizing:border-box!important;
  width:auto!important;
  height:24.7%!important;
  min-height:0!important;
  margin:0!important;
  padding:4px 8px!important;
  display:grid!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:minmax(0,1fr)!important;
  align-content:stretch!important;
  gap:5px!important;
  overflow-y:hidden!important;
  overflow-x:hidden!important;
  background:none!important;
}
.item-info-card .item-info-relations[hidden]{display:none!important}
.item-info-card .item-relation-row{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:5px 6px!important;
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
.item-info-card .item-relation-row:last-child{border-bottom:0!important}
.item-info-card .item-relation-mark{
  box-sizing:border-box!important;
  width:26px!important;
  height:26px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(98,210,247,.58)!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(29,107,140,.4),rgba(4,13,22,.9))!important;
  color:#8feaff!important;
  font-size:12px!important;
  font-style:normal!important;
}
.item-info-card .item-relation-row.recipe .item-relation-mark{
  border-color:rgba(255,210,91,.62)!important;
  color:#ffe27e!important;
}
.item-info-card .item-relation-row>div{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:baseline!important;
  gap:1px 5px!important;
  overflow:hidden!important;
}
.item-info-card .item-relation-row small{
  color:#8fd8f0!important;
  font-size:6.6px!important;
  font-weight:900!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
.item-info-card .item-relation-row strong{
  min-width:0!important;
  color:#fff0aa!important;
  font-size:8px!important;
  line-height:1.05!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
.item-info-card .item-relation-row em{
  grid-column:1/-1!important;
  min-width:0!important;
  overflow:hidden!important;
  color:#b9ccd5!important;
  font-size:6.8px!important;
  font-style:normal!important;
  line-height:1.15!important;
  white-space:normal!important;
  text-overflow:clip!important;
  overflow-wrap:break-word!important;
}
.item-info-card .item-info-actions{
  position:absolute!important;
  left:11.2%!important;
  right:11.2%!important;
  top:84.1%!important;
  box-sizing:border-box!important;
  width:auto!important;
  height:8.1%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:0!important;
  overflow:hidden!important;
  background:none!important;
}
.item-info-card .item-info-actions .mini-button,
.item-info-card .item-info-actions #itemPlaceButton,
.item-info-card .item-info-actions #itemRemoveButton,
.item-info-card .item-info-actions #itemSellButton{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#e9f4f8!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1!important;
  text-shadow:0 1px 2px #000!important;
  box-shadow:none!important;
  filter:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
}
.item-info-card .item-info-actions button>strong{
  color:inherit!important;
  font-size:10.5px!important;
  line-height:1!important;
}
.item-info-card .item-info-actions button>small{
  color:#8faab7!important;
  font-size:7px!important;
  font-weight:800!important;
  line-height:1!important;
}
.item-info-card .item-info-actions #itemPlaceButton:not(:disabled){color:#fff0aa!important}
.item-info-card .item-info-actions #itemRemoveButton:not(:disabled){color:#e8f7ff!important}
.item-info-card .item-info-actions #itemSellButton{color:#ffe0ad!important}
.item-info-card .item-info-actions #itemSellButton>small{color:#ffb8a8!important}
.item-info-card .item-info-actions button:disabled{
  opacity:.42!important;
  color:#83919a!important;
  cursor:default!important;
  filter:grayscale(.7)!important;
}
.item-info-card .item-info-actions button:disabled>small{color:#66737c!important}
.item-info-card .item-info-actions [hidden]{display:none!important}
.item-info-card .item-info-actions #itemPlaceButton{grid-column:1!important}
.item-info-card .item-info-actions #itemRemoveButton{grid-column:2!important}
.item-info-card .item-info-actions #itemSellButton{grid-column:3!important}

@media (max-height:700px){
  .item-info-panel .item-info-card,
  .item-info-panel.mythic-item .item-info-card{width:min(306px,calc(100vw - 10px))!important}
  .item-info-card .item-info-head strong{font-size:14px!important}
  .item-info-card>#itemInfoText{font-size:8px!important}
}
.item-info-panel{padding:0!important}
.item-info-card .item-relation-row strong{font-size:8.5px!important}
.item-info-card .item-relation-row em{font-size:7.2px!important}

/* Capture-driven alignment fixes v6 1790166000000. */
.run-prep-card .run-prep-actions{
  left:8.8%!important;
  right:8.8%!important;
  top:84.45%!important;
  height:8.35%!important;
  grid-template-columns:1fr 1.32fr!important;
  gap:4.7%!important;
  transform:none!important;
}
.run-prep-card .run-prep-actions .mini-button,
.run-prep-card .run-prep-actions .mini-button.accent{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 14px 2px!important;
  border:0!important;
  background:transparent url("assets/generated/popup_buttons_crisp_1790127000000/button-blank-cropped.png") center/100% 100% no-repeat!important;
  font-size:11px!important;
  line-height:1!important;
  text-align:center!important;
  box-shadow:none!important;
  filter:none!important;
}
.run-prep-card .run-prep-actions .mini-button.accent{
  color:#fff0ae!important;
  font-size:13px!important;
}
.reward-panel:not(.boss-reward) .reward-modal-card .reward-card:not(.reward-ad-reroll){
  grid-template-rows:54px auto!important;
  align-content:center!important;
  justify-content:center!important;
  padding:8px 10px!important;
}
.reward-panel:not(.boss-reward) .reward-card .reward-icon{
  align-self:center!important;
  width:50px!important;
  height:50px!important;
}
.reward-panel:not(.boss-reward) .reward-card .reward-copy{
  align-self:center!important;
  align-content:center!important;
  justify-items:center!important;
}
#menuAttendancePanel .attendance-board-shell{
  background-image:url("assets/generated/attendance_board_v4_1790166000000/attendance-board-base-v4.png")!important;
}
#menuAttendancePanel .attendance-grid{
  left:6.4%!important;
  right:6.4%!important;
  top:31.25%!important;
  bottom:10.4%!important;
  column-gap:1.05%!important;
  row-gap:1.15%!important;
}
#menuAttendancePanel .attendance-day{
  isolation:isolate!important;
  grid-template-rows:9px minmax(0,1fr) 14px!important;
  padding:6px 3px 7px!important;
  background:transparent!important;
}
#menuAttendancePanel .attendance-day::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  background:url("assets/generated/attendance_board_v4_1790166000000/attendance-cell-frame-helper-v4.png") center/100% 100% no-repeat!important;
  filter:brightness(1.12) saturate(1.08)!important;
  pointer-events:none!important;
}
#menuAttendancePanel .attendance-day>*{
  position:relative!important;
  z-index:1!important;
}
#menuAttendancePanel .attendance-day>img{
  width:20px!important;
  height:20px!important;
  max-width:72%!important;
}
#menuAttendancePanel .attendance-day>b strong{font-size:7.2px!important}
#menuAttendancePanel .attendance-reward-copy strong{font-size:5.6px!important}
#menuAttendancePanel .attendance-reward-copy small{font-size:6.2px!important}
#menuAttendancePanel .attendance-day>em{inset:7px 6px auto auto!important}
#menuAttendancePanel .attendance-claim-button{padding-inline:42px!important}
#menuAttendancePanel .attendance-claim-button img{
  position:absolute!important;
  left:18px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}
#menuAttendancePanel .attendance-claim-button>strong{
  width:100%!important;
  text-align:center!important;
}

/* 2026-08-12 acquired-item tray alignment. The source art is 1060x484, so
   preserve that ratio and place every live element on its painted chamber. */
#capsulesPanel .pull-inline-panel,
#capsulesPanel .pull-inline-panel.active{
  position:relative!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:1060/484!important;
  flex:0 0 auto!important;
  margin:4px 0 0!important;
  padding:0!important;
  overflow:hidden!important;
}
#capsulesPanel .pull-inline-panel .panel-head.compact{
  position:absolute!important;
  left:6.5%!important;
  right:4.2%!important;
  top:3.2%!important;
  width:auto!important;
  height:23.5%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 1%!important;
  display:flex!important;
  align-items:center!important;
}
#capsulesPanel .pull-inline-panel .icon-close-button{
  position:absolute!important;
  right:0!important;
  top:0!important;
  width:10.5%!important;
  min-width:30px!important;
  max-width:36px!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1!important;
}
#capsulesPanel .pull-inline-list{
  position:absolute!important;
  left:7.8%!important;
  right:4.9%!important;
  top:30.8%!important;
  box-sizing:border-box!important;
  width:auto!important;
  height:57.9%!important;
  min-height:0!important;
  max-height:none!important;
  padding:0 5.5% 0 0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:unset!important;
  align-content:stretch!important;
  gap:2.7% 1.7%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
#capsulesPanel .inline-reveal-item,
#capsulesPanel .inline-reveal-item:only-child,
#capsulesPanel .inline-reveal-placeholder{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
}
#capsulesPanel .inline-reveal-placeholder{
  display:grid!important;
  place-items:center!important;
  place-content:center!important;
  text-align:center!important;
}
#capsulesPanel .inline-reveal-placeholder small{
  display:block!important;
  width:100%!important;
  color:#718797!important;
  font-size:7.6px!important;
  line-height:1!important;
  text-align:center!important;
}

/* 2026-08-12: register every board-clear reward to one fixed three-line bay.
   Varying effect counts must never move the following card downward. */
.board-passive-choice-card>.board-clear-supply-preview{
  left:13.6%!important;
  right:13.6%!important;
  top:31.45%!important;
  height:12.65%!important;
  padding:2px 5.5% 2px 4.6%!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  overflow:hidden!important;
}
.board-passive-choice-card>.board-clear-supply-preview img{
  place-self:center!important;
  width:45px!important;
  height:45px!important;
  max-width:45px!important;
  max-height:45px!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span{
  height:46px!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:10px 16px 18px!important;
  align-content:center!important;
  gap:1px!important;
  overflow:hidden!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>b,
.board-passive-choice-card>.board-clear-supply-preview>span>strong,
.board-passive-choice-card>.board-clear-supply-preview>span>small{
  min-width:0!important;
  margin:0!important;
  align-self:center!important;
  overflow:hidden!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>strong{
  font-size:13.6px!important;
  line-height:16px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>small{
  display:-webkit-box!important;
  font-size:8.1px!important;
  line-height:9px!important;
  white-space:normal!important;
  text-overflow:clip!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}
.board-passive-choice-card>.board-passive-choice-list{
  left:8.7%!important;
  right:8.7%!important;
  top:45.45%!important;
  bottom:7.65%!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  gap:.95%!important;
  overflow:hidden!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice{
  padding:2px 7.6% 2px 5.1%!important;
  grid-template-columns:61px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  overflow:hidden!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice img{
  place-self:center!important;
  width:45px!important;
  height:45px!important;
  max-width:45px!important;
  max-height:45px!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice>span{
  width:100%!important;
  height:48px!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:10px 16px 20px!important;
  align-content:center!important;
  gap:1px!important;
  overflow:hidden!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice b,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice strong,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice em{
  min-width:0!important;
  margin:0!important;
  align-self:center!important;
  overflow:hidden!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice b{
  font-size:8px!important;
  line-height:10px!important;
  white-space:nowrap!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice strong{
  font-size:13.6px!important;
  line-height:16px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice em{
  display:-webkit-box!important;
  font-size:8.5px!important;
  line-height:10px!important;
  white-space:normal!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

/* One authored slot frame for both empty and filled acquisition states. */
#capsulesPanel .pull-inline-list{
  left:6.8%!important;
  right:5.8%!important;
  top:29.6%!important;
  height:60.2%!important;
  padding:0!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:2.4% 1.7%!important;
  overflow:hidden!important;
  scrollbar-width:none!important;
}
#capsulesPanel .pull-inline-list::-webkit-scrollbar{display:none!important}
#capsulesPanel .inline-reveal-item,
#capsulesPanel .inline-reveal-item:only-child,
#capsulesPanel .inline-reveal-placeholder{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  padding:3px 5px 3px 8px!important;
  border:0!important;
  border-radius:0!important;
  /* The tray bitmap already contains all four chambers. A second slot bitmap
     produced the nested, squeezed frame that was most obvious with one item. */
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#capsulesPanel .inline-reveal-item{
  grid-template-columns:minmax(0,1fr) 39px!important;
  gap:2px!important;
}
#capsulesPanel .inline-reveal-main{
  grid-template-columns:24px minmax(0,1fr)!important;
  gap:3px!important;
  padding-left:2px!important;
}
#capsulesPanel .inline-item-icon{
  width:23px!important;
  height:23px!important;
  max-width:23px!important;
  max-height:23px!important;
}
#capsulesPanel .inline-reveal-copy,
#capsulesPanel .inline-reveal-copy .reveal-grade{
  font-size:8.2px!important;
  line-height:1.08!important;
}
#capsulesPanel .inline-reveal-item .reveal-card-actions{
  width:39px!important;
  display:grid!important;
  place-items:center!important;
}
#capsulesPanel .inline-reveal-item [data-action="place"]{
  width:37px!important;
  height:27px!important;
  min-height:27px!important;
  padding:0 3px!important;
  font-size:8.5px!important;
}
#capsulesPanel .inline-reveal-placeholder{
  display:grid!important;
  place-items:center!important;
  padding-left:12%!important;
  padding-right:12%!important;
}
#capsulesPanel .inline-reveal-placeholder small{
  width:auto!important;
  color:#718797!important;
  font-size:7.4px!important;
  line-height:1!important;
  text-shadow:0 1px 2px #000!important;
}

/* Authored combat-state badges replace the old CSS-painted entrance/freeze plaques. */
.clash-mark.entrance,
.clash-mark.freeze{
  width:118px!important;
  height:42px!important;
  min-width:118px!important;
  min-height:42px!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  box-shadow:none!important;
  color:#fff3b0!important;
  font-size:13px!important;
  font-weight:1000!important;
  line-height:42px!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-shadow:0 2px 2px #000,0 0 8px rgba(255,218,105,.55)!important;
}
.clash-mark.entrance.qa-hold,
.clash-mark.freeze.qa-hold{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}
.fight-feedback-slot:has(.clash-mark.entrance),
.fight-feedback-slot:has(.clash-mark.freeze){
  bottom:16px!important;
  z-index:18!important;
}
.clash-mark.entrance{
  background-image:url("assets/generated/combat_loot_refresh_1790170000000/badge-entrance.webp")!important;
}
.clash-mark.freeze{
  background-image:url("assets/generated/combat_loot_refresh_1790170000000/badge-freeze.webp")!important;
  color:#e9fbff!important;
  text-shadow:0 2px 2px #000,0 0 9px rgba(125,225,255,.75)!important;
}
.clash-mark.entrance.flash,
.clash-mark.freeze.flash{
  animation:authored-combat-badge-flash 1300ms ease-out both!important;
}
@keyframes authored-combat-badge-flash{
  0%{opacity:0;transform:translateY(3px) scale(.68)}
  12%{opacity:1;transform:translateY(0) scale(1.07)}
  86%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-5px) scale(.97)}
}

/* 2026-08-12 mobile tutorial/fusion finish: regular fusion has no cramped
   equation header, while two-material hidden recipes meet at the true center. */
.fusion-panel #fusionMeta[hidden]{display:none!important}
.fusion-panel.fusion-two.active .fusion-material.material-0{
  animation:fusionGatherLeftTwo 1350ms cubic-bezier(.34,.05,.24,1) both!important;
}
.fusion-panel.fusion-two.active .fusion-material.material-2{
  animation:fusionGatherRightTwo 1350ms cubic-bezier(.34,.05,.24,1) both!important;
}
@keyframes fusionGatherLeftTwo{
  0%,38%{opacity:1;transform:translateX(0) scale(1)}
  72%{opacity:1;transform:translateX(calc(50% + 15px)) scale(.66)}
  88%,100%{opacity:0;transform:translateX(calc(50% + 15px)) scale(.08)}
}
@keyframes fusionGatherRightTwo{
  0%,38%{opacity:1;transform:translateX(0) scale(1)}
  72%{opacity:1;transform:translateX(calc(-50% - 15px)) scale(.66)}
  88%,100%{opacity:0;transform:translateX(calc(-50% - 15px)) scale(.08)}
}

/* SSS is now an eclipse-platinum grade: bright white metal on near-black,
   deliberately avoiding A-grade purple and every lower-grade fill color. */
.rarity-SSS{
  border-color:#f8ffff!important;
  color:#fff!important;
  text-shadow:0 1px 2px #000,0 0 5px #fff,0 0 11px rgba(159,232,255,.82)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.72),0 0 11px rgba(181,235,255,.46),inset 0 0 11px rgba(255,255,255,.18)!important;
}
.capsule.rarity-SSS{
  border-color:#fff!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.92) 0 5%,transparent 7%),
    radial-gradient(circle at 50% 43%,#ecfbff 0 17%,#6e8996 21% 35%,#16242c 39% 60%,#020609 64% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(1,4,7,.96),inset 0 0 12px rgba(255,255,255,.42),0 0 10px rgba(192,241,255,.62)!important;
}
.item-tile.rarity-SSS,
.tray-item.rarity-SSS,
.placed-item.rarity-SSS,
.inline-reveal-item.rarity-SSS,
.fusion-material.rarity-SSS,
.fusion-result-pop.rarity-SSS,
.rare-showcase.rarity-SSS,
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS{
  --item-grade-surface:
    radial-gradient(circle at 18% 11%,rgba(255,255,255,.92),transparent 24%),
    linear-gradient(145deg,#eaffff 0%,#718994 18%,#1a2830 42%,#03070a 76%,#516570 100%)!important;
  border-color:#fff!important;
  color:#fff!important;
  background:var(--item-grade-surface)!important;
  text-shadow:0 1px 2px #000,0 0 6px rgba(231,252,255,.9)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36),inset 0 0 13px rgba(210,244,255,.2),0 0 8px rgba(188,238,255,.35)!important;
}
#capsulesPanel .inline-reveal-item.rarity-SSS .reveal-grade{color:#fff!important}

/* Victory result reconciliation 1790256000020.
   The generated frame already owns seven painted bays.  Every live result node
   is registered to one bay here so legacy absolute rules cannot stack them at
   the card origin again. */
.end-panel.clear .end-card>.label{
  left:20%!important;
  right:20%!important;
  top:6.9%!important;
  font-size:9px!important;
  line-height:1!important;
}
.end-panel.clear .end-card>strong{
  left:18%!important;
  right:18%!important;
  top:9.8%!important;
  font-size:25px!important;
  line-height:1!important;
}
.end-panel.clear .end-text>.run-result-hero{
  left:8.3%!important;
  right:8.3%!important;
  top:20.4%!important;
  width:auto!important;
  height:10.4%!important;
  padding:0 10px!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:9px!important;
}
.end-panel.clear .run-result-hero img{
  width:46px!important;
  height:46px!important;
}
.end-panel.clear .end-text>.result-unlock-list{
  position:absolute!important;
  z-index:4!important;
  left:16%!important;
  right:9%!important;
  top:30.8%!important;
  width:auto!important;
  height:3.35%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0 7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.end-panel.clear .result-unlock-list>strong{
  flex:0 0 auto!important;
  min-width:0!important;
  color:#8fe6ff!important;
  font-size:8px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.end-panel.clear .result-unlock-chip{
  flex:1 1 auto!important;
  min-width:0!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  overflow:hidden!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.end-panel.clear .result-unlock-chip:not(:first-of-type){display:none!important}
.end-panel.clear .result-unlock-chip img{display:none!important}
.end-panel.clear .result-unlock-chip>span{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  color:#fff0ad!important;
  font-size:8.6px!important;
  line-height:1!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.end-panel.clear .result-unlock-chip b{color:#f2c2ff!important;font-size:8.2px!important}
.end-panel.clear .result-unlock-chip small{display:none!important}
.end-panel.clear .end-text>.result-summary-grid{
  top:35.8%!important;
  height:18.1%!important;
}
.end-panel.clear .end-text>.result-progress{
  top:55.55%!important;
  height:5.2%!important;
}
.end-panel.clear .end-text>.result-line{
  left:9.5%!important;
  right:9.5%!important;
  top:79.05%!important;
  width:auto!important;
  height:2.45%!important;
  padding:0 5px!important;
  color:#cfdee7!important;
  font-size:7.5px!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
.end-panel.clear .end-text>.result-upgrade-hint{
  position:absolute!important;
  z-index:4!important;
  left:10%!important;
  right:10%!important;
  top:81.65%!important;
  width:auto!important;
  height:2.55%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 4px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:0!important;
  background:transparent!important;
  color:#a9cedf!important;
  font-size:7.6px!important;
  font-weight:700!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 1px 2px #000!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.end-panel.clear .end-actions{
  left:8.3%!important;
  right:8.3%!important;
  top:84.25%!important;
  bottom:auto!important;
  width:auto!important;
  height:10.8%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:16px minmax(0,1fr)!important;
  align-items:stretch!important;
  align-content:stretch!important;
  column-gap:5%!important;
  row-gap:2px!important;
  overflow:visible!important;
}
.end-panel.clear .end-actions>[hidden]{display:none!important}
.end-panel.clear .end-actions #endShardBonusButton{
  grid-column:1/-1!important;
  grid-row:1!important;
  height:16px!important;
  min-height:16px!important;
  padding:0 4px!important;
  color:#ffe7a1!important;
  font-size:9.2px!important;
  background:transparent!important;
}
.end-panel.clear .end-actions:has(#endDepthsButton:not([hidden])) #endShardBonusButton:not([hidden]){grid-column:1!important}
.end-panel.clear .end-actions #endDepthsButton:not([hidden]){
  grid-column:2!important;
  grid-row:1!important;
  height:16px!important;
  min-height:16px!important;
  padding:0 3px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  font-size:8.2px!important;
}
.end-panel.clear .end-actions #endDepthsButton small{display:none!important}
.end-panel.clear .end-actions #endRestartButton{
  grid-column:1!important;
  grid-row:2!important;
}
.end-panel.clear .end-actions #endHomeButton{
  grid-column:2!important;
  grid-row:2!important;
}
.end-panel.clear .end-actions #endRestartButton,
.end-panel.clear .end-actions #endHomeButton{
  height:100%!important;
  min-height:0!important;
  font-size:12px!important;
}
.end-panel.clear .result-first-companion-reward,
.end-panel.clear .result-depths-preview{display:none!important}

/* Victory readability pass 1790256000030: keep only one readable message in
   every painted bay instead of shrinking optional notices into the seams. */
.end-panel.clear .end-card>.label{
  top:7.75%!important;
  color:#b5eaff!important;
  font-size:8px!important;
}
.end-panel.clear .end-card>strong{top:10.4%!important;font-size:24px!important}
.end-panel.clear .end-text>.run-result-hero{
  top:19.7%!important;
  height:13.4%!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:10px!important;
}
.end-panel.clear .run-result-hero img{width:49px!important;height:49px!important}
.end-panel.clear .run-result-hero span{gap:2px!important}
.end-panel.clear .run-result-hero b{font-size:17px!important}
.end-panel.clear .run-result-hero small{font-size:10px!important}
.end-panel.clear .run-result-hero .result-hero-note{
  display:block!important;
  margin-top:3px!important;
  color:#91ddf5!important;
  font-size:8.5px!important;
  font-style:normal!important;
  font-weight:900!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
.end-panel.clear .end-text>.result-unlock-list{display:none!important}
.end-panel.clear .end-text>.result-progress{
  top:55.25%!important;
  height:5.55%!important;
  padding:1px 16px!important;
}
.end-panel.clear .result-progress>span{gap:5px!important}
.end-panel.clear .result-progress strong,
.end-panel.clear .result-progress b{font-size:10.5px!important}
.end-panel.clear .result-progress em{font-size:9.5px!important}
.end-panel.clear .result-progress small{font-size:8px!important}
.end-panel.clear .end-text>.result-best-item{top:61.6%!important;height:17.2%!important}
.end-panel.clear .result-best-item span{gap:3px!important}
.end-panel.clear .result-best-item small{font-size:9px!important}
.end-panel.clear .result-best-item strong{font-size:15px!important}
.end-panel.clear .result-best-item em{font-size:9px!important}
.end-panel.clear .end-text>.result-line{
  top:79.55%!important;
  height:3.8%!important;
  font-size:8.5px!important;
}
.end-panel.clear .end-text>.result-upgrade-hint{display:none!important}
.end-panel.clear .end-actions{
  top:84.15%!important;
  height:11.25%!important;
  grid-template-rows:18px minmax(0,1fr)!important;
  row-gap:3px!important;
}
.end-panel.clear .end-actions #endShardBonusButton{
  height:18px!important;
  min-height:18px!important;
  color:#ffe9a8!important;
  font-size:9.5px!important;
  line-height:1!important;
}

/* Item detail frame v5 1790256000110. Basic numbers share one wide strip;
   genuinely different basic/unique/placement effects own the three bays. */
.item-info-panel .item-info-card,
.item-info-panel.mythic-item .item-info-card{
  width:min(350px,calc(100vw - 10px))!important;
  aspect-ratio:1054/1492!important;
  max-height:calc(100dvh - 10px)!important;
  overflow:hidden!important;
  background:transparent url("assets/generated/item_detail_panel_v5_1790256000110/item-detail-panel-v5.png") center/100% 100% no-repeat!important;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.72))!important;
}
.item-info-card .item-info-head{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.item-info-card .item-info-icon{
  position:absolute!important;
  left:18.4%!important;
  top:8.7%!important;
  width:21%!important;
  height:14.5%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:7px!important;
  box-sizing:border-box!important;
  object-fit:contain!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(91,209,255,.42))!important;
}
.item-info-card .item-info-head>div{
  position:absolute!important;
  left:41%!important;
  right:17.4%!important;
  top:10.5%!important;
  height:9.4%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:3px!important;
  min-width:0!important;
  overflow:hidden!important;
  text-align:left!important;
}
.item-info-card .item-info-head .label{
  width:100%!important;
  margin:0!important;
  color:#8edfff!important;
  font-size:7.4px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:ellipsis!important;
}
.item-info-card .item-info-head strong{
  width:100%!important;
  color:#fff0ad!important;
  font-size:15.5px!important;
  line-height:1.05!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:break-word!important;
  padding-bottom:2px!important;
}
.item-info-card .item-info-head .icon-close-button{
  position:absolute!important;
  left:78.4%!important;
  top:7.4%!important;
  width:8.2%!important;
  height:5.8%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:transparent!important;
  font-size:0!important;
  box-shadow:none!important;
  pointer-events:auto!important;
}
.item-info-card>#itemInfoText{
  left:14.2%!important;
  right:14.2%!important;
  top:25.2%!important;
  width:auto!important;
  height:11.25%!important;
  padding:7px 10px!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  color:#d6e3e9!important;
  font-size:8.5px!important;
  line-height:1.28!important;
  letter-spacing:-.025em!important;
}
.item-info-card .item-info-stats{
  left:14.1%!important;
  right:14.1%!important;
  top:38.35%!important;
  width:auto!important;
  height:29.35%!important;
  padding:3px 2px!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:40.5% 56.5%!important;
  column-gap:2.4%!important;
  row-gap:3%!important;
  overflow:hidden!important;
}
.item-info-card .item-info-stats>span,
.item-info-card .item-info-stats>span:nth-child(n){
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  padding:5px 4px!important;
  place-content:center!important;
  gap:3px!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.item-info-card .item-info-stats>span small{
  color:#8fcfe4!important;
  font-size:7.4px!important;
  line-height:1!important;
  overflow:visible!important;
}
.item-info-card .item-info-stats>span strong,
.item-info-card .item-info-stats>span:nth-child(n) strong,
.item-info-card .item-info-stats>.compact-overflow strong{
  max-width:100%!important;
  color:#fff0a8!important;
  font-size:8.2px!important;
  line-height:1.08!important;
  letter-spacing:-.03em!important;
  overflow:visible!important;
  overflow-wrap:break-word!important;
  padding-block:1px!important;
}
.item-info-card .item-info-stats>.base-stat-chip{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:62px minmax(0,1fr)!important;
  align-items:center!important;
  justify-items:stretch!important;
  gap:8px!important;
  padding:7px 13px!important;
  text-align:left!important;
}
.item-info-card .item-info-stats>.base-stat-chip small{
  color:#9fe4f8!important;
  font-size:8.2px!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.item-info-card .item-info-stats>.base-stat-chip strong{
  font-size:9.2px!important;
  line-height:1.16!important;
  text-align:left!important;
}
.item-info-card .item-info-stats>.item-effect-detail-chip{
  padding:7px 5px!important;
  gap:4px!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  text-align:center!important;
}
.item-info-card .item-info-stats>.empty-summary-chip strong{
  color:#65747c!important;
  font-weight:700!important;
}
.item-info-card .item-info-relations{
  left:14.1%!important;
  right:14.1%!important;
  top:68.8%!important;
  width:auto!important;
  height:14.15%!important;
  padding:2px 7px!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:4%!important;
  overflow:visible!important;
}
.item-info-card .item-relation-row{
  min-height:0!important;
  height:auto!important;
  padding:1px 6px!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  gap:6px!important;
  overflow:visible!important;
}
.item-info-card .item-relation-mark{
  width:27px!important;
  height:27px!important;
  font-size:13px!important;
}
.item-info-card .item-relation-row.recipe.unknown{
  grid-template-columns:74px minmax(0,1fr)!important;
  gap:5px!important;
}
.item-info-card .item-recipe-equation{
  width:72px!important;
  height:28px!important;
  display:grid!important;
  grid-template-columns:28px 10px 28px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
}
.item-info-card .item-recipe-equation img,
.item-info-card .item-recipe-equation i{
  width:28px!important;
  height:28px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(122,205,239,.72)!important;
  border-radius:50%!important;
  background:radial-gradient(circle,#17364a 0,#07121e 72%)!important;
  object-fit:contain!important;
  padding:3px!important;
  box-shadow:inset 0 0 5px #000,0 0 5px rgba(70,194,255,.28)!important;
}
.item-info-card .item-recipe-equation b{
  color:#ffe9a0!important;
  font-size:12px!important;
  line-height:1!important;
  text-align:center!important;
}
.item-info-card .item-recipe-equation i{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  color:#ffe68a!important;
  font-size:14px!important;
  font-style:normal!important;
  font-weight:900!important;
  border-color:#cda84f!important;
  background:radial-gradient(circle,#322a13 0,#0b1018 72%)!important;
}
.item-info-card .item-relation-row>div{
  gap:2px 5px!important;
}
.item-info-card .item-relation-row small{
  font-size:7px!important;
}
.item-info-card .item-relation-row strong{
  font-size:9px!important;
  line-height:1.05!important;
}
.item-info-card .item-relation-row em{
  font-size:7.4px!important;
  line-height:1.1!important;
}
.item-info-card .item-info-actions{
  left:14.1%!important;
  right:14.1%!important;
  top:84.25%!important;
  width:auto!important;
  height:7.7%!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  column-gap:3.2%!important;
  overflow:hidden!important;
}
.item-info-card .item-info-actions .mini-button,
.item-info-card .item-info-actions #itemPlaceButton,
.item-info-card .item-info-actions #itemRemoveButton,
.item-info-card .item-info-actions #itemSellButton{
  width:100%!important;
  height:100%!important;
  padding:0 3px!important;
  gap:3px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.item-info-card .item-info-actions button>strong{
  font-size:11px!important;
}
.item-info-card .item-info-actions button>small{
  font-size:7.2px!important;
}
@media(max-height:700px){
  .item-info-panel .item-info-card,
  .item-info-panel.mythic-item .item-info-card{width:min(326px,calc(100vw - 8px))!important}
}

/* 2026-08-12: the authored board image owns all reward bays. Never tint a
   rectangular DOM row; rarity belongs only to type and icon light. */
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]{
  position:relative!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]::after{
  content:none!important;
  display:none!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:17px!important;
  top:50%!important;
  width:51px!important;
  height:51px!important;
  display:block!important;
  border:0!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(185,202,216,.2) 0,rgba(185,202,216,.09) 43%,transparent 72%)!important;
  box-shadow:inset 0 0 10px rgba(185,202,216,.12),0 0 7px rgba(185,202,216,.08)!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="rare"]::before{
  background:radial-gradient(circle,rgba(116,227,182,.24) 0,rgba(72,184,149,.1) 43%,transparent 72%)!important;
  box-shadow:inset 0 0 10px rgba(116,227,182,.14),0 0 8px rgba(72,184,149,.11)!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="epic"]::before{
  background:radial-gradient(circle,rgba(208,154,255,.23) 0,rgba(150,91,205,.1) 43%,transparent 72%)!important;
  box-shadow:inset 0 0 10px rgba(208,154,255,.14),0 0 8px rgba(150,91,205,.11)!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="legendary"]::before{
  background:radial-gradient(circle,rgba(255,214,108,.24) 0,rgba(200,148,50,.1) 43%,transparent 72%)!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="mythic"]::before{
  background:radial-gradient(circle,rgba(255,143,201,.25) 0,rgba(199,74,147,.1) 43%,transparent 72%)!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]>img,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]>span{
  position:relative!important;
  z-index:1!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]{
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:7px!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]>img{
  width:43px!important;
  height:43px!important;
  max-width:43px!important;
  max-height:43px!important;
  object-fit:contain!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-board-passive-choice="windFeather"]>img,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-board-passive-choice="moonPrism"]>img{
  transform:scale(1.08)!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-board-passive-choice="bloodMoonSeal"]>img{
  transform:scale(.94)!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]>span{
  height:49px!important;
  grid-template-rows:10px 16px 21px!important;
  gap:1px!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality] em{
  width:100%!important;
  height:21px!important;
  min-height:21px!important;
  max-height:21px!important;
  font-size:8.3px!important;
  line-height:9.5px!important;
  letter-spacing:-.025em!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality] b{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:0 1px 2px #000!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality] strong{
  color:#fff0b0!important;
  text-shadow:0 1px 2px #000!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="common"] b{color:#b9cad8!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="rare"] b{color:#74e3b6!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="epic"] b{color:#d09aff!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="legendary"] b{color:#ffd66c!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality="mythic"] b{color:#ff8fc9!important}
.board-passive-choice-card>.board-clear-supply-preview{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>strong{
  color:#fff0ad!important;
  text-shadow:0 1px 2px #000!important;
}
.board-passive-choice-card>.board-clear-supply-preview>img{
  width:43px!important;
  height:43px!important;
  max-width:43px!important;
  max-height:43px!important;
  object-fit:contain!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span{
  height:47px!important;
  grid-template-rows:10px 16px 19px!important;
  gap:1px!important;
}
.board-passive-choice-card>.board-clear-supply-preview>span>small{
  height:19px!important;
  min-height:19px!important;
  max-height:19px!important;
  line-height:9px!important;
  letter-spacing:-.025em!important;
}
.board-passive-choice-card>.board-clear-supply-preview[data-quality="common"]>span>b{color:#b9cad8!important}
.board-passive-choice-card>.board-clear-supply-preview[data-quality="rare"]>span>b{color:#74e3b6!important}
.board-passive-choice-card>.board-clear-supply-preview[data-quality="epic"]>span>b{color:#d09aff!important}
.board-passive-choice-card>.board-clear-supply-preview[data-quality="jackpot"]>span>b{color:#ffd66c!important}
.board-passive-choice-card>.board-clear-supply-preview>span>small{
  overflow:visible!important;
  text-overflow:clip!important;
}
.board-passive-choice-card>.board-passive-choice-list:has(>.board-passive-choice:nth-child(4)){
  grid-template-rows:repeat(4,minmax(0,1fr))!important;
}
.board-passive-choice-card>.board-passive-choice-list:has(>.board-passive-choice:nth-child(4)) .board-passive-choice{
  padding-top:1px!important;
  padding-bottom:1px!important;
  grid-template-columns:55px minmax(0,1fr)!important;
  gap:7px!important;
}
.board-passive-choice-card>.board-passive-choice-list:has(>.board-passive-choice:nth-child(4)) .board-passive-choice img{
  width:40px!important;
  height:40px!important;
}
.board-passive-choice-card>.board-passive-choice-list:has(>.board-passive-choice:nth-child(4)) .board-passive-choice>span{
  height:44px!important;
  grid-template-rows:9px 15px 18px!important;
}
.board-passive-choice-card>.board-passive-choice-list:has(>.board-passive-choice:nth-child(4)) .board-passive-choice strong{
  font-size:12.8px!important;
  line-height:15px!important;
}
.board-passive-choice-card>.board-passive-choice-list:has(>.board-passive-choice:nth-child(4)) .board-passive-choice em{
  font-size:8.1px!important;
  line-height:9px!important;
}

/* Enemy preview now uses one authored frame instead of the generic web-modal
   border, card rectangle and CSS close square. */
.enemy-info-card{
  position:relative!important;
  box-sizing:border-box!important;
  width:min(382px,calc(100vw - 14px))!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  max-height:calc(100dvh - 18px)!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/enemy_info_frame_1790256000080/enemy-info-frame-clean.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 13px 23px rgba(0,0,0,.76))!important;
}
.enemy-info-card>.panel-head.compact{
  position:absolute!important;
  z-index:3!important;
  left:17.2%!important;
  right:14.4%!important;
  top:7.1%!important;
  height:21.2%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  background:transparent!important;
}
.enemy-info-card>.panel-head.compact h2{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:62%!important;
  transform:translateY(-50%)!important;
}
.enemy-info-card>.panel-head.compact>div{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:auto!important;
  min-width:0!important;
  text-align:center!important;
  transform:translateX(-7px)!important;
}
.enemy-info-card>.panel-head.compact .label{
  display:none!important;
}
.enemy-info-card>.panel-head.compact h2{
  margin:0!important;
  color:#fff0ad!important;
  font-size:19px!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
  text-shadow:0 2px 2px #000,0 0 7px rgba(255,195,72,.27)!important;
}
.enemy-info-card #enemyInfoCloseButton{
  position:absolute!important;
  z-index:5!important;
  left:90.4%!important;
  right:auto!important;
  top:16.95%!important;
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent url("assets/generated/enemy_info_close_x_1790774400000/enemy-info-close-x.png") center/18px 17px no-repeat!important;
  color:transparent!important;
  font-size:0!important;
  box-shadow:none!important;
  filter:brightness(.72) saturate(.72)!important;
  transform:translate(-50%,-50%)!important;
  transition:transform 90ms ease,filter 90ms ease!important;
}
.enemy-info-card #enemyInfoCloseButton:hover,
.enemy-info-card #enemyInfoCloseButton:focus-visible{
  outline:0!important;
  filter:brightness(.88) saturate(.82)!important;
}
.enemy-info-card #enemyInfoCloseButton:active,
.enemy-info-card #enemyInfoCloseButton.qa-pressed{
  background-color:transparent!important;
  transform:translate(-50%,calc(-50% + 2px)) scale(.94)!important;
  filter:brightness(.5) saturate(.58)!important;
}
.enemy-info-card #enemyInfoCloseButton::before,
.enemy-info-card #enemyInfoCloseButton::after{content:none!important;display:none!important}
.enemy-info-card>.enemy-info-list{
  position:absolute!important;
  z-index:2!important;
  left:8.9%!important;
  right:8.9%!important;
  top:35.1%!important;
  bottom:8.1%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 2.6%!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-auto-rows:minmax(0,1fr)!important;
  gap:0!important;
  overflow:auto!important;
  scrollbar-width:none!important;
}
.enemy-info-card>.enemy-info-list::-webkit-scrollbar{display:none!important}
.enemy-info-card .enemy-info-row,
.enemy-info-card .enemy-info-row.boss{
  box-sizing:border-box!important;
  min-height:0!important;
  height:100%!important;
  margin:0!important;
  padding:8px 8px 6px!important;
  display:grid!important;
  align-content:center!important;
  gap:4px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.enemy-info-card .enemy-info-row+.enemy-info-row{border-top:1px solid rgba(190,151,65,.42)!important}
.enemy-info-card .enemy-info-row>.enemy-info-main{
  grid-template-columns:60px minmax(0,1fr)!important;
  gap:10px!important;
  margin:0 0 3px!important;
}
.enemy-info-card .enemy-info-portrait-frame{
  width:58px!important;
  height:58px!important;
  border:0!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(43,61,87,.76) 0 48%,rgba(5,11,19,.16) 70%,transparent 72%)!important;
  box-shadow:none!important;
}
.enemy-info-card .enemy-info-portrait{width:54px!important;height:54px!important}
.enemy-info-card .enemy-info-copy strong{font-size:15.5px!important}
.enemy-info-card .enemy-info-stats{gap:3px!important}
.enemy-info-card .enemy-info-stats>b{
  min-height:17px!important;
  padding:2px 5px!important;
  border-color:rgba(207,165,72,.45)!important;
  background:rgba(3,8,14,.54)!important;
  color:#ffe18a!important;
  font-size:8.4px!important;
}
.enemy-info-card .enemy-info-row p,
.enemy-info-card .enemy-info-row small{
  margin:0!important;
  font-size:9.4px!important;
  line-height:1.2!important;
  white-space:normal!important;
}
.enemy-info-card .enemy-info-row p{color:#c7d1da!important}
.enemy-info-card .enemy-info-row .enemy-info-weak{color:#76dcff!important}
.enemy-info-card .enemy-info-row .enemy-info-resist{color:#f1a09d!important}
.enemy-info-card .enemy-info-row .enemy-info-thorns-badge{
  border-color:rgba(236,93,108,.62)!important;
  background:rgba(53,7,15,.72)!important;
  color:#ffb0b8!important;
}
.enemy-info-card .enemy-info-row .enemy-info-passive-detail{
  color:#ffb0b8!important;
  font-weight:700!important;
}

/* Prep/board/grade visual reconciliation 1790256000070. */
.run-prep-card{
  background-color:transparent!important;
  background-image:url("assets/generated/prep_board_grade_refresh_1790256000070/run-prep-frame-clean.png")!important;
}
.run-prep-card .run-prep-actions .mini-button,
.run-prep-card .run-prep-actions .mini-button.accent{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Keep the proven 4 x 2 placement, but replace the loud cyan/purple plates
   with one restrained authored control skin. */
#capsulesPanel .chance-strip.board-actions .chance-button,
#capsulesPanel .chance-strip.board-actions .chance-button.premium{
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:url("assets/generated/prep_board_grade_refresh_1790256000070/board-action-button-cropped.png")!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button span{
  color:#f0ead6!important;
  text-shadow:0 1px 2px #000!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button small{
  color:#aebdca!important;
  text-shadow:0 1px 1px #000!important;
}
#capsulesPanel .chance-strip.board-actions .chance-button:disabled{
  opacity:.55!important;
  filter:grayscale(.32) brightness(.78)!important;
}

/* Grade hierarchy: C keeps green and SS keeps royal blue. D moves to copper
   orange, while A moves to magenta so neither adjacent pair blends together. */
.rarity-D{
  border-color:#ff873b!important;
  color:#ffc08b!important;
}
.item-tile.rarity-D,
.tray-item.rarity-D,
.placed-item.rarity-D,
.inline-reveal-item.rarity-D,
.fusion-material.rarity-D,
.fusion-result-pop.rarity-D{
  --item-grade-surface:
    radial-gradient(circle at 18% 12%,rgba(255,160,82,.34),transparent 36%),
    linear-gradient(145deg,#663319 0%,#2c170e 58%,#110907 100%)!important;
  border-color:#ff873b!important;
  color:#ffc08b!important;
  background:var(--item-grade-surface)!important;
  box-shadow:inset 0 0 0 1px rgba(255,193,126,.16),inset 0 0 12px rgba(255,118,48,.24),0 0 7px rgba(255,126,48,.2)!important;
}
.capsule.rarity-D{
  border-color:#ff873b!important;
  color:#ffd0a3!important;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,238,211,.4) 0 7%,transparent 8%),
    radial-gradient(circle at 50% 43%,#b45520 0 35%,#642b13 38% 59%,#291007 62% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(24,8,3,.94),inset 0 0 10px rgba(255,137,57,.34),0 0 8px rgba(255,126,44,.28)!important;
}
#capsulesPanel .inline-reveal-item.rarity-D .reveal-grade{color:#ffc08b!important}

.rarity-A{
  border-color:#a970ff!important;
  color:#eadbff!important;
  text-shadow:0 1px 2px #000,0 0 6px rgba(143,82,255,.76)!important;
}
.item-tile.rarity-A,
.tray-item.rarity-A,
.placed-item.rarity-A,
.inline-reveal-item.rarity-A,
.fusion-material.rarity-A,
.fusion-result-pop.rarity-A{
  --item-grade-surface:
    radial-gradient(circle at 18% 12%,rgba(190,153,255,.42),transparent 35%),
    linear-gradient(145deg,#52307f 0%,#29183f 56%,#0e0816 100%)!important;
  border-color:#a970ff!important;
  color:#eadbff!important;
  background:var(--item-grade-surface)!important;
  box-shadow:inset 0 0 0 1px rgba(216,191,255,.18),inset 0 0 12px rgba(139,78,255,.24),0 0 8px rgba(139,84,255,.24)!important;
}
.capsule.rarity-A{
  border-color:#a970ff!important;
  color:#f0e4ff!important;
  background:
    radial-gradient(circle at 34% 25%,rgba(244,232,255,.54) 0 6%,transparent 8%),
    radial-gradient(circle at 50% 43%,#9362d7 0 34%,#50307d 38% 59%,#1a0f2b 63% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(12,5,24,.94),inset 0 0 11px rgba(154,101,255,.36),0 0 9px rgba(137,83,255,.3)!important;
}
#capsulesPanel .inline-reveal-item.rarity-A .reveal-grade{color:#eadbff!important}

/* SS uses a high-luminance platinum identity. It stays neutral rather than
   drifting toward B cyan, A violet, or SSS crimson during fast motion. */
.rarity-SS{
  border-color:#f4f7ef!important;
  color:#fffef8!important;
  text-shadow:0 1px 2px #000,0 0 6px rgba(255,255,244,.82)!important;
  box-shadow:0 0 0 1px rgba(255,255,248,.48),0 0 9px rgba(239,244,238,.38),inset 0 0 10px rgba(255,255,255,.18)!important;
}
.item-tile.rarity-SS,
.tray-item.rarity-SS,
.placed-item.rarity-SS,
.inline-reveal-item.rarity-SS,
.fusion-material.rarity-SS,
.fusion-result-pop.rarity-SS{
  --item-grade-surface:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.7),transparent 30%),
    linear-gradient(145deg,#d5d9da 0%,#737b82 27%,#2c3137 58%,#090b0e 100%)!important;
  border-color:#f4f7ef!important;
  color:#fffef8!important;
  background:var(--item-grade-surface)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 13px rgba(235,240,238,.22),0 0 8px rgba(242,246,239,.3)!important;
}
.capsule.rarity-SS{
  border-color:#f4f7ef!important;
  color:#fffef8!important;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.94) 0 5%,transparent 7%),
    radial-gradient(circle at 50% 43%,#e3e6e5 0 17%,#858c91 22% 37%,#343a40 41% 61%,#0d1013 65% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(5,7,9,.96),inset 0 0 12px rgba(255,255,255,.34),0 0 9px rgba(239,244,239,.34)!important;
}
#capsulesPanel .inline-reveal-item.rarity-SS .reveal-grade{color:#fffef8!important}

.rarity-SSS{
  border-color:#ff4d59!important;
  color:#fff0e8!important;
  text-shadow:0 1px 2px #000,0 0 5px rgba(255,78,88,.95),0 0 10px rgba(255,42,55,.62)!important;
  box-shadow:0 0 0 1px rgba(255,116,99,.62),0 0 10px rgba(229,32,48,.42),inset 0 0 11px rgba(255,72,64,.18)!important;
}
.capsule.rarity-SSS{
  border-color:#ff4d59!important;
  color:#fff0e8!important;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,240,216,.8) 0 5%,transparent 7%),
    radial-gradient(circle at 50% 43%,#ff8a63 0 16%,#b52c37 21% 36%,#4d101d 40% 60%,#10050a 64% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(24,2,7,.96),inset 0 0 12px rgba(255,103,78,.36),0 0 10px rgba(255,55,68,.46)!important;
}
.item-tile.rarity-SSS,
.tray-item.rarity-SSS,
.placed-item.rarity-SSS,
.inline-reveal-item.rarity-SSS,
.fusion-material.rarity-SSS,
.fusion-result-pop.rarity-SSS,
.rare-showcase.rarity-SSS,
.pull-reveal.sss-reveal .rare-showcase.rarity-SSS{
  --item-grade-surface:
    radial-gradient(circle at 18% 11%,rgba(255,207,174,.46),transparent 25%),
    linear-gradient(145deg,#8d1d2b 0%,#3b101b 48%,#10060b 100%)!important;
  border-color:#ff4d59!important;
  color:#fff0e8!important;
  background:var(--item-grade-surface)!important;
  text-shadow:0 1px 2px #000,0 0 6px rgba(255,95,80,.72)!important;
  box-shadow:inset 0 0 0 1px rgba(255,151,114,.28),inset 0 0 13px rgba(255,57,66,.2),0 0 8px rgba(234,38,53,.32)!important;
}
#capsulesPanel .inline-reveal-item.rarity-SSS .reveal-grade{color:#ffcbc1!important}
.fight-stage>.gear-fx .gear-piece.rarity-SSS,
.fight-stage>.gear-fx .gear-piece.rarity-SSS:nth-child(n),
.gear-piece.rarity-SSS{
  border-color:#ff4d59!important;
  background:radial-gradient(circle at 42% 32%,#9b2838,#3a101c 68%,#12060b)!important;
  color:#fff0e8!important;
  box-shadow:0 0 0 1px rgba(255,116,99,.55),0 0 7px rgba(229,32,48,.42)!important;
}
#menuRecipePanel .unlock-pill.rarity-SSS,
#menuRecipePanel button.unlock-pill.rarity-SSS,
#menuRecipePanel button.unlock-pill.rarity-SSS.discovered{
  border-color:rgba(255,77,89,.8)!important;
  color:#ffe2dc!important;
  background:linear-gradient(90deg,rgba(89,18,32,.86),rgba(27,9,16,.9) 78%)!important;
  box-shadow:0 0 0 1px rgba(255,122,104,.2),0 0 7px rgba(225,39,54,.2),inset 2px 0 0 rgba(255,77,89,.5)!important;
}
#menuRecipePanel .unlock-pill.rarity-SSS .unlock-pill-copy b{color:#ffd4cb!important}
#menuRecipePanel .unlock-pill.rarity-SSS .unlock-pill-copy small{color:#c89891!important}

/* Final requested grade rotation: F platinum, D steel, S copper-orange,
   SS gold. C/B/A/SSS retain green/sky/violet/crimson. */
.rarity-F{
  border-color:#f4f7ef!important;
  color:#fffef8!important;
  text-shadow:0 1px 2px #000,0 0 6px rgba(255,255,244,.82)!important;
}
.item-tile.rarity-F,
.tray-item.rarity-F,
.placed-item.rarity-F,
.inline-reveal-item.rarity-F,
.fusion-material.rarity-F,
.fusion-result-pop.rarity-F{
  --item-grade-surface:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.7),transparent 30%),
    linear-gradient(145deg,#d5d9da 0%,#737b82 27%,#2c3137 58%,#090b0e 100%)!important;
  border-color:#f4f7ef!important;
  color:#fffef8!important;
  background:var(--item-grade-surface)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 13px rgba(235,240,238,.22),0 0 8px rgba(242,246,239,.3)!important;
}
.capsule.rarity-F{
  border-color:#f4f7ef!important;
  color:#fffef8!important;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.94) 0 5%,transparent 7%),
    radial-gradient(circle at 50% 43%,#e3e6e5 0 17%,#858c91 22% 37%,#343a40 41% 61%,#0d1013 65% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(5,7,9,.96),inset 0 0 12px rgba(255,255,255,.34),0 0 9px rgba(239,244,239,.34)!important;
}
#capsulesPanel .inline-reveal-item.rarity-F .reveal-grade{color:#fffef8!important}

.rarity-D{
  border-color:#6fa1be!important;
  color:#82b5d0!important;
  text-shadow:0 1px 2px #000,0 0 5px rgba(101,166,204,.58)!important;
}
.item-tile.rarity-D,
.tray-item.rarity-D,
.placed-item.rarity-D,
.inline-reveal-item.rarity-D,
.fusion-material.rarity-D,
.fusion-result-pop.rarity-D{
  --item-grade-surface:
    radial-gradient(circle at 18% 12%,rgba(105,168,207,.34),transparent 36%),
    linear-gradient(145deg,#24445a 0%,#0c1b27 74%)!important;
  border-color:#6fa1be!important;
  color:#82b5d0!important;
  background:var(--item-grade-surface)!important;
  box-shadow:inset 0 0 12px rgba(82,150,192,.24),0 0 6px rgba(78,139,177,.22)!important;
}
.capsule.rarity-D{
  border-color:#6fa1be!important;
  color:#82b5d0!important;
  background:
    radial-gradient(circle at 34% 26%,rgba(229,248,255,.36) 0 7%,transparent 8%),
    radial-gradient(circle at 50% 43%,#3e6982 0 35%,#1d3547 38% 59%,#08141e 62% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(3,10,16,.94),inset 0 0 10px rgba(110,181,221,.3),0 0 8px rgba(80,151,190,.26)!important;
}
#capsulesPanel .inline-reveal-item.rarity-D .reveal-grade{color:#82b5d0!important}

.rarity-S{
  border-color:#ff873b!important;
  color:#ffc08b!important;
  text-shadow:0 1px 2px #000,0 0 6px rgba(255,126,48,.7)!important;
}
.item-tile.rarity-S,
.tray-item.rarity-S,
.placed-item.rarity-S,
.inline-reveal-item.rarity-S,
.fusion-material.rarity-S,
.fusion-result-pop.rarity-S{
  --item-grade-surface:
    radial-gradient(circle at 18% 12%,rgba(255,160,82,.34),transparent 36%),
    linear-gradient(145deg,#663319 0%,#2c170e 58%,#110907 100%)!important;
  border-color:#ff873b!important;
  color:#ffc08b!important;
  background:var(--item-grade-surface)!important;
  box-shadow:inset 0 0 0 1px rgba(255,193,126,.16),inset 0 0 12px rgba(255,118,48,.24),0 0 7px rgba(255,126,48,.2)!important;
}
.capsule.rarity-S{
  border-color:#ff873b!important;
  color:#ffd0a3!important;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,238,211,.4) 0 7%,transparent 8%),
    radial-gradient(circle at 50% 43%,#b45520 0 35%,#642b13 38% 59%,#291007 62% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(24,8,3,.94),inset 0 0 10px rgba(255,137,57,.34),0 0 8px rgba(255,126,44,.28)!important;
}
#capsulesPanel .inline-reveal-item.rarity-S .reveal-grade{color:#ffc08b!important}

.rarity-SS{
  border-color:#ffe052!important;
  color:#fff18a!important;
  text-shadow:0 1px 2px #000,0 0 6px rgba(255,221,70,.78)!important;
  box-shadow:0 0 0 1px rgba(255,236,130,.46),0 0 9px rgba(255,213,43,.34),inset 0 0 10px rgba(255,225,82,.18)!important;
}
.item-tile.rarity-SS,
.tray-item.rarity-SS,
.placed-item.rarity-SS,
.inline-reveal-item.rarity-SS,
.fusion-material.rarity-SS,
.fusion-result-pop.rarity-SS,
.rare-showcase.rarity-SS{
  --item-grade-surface:
    radial-gradient(circle at 18% 12%,rgba(255,230,88,.4),transparent 34%),
    linear-gradient(145deg,#5a470d 0%,#2e250a 56%,#100d04 100%)!important;
  border-color:#ffe052!important;
  color:#fff18a!important;
  background:var(--item-grade-surface)!important;
  box-shadow:inset 0 0 0 1px rgba(255,242,154,.2),inset 0 0 13px rgba(255,218,54,.24),0 0 9px rgba(255,209,40,.27)!important;
}
.capsule.rarity-SS{
  border-color:#ffe052!important;
  color:#fff5a4!important;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,224,.7) 0 5%,transparent 7%),
    radial-gradient(circle at 50% 43%,#aa8d1e 0 17%,#665414 22% 37%,#32290b 41% 61%,#110e03 65% 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(18,14,3,.94),inset 0 0 12px rgba(255,228,68,.38),0 0 10px rgba(255,218,53,.35)!important;
}
#capsulesPanel .inline-reveal-item.rarity-SS .reveal-grade{color:#fff18a!important}

/* QA-only, real item tiles for comparing every final grade color on the same
   mobile screen. The cards inherit the production rarity surfaces above. */
.qa-rarity-showcase{
  position:fixed!important;
  inset:0!important;
  z-index:10040!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100vw!important;
  display:grid!important;
  place-items:center!important;
  padding:14px!important;
  background:rgba(2,6,11,.82)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
.qa-rarity-frame{
  box-sizing:border-box!important;
  width:min(358px,calc(100vw - 24px))!important;
  min-height:590px!important;
  padding:70px 35px 54px!important;
  background:transparent url("assets/generated/item_detail_refresh_1790256000252/fusion-panel-transparent.png") center / 100% 100% no-repeat!important;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.78))!important;
}
.qa-rarity-heading{
  display:grid!important;
  place-items:center!important;
  gap:2px!important;
  margin:0 0 12px!important;
  text-align:center!important;
}
.qa-rarity-heading small{
  color:#83dfff!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}
.qa-rarity-heading h2{
  margin:0!important;
  color:#ffe59b!important;
  font-size:19px!important;
  line-height:1.12!important;
  text-shadow:0 2px 2px #000!important;
}
.qa-rarity-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
.qa-rarity-card.item-tile{
  box-sizing:border-box!important;
  width:100%!important;
  height:88px!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  place-items:center!important;
  gap:0 5px!important;
  padding:7px 8px!important;
  border-width:2px!important;
  border-style:solid!important;
  border-color:currentColor!important;
  border-radius:7px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 -8px 12px rgba(0,0,0,.22),0 0 9px color-mix(in srgb,currentColor 34%,transparent)!important;
  overflow:hidden!important;
}
.qa-rarity-card.item-tile::before,
.qa-rarity-card.item-tile::after{content:none!important}
.qa-rarity-card .item-icon{
  grid-column:1!important;
  grid-row:1 / -1!important;
  width:46px!important;
  height:46px!important;
  max-width:none!important;
  object-fit:contain!important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.72))!important;
}
.qa-rarity-code{
  grid-column:2!important;
  grid-row:1!important;
  color:currentColor!important;
  font-size:15px!important;
  line-height:1!important;
  text-shadow:0 1px 2px #000,0 0 5px currentColor!important;
}
.qa-rarity-name{
  grid-column:2!important;
  grid-row:2!important;
  width:100%!important;
  color:#f5ead1!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1.15!important;
  text-align:center!important;
  white-space:normal!important;
}
.qa-rarity-color{
  grid-column:2!important;
  grid-row:3!important;
  color:currentColor!important;
  font-size:8.5px!important;
  font-weight:800!important;
  line-height:1!important;
}
.end-panel.clear .end-actions #endRestartButton,
.end-panel.clear .end-actions #endHomeButton{font-size:12px!important}

.end-panel.clear .end-card>.label{display:none!important}
.end-panel.clear .end-card>strong{
  top:8.9%!important;
  font-size:26px!important;
}
.end-panel.clear .result-mini-card small{font-size:11px!important}
.end-panel.clear .result-mini-card strong{font-size:20px!important}
.end-panel.clear .result-progress img{display:none!important}
.end-panel.clear .result-progress strong,
.end-panel.clear .result-progress b{font-size:11.5px!important}
.end-panel.clear .result-progress em{font-size:10.5px!important}
.end-panel.clear .result-progress small{display:none!important}
.end-panel.clear .result-best-item small{font-size:10px!important}
.end-panel.clear .result-best-item strong{font-size:16px!important}
.end-panel.clear .result-best-item em{font-size:9.5px!important}
.end-panel.clear .end-text>.result-line{font-size:9px!important}

/* Authored victory frame v2 1790256000040.  Unlike the previous frame, this
   asset has a real ad rail and two equal button bays, so content is mapped to
   the painted interiors instead of floating in the seams. */
.end-panel.clear .end-card{
  width:min(378px,calc(100vw - 10px))!important;
  aspect-ratio:1122/1402!important;
  background:#020711 url("assets/generated/victory_result_frame_1790256000040/victory-result-frame-v2.png") center/100% 100% no-repeat!important;
}
.end-panel.clear .end-card>strong{
  left:19%!important;
  right:19%!important;
  top:9.05%!important;
  font-size:26px!important;
}
.end-panel.clear .end-text>.run-result-hero{
  left:8.2%!important;
  right:8.2%!important;
  top:19.55%!important;
  height:13.1%!important;
  grid-template-columns:58px minmax(0,1fr)!important;
}
.end-panel.clear .end-text>.result-summary-grid{
  left:8.3%!important;
  right:8.3%!important;
  top:35.1%!important;
  height:18.25%!important;
  gap:4.1%!important;
}
.end-panel.clear .end-text>.result-progress{
  left:9.2%!important;
  right:9.2%!important;
  top:54.55%!important;
  height:4.25%!important;
}
.end-panel.clear .end-text>.result-best-item{
  left:8.3%!important;
  right:8.3%!important;
  top:60.25%!important;
  height:13.55%!important;
  grid-template-columns:61px minmax(0,1fr)!important;
  gap:8px!important;
}
.end-panel.clear .result-best-item img{width:55px!important;height:55px!important}
.end-panel.clear .end-text>.result-line{
  left:9.2%!important;
  right:9.2%!important;
  top:75.4%!important;
  height:3.7%!important;
}
.end-panel.clear .end-actions{
  left:8.4%!important;
  right:8.4%!important;
  top:80.55%!important;
  height:15.15%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:29.5% 1fr!important;
  column-gap:4.9%!important;
  row-gap:8.5%!important;
}
.end-panel.clear .end-actions #endShardBonusButton{
  grid-column:1/-1!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0 8px!important;
  font-size:10px!important;
}
.end-panel.clear .end-actions #endRestartButton,
.end-panel.clear .end-actions #endHomeButton{
  grid-row:2!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0 8px!important;
  font-size:12px!important;
}

/* Victory frame v3 1790256000050: transparent outer canvas, authored ad
   button, and single-bezel bottom actions. */
.end-panel.clear .end-card{
  background-color:transparent!important;
  background-image:url("assets/generated/victory_result_frame_1790256000050/victory-result-frame-v3.png")!important;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.62))!important;
}
.end-panel.clear .end-actions #endShardBonusButton{
  color:#fff2b8!important;
  font-size:10.5px!important;
  text-shadow:0 2px 2px #000,0 0 8px rgba(92,211,255,.42)!important;
  cursor:pointer!important;
}
.end-panel.clear .end-actions #endShardBonusButton:not(:disabled){
  animation:victoryAdButtonPulse 1.7s ease-in-out infinite alternate!important;
}
.end-panel.clear .end-actions #endShardBonusButton:disabled{opacity:.62!important}
.end-panel.clear .end-actions #endRestartButton,
.end-panel.clear .end-actions #endHomeButton{
  color:#f5f1dd!important;
  text-shadow:0 2px 2px #000!important;
}
.end-panel.clear .end-actions #endRestartButton{color:#fff0ad!important}
@keyframes victoryAdButtonPulse{
  from{filter:brightness(.94) drop-shadow(0 0 0 rgba(58,184,255,0))}
  to{filter:brightness(1.14) drop-shadow(0 0 5px rgba(58,184,255,.48))}
}

/* Victory frame v4 1790256000060: the obsolete combat-stat rail is removed
   from both markup and artwork. The lower three controls now inhabit their
   own authored button interiors instead of being numerically pushed over the
   seams of the previous frame. */
.end-panel.clear .end-card{
  background-image:url("assets/generated/victory_result_frame_1790256000060/victory-result-frame-v4.png")!important;
}
.end-panel.clear .end-text>.result-line{display:none!important}
.end-panel.clear .end-actions{
  left:9.1%!important;
  right:9.1%!important;
  top:76.35%!important;
  width:auto!important;
  height:18.45%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:44.4% 44.4%!important;
  column-gap:3.25%!important;
  row-gap:11.2%!important;
  align-items:stretch!important;
}
.end-panel.clear .end-actions #endShardBonusButton{
  grid-column:1/-1!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1.15!important;
}
.end-panel.clear .end-actions #endRestartButton,
.end-panel.clear .end-actions #endHomeButton{
  grid-row:2!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}

/* Item detail legibility pass 1790256000120. The frame already paints its
   close glyph; DOM keeps only the hit target. Linked-set text no longer gets
   a synthetic CSS badge, and all readable copy is enlarged in place. */
.item-info-panel .item-info-card .item-info-head .icon-close-button::before,
.item-info-panel .item-info-card .item-info-head .icon-close-button::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  background:none!important;
  box-shadow:none!important;
}
.item-info-panel .item-info-card .item-info-head .icon-close-button{
  background:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  text-shadow:none!important;
}
.item-info-panel .item-info-card .item-relation-row.linked-set{
  grid-template-columns:minmax(0,1fr)!important;
  padding-inline:12px!important;
}
.item-info-panel .item-info-card .item-relation-row.linked-set .item-relation-mark{
  display:none!important;
}
.item-info-panel .item-info-card .item-info-head .label{
  font-size:9.8px!important;
  line-height:1.08!important;
}
.item-info-panel .item-info-card .item-info-head strong{
  font-size:18.4px!important;
  line-height:1.06!important;
}
.item-info-panel .item-info-card>#itemInfoText{
  font-size:10.8px!important;
  line-height:1.3!important;
}
.item-info-panel .item-info-card #itemInfoStats>.base-stat-chip small{
  font-size:11px!important;
  line-height:1.05!important;
}
.item-info-panel .item-info-card #itemInfoStats>.base-stat-chip strong{
  font-size:12px!important;
  line-height:1.18!important;
}
.item-info-panel .item-info-card #itemInfoStats>.item-effect-detail-chip small{
  font-size:10px!important;
  line-height:1.05!important;
}
.item-info-panel .item-info-card #itemInfoStats>.item-effect-detail-chip strong{
  font-size:10.6px!important;
  line-height:1.14!important;
}
.item-info-panel .item-info-card .item-relation-row small{
  font-size:9.2px!important;
  line-height:1!important;
}
.item-info-panel .item-info-card .item-relation-row strong{
  font-size:11.2px!important;
  line-height:1.05!important;
}
.item-info-panel .item-info-card .item-relation-row em{
  font-size:9.2px!important;
  line-height:1.08!important;
}
.item-info-panel .item-info-card .item-info-actions button>strong{
  font-size:14px!important;
}
.item-info-panel .item-info-card .item-info-actions button>small{
  font-size:9px!important;
}
.item-info-panel .item-info-card .item-info-head>div{
  box-sizing:border-box!important;
  padding-left:10px!important;
  padding-right:4px!important;
}
.item-info-panel .item-info-card .item-info-actions button{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
}
.item-info-panel .item-info-card .item-info-actions #itemPlaceButton,
.item-info-panel .item-info-card .item-info-actions #itemRemoveButton{
  gap:0!important;
}

/* Item detail full-width information rows 1790256000140.
   Four equipment summaries and two relationship summaries each own an entire
   authored bay, so long Korean values never have to squeeze into 1/3 columns. */
.item-info-panel .item-info-card,
.item-info-panel.mythic-item .item-info-card{
  background-image:url("assets/generated/item_detail_panel_v6_1790256000140/item-detail-panel-v6.png")!important;
}
.item-info-panel .item-info-card>#itemInfoText{
  display:none!important;
}
.item-info-panel .item-info-card .item-info-stats{
  left:14.1%!important;
  right:14.1%!important;
  top:25.15%!important;
  width:auto!important;
  height:40.95%!important;
  padding:3px 7px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:repeat(4,minmax(0,1fr))!important;
  gap:1.4%!important;
  overflow:hidden!important;
}
.item-info-panel .item-info-card .item-info-stats>span,
.item-info-panel .item-info-card .item-info-stats>span:nth-child(n),
.item-info-panel .item-info-card .item-info-stats>.base-stat-chip,
.item-info-panel .item-info-card .item-info-stats>.item-effect-detail-chip{
  grid-column:auto!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:4px 12px!important;
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  align-items:center!important;
  justify-items:stretch!important;
  place-content:normal!important;
  gap:9px!important;
  overflow:hidden!important;
  text-align:left!important;
}
.item-info-panel .item-info-card #itemInfoStats>span small,
.item-info-panel .item-info-card #itemInfoStats>.base-stat-chip small,
.item-info-panel .item-info-card #itemInfoStats>.item-effect-detail-chip small{
  width:100%!important;
  min-width:0!important;
  color:#9fe4f8!important;
  font-size:10.5px!important;
  line-height:1.08!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.item-info-panel .item-info-card #itemInfoStats>span strong,
.item-info-panel .item-info-card #itemInfoStats>.base-stat-chip strong,
.item-info-panel .item-info-card #itemInfoStats>.item-effect-detail-chip strong,
.item-info-panel .item-info-card #itemInfoStats>.compact-overflow strong{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  color:#fff0a8!important;
  font-size:11.4px!important;
  line-height:1.16!important;
  letter-spacing:-.025em!important;
  text-align:left!important;
  white-space:normal!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
  word-break:keep-all!important;
}
.item-info-panel .item-info-card .item-info-relations{
  left:14.1%!important;
  right:14.1%!important;
  top:67.05%!important;
  width:auto!important;
  height:19.35%!important;
  padding:3px 8px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:3.4%!important;
  overflow:hidden!important;
}
.item-info-panel .item-info-card .item-relation-row{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:3px 12px!important;
  overflow:hidden!important;
}
.item-info-panel .item-info-card .item-relation-row.recipe.unknown{
  grid-template-columns:78px minmax(0,1fr)!important;
  gap:9px!important;
}
.item-info-panel .item-info-card .item-relation-row.linked-set{
  grid-template-columns:minmax(0,1fr)!important;
  padding-inline:14px!important;
}
.item-info-panel .item-info-card .item-relation-row>div{
  min-width:0!important;
  overflow:hidden!important;
}
.item-info-panel .item-info-card .item-relation-row small{
  font-size:9.6px!important;
  line-height:1!important;
}
.item-info-panel .item-info-card .item-relation-row strong{
  font-size:11.6px!important;
  line-height:1.06!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.item-info-panel .item-info-card .item-relation-row em{
  font-size:9.7px!important;
  line-height:1.1!important;
  white-space:normal!important;
  overflow:hidden!important;
  word-break:keep-all!important;
}
.item-info-panel .item-info-card .item-info-actions{
  left:14.1%!important;
  right:14.1%!important;
  top:88.05%!important;
  width:auto!important;
  height:6.1%!important;
  column-gap:3.2%!important;
  overflow:hidden!important;
}
.item-info-panel .item-info-card .item-info-actions button>strong{
  font-size:13.5px!important;
}
.item-info-panel .item-info-card .item-info-actions button>small{
  font-size:8.6px!important;
}
.item-info-panel .item-info-card .item-info-relations:not([hidden])::after{
  content:"";
  display:block;
  grid-row:2;
  min-width:0;
  min-height:0;
}

/* Item detail visual hierarchy v7 1790256000150. The summary is compact,
   effect values use three taller rows, and all relationship information shares
   one purposeful final panel instead of leaving a false empty slot. */
.item-info-panel .item-info-card,
.item-info-panel.mythic-item .item-info-card{
  width:min(350px,calc(100vw - 10px))!important;
  aspect-ratio:909/1449!important;
  background-image:url("assets/generated/item_detail_panel_v9_1790256000180/item-detail-panel-v9.png")!important;
}
.item-info-panel .item-info-card .item-info-icon{
  left:17.1%!important;
  top:7.7%!important;
  width:22.6%!important;
  height:15.2%!important;
}
.item-info-panel .item-info-card .item-info-head>div{
  left:40.9%!important;
  right:15.2%!important;
  top:9.3%!important;
  height:9.5%!important;
}
.item-info-panel .item-info-card .item-info-head .icon-close-button{
  left:78.2%!important;
  top:6.4%!important;
  width:9%!important;
  height:6.4%!important;
}
.item-info-panel .item-info-card .item-info-stats{
  left:12.7%!important;
  right:12.6%!important;
  top:23.55%!important;
  height:47.35%!important;
  padding:3px 8px!important;
  top:23.6%!important;
  height:47.2%!important;
  grid-template-rows:repeat(4,minmax(0,1fr))!important;
  gap:2.15%!important;
}
.item-info-panel .item-info-card .item-info-stats>span,
.item-info-panel .item-info-card .item-info-stats>span:nth-child(n),
.item-info-panel .item-info-card .item-info-stats>.base-stat-chip,
.item-info-panel .item-info-card .item-info-stats>.item-effect-detail-chip{
  padding:5px 13px!important;
  grid-template-columns:76px minmax(0,1fr)!important;
  gap:10px!important;
}
.item-info-panel .item-info-card .item-info-stats>.base-stat-chip{padding-top:5px!important}
.item-info-panel .item-info-card #itemInfoStats>span small,
.item-info-panel .item-info-card #itemInfoStats>.base-stat-chip small,
.item-info-panel .item-info-card #itemInfoStats>.item-effect-detail-chip small{
  font-size:10.8px!important;
}
.item-info-panel .item-info-card #itemInfoStats>span strong,
.item-info-panel .item-info-card #itemInfoStats>.base-stat-chip strong,
.item-info-panel .item-info-card #itemInfoStats>.item-effect-detail-chip strong,
.item-info-panel .item-info-card #itemInfoStats>.compact-overflow strong{
  font-size:11.2px!important;
  line-height:1.22!important;
  letter-spacing:-.018em!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
}
.item-info-panel .item-info-card .item-info-stats>.base-stat-chip{
  grid-template-columns:76px minmax(0,1fr)!important;
}
.item-info-panel .item-info-card .item-info-relations{
  left:12.7%!important;
  right:12.6%!important;
  top:72.55%!important;
  height:15.2%!important;
  padding:8px 15px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:8px!important;
}
.item-info-panel .item-info-card .item-info-relations:not([hidden])::after{
  display:none!important;
}
.item-info-panel .item-info-card .item-relation-row{
  width:100%!important;
  height:auto!important;
  min-height:54px!important;
  padding:5px 11px!important;
  border:0!important;
  background:linear-gradient(90deg,transparent,rgba(31,67,85,.18),transparent)!important;
}
.item-info-panel .item-info-card .item-relation-row+.item-relation-row{
  border-top:1px solid rgba(126,170,188,.34)!important;
}
.item-info-panel .item-info-card .item-relation-row.recipe.unknown{
  grid-template-columns:76px minmax(0,1fr)!important;
  gap:8px!important;
}
.item-info-panel .item-info-card .item-relation-row.linked-set,
.item-info-panel .item-info-card .item-relation-row.relation-empty{
  grid-template-columns:minmax(0,1fr)!important;
}
.item-info-panel .item-info-card .item-relation-row.linked-set>div{
  align-items:center!important;
  text-align:center!important;
  gap:4px!important;
}
.item-info-panel .item-info-card .item-relation-row.linked-set strong{
  text-align:center!important;
}
.item-info-panel .item-info-card .item-relation-row.linked-set strong small{
  display:inline!important;
  margin-right:4px!important;
  color:#91d9ee!important;
}
.item-info-panel .item-info-card .item-relation-row.linked-set em{
  width:100%!important;
  text-align:center!important;
}
.item-info-panel .item-info-card .item-relation-row>div{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
  min-width:0!important;
  overflow:hidden!important;
}
.item-info-panel .item-info-card .item-relation-row small{
  font-size:9.8px!important;
}
.item-info-panel .item-info-card .item-relation-row strong{
  font-size:11.8px!important;
  width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.item-info-panel .item-info-card .item-relation-row em{
  font-size:9.7px!important;
  line-height:1.16!important;
}
.item-info-panel .item-info-card .item-info-actions{
  left:12.7%!important;
  right:12.6%!important;
  top:89.05%!important;
  height:7.25%!important;
  column-gap:3.35%!important;
}
.item-info-panel .item-info-card .item-info-actions button{
  transform:none!important;
}
.item-info-panel .item-info-card .item-info-actions #itemSellButton{
  gap:1px!important;
}
.item-info-panel .item-info-card .item-info-actions #itemSellButton>strong{
  font-size:13.2px!important;
}
.item-info-panel .item-info-card .item-info-actions #itemSellButton>small{
  font-size:8.2px!important;
  line-height:1!important;
}
.item-info-panel .item-info-card .item-info-actions button>strong,
.item-info-panel .item-info-card .item-info-actions #itemSellButton>strong{
  font-size:14px!important;
  line-height:1!important;
}

/* Item detail optical alignment v10 1790256000190. Content owns fixed inner
   columns instead of centering two unequal text blocks independently. */
.item-info-panel .item-info-card,
.item-info-panel.mythic-item .item-info-card{
  background-image:url("assets/generated/item_detail_panel_v10_1790256000190/item-detail-panel-v10.png")!important;
}
.item-info-panel .item-info-card .item-info-stats>span,
.item-info-panel .item-info-card .item-info-stats>span:nth-child(n),
.item-info-panel .item-info-card .item-info-stats>.base-stat-chip,
.item-info-panel .item-info-card .item-info-stats>.item-effect-detail-chip{
  padding:0 15px!important;
  grid-template-columns:78px minmax(0,1fr)!important;
  column-gap:9px!important;
  align-items:center!important;
}
.item-info-panel .item-info-card #itemInfoStats>span small,
.item-info-panel .item-info-card #itemInfoStats>.base-stat-chip small,
.item-info-panel .item-info-card #itemInfoStats>.item-effect-detail-chip small{
  align-self:start!important;
  margin-top:22px!important;
  line-height:13.5px!important;
  text-align:center!important;
}
.item-info-panel .item-info-card #itemInfoStats>span strong,
.item-info-panel .item-info-card #itemInfoStats>.base-stat-chip strong,
.item-info-panel .item-info-card #itemInfoStats>.item-effect-detail-chip strong,
.item-info-panel .item-info-card #itemInfoStats>.compact-overflow strong{
  align-self:center!important;
  padding:0!important;
  font-size:11px!important;
  line-height:13.5px!important;
  text-align:left!important;
}
.item-info-panel .item-info-card .item-info-relations{
  padding:0 18px!important;
  justify-content:center!important;
  align-items:stretch!important;
}
.item-info-panel .item-info-card .item-relation-row,
.item-info-panel .item-info-card .item-relation-row.recipe.unknown{
  min-height:0!important;
  height:100%!important;
  padding:0 8px!important;
  grid-template-columns:70px minmax(0,1fr)!important;
  gap:9px!important;
  align-items:center!important;
  background:none!important;
}
.item-info-panel .item-info-card .item-recipe-equation{
  width:68px!important;
  justify-self:center!important;
}
.item-info-panel .item-info-card .item-relation-row>div{
  height:100%!important;
  justify-content:center!important;
  gap:3px!important;
}
.item-info-panel .item-info-card .item-info-actions button{
  transform:translateY(-3px)!important;
}
.item-info-panel .item-info-card .item-info-actions button>strong,
.item-info-panel .item-info-card .item-info-actions #itemSellButton>strong{
  font-size:14px!important;
  line-height:14px!important;
}

/* High-resolution stage reward icon pass 1790256000259. */
.reward-panel:not(.boss-reward) .reward-card .reward-icon{
  width:62px!important;
  height:62px!important;
  image-rendering:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.82)) drop-shadow(0 0 7px rgba(71,185,255,.22))!important;
}
.reward-panel:not(.boss-reward) .reward-modal-card .reward-card:not(.reward-ad-reroll){
  grid-template-rows:64px auto!important;
  gap:5px!important;
}
.reward-panel:not(.boss-reward)[data-reward-count="4"] .reward-card .reward-icon,
.reward-panel:not(.boss-reward).reward-four .reward-card .reward-icon{
  width:54px!important;
  height:54px!important;
}
.reward-panel:not(.boss-reward)[data-reward-count="4"] .reward-modal-card .reward-card:not(.reward-ad-reroll),
.reward-panel:not(.boss-reward).reward-four .reward-modal-card .reward-card:not(.reward-ad-reroll){
  grid-template-rows:56px auto!important;
  gap:4px!important;
}
.reward-panel.boss-reward .reward-card .reward-icon{
  image-rendering:auto!important;
}

/* The painted third slot ends above the ornamental footer. Move only its
   live icon/copy, not the card or the shared three-choice grid. */
.reward-panel:not(.boss-reward)[data-reward-count="3"] .reward-grid>.reward-card:nth-child(3)>.reward-icon,
.reward-panel:not(.boss-reward)[data-reward-count="3"] .reward-grid>.reward-card:nth-child(3)>.reward-copy{
  transform:translateY(-12px)!important;
}

/* Combat stat detail redesign 1790256000262.
   The summary stays fixed; all derived values and applied effects share one
   readable scroll surface. Resizable plates use the authored nine-slice art. */
.combat-stats-card{
  grid-template-rows:auto auto minmax(0,1fr)!important;
  gap:7px!important;
}
.combat-stats-card .combat-stats-summary{
  box-sizing:border-box!important;
  width:calc(100% - 10px)!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  margin:0 auto!important;
}
.combat-stats-card .combat-power-hero{
  box-sizing:border-box!important;
  min-height:70px!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:8px!important;
  padding:4px 10px!important;
  border-width:7px 14px!important;
  border-radius:0!important;
  border-image:url("assets/generated/loot_bag_shell_1790147000000/button-plate-9slice.png") 70 200 fill/7px 14px/0 stretch!important;
  background:rgba(3,12,22,.7) padding-box!important;
  box-shadow:none!important;
}
.combat-stats-card .combat-power-hero>img{
  width:50px!important;
  height:50px!important;
}
.combat-stats-card .combat-power-hero>span{
  grid-template-columns:auto minmax(0,1fr)!important;
  column-gap:8px!important;
}
.combat-stats-card .combat-power-hero small{
  font-size:8.8px!important;
  line-height:1.15!important;
}
.combat-stats-card .combat-core-grid{
  box-sizing:border-box!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
  margin:0!important;
}
.combat-stats-card .combat-core-stat{
  position:relative!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:45px!important;
  grid-template-columns:23px minmax(0,1fr)!important;
  gap:5px!important;
  padding:2px 8px!important;
  border-width:6px 11px!important;
  border-radius:0!important;
  border-image:url("assets/generated/loot_bag_shell_1790147000000/button-plate-9slice.png") 70 200 fill/6px 11px/0 stretch!important;
  background:rgba(2,11,20,.75) padding-box!important;
  box-shadow:none!important;
}
.combat-stats-card .combat-core-stat::before,
.combat-stats-card .combat-stat-detail::before{
  content:""!important;
  position:absolute!important;
  left:2px!important;
  top:50%!important;
  width:3px!important;
  height:18px!important;
  border-radius:2px!important;
  transform:translateY(-50%)!important;
  background:#b27cda!important;
  box-shadow:0 0 6px currentColor!important;
}
.combat-stats-card .combat-core-stat.tone-attack::before,
.combat-stats-card .combat-stat-detail.tone-attack::before{background:#e18d67!important;color:#e18d67!important}
.combat-stats-card .combat-core-stat.tone-guard::before,
.combat-stats-card .combat-stat-detail.tone-guard::before{background:#5eb7e9!important;color:#5eb7e9!important}
.combat-stats-card .combat-core-stat.tone-life::before,
.combat-stats-card .combat-stat-detail.tone-life::before{background:#62d497!important;color:#62d497!important}
.combat-stats-card .combat-core-stat.tone-tempo::before,
.combat-stats-card .combat-stat-detail.tone-tempo::before{background:#bd83e8!important;color:#bd83e8!important}
.combat-stats-card .combat-core-stat img{
  width:22px!important;
  height:22px!important;
}
.combat-stats-card .combat-core-stat small{
  font-size:9px!important;
  line-height:1!important;
}
.combat-stats-card .combat-core-stat strong{
  overflow:visible!important;
  font-size:14px!important;
  line-height:1!important;
  text-overflow:clip!important;
}
.combat-stats-card .combat-stats-scroll-body{
  box-sizing:border-box!important;
  width:calc(100% - 10px)!important;
  min-width:0!important;
  min-height:0!important;
  display:block!important;
  margin:0 auto!important;
  padding:0 5px 4px 0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  scrollbar-width:thin!important;
  scrollbar-color:#397c9b transparent!important;
}
.combat-stats-card .combat-stats-scroll-body::-webkit-scrollbar{width:5px!important}
.combat-stats-card .combat-stats-scroll-body::-webkit-scrollbar-track{background:transparent!important}
.combat-stats-card .combat-stats-scroll-body::-webkit-scrollbar-thumb{
  border-radius:5px!important;
  background:linear-gradient(180deg,#5cbbd8,#254d6b)!important;
}
.combat-stats-card .combat-stats-detail-list{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:start!important;
  gap:5px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.combat-stats-card .combat-detail-heading{
  min-height:30px!important;
  padding:4px 3px 5px!important;
}
.combat-stats-card .combat-detail-heading strong{font-size:11.5px!important}
.combat-stats-card .combat-detail-heading small{font-size:8px!important}
.combat-stats-card .combat-stat-detail{
  position:relative!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:50px!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:5px!important;
  margin:0!important;
  padding:3px 7px 3px 9px!important;
  border-width:6px 10px!important;
  border-radius:0!important;
  border-image:url("assets/generated/loot_bag_shell_1790147000000/button-plate-9slice.png") 70 200 fill/6px 10px/0 stretch!important;
  background:rgba(2,11,20,.76) padding-box!important;
  box-shadow:none!important;
}
.combat-stats-card .combat-stat-detail>span{
  min-width:0!important;
  gap:2px!important;
  font-size:10.2px!important;
  line-height:1.08!important;
}
.combat-stats-card .combat-stat-detail small{
  overflow:visible!important;
  color:#91adba!important;
  font-size:8.4px!important;
  line-height:1.13!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.combat-stats-card .combat-stat-detail>strong{
  max-width:54px!important;
  overflow:visible!important;
  font-size:13.5px!important;
  line-height:1!important;
  text-align:right!important;
  white-space:nowrap!important;
}
.combat-stats-card .combat-stats-effect-list{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:0!important;
  display:grid!important;
  gap:5px!important;
  margin:8px 0 0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
.combat-stats-card .combat-effect-title{
  position:static!important;
  padding:4px 3px 3px!important;
  color:#fff0af!important;
  background:none!important;
  font-size:11.5px!important;
}
.combat-stats-card .combat-effect-group{
  box-sizing:border-box!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:45px minmax(0,1fr)!important;
  align-items:start!important;
  gap:6px!important;
  padding:4px 8px!important;
  border-width:6px 10px!important;
  border-radius:0!important;
  border-image:url("assets/generated/loot_bag_shell_1790147000000/button-plate-9slice.png") 70 200 fill/6px 10px/0 stretch!important;
  background:rgba(2,11,20,.78) padding-box!important;
}
.combat-stats-card .combat-effect-group>strong{
  display:grid!important;
  gap:2px!important;
  color:#9edff1!important;
  font-size:10px!important;
  line-height:1.1!important;
}
.combat-stats-card .combat-effect-group>strong b{color:#9edff1!important}
.combat-stats-card .combat-effect-group>strong em{
  color:#667f8e!important;
  font-size:8px!important;
  font-style:normal!important;
}
.combat-stats-card .combat-effect-group>div{
  min-width:0!important;
  display:grid!important;
  gap:4px!important;
}
.combat-stats-card .combat-effect-group>div>span{
  display:block!important;
  color:#d8e7ed!important;
  font-size:9.5px!important;
  font-weight:850!important;
  line-height:1.28!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.combat-stats-card .combat-effect-empty{
  padding:8px 10px!important;
  color:#9ab0ba!important;
  font-size:9.5px!important;
  line-height:1.3!important;
}

/* Combat stat readability pass 1790256000263.
   Remove the compressed mini-button treatment. The outer painted frame owns
   the ornament; the information inside uses one quiet, aligned ledger. */
.combat-stats-card .combat-stats-summary{
  width:calc(100% - 8px)!important;
  gap:0!important;
}
.combat-stats-card .combat-power-hero{
  min-height:63px!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:9px!important;
  padding:5px 10px!important;
  border:0!important;
  border-top:1px solid rgba(204,172,91,.38)!important;
  border-bottom:1px solid rgba(204,172,91,.38)!important;
  border-image:none!important;
  border-radius:0!important;
  background:linear-gradient(90deg,rgba(9,21,34,.28),rgba(11,27,42,.72) 26%,rgba(5,16,27,.58))!important;
  box-shadow:inset 0 1px rgba(255,240,185,.025),inset 0 -1px rgba(0,0,0,.52)!important;
}
.combat-stats-card .combat-power-hero>img{
  width:44px!important;
  height:44px!important;
}
.combat-stats-card .combat-power-hero small{
  color:#96bdcc!important;
  font-size:9.2px!important;
}
.combat-stats-card .combat-power-hero strong{font-size:27px!important}
.combat-stats-card .combat-power-hero em{font-size:10px!important}
.combat-stats-card .combat-core-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  padding:3px 0 4px!important;
  border-bottom:1px solid rgba(88,166,199,.26)!important;
  background:rgba(2,11,20,.4)!important;
}
.combat-stats-card .combat-core-stat,
.combat-stats-card .combat-core-stat:nth-child(n){
  min-height:42px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  place-items:center!important;
  gap:0!important;
  padding:3px 4px!important;
  border:0!important;
  border-right:1px solid rgba(83,139,164,.24)!important;
  border-image:none!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
.combat-stats-card .combat-core-stat:last-child{border-right:0!important}
.combat-stats-card .combat-core-stat::before,
.combat-stats-card .combat-stat-detail::before{display:none!important}
.combat-stats-card .combat-core-stat img{display:none!important}
.combat-stats-card .combat-core-stat span{
  width:100%!important;
  display:grid!important;
  place-items:center!important;
  gap:3px!important;
  text-align:center!important;
}
.combat-stats-card .combat-core-stat small{
  color:#91cfe2!important;
  font-size:9.3px!important;
}
.combat-stats-card .combat-core-stat strong{
  color:#fff0ae!important;
  font-size:15px!important;
}
.combat-stats-card .combat-stats-scroll-body{
  width:calc(100% - 8px)!important;
  padding:0 3px 3px 0!important;
  scrollbar-color:rgba(64,121,146,.68) transparent!important;
}
.combat-stats-card .combat-stats-scroll-body::-webkit-scrollbar{width:3px!important}
.combat-stats-card .combat-stats-scroll-body::-webkit-scrollbar-thumb{
  border-radius:3px!important;
  background:rgba(70,137,164,.68)!important;
}
.combat-stats-card .combat-stats-detail-list{
  grid-template-columns:1fr!important;
  gap:0!important;
  border-top:1px solid rgba(82,153,183,.22)!important;
  background:rgba(1,8,15,.26)!important;
}
.combat-stats-card .combat-detail-heading{
  min-height:31px!important;
  padding:5px 5px 6px!important;
  border-bottom:1px solid rgba(88,166,199,.25)!important;
  background:linear-gradient(90deg,rgba(8,24,37,.56),rgba(3,13,23,.18))!important;
}
.combat-stats-card .combat-detail-heading strong{
  color:#fff0ad!important;
  font-size:12px!important;
}
.combat-stats-card .combat-detail-heading small{
  color:#78aabb!important;
  font-size:8.8px!important;
}
.combat-stats-card .combat-stat-detail,
.combat-stats-card .combat-stat-detail:nth-child(n){
  width:100%!important;
  min-height:42px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 52px!important;
  align-items:center!important;
  gap:7px!important;
  padding:5px 6px!important;
  border:0!important;
  border-bottom:1px solid rgba(78,132,156,.2)!important;
  border-image:none!important;
  border-radius:0!important;
  background:rgba(3,14,24,.2)!important;
  box-shadow:none!important;
}
.combat-stats-card .combat-stat-detail:nth-child(odd){background:rgba(9,26,39,.26)!important}
.combat-stats-card .combat-stat-detail>span{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:86px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
  color:inherit!important;
}
.combat-stats-card .combat-stat-detail>span>b{
  color:#dcecf2!important;
  font-size:10.4px!important;
  font-weight:950!important;
  line-height:1.18!important;
  white-space:normal!important;
}
.combat-stats-card .combat-stat-detail small{
  color:#829fac!important;
  font-size:9.3px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
.combat-stats-card .combat-stat-detail>strong{
  max-width:none!important;
  color:#ffedaa!important;
  font-size:14px!important;
  line-height:17px!important;
  min-height:17px!important;
  text-align:right!important;
}
.combat-stats-card .combat-stats-effect-list{
  gap:0!important;
  margin:8px 0 0!important;
  border-top:1px solid rgba(82,153,183,.24)!important;
  background:rgba(1,8,15,.24)!important;
}
.combat-stats-card .combat-effect-title{
  min-height:29px!important;
  box-sizing:border-box!important;
  padding:7px 5px 5px!important;
  border-bottom:1px solid rgba(82,153,183,.24)!important;
  font-size:12px!important;
}
.combat-stats-card .combat-effect-group{
  min-height:0!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  gap:8px!important;
  padding:7px 6px!important;
  border:0!important;
  border-bottom:1px solid rgba(78,132,156,.2)!important;
  border-image:none!important;
  border-radius:0!important;
  background:rgba(3,14,24,.2)!important;
  box-shadow:none!important;
}
.combat-stats-card .combat-effect-group>strong{
  gap:3px!important;
  color:#9bd7e8!important;
  font-size:10.5px!important;
}
.combat-stats-card .combat-effect-group>strong em{font-size:8.5px!important}
.combat-stats-card .combat-effect-group>div{gap:5px!important}
.combat-stats-card .combat-effect-group>div>span{
  color:#d2e1e7!important;
  font-size:10.2px!important;
  line-height:1.34!important;
}

/* Dedicated painted combat-stat panel 1790256000265.
   The 841x1870 asset is authored at the live 370x823 aspect ratio. CSS only
   places text inside painted bays; it does not draw cards, dividers or chrome. */
.combat-stats-card{
  position:relative!important;
  box-sizing:border-box!important;
  width:auto!important;
  height:min(823px,calc(100dvh - 10px))!important;
  max-width:calc(100vw - 10px)!important;
  aspect-ratio:841/1870!important;
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("assets/generated/combat_stats_panel_v1_1790256000265/combat-stats-panel.png") center/contain no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 13px 21px rgba(0,0,0,.7))!important;
}
.combat-stats-card .combat-stats-head{
  position:absolute!important;
  z-index:3!important;
  left:22%!important;
  top:5.5%!important;
  width:56%!important;
  height:6.8%!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  background:none!important;
}
.combat-stats-card .combat-stats-head>div{
  display:grid!important;
  place-items:center!important;
  gap:1px!important;
  text-align:center!important;
}
.combat-stats-card .combat-stats-head .label{
  color:#7fd4ed!important;
  font-size:8.4px!important;
  line-height:1!important;
}
.combat-stats-card .combat-stats-head strong{
  color:#fff0ad!important;
  font-size:18px!important;
  line-height:1.08!important;
}
.combat-stats-card .combat-stats-head .icon-close-button{
  position:absolute!important;
  top:3px!important;
  right:-38px!important;
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center/contain no-repeat!important;
  box-shadow:none!important;
  filter:none!important;
  color:transparent!important;
  font-size:0!important;
}
.combat-stats-card .combat-stats-head .icon-close-button::before,
.combat-stats-card .combat-stats-head .icon-close-button::after{content:none!important;display:none!important}
.combat-stats-card .combat-stats-summary{
  position:static!important;
  display:contents!important;
}
.combat-stats-card .combat-power-hero{
  position:absolute!important;
  z-index:2!important;
  left:14.9%!important;
  top:13.7%!important;
  width:70.2%!important;
  height:8.2%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  padding:0 15px!important;
  border:0!important;
  border-image:none!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
.combat-stats-card .combat-power-hero>img{
  width:41px!important;
  height:41px!important;
}
.combat-stats-card .combat-power-hero small{font-size:9px!important}
.combat-stats-card .combat-power-hero strong{font-size:26px!important}
.combat-stats-card .combat-power-hero em{font-size:9.5px!important}
.combat-stats-card .combat-core-grid{
  position:absolute!important;
  z-index:2!important;
  left:14.7%!important;
  top:22.15%!important;
  width:70.6%!important;
  height:6.45%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}
.combat-stats-card .combat-core-stat,
.combat-stats-card .combat-core-stat:nth-child(n){
  min-height:0!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  padding:0 4px!important;
  border:0!important;
  border-image:none!important;
  background:none!important;
  box-shadow:none!important;
}
.combat-stats-card .combat-core-stat img,
.combat-stats-card .combat-core-stat::before{display:none!important}
.combat-stats-card .combat-core-stat span{
  display:grid!important;
  place-items:center!important;
  gap:3px!important;
}
.combat-stats-card .combat-core-stat small{font-size:9.2px!important}
.combat-stats-card .combat-core-stat strong{font-size:14.5px!important}
.combat-stats-card .combat-stats-scroll-body{
  position:absolute!important;
  z-index:2!important;
  left:15.2%!important;
  top:30%!important;
  width:69.3%!important;
  height:55.65%!important;
  min-height:0!important;
  box-sizing:border-box!important;
  display:block!important;
  margin:0!important;
  padding:10px 8px var(--combat-scroll-tail,24px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  scroll-padding-block:10px 24px!important;
  scroll-snap-type:y mandatory!important;
  border:0!important;
  background:none!important;
  scrollbar-width:none!important;
}
.combat-stats-card .combat-stats-scroll-body::-webkit-scrollbar{display:none!important}
.combat-stats-card .combat-stats-detail-list{
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  background:none!important;
}
.combat-stats-card .combat-detail-heading{
  min-height:30px!important;
  display:flex!important;
  align-items:center!important;
  padding:2px 0 5px!important;
  border:0!important;
  background:none!important;
  scroll-snap-align:start!important;
}
.combat-stats-card .combat-detail-heading strong{font-size:12px!important}
.combat-stats-card .combat-detail-heading small{font-size:8.5px!important}
.combat-stats-card .combat-stat-detail,
.combat-stats-card .combat-stat-detail:nth-child(n){
  box-sizing:border-box!important;
  width:100%!important;
  min-height:38px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 62px!important;
  align-items:center!important;
  gap:5px!important;
  margin:0!important;
  padding:4px 0!important;
  border:0!important;
  border-image:none!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  scroll-snap-align:start!important;
}
.combat-stats-card .combat-stat-detail::before{display:none!important}
.combat-stats-card .combat-stat-detail>span{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  align-items:center!important;
  gap:6px!important;
}
.combat-stats-card .combat-stat-detail>span>b{
  color:#dcecf2!important;
  font-size:10.3px!important;
  line-height:1.18!important;
}
.combat-stats-card .combat-stat-detail small{
  color:#819eab!important;
  font-size:9px!important;
  line-height:1.2!important;
}
.combat-stats-card .combat-stat-detail>strong{
  min-height:17px!important;
  color:#ffedaa!important;
  font-size:13.5px!important;
  line-height:17px!important;
  white-space:nowrap!important;
  text-align:right!important;
}
.combat-stats-card .combat-stats-effect-list{
  width:100%!important;
  display:grid!important;
  gap:3px!important;
  margin:12px 0 0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  background:none!important;
}
.combat-stats-card .combat-effect-title{
  position:static!important;
  min-height:32px!important;
  box-sizing:border-box!important;
  padding:7px 0!important;
  border:0!important;
  background:none!important;
  font-size:12px!important;
  scroll-snap-align:start!important;
}
.combat-stats-card .combat-effect-group,
.combat-stats-card .combat-effect-group:nth-child(n){
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:9px!important;
  padding:9px 0!important;
  border:0!important;
  border-image:none!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  scroll-snap-align:start!important;
}
.combat-stats-card .combat-effect-group>strong{font-size:10.8px!important}
.combat-stats-card .combat-effect-group>strong em{font-size:8.8px!important}
.combat-stats-card .combat-effect-group>div>span{
  color:#d2e1e7!important;
  font-size:10.35px!important;
  line-height:1.4!important;
  scroll-snap-align:start!important;
}
.combat-stats-card .combat-stats-scroll-hint{
  position:absolute!important;
  z-index:4!important;
  right:14.4%!important;
  bottom:14.35%!important;
  width:20px!important;
  height:20px!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:none!important;
  opacity:0!important;
  transform:translateY(-2px)!important;
  transition:opacity .18s ease,transform .18s ease!important;
}
.combat-stats-card .combat-stats-scroll-hint.is-visible{
  opacity:.78!important;
  transform:translateY(0)!important;
}
.combat-stats-card .combat-stats-scroll-hint img{
  display:block!important;
  width:19px!important;
  height:19px!important;
  object-fit:contain!important;
  filter:sepia(1) saturate(1.35) hue-rotate(348deg) brightness(1.65) drop-shadow(0 1px 3px #000)!important;
}

/* Element rows stay inside the existing painted stats recess. No new surface. */
.combat-stats-card .combat-element-section{min-width:0;margin:8px 0 32px}
.combat-stats-card .combat-element-heading{padding:5px 0 8px;scroll-snap-align:start}
.combat-stats-card .combat-element-heading strong{display:block;color:#ffedaa;font-size:13px;line-height:1.5}
.combat-stats-card .combat-element-heading small{display:block;color:#9bb7c4;font-size:9.5px;line-height:1.5}
.combat-stats-card .combat-element-row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:7px;min-height:46px;padding:4px 0;box-sizing:border-box;scroll-snap-align:start}
.combat-stats-card .combat-element-name{font-size:14px;line-height:1.4;text-align:left;color:#dcecf2}
.combat-stats-card .combat-element-value{display:grid;justify-items:center;align-content:center;gap:3px;min-width:0;text-align:center}
.combat-stats-card .combat-element-value small{color:#adc6d0;font-size:10px;line-height:1.3;white-space:nowrap}
.combat-stats-card .combat-element-value b{color:#ffedaa;font-size:14px;line-height:1.35;white-space:nowrap}
.combat-stats-card .combat-element-value.is-empty b{color:#8196a1;font-size:12px;font-weight:400}
.combat-stats-card .combat-element-extra{grid-column:2 / 4;display:block;margin:4px 0 1px;color:#a8c1cc;font-size:10px;line-height:1.5;text-align:center;overflow-wrap:anywhere}
.combat-stats-card .combat-element-extra b{color:#ffedaa;font-size:12px;white-space:nowrap}
.combat-stats-card .combat-element-note{margin:8px 0 2px;color:#8da8b5;font-size:9.5px;line-height:1.6;scroll-snap-align:start}

/* Loot-board runes carry the grade's core accent, not the pale copy tint used
   for long item text. The shared socket uses currentColor for rim and glow. */
#capsulesPanel .capsule.rarity-F{color:#f4f7ef!important}
#capsulesPanel .capsule.rarity-D{color:#8297aa!important}
#capsulesPanel .capsule.rarity-C{color:#4ade80!important}
#capsulesPanel .capsule.rarity-B{color:#35c8ff!important}
#capsulesPanel .capsule.rarity-A{color:#a970ff!important}
#capsulesPanel .capsule.rarity-S{color:#ff873b!important}
#capsulesPanel .capsule.rarity-SS{color:#ffe052!important}
#capsulesPanel .capsule.rarity-SSS{color:#ff4d59!important}

/* High-resolution active-effect art and reward-result optical text alignment. */
#bagPanel .effect-summary-chip img.smooth-art{
  width:28px!important;
  height:28px!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.74)) drop-shadow(0 0 5px rgba(53,205,255,.4))!important;
}
.unlock-showcase.reward-result.effect-smooth-icon .unlock-icon{
  width:92px!important;
  height:92px!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.72)) drop-shadow(0 0 11px rgba(38,213,255,.38)) drop-shadow(0 0 8px rgba(218,37,69,.34))!important;
}
.unlock-showcase.reward-result.effect-smooth-icon .unlock-card>p{
  padding:0 12px 1px!important;
  overflow:hidden!important;
  font-size:10.5px!important;
  line-height:1.22!important;
  white-space:normal!important;
}
.unlock-showcase.reward-result.effect-smooth-icon .unlock-confirm-button{
  display:grid!important;
  place-items:center!important;
  padding:4px 0 0!important;
  line-height:1!important;
}
.unlock-showcase.reward-result.effect-smooth-icon .unlock-confirm-button:focus,
.unlock-showcase.reward-result.effect-smooth-icon .unlock-confirm-button:focus-visible{
  outline:0!important;
  box-shadow:none!important;
  text-shadow:0 1px 2px #000,0 0 7px rgba(255,223,129,.45)!important;
}

/* Supply-scrap result: optically align the copy to the painted recesses. */
.unlock-showcase.reward-result[data-reward-type="scrap"] .unlock-card>p,
.unlock-showcase.reward-result[data-reward-type="scrapBig"] .unlock-card>p{
  top:71.8%!important;
  height:10.4%!important;
  display:grid!important;
  place-items:center!important;
  padding:0 8px 2px!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums!important;
}
.unlock-showcase.reward-result[data-reward-type="scrap"] .unlock-confirm-button,
.unlock-showcase.reward-result[data-reward-type="scrapBig"] .unlock-confirm-button{
  left:29%!important;
  right:29%!important;
  bottom:6.1%!important;
  height:7.2%!important;
  display:grid!important;
  place-items:center!important;
  padding:0 0 2px!important;
  line-height:1!important;
}
.unlock-showcase.reward-result[data-reward-type="scrap"] .unlock-confirm-button:focus,
.unlock-showcase.reward-result[data-reward-type="scrap"] .unlock-confirm-button:focus-visible,
.unlock-showcase.reward-result[data-reward-type="scrapBig"] .unlock-confirm-button:focus,
.unlock-showcase.reward-result[data-reward-type="scrapBig"] .unlock-confirm-button:focus-visible{
  outline:0!important;
  box-shadow:none!important;
  text-shadow:0 1px 2px #000,0 0 7px rgba(255,223,129,.45)!important;
}

/* Purge-result button: align the copy to the painted blue recess, not the
   transparent bitmap bounds. */
.unlock-showcase.reward-result:is([data-reward-type="purgeF"],[data-reward-type="purgeF3"],[data-reward-type="riskPurge"]) .unlock-confirm-button{
  display:grid!important;
  place-items:center!important;
  padding:4px 0 0!important;
  line-height:1!important;
}
.unlock-showcase.reward-result:is([data-reward-type="purgeF"],[data-reward-type="purgeF3"],[data-reward-type="riskPurge"]) .unlock-confirm-button:focus,
.unlock-showcase.reward-result:is([data-reward-type="purgeF"],[data-reward-type="purgeF3"],[data-reward-type="riskPurge"]) .unlock-confirm-button:focus-visible{
  outline:0!important;
  box-shadow:none!important;
}

/* King Legacy readability pass: transparent silhouette, larger type, aligned ad art. */
.reward-panel.boss-reward .reward-modal-card{
  width:min(420px,calc(100vw - 6px),calc(63.57dvh - 4px))!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:1000/1573!important;
  overflow:hidden!important;
  background:transparent url("assets/generated/king_legacy_readable_1790860800005/king-legacy-frame-alpha.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 14px 19px rgba(0,0,0,.74))!important;
}
.reward-panel.boss-reward .reward-modal-card>div:first-child>strong{
  left:22%!important;
  right:22%!important;
  top:13.55%!important;
  font-size:18px!important;
  line-height:1!important;
}
.reward-panel.boss-reward .reward-boss-portrait{
  top:18.9%!important;
  width:60%!important;
  height:27.7%!important;
}
.reward-panel.boss-reward .reward-grid{
  left:14.8%!important;
  right:14.8%!important;
  top:50.3%!important;
  bottom:5.9%!important;
  grid-template-rows:repeat(4,minmax(0,1fr)) .9fr!important;
  gap:.7%!important;
}
.reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll){
  padding:4px 11px!important;
  grid-template-columns:43px minmax(0,1fr)!important;
  gap:9px!important;
}
.reward-panel.boss-reward .reward-card .reward-icon{
  width:41px!important;
  height:41px!important;
  place-self:center!important;
  object-fit:contain!important;
  object-position:center!important;
}
.reward-panel.boss-reward .reward-card .reward-copy{
  gap:3px!important;
}
.reward-panel.boss-reward .reward-card .reward-copy strong{
  font-size:15px!important;
  line-height:1.08!important;
}
.reward-panel.boss-reward .reward-card .reward-copy small{
  max-height:none!important;
  font-size:10.8px!important;
  line-height:1.18!important;
}
.reward-panel.boss-reward .boss-reroll-action::before{
  content:none!important;
  display:none!important;
}
.reward-panel.boss-reward .reward-ad-reroll{
  grid-template-columns:36px minmax(0,1fr) 18px!important;
  gap:7px!important;
  padding:4px 13px!important;
}
.reward-panel.boss-reward .reward-ad-icon-wrap{
  width:36px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
}
.reward-panel.boss-reward .reward-ad-icon-wrap .reward-icon{
  width:33px!important;
  height:33px!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7)) drop-shadow(0 0 5px rgba(133,74,255,.38))!important;
}
.reward-panel.boss-reward .reward-ad-reroll .reward-copy strong{
  font-size:11.2px!important;
  line-height:1!important;
  text-align:center!important;
}

/* King Legacy: keep two-line reward descriptions inside the painted slots. */
@media (max-width:390px){
  .reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll){
    padding:3px 7px!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:7px!important;
  }

  .reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-icon{
    width:37px!important;
    height:37px!important;
  }
}

@media (max-width:370px){
  .reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-copy{
    gap:2px!important;
  }

  .reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-copy strong{
    font-size:14.5px!important;
    line-height:1!important;
  }

  .reward-panel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll) .reward-copy small{
    font-size:10.2px!important;
    line-height:1.12!important;
  }
}

/* Multi-wave enemy order: the painted recess is 163px tall at the normal
   mobile size. Two/three enemies therefore use a compact two-line row instead
   of clipping the single-enemy portrait and repeated description lines. */
.enemy-info-card .enemy-info-skill-badge{display:none!important}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"],
.enemy-info-card>.enemy-info-list[data-enemy-count="3"]{
  overflow:hidden!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-row,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-row{
  padding:4px 7px 3px!important;
  align-content:center!important;
  gap:2px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-row>.enemy-info-main,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-row>.enemy-info-main{
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-portrait-frame,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-portrait-frame{
  width:32px!important;
  height:32px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-portrait,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-portrait{
  width:30px!important;
  height:30px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-copy,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-copy{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:12px 15px!important;
  align-content:center!important;
  gap:1px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-copy strong,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-copy strong{
  overflow:hidden!important;
  font-size:10.7px!important;
  line-height:12px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-stats,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-stats{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:2px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-stats>b,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-stats>b{
  min-height:13px!important;
  padding:1px 3px!important;
  flex:0 0 auto!important;
  font-size:7px!important;
  line-height:10px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-skill-badge,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-skill-badge{
  display:inline-flex!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-row p,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-row p{
  overflow:hidden!important;
  font-size:8.3px!important;
  line-height:10px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-skill-detail,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-skill-detail,
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-passive-detail,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-passive-detail,
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-weak,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-weak,
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-resist,
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-resist{
  display:none!important;
}

.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-row>.enemy-info-main{
  grid-template-columns:40px minmax(0,1fr)!important;
  gap:7px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-portrait-frame{
  width:38px!important;
  height:38px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-portrait{
  width:36px!important;
  height:36px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-copy{
  grid-template-rows:13px 16px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-copy strong{
  font-size:11.6px!important;
  line-height:13px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-stats>b{
  font-size:7.4px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="2"] .enemy-info-row p{
  font-size:8.8px!important;
}

.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-row>.enemy-info-main{
  grid-template-columns:30px minmax(0,1fr)!important;
  gap:5px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-portrait-frame{
  width:28px!important;
  height:28px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-portrait{
  width:26px!important;
  height:26px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-copy{
  grid-template-rows:11px 14px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-copy strong{
  font-size:10.2px!important;
  line-height:11px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-stats>b{
  min-height:12px!important;
  font-size:7px!important;
  line-height:9px!important;
}
.enemy-info-card>.enemy-info-list[data-enemy-count="3"] .enemy-info-row p{
  font-size:8.2px!important;
  line-height:9.2px!important;
}

/* Multi-wave V2: preserve the original top/bottom ornaments and stretch only
   the frame's plain middle with nine-slice borders. This restores readable
   portraits and rows instead of squeezing them into the 4:3 single-enemy art. */
.enemy-info-card[data-enemy-count="2"],
.enemy-info-card[data-enemy-count="3"]{
  aspect-ratio:1440/1540!important;
  background:transparent url("assets/generated/enemy_info_frame_1790256000080/enemy-info-frame-clean.png") center/100% 100% no-repeat!important;
}
.enemy-info-card[data-enemy-count="2"]::before,
.enemy-info-card[data-enemy-count="3"]::before{
  content:none!important;
  display:none!important;
}
.enemy-info-card[data-enemy-count="2"]>.panel-head.compact,
.enemy-info-card[data-enemy-count="3"]>.panel-head.compact{
  top:7.1%!important;
  height:21.2%!important;
}
.enemy-info-card[data-enemy-count="2"]>.panel-head.compact h2,
.enemy-info-card[data-enemy-count="3"]>.panel-head.compact h2{
  top:67%!important;
}
.enemy-info-card[data-enemy-count="2"] #enemyInfoCloseButton,
.enemy-info-card[data-enemy-count="3"] #enemyInfoCloseButton{
  top:16.95%!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list,
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list{
  top:35.1%!important;
  bottom:8.1%!important;
}

.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-row{
  padding:3px 9px 2px!important;
  gap:2px!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-row>.enemy-info-main{
  grid-template-columns:86px minmax(0,1fr)!important;
  gap:6px!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-portrait-frame{
  width:86px!important;
  height:86px!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-portrait{
  width:74px!important;
  height:74px!important;
  transform:translate(-4px,-7px) scale(1.38)!important;
  transform-origin:50% 58%!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-copy{
  grid-template-rows:19px 22px!important;
  gap:3px!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-copy strong{
  font-size:15.5px!important;
  line-height:19px!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-stats>b{
  min-height:18px!important;
  padding:2px 3px!important;
  font-size:8.3px!important;
  line-height:12px!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-row p{
  font-size:10.4px!important;
  line-height:13px!important;
}

.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-row{
  padding:3px 8px 2px!important;
  gap:2px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-row>.enemy-info-main{
  grid-template-columns:59px minmax(0,1fr)!important;
  gap:8px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-portrait{
  width:54px!important;
  height:54px!important;
  transform:translateY(-5px) scale(1.5)!important;
  transform-origin:50% 58%!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-copy{
  grid-template-rows:15px 18px!important;
  gap:1px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-copy strong{
  font-size:12.8px!important;
  line-height:15px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-stats>b{
  min-height:15px!important;
  padding:1px 3px!important;
  font-size:7.8px!important;
  line-height:11px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-row p{
  font-size:9.1px!important;
  line-height:10.5px!important;
}

/* Defeat result v2 1791292800017: authored obsidian frame, readable content,
   and six large action bays registered to the painted artwork. */
.end-panel:is(.defeat, .victory) .end-card{
  box-sizing:border-box!important;
  width:min(378px,calc(100vw - 10px))!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 12px)!important;
  aspect-ratio:971/1619!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-image:none!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.72))!important;
}
.end-panel:is(.defeat, .victory) .end-card::before,.end-panel:is(.defeat, .victory) .end-card::after{content:none!important;display:none!important}
.end-panel .defeat-card-frame-art{display:none!important}
.end-panel:is(.defeat, .victory) .defeat-card-frame-art{
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  -webkit-mask:url("assets/generated/defeat_result_frame_1791292800017/defeat-result-frame-v3-red-obsidian.png") center/100% 100% no-repeat!important;
  mask:url("assets/generated/defeat_result_frame_1791292800017/defeat-result-frame-v3-red-obsidian.png") center/100% 100% no-repeat!important;
  pointer-events:none!important;
  user-select:none!important;
}
.end-panel:is(.defeat, .victory) .end-card>.label,
.end-panel:is(.defeat, .victory) .end-card>strong,
.end-panel:is(.defeat, .victory) .end-card>.end-text,
.end-panel:is(.defeat, .victory) .end-card>.end-actions{z-index:1!important}
.end-panel:is(.defeat, .victory) .end-card>.label{
  display:none!important;
  left:22%!important;
  right:22%!important;
  top:4.2%!important;
  color:#d69aa1!important;
  font-size:9.5px!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  text-shadow:0 2px 2px #000!important;
}
.end-panel:is(.defeat, .victory) .end-card>strong{
  left:18%!important;
  right:18%!important;
  top:6.7%!important;
  color:#ffe0ad!important;
  font-size:25px!important;
  line-height:1!important;
  text-shadow:0 2px 2px #000,0 0 9px rgba(153,38,50,.38)!important;
}
.end-panel:is(.defeat, .victory) .end-text{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.end-panel:is(.defeat, .victory) .end-text>*{
  position:absolute!important;
  box-sizing:border-box!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.end-panel:is(.defeat, .victory) .run-result-hero{
  left:8.2%!important;
  right:8.2%!important;
  top:12.3%!important;
  width:auto!important;
  height:23.8%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:88px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  padding:8px 18px!important;
}
.end-panel:is(.defeat, .victory) .run-result-hero img{
  width:82px!important;
  height:82px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.72)) drop-shadow(0 0 8px rgba(168,49,55,.3))!important;
}
.end-panel:is(.defeat, .victory) .run-result-hero span{display:grid!important;align-content:center!important;gap:7px!important;text-align:left!important}
.end-panel:is(.defeat, .victory) .run-result-hero b{color:#ffe0ad!important;font-size:22px!important;line-height:1!important;text-shadow:0 2px 2px #000!important}
.end-panel:is(.defeat, .victory) .run-result-hero small{color:#d8e4ea!important;font-size:12px!important;line-height:1.15!important}
.end-panel:is(.defeat, .victory) .run-result-hero .result-hero-note{display:none!important}
.end-panel:is(.defeat, .victory) .result-summary-grid{
  left:7.2%!important;
  right:7.2%!important;
  top:37.7%!important;
  width:auto!important;
  height:16.9%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:3.1%!important;
  padding:0!important;
}
.end-panel:is(.defeat, .victory) .result-mini-card{
  display:grid!important;
  place-content:center!important;
  gap:8px!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:8px 5px!important;
  text-align:center!important;
  border:0!important;
  background:transparent!important;
}
.end-panel:is(.defeat, .victory) .result-mini-card small{color:#c5d4db!important;font-size:10.5px!important;line-height:1!important;white-space:nowrap!important}
.end-panel:is(.defeat, .victory) .result-mini-card strong{color:#ffe0ad!important;font-size:20px!important;line-height:1!important;text-shadow:0 2px 2px #000!important}
.end-panel:is(.defeat, .victory) .result-progress{
  left:8.6%!important;
  right:8.6%!important;
  top:55.7%!important;
  width:auto!important;
  height:5.5%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:1fr 5px!important;
  align-items:center!important;
  gap:2px!important;
  padding:3px 14px 4px!important;
}
.end-panel:is(.defeat, .victory) .result-progress>span{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-width:0!important}
.end-panel:is(.defeat, .victory) .result-progress img{display:none!important}
.end-panel:is(.defeat, .victory) .result-progress strong{color:#f5d7a4!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important}
.end-panel:is(.defeat, .victory) .result-progress em{color:#ffb1b6!important;font-size:12px!important;line-height:1!important;white-space:nowrap!important}
.end-panel:is(.defeat, .victory) .result-progress>small{display:none!important}
.end-panel:is(.defeat, .victory) .result-progress>i{position:relative!important;display:block!important;width:100%!important;height:4px!important;overflow:hidden!important;border-radius:999px!important;background:rgba(3,7,12,.8)!important;box-shadow:inset 0 0 0 1px rgba(170,126,85,.34)!important}
.end-panel:is(.defeat, .victory) .result-progress>i::after{content:""!important;position:absolute!important;inset:0 auto 0 0!important;width:var(--result-progress,0%)!important;border-radius:inherit!important;background:linear-gradient(90deg,#6b1825,#d65b62,#f2b06c)!important;box-shadow:0 0 7px rgba(211,74,79,.45)!important}
.end-panel:is(.defeat, .victory) .result-unlock-list{
  left:7.8%!important;
  top:62%!important;
  width:42.1%!important;
  height:11.8%!important;
  min-height:0!important;
  max-height:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:12px minmax(0,1fr)!important;
  gap:1px!important;
  padding:4px 8px!important;
  overflow:hidden!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-list>strong{grid-column:1!important;grid-row:1!important;color:#d6a0aa!important;font-size:9.5px!important;line-height:1!important;text-align:center!important;white-space:nowrap!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip{position:relative!important;inset:auto!important;grid-column:1!important;grid-row:2!important;width:100%!important;min-width:0!important;max-width:none!important;height:100%!important;min-height:0!important;max-height:none!important;display:grid!important;grid-template-columns:43px minmax(0,1fr)!important;align-items:center!important;gap:4px!important;padding:0!important;overflow:hidden!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip img{position:relative!important;inset:auto!important;width:41px!important;height:41px!important;object-fit:contain!important;filter:drop-shadow(0 4px 4px rgba(0,0,0,.72))!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip>span{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;display:grid!important;align-content:center!important;gap:1px!important;min-width:0!important;color:#f6e4c5!important;line-height:1!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip b{color:#ffbfc7!important;font-size:9.5px!important;line-height:1!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip strong{display:block!important;color:#f6e4c5!important;font-size:10.5px!important;line-height:1.06!important;font-weight:900!important;white-space:normal!important;overflow-wrap:anywhere!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip small{display:block!important;color:#b7c6ce!important;font-size:7.8px!important;line-height:1.05!important;white-space:normal!important}
.end-panel:is(.defeat, .victory) .result-best-item{
  left:50.1%!important;
  right:7.8%!important;
  top:62%!important;
  width:auto!important;
  height:11.8%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center!important;
  gap:5px!important;
  padding:4px 8px!important;
  overflow:hidden!important;
}
.end-panel:is(.defeat, .victory) .result-best-item img{width:42px!important;height:42px!important;object-fit:contain!important;filter:drop-shadow(0 4px 4px rgba(0,0,0,.72))!important}
.end-panel:is(.defeat, .victory) .result-best-item span{display:grid!important;align-content:center!important;gap:2px!important;min-width:0!important;text-align:left!important;overflow:visible!important}
.end-panel:is(.defeat, .victory) .result-best-item small,.end-panel:is(.defeat, .victory) .result-best-item em{color:#c3d4dc!important;font-size:8.5px!important;line-height:1!important}
.end-panel:is(.defeat, .victory) .result-best-item strong{color:#ffe0ad!important;font-size:10.5px!important;line-height:1.06!important;white-space:normal!important;overflow-wrap:anywhere!important;text-overflow:clip!important}
.end-panel:is(.defeat, .victory) .result-line{
  left:9.2%!important;
  right:9.2%!important;
  top:74.4%!important;
  width:auto!important;
  height:3.75%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(44px,1fr))!important;
  align-items:center!important;
  gap:1px!important;
  padding:1px 9px!important;
  overflow:hidden!important;
}
.end-panel:is(.defeat, .victory) .result-line>span{display:flex!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-width:0!important;height:100%!important;text-align:center!important;white-space:nowrap!important}
.end-panel:is(.defeat, .victory) .result-line small{color:#aebfc8!important;font-size:8.4px!important;line-height:1!important;white-space:nowrap!important}
.end-panel:is(.defeat, .victory) .result-line b{color:#f3ddb5!important;font-size:9.8px!important;line-height:1!important;white-space:nowrap!important}
.end-panel:is(.defeat, .victory) .result-upgrade-hint,.end-panel:is(.defeat, .victory) .result-first-companion-reward,.end-panel:is(.defeat, .victory) .result-depths-preview{display:none!important}
.end-panel:is(.defeat, .victory) .end-actions{
  position:absolute!important;
  z-index:4!important;
  left:7.8%!important;
  right:7.8%!important;
  bottom:3.1%!important;
  width:auto!important;
  height:18.5%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  gap:5px 5.4%!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.end-panel:is(.defeat, .victory) .end-actions .mini-button{
  box-sizing:border-box!important;
  grid-column:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:2px 9px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  color:#f4dfbd!important;
  font-size:10.6px!important;
  font-weight:900!important;
  line-height:1.12!important;
  text-align:center!important;
  white-space:normal!important;
  text-shadow:0 2px 2px #000!important;
}
.end-panel:is(.defeat, .victory) .end-actions .mini-button:not(:disabled):active{transform:translateY(1px)!important;color:#fff1bf!important;filter:brightness(.86)!important}
.end-panel:is(.defeat, .victory) .end-actions .mini-button:focus,.end-panel:is(.defeat, .victory) .end-actions .mini-button:focus-visible{outline:0!important;box-shadow:none!important}
.end-panel:is(.defeat, .victory) .end-actions .mini-button:disabled{opacity:.5!important;color:#85939a!important;filter:saturate(.45) brightness(.76)!important}
.end-panel:is(.defeat, .victory) .end-actions [hidden]{display:none!important}
@media(max-width:370px){
  .end-panel:is(.defeat, .victory) .run-result-hero{grid-template-columns:82px minmax(0,1fr)!important;gap:9px!important;padding-left:12px!important;padding-right:12px!important}
  .end-panel:is(.defeat, .victory) .run-result-hero img{width:78px!important;height:78px!important}
  .end-panel:is(.defeat, .victory) .run-result-hero b{font-size:20px!important}
  .end-panel:is(.defeat, .victory) .run-result-hero small{font-size:11px!important}
  .end-panel:is(.defeat, .victory) .result-unlock-chip{grid-template-columns:37px minmax(0,1fr)!important;gap:3px!important}
  .end-panel:is(.defeat, .victory) .result-unlock-chip img{width:35px!important;height:35px!important}
  .end-panel:is(.defeat, .victory) .result-unlock-chip strong{font-size:9.4px!important}
  .end-panel:is(.defeat, .victory) .result-unlock-chip small{font-size:7.2px!important}
  .end-panel:is(.defeat, .victory) .result-best-item{grid-template-columns:40px minmax(0,1fr)!important}
  .end-panel:is(.defeat, .victory) .result-best-item img{width:38px!important;height:38px!important}
  .end-panel:is(.defeat, .victory) .result-best-item strong{font-size:9.6px!important}
  .end-panel:is(.defeat, .victory) .result-line{padding-left:7px!important;padding-right:7px!important}
  .end-panel:is(.defeat, .victory) .result-line small{font-size:8px!important}
  .end-panel:is(.defeat, .victory) .result-line b{font-size:9.2px!important}
  .end-panel:is(.defeat, .victory) .end-actions .mini-button{font-size:9.8px!important;padding-left:6px!important;padding-right:6px!important}
}

/* Defeat result 1791465600001: match the established obsidian/sapphire UI,
   remove the meta-unlock progress bay, and keep rarity styling from painting
   a second gold rectangle around the unlocked item. */
.end-panel:is(.defeat, .victory) .result-progress{display:none!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip,
.end-panel:is(.defeat, .victory) .result-best-item{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-chip{
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:7px!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-chip img{
  width:44px!important;
  height:44px!important;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.78)) drop-shadow(0 0 6px rgba(84,143,255,.22))!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-chip b{color:#aebdff!important;text-shadow:0 1px 2px #000!important}
.end-panel:is(.defeat, .victory) .result-unlock-list,
.end-panel:is(.defeat, .victory) .result-best-item{
  top:61.5%!important;
  height:14.3%!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-list{padding:9px 12px!important}
.end-panel:is(.defeat, .victory) .result-best-item{padding:9px 12px!important}
.end-panel:is(.defeat, .victory) .result-line{
  top:80.1%!important;
  height:2.7%!important;
  grid-template-columns:repeat(2,minmax(0,1fr)) 22px repeat(3,minmax(0,1fr))!important;
  gap:0!important;
}
.end-panel:is(.defeat, .victory) .result-line>span:nth-child(1){grid-column:1!important}
.end-panel:is(.defeat, .victory) .result-line>span:nth-child(2){grid-column:2!important}
.end-panel:is(.defeat, .victory) .result-line>span:nth-child(3){grid-column:4!important}
.end-panel:is(.defeat, .victory) .result-line>span:nth-child(4){grid-column:5!important}
.end-panel:is(.defeat, .victory) .result-line>span:nth-child(5){grid-column:6!important}
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6)){
  grid-template-columns:repeat(3,minmax(0,1fr)) 22px repeat(3,minmax(0,1fr))!important;
}
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span:nth-child(3){grid-column:3!important}
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span:nth-child(4){grid-column:5!important}
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span:nth-child(5){grid-column:6!important}
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span:nth-child(6){grid-column:7!important}
.end-panel:is(.defeat, .victory) .end-actions{
  bottom:2.7%!important;
  height:14.5%!important;
  gap:4px 5.2%!important;
}
@media(max-width:370px){
  .end-panel:is(.defeat, .victory) .result-unlock-chip{grid-template-columns:40px minmax(0,1fr)!important;gap:5px!important}
  .end-panel:is(.defeat, .victory) .result-unlock-chip img{width:38px!important;height:38px!important}
  .end-panel:is(.defeat, .victory) .result-unlock-list,.end-panel:is(.defeat, .victory) .result-best-item{top:61.4%!important;height:14.4%!important}
}

/* Defeat result V8 1791465600011: two summary bays, matching equipment copy,
   a painted 3x2 stat grid, and a larger primary action row. */
.end-panel:is(.defeat, .victory) .run-result-hero{
  top:12.5%!important;
  height:24.2%!important;
  grid-template-columns:102px minmax(0,1fr)!important;
  gap:14px!important;
  padding:8px 18px!important;
}
.end-panel:is(.defeat, .victory) .run-result-hero img{
  width:98px!important;
  height:98px!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.78)) drop-shadow(0 0 9px rgba(79,123,255,.34))!important;
}
.end-panel:is(.defeat, .victory) .result-summary-grid{
  left:7.2%!important;
  right:7.2%!important;
  top:38.3%!important;
  height:14.4%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:2.1%!important;
}
.end-panel:is(.defeat, .victory) .result-mini-card{gap:7px!important}
.end-panel:is(.defeat, .victory) .result-mini-card small{font-size:11.5px!important}
.end-panel:is(.defeat, .victory) .result-mini-card strong{font-size:22px!important}
.end-panel:is(.defeat, .victory) .result-unlock-list,
.end-panel:is(.defeat, .victory) .result-best-item{
  top:54.2%!important;
  height:11.7%!important;
  padding:5px 11px!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-list{
  grid-template-rows:15px minmax(0,1fr)!important;
  gap:2px!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-list>strong,
.end-panel:is(.defeat, .victory) .result-best-heading{
  color:#aebdff!important;
  font-size:11.5px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-shadow:0 1px 2px #000!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-chip{
  grid-template-columns:43px minmax(0,1fr)!important;
  gap:6px!important;
}
.end-panel:is(.defeat, .victory) .result-unlock-chip img{width:41px!important;height:41px!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip b,
.end-panel:is(.defeat, .victory) .result-best-grade{color:#aebdff!important;font-size:9.6px!important;line-height:1!important;text-shadow:0 1px 2px #000!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip strong,
.end-panel:is(.defeat, .victory) .result-best-copy>strong{font-size:10.4px!important;line-height:1.05!important}
.end-panel:is(.defeat, .victory) .result-unlock-chip small,
.end-panel:is(.defeat, .victory) .result-best-copy>em{font-size:7.7px!important;line-height:1.05!important}
.end-panel:is(.defeat, .victory) .result-best-item{
  grid-template-columns:43px minmax(0,1fr)!important;
  grid-template-rows:15px minmax(0,1fr)!important;
  align-items:center!important;
  gap:2px 6px!important;
}
.end-panel:is(.defeat, .victory) .result-best-heading{grid-column:1/-1!important;grid-row:1!important}
.end-panel:is(.defeat, .victory) .result-best-item>img{grid-column:1!important;grid-row:2!important;width:41px!important;height:41px!important}
.end-panel:is(.defeat, .victory) .result-best-copy{grid-column:2!important;grid-row:2!important;display:grid!important;align-content:center!important;gap:1px!important;min-width:0!important;overflow:visible!important;text-align:left!important}
.end-panel:is(.defeat, .victory) .result-line,
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6)){
  left:7.2%!important;
  right:7.2%!important;
  top:67.1%!important;
  width:auto!important;
  height:13.1%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:2.3% 2.5%!important;
  padding:3px 4px!important;
  overflow:visible!important;
}
.end-panel:is(.defeat, .victory) .result-line>span,
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span{
  grid-column:auto!important;
  grid-row:auto!important;
  display:grid!important;
  place-content:center!important;
  gap:3px!important;
  height:100%!important;
  padding:2px 4px!important;
  overflow:hidden!important;
}
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span:nth-child(1),
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span:nth-child(2),
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span:nth-child(3),
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span:nth-child(4),
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span:nth-child(5),
.end-panel:is(.defeat, .victory) .result-line:has(>span:nth-child(6))>span:nth-child(6){
  grid-column:auto!important;
  grid-row:auto!important;
}
.end-panel:is(.defeat, .victory) .result-line small{color:#aebdff!important;font-size:9px!important;line-height:1!important}
.end-panel:is(.defeat, .victory) .result-line b{color:#f6e8c9!important;font-size:12.5px!important;line-height:1!important;text-shadow:0 1px 2px #000!important}
.end-panel:is(.defeat, .victory) .end-actions{
  left:7.4%!important;
  right:7.4%!important;
  top:81.4%!important;
  bottom:2.7%!important;
  width:auto!important;
  height:auto!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,.82fr) minmax(0,.82fr) minmax(0,1.34fr)!important;
  gap:3px 4.2%!important;
}
.end-panel:is(.defeat, .victory) .end-actions .mini-button{
  padding:2px 9px!important;
  background:transparent url("assets/generated/ui_controls_purpose_1788505000000/button-result-half-neutral.png") center/100% 100% no-repeat!important;
  color:#dce9f2!important;
  font-size:9.6px!important;
  line-height:1.08!important;
}
.end-panel:is(.defeat, .victory) .end-actions .end-restart,
.end-panel:is(.defeat, .victory) .end-actions .end-home{
  background-image:url("assets/generated/ui_controls_purpose_1788505000000/button-result-half-primary.png")!important;
  color:#fff1bf!important;
  font-size:13px!important;
  text-shadow:0 2px 2px #000,0 0 7px rgba(92,157,255,.55)!important;
}
@media(max-width:370px){
  .end-panel:is(.defeat, .victory) .run-result-hero{grid-template-columns:92px minmax(0,1fr)!important;gap:10px!important}
  .end-panel:is(.defeat, .victory) .run-result-hero img{width:88px!important;height:88px!important}
  .end-panel:is(.defeat, .victory) .result-mini-card small{font-size:10.5px!important}
  .end-panel:is(.defeat, .victory) .result-mini-card strong{font-size:20px!important}
  .end-panel:is(.defeat, .victory) .result-unlock-list>strong,.end-panel:is(.defeat, .victory) .result-best-heading{font-size:10.6px!important}
  .end-panel:is(.defeat, .victory) .result-unlock-chip,.end-panel:is(.defeat, .victory) .result-best-item{grid-template-columns:38px minmax(0,1fr)!important}
  .end-panel:is(.defeat, .victory) .result-unlock-chip img,.end-panel:is(.defeat, .victory) .result-best-item>img{width:36px!important;height:36px!important}
  .end-panel:is(.defeat, .victory) .result-line small{font-size:8.2px!important}
  .end-panel:is(.defeat, .victory) .result-line b{font-size:11.3px!important}
  .end-panel:is(.defeat, .victory) .end-actions .mini-button{font-size:8.8px!important;padding-left:6px!important;padding-right:6px!important}
  .end-panel:is(.defeat, .victory) .end-actions .end-restart,.end-panel:is(.defeat, .victory) .end-actions .end-home{font-size:12px!important}
}

/* Enemy order V3: multi-wave rows use two real stat lines. The previous
   nowrap strip clipped speed on the right and pushed the third warning into
   the painted bottom rail. */
.enemy-info-card[data-enemy-count="3"]{
  aspect-ratio:3/4!important;
}
.enemy-info-card[data-enemy-count="2"]{
  aspect-ratio:8/9!important;
}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList{
  bottom:10%!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list,
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list{
  overflow:hidden!important;
}
.enemy-info-card[data-enemy-count="2"] .enemy-info-stats,
.enemy-info-card[data-enemy-count="3"] .enemy-info-stats{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:18px!important;
  gap:3px!important;
  overflow:visible!important;
  white-space:normal!important;
}
.enemy-info-card[data-enemy-count="2"] .enemy-info-stats>b,
.enemy-info-card[data-enemy-count="3"] .enemy-info-stats>b{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:18px!important;
  padding:2px 3px!important;
  justify-content:center!important;
  overflow:hidden!important;
  font-size:9.1px!important;
  line-height:13px!important;
  text-overflow:ellipsis!important;
}
.enemy-info-card[data-enemy-count="2"] .enemy-stat-stage,
.enemy-info-card[data-enemy-count="3"] .enemy-stat-stage{
  display:none!important;
}
.enemy-info-card[data-enemy-count="2"] .enemy-stat-element,
.enemy-info-card[data-enemy-count="3"] .enemy-stat-element{grid-column:1!important}
.enemy-info-card[data-enemy-count="2"] .enemy-stat-hp,
.enemy-info-card[data-enemy-count="3"] .enemy-stat-hp{grid-column:2!important}
.enemy-info-card[data-enemy-count="2"] .enemy-stat-attack,
.enemy-info-card[data-enemy-count="3"] .enemy-stat-attack{grid-column:3!important}
.enemy-info-card[data-enemy-count="2"] .enemy-stat-skill,
.enemy-info-card[data-enemy-count="3"] .enemy-stat-skill{
  grid-column:1/span 2!important;
  grid-row:2!important;
}
.enemy-info-card[data-enemy-count="2"] .enemy-stat-speed,
.enemy-info-card[data-enemy-count="3"] .enemy-stat-speed{
  grid-column:3!important;
  grid-row:2!important;
}
.enemy-info-card[data-enemy-count="2"] .enemy-stat-thorns,
.enemy-info-card[data-enemy-count="3"] .enemy-stat-thorns{
  grid-column:1/span 2!important;
  grid-row:2!important;
}
.enemy-info-card[data-enemy-count="2"] .enemy-info-stats.has-thorns.has-skill .enemy-stat-thorns,
.enemy-info-card[data-enemy-count="3"] .enemy-info-stats.has-thorns.has-skill .enemy-stat-thorns{
  display:none!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-copy{
  grid-template-rows:20px 39px!important;
  gap:4px!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-copy strong{
  font-size:16px!important;
  line-height:20px!important;
}
.enemy-info-card[data-enemy-count="2"]>.enemy-info-list .enemy-info-row p{
  font-size:10.8px!important;
  line-height:14px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-row{
  padding:4px 8px 3px!important;
  gap:3px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-row>.enemy-info-main{
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:8px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-portrait-frame{
  width:56px!important;
  height:56px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-portrait{
  width:54px!important;
  height:54px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-copy{
  grid-template-rows:17px 39px!important;
  gap:3px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-copy strong{
  font-size:13.8px!important;
  line-height:17px!important;
}
.enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-row p{
  font-size:9.8px!important;
  line-height:12px!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
}
@media(max-width:370px){
  .enemy-info-card[data-enemy-count="2"] .enemy-info-stats>b,
  .enemy-info-card[data-enemy-count="3"] .enemy-info-stats>b{font-size:8.6px!important}
  .enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-copy strong{font-size:13px!important}
  .enemy-info-card[data-enemy-count="3"]>.enemy-info-list .enemy-info-row p{font-size:9.4px!important}
}

/* Win over the older list-data selectors without affecting the one-enemy
   presentation. */
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-info-copy,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-info-copy{
  grid-template-rows:auto 41px!important;
  gap:3px!important;
}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-info-stats,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-info-stats{
  box-sizing:border-box!important;
  width:100%!important;
  height:41px!important;
  min-height:41px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,19px)!important;
  align-items:stretch!important;
  gap:3px!important;
  overflow:visible!important;
  white-space:normal!important;
}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-info-stats>b,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-info-stats>b{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:19px!important;
  min-height:19px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:2px 3px!important;
  overflow:hidden!important;
  font-size:9.1px!important;
  line-height:13px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-stat-stage,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-stat-stage{
  display:none!important;
}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-info-stats>.enemy-stat-stage,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-info-stats>.enemy-stat-stage{
  display:none!important;
}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-stat-element,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-stat-element{grid-column:1!important;grid-row:1!important}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-stat-hp,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-stat-hp{grid-column:2!important;grid-row:1!important}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-stat-attack,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-stat-attack{grid-column:3!important;grid-row:1!important}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-stat-skill,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-stat-skill{grid-column:1/span 2!important;grid-row:2!important}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-stat-skill{font-size:8.3px!important}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-stat-speed,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-stat-speed{grid-column:3!important;grid-row:2!important}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-stat-thorns,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-stat-thorns{grid-column:1/span 2!important;grid-row:2!important}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-info-row p,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-info-row p{
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-info-row p{line-height:15px!important}
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-info-row p{line-height:13px!important}
@media(max-width:370px){
  .enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-info-stats>b,
  .enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-info-stats>b{font-size:8.8px!important}
  .enemy-info-card[data-enemy-count="2"]>#enemyInfoList .enemy-stat-skill,
  .enemy-info-card[data-enemy-count="3"]>#enemyInfoList .enemy-stat-skill{font-size:8.6px!important}
}

/* Victory best-item bay: keep the heading and full item copy inside the
   painted bay. Auto-placement previously dropped the copy into the 61px
   first column and over the reward rail below. */
.end-panel.clear .end-text>.result-best-item{
  grid-template-columns:minmax(0,1fr) 64px!important;
  grid-template-rows:20px minmax(0,1fr)!important;
  column-gap:8px!important;
  row-gap:0!important;
  overflow:hidden!important;
}
.end-panel.clear .result-best-heading{
  grid-column:1!important;
  grid-row:1!important;
  align-self:end!important;
}
.end-panel.clear .result-best-item>img{
  grid-column:2!important;
  grid-row:1/span 2!important;
  align-self:center!important;
  justify-self:center!important;
}
.end-panel.clear .result-best-copy{
  grid-column:1!important;
  grid-row:2!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  align-content:center!important;
  gap:4px!important;
  overflow:hidden!important;
  text-align:left!important;
}
.end-panel.clear .result-best-copy>strong{
  min-width:0!important;
  font-size:11px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
.end-panel.clear .result-best-copy>.result-best-grade,
.end-panel.clear .result-best-copy>em{
  white-space:nowrap!important;
}
@media(max-width:370px){
  .end-panel.clear .end-text>.result-best-item{grid-template-columns:minmax(0,1fr) 58px!important}
  .end-panel.clear .result-best-copy{gap:3px!important}
  .end-panel.clear .result-best-copy>strong{font-size:10.2px!important}
}

/* Enemy order V4 1791724800000: the source frame is landscape art. Do not
   stretch that raster into a tall card; multi-wave layouts use a dedicated
   3:4 portrait outpaint whose ornaments keep their authored proportions. */
.enemy-info-card[data-enemy-count="2"],
.enemy-info-card[data-enemy-count="3"]{
  aspect-ratio:3/4!important;
  background:transparent url("assets/generated/enemy_info_frame_portrait_1791724800000/enemy-info-frame-multi-portrait.png") center/100% 100% no-repeat!important;
}
.enemy-info-card[data-enemy-count="2"]>.panel-head.compact,
.enemy-info-card[data-enemy-count="3"]>.panel-head.compact{
  top:0!important;
  height:25%!important;
}
.enemy-info-card[data-enemy-count="2"]>.panel-head.compact h2,
.enemy-info-card[data-enemy-count="3"]>.panel-head.compact h2{
  top:58%!important;
}
.enemy-info-card[data-enemy-count="2"] #enemyInfoCloseButton,
.enemy-info-card[data-enemy-count="3"] #enemyInfoCloseButton{
  top:11.1%!important;
}
.enemy-info-card[data-enemy-count="2"]>#enemyInfoList,
.enemy-info-card[data-enemy-count="3"]>#enemyInfoList{
  top:29.5%!important;
  bottom:8.6%!important;
}

/* Enemy order V5 1791724800003: optical alignment against the painted plate.
   The former close glyph also had an opaque black rectangle behind it. */
.enemy-info-card[data-enemy-count="2"]>.panel-head.compact>div,
.enemy-info-card[data-enemy-count="3"]>.panel-head.compact>div{
  transform:translateX(-5px)!important;
}
.enemy-info-card[data-enemy-count="2"]>.panel-head.compact h2,
.enemy-info-card[data-enemy-count="3"]>.panel-head.compact h2{
  top:61.5%!important;
}
.enemy-info-card[data-enemy-count="2"] #enemyInfoCloseButton,
.enemy-info-card[data-enemy-count="3"] #enemyInfoCloseButton{
  left:88.55%!important;
  top:12.15%!important;
  width:52px!important;
  min-width:52px!important;
  height:52px!important;
  min-height:52px!important;
  background:transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center/100% 100% no-repeat!important;
  filter:brightness(.82) saturate(.78)!important;
}
.enemy-info-card[data-enemy-count="2"] #enemyInfoCloseButton:hover,
.enemy-info-card[data-enemy-count="3"] #enemyInfoCloseButton:hover,
.enemy-info-card[data-enemy-count="2"] #enemyInfoCloseButton:focus-visible,
.enemy-info-card[data-enemy-count="3"] #enemyInfoCloseButton:focus-visible{
  filter:brightness(.94) saturate(.9)!important;
}

/* Enemy order V6 1791724800004: keep the authored circular close plate seated
   in its painted socket while pressed. Scaling or shifting the whole raster
   exposed the socket behind it as a second crescent-shaped button. */
.enemy-info-card[data-enemy-count="2"] #enemyInfoCloseButton:active,
.enemy-info-card[data-enemy-count="3"] #enemyInfoCloseButton:active,
.enemy-info-card[data-enemy-count="2"] #enemyInfoCloseButton.qa-pressed,
.enemy-info-card[data-enemy-count="3"] #enemyInfoCloseButton.qa-pressed{
  transform:translate(-50%,-50%)!important;
  background-position:center!important;
  background-size:100% 100%!important;
  filter:brightness(.64) saturate(.7) contrast(1.06)!important;
}

/* Item-unlock showcase V2 1792936800301: replace the floating CSS capsule and
   hairline footer rule with purpose-built forged-metal raster ornaments. */
.unlock-showcase-divider-art{
  display:none!important;
}
.unlock-showcase.item-unlock .unlock-card{
  grid-template-rows:82px 27px auto minmax(62px,auto) 40px!important;
}
.unlock-showcase.item-unlock .unlock-card::after{
  content:none!important;
  display:none!important;
}
.unlock-showcase.item-unlock .unlock-card>.label{
  box-sizing:border-box!important;
  width:138px!important;
  min-width:138px!important;
  height:30px!important;
  min-height:30px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0 16px 1px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:url("assets/generated/unlock_showcase_item_v2_1792936800300/item-unlock-label-plate-alpha.png")!important;
  background-position:center!important;
  background-size:112% 292%!important;
  background-repeat:no-repeat!important;
  color:#f8dfa0!important;
  font-size:9.5px!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:.025em!important;
  text-align:center!important;
  text-shadow:0 2px 2px rgba(0,0,0,.96),0 0 5px rgba(255,221,128,.26)!important;
  box-shadow:none!important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.48))!important;
}
.unlock-showcase.item-unlock .unlock-showcase-divider-art{
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  bottom:22.2%!important;
  width:268px!important;
  height:28px!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:translateX(-50%)!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.52))!important;
  pointer-events:none!important;
}
.unlock-showcase.item-unlock .unlock-confirm-button{
  box-sizing:border-box!important;
  width:190px!important;
  min-width:190px!important;
  height:44px!important;
  min-height:44px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0 0 1px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  background-color:transparent!important;
  background-image:url("assets/generated/unlock_showcase_relic_v1_1792936800000/relic-confirm-button-alpha.png")!important;
  background-position:center!important;
  background-size:100% 122%!important;
  background-repeat:no-repeat!important;
  color:#fff0b7!important;
  font-size:13px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-shadow:0 2px 2px rgba(0,0,0,.96),0 0 6px rgba(90,205,255,.26)!important;
  box-shadow:none!important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))!important;
}
.unlock-showcase.item-unlock .unlock-confirm-button:hover{
  background-image:url("assets/generated/unlock_showcase_relic_v1_1792936800000/relic-confirm-button-alpha.png")!important;
  filter:brightness(1.08) drop-shadow(0 3px 5px rgba(0,0,0,.52))!important;
}
.unlock-showcase.item-unlock .unlock-confirm-button:active{
  transform:translateY(1px)!important;
  filter:brightness(.96) drop-shadow(0 2px 3px rgba(0,0,0,.48))!important;
}
.unlock-showcase.item-unlock .unlock-confirm-button:focus,
.unlock-showcase.item-unlock .unlock-confirm-button:focus-visible{
  outline:0!important;
  box-shadow:none!important;
  filter:brightness(1.08) drop-shadow(0 0 6px rgba(67,193,235,.34))!important;
}
@media(max-width:370px), (max-height:760px){
  .unlock-showcase.item-unlock .unlock-card{
    grid-template-rows:78px 26px auto minmax(58px,auto) 38px!important;
  }
  .unlock-showcase.item-unlock .unlock-card>.label{
    width:132px!important;
    min-width:132px!important;
    height:28px!important;
    min-height:28px!important;
    font-size:9px!important;
  }
  .unlock-showcase.item-unlock .unlock-showcase-divider-art{
    bottom:22%!important;
    width:248px!important;
    height:26px!important;
  }
  .unlock-showcase.item-unlock .unlock-confirm-button{
    width:182px!important;
    min-width:182px!important;
    height:42px!important;
    min-height:42px!important;
    font-size:12.5px!important;
  }
}

/* Item-unlock showcase V3 1792936800303: the old cyan rounded rectangle around
   the item icon looked like a generic app control. Reuse the game's authored
   inventory socket so the icon sits in the same forged-iron, gold and blue-gem
   visual language as the surrounding reward frame. */
.unlock-showcase.item-unlock .unlock-icon{
  box-sizing:border-box!important;
  width:90px!important;
  height:90px!important;
  margin:0!important;
  padding:18px!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:url("assets/generated/bag_content_gothic_1790601600072/bag-slot-frame.png")!important;
  background-position:center!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  object-fit:contain!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.62)) drop-shadow(0 0 7px rgba(47,175,235,.16))!important;
}
@media(max-width:370px), (max-height:760px){
  .unlock-showcase.item-unlock .unlock-icon{
    width:86px!important;
    height:86px!important;
    padding:17px!important;
  }
}

/* Item-unlock showcase V4 1792936800304: the decorative rail had no stable
   space between the variable-height description and the confirmation button.
   Remove the redundant rail and leave a clean visual gap above the authored
   button instead of drawing over the final description line. */
.unlock-showcase.item-unlock .unlock-showcase-divider-art{
  display:none!important;
}
.unlock-showcase.item-unlock .unlock-confirm-button{
  position:relative!important;
  top:3px!important;
}

/* Item-unlock showcase V5 1792936800305: remove the opaque dark inventory
   socket as well. The item art already has a clean alpha channel, so present
   the art itself with restrained shadows and no surrounding square. */
.unlock-showcase.item-unlock .unlock-icon{
  width:80px!important;
  height:80px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.68)) drop-shadow(0 0 8px rgba(145,72,224,.28))!important;
}
@media(max-width:370px), (max-height:760px){
  .unlock-showcase.item-unlock .unlock-icon{
    width:76px!important;
    height:76px!important;
    padding:0!important;
  }
}

/* Item-unlock showcase V6 1792936800306: keep the unlock category as plain
   text. The ornate label plate competed with the item art and title. */
.unlock-showcase.item-unlock .unlock-card>.label{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  color:#f0d384!important;
  font-size:10.5px!important;
  font-weight:900!important;
  line-height:1.15!important;
  letter-spacing:.055em!important;
  text-shadow:0 2px 2px rgba(0,0,0,.96)!important;
}
@media(max-width:370px), (max-height:760px){
  .unlock-showcase.item-unlock .unlock-card>.label{
    font-size:10px!important;
  }
}

/* Item-unlock showcase V7 1793376000000: the achievement/reward copy belongs
   directly on the painted lower recess. Remove the extra CSS panel around it,
   and optically lower the item art inside the authored upper display bay. */
.unlock-showcase.item-unlock .unlock-icon{
  position:relative!important;
  top:9px!important;
}
.unlock-showcase.item-unlock .unlock-card>p{
  width:min(278px,100%)!important;
  min-height:62px!important;
  max-height:78px!important;
  margin:0!important;
  padding:7px 12px 4px!important;
  overflow:visible!important;
  border:0!important;
  border-block:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
@media(max-width:370px), (max-height:760px){
  .unlock-showcase.item-unlock .unlock-icon{
    top:8px!important;
  }
  .unlock-showcase.item-unlock .unlock-card>p{
    min-height:58px!important;
    padding-top:6px!important;
  }
}

/* Abyss depth reward V2: keep the existing painted result bay and show the
   already-paid floor-46 reward separately from the added depth reward. */
.end-panel:is(.defeat,.victory) .result-mini-card.depth-total{
  gap:4px!important;
  padding-top:6px!important;
  padding-bottom:5px!important;
}
.end-panel:is(.defeat,.victory) .result-mini-card .result-shard-breakdown{
  display:block!important;
  color:#b9cbd4!important;
  font-size:8.8px!important;
  font-style:normal!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
}
@media(max-width:370px){
  .end-panel:is(.defeat,.victory) .result-mini-card .result-shard-breakdown{
    font-size:8.2px!important;
  }
}


/* SOURCE: ui/styles/shared/visual-fixes-v7.css */
/* Final visual corrections loaded after the legacy stylesheet. */
/* Register every mark to the painted center of its own socket in the
   2172x724 overlay. The authored centers are not a perfectly even 5-column
   grid, so shared/legacy offsets drift progressively to the right. */
.menu-lobby-panel .lobby-mark-slot:nth-child(1) { left: 17.1271% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(2) { left: 33.5175% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(3) { left: 49.8619% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(4) { left: 66.2293% !important; }
.menu-lobby-panel .lobby-mark-slot:nth-child(5) { left: 82.5276% !important; }

.menu-lobby-panel .lobby-mark-slot:nth-child(1) img,
.menu-lobby-panel .lobby-mark-slot:nth-child(3) img,
.menu-lobby-panel .lobby-mark-slot:nth-child(5) img {
  top: 48.895% !important;
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-mark-slot:nth-child(2) img,
.menu-lobby-panel .lobby-mark-slot:nth-child(4) img {
  top: 48.9641% !important;
  transform: translate(-50%, -50%) !important;
}

/* The six lobby shortcuts need their native near-square control plate. The
   legacy 180x48 tab strip was being squeezed into a 59x58 button. */
#menuLobbyPanel .lobby-tool-button,
#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton) {
  background: url("assets/generated/lobby_prep_refresh_1788102000000/lobby-tool.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .42)) !important;
}

/* Use bare transparent objects for every shortcut: no nested gold ring and no
   purple portrait plate inside the authored square control. */
#menuLobbyPanel .lobby-tool-button img,
#menuLobbyPanel .lobby-tool-button:not(#lobbyStoreButton) img,
#menuLobbyPanel #lobbyCompanionButton img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .76)) drop-shadow(0 0 4px rgba(110, 211, 255, .28)) !important;
}

#menuLobbyPanel #lobbyGrowthButton img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .76)) drop-shadow(0 0 4px rgba(83, 218, 255, .36)) !important;
}

#menuLobbyPanel #lobbyRecipeButton img,
#menuLobbyPanel #lobbyStoreButton img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .78)) drop-shadow(0 0 4px rgba(255, 195, 82, .28)) !important;
}

#menuLobbyPanel #lobbyCodexButton img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .78)) drop-shadow(0 0 4px rgba(177, 112, 255, .28)) !important;
}

#menuLobbyPanel #lobbyRankingButton img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .78)) drop-shadow(0 0 4px rgba(255, 219, 96, .34)) !important;
}

#menuLobbyPanel #lobbyCompanionButton img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .72)) drop-shadow(0 0 5px rgba(75, 222, 255, .46)) !important;
}

#menuCompanionPanel .companion-currency-bar {
  box-sizing: border-box !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 5px 12px 5px 10px !important;
  background: url("assets/generated/companion_ui_v6/companion-tab-inactive.png") center / 100% 100% no-repeat !important;
}

#menuCompanionPanel .companion-currency-bar span {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 34px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 2px 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCompanionPanel .companion-currency-bar span + span {
  border-left: 1px solid rgba(118, 110, 214, .24) !important;
}

#menuCompanionPanel .companion-currency-bar img {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 22px !important;
  height: 22px !important;
  justify-self: center !important;
  object-fit: contain !important;
}

#menuCompanionPanel .companion-currency-bar em {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  overflow: hidden !important;
  color: #9ed7eb !important;
  font-size: 6.5px !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuCompanionPanel .companion-currency-bar b {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin: 2px 0 0 !important;
  color: #fff0ad !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-align: center !important;
}

#menuCompanionPanel .companion-menu-tabs {
  min-height: 38px !important;
  align-items: stretch !important;
  gap: 6px !important;
}

#menuCompanionPanel .companion-menu-tabs button,
#menuCompanionPanel .companion-menu-tabs button:not(.active),
#menuCompanionPanel .companion-menu-tabs button.active {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 24px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: center !important;
  filter: none !important;
}

#menuCompanionPanel .companion-menu-tabs button,
#menuCompanionPanel .companion-menu-tabs button:not(.active) {
  background: url("assets/generated/companion_ui_v6/companion-tab-inactive.png") center / 100% 100% no-repeat !important;
  color: #c1c9dd !important;
}

#menuCompanionPanel .companion-menu-tabs button.active {
  background: url("assets/generated/companion_ui_v6/companion-tab-active.png") center / 100% 100% no-repeat !important;
  color: #fff2b4 !important;
  text-shadow: 0 2px 3px #000, 0 0 5px rgba(95, 221, 255, .42) !important;
}

#menuCompanionPanel .companion-summon-card,
#menuCompanionPanel .companion-summon-card.premium {
  padding: 39px 21px 24px !important;
}

#menuCompanionPanel .companion-summon-card.premium {
  padding-bottom: 62px !important;
}

#menuCompanionPanel .companion-summon-card > p {
  min-height: 28px !important;
  margin: 6px 0 1px !important;
  line-height: 1.28 !important;
}

#menuCompanionPanel .companion-summon-card > div {
  gap: 4px !important;
  margin-top: 7px !important;
}

#menuCompanionPanel .companion-summon-card button,
#menuCompanionPanel .companion-summon-card .summon-store-link {
  box-sizing: border-box !important;
  height: 35px !important;
  min-height: 35px !important;
  border-width: 8px 15px !important;
  border-image-width: 8px 15px !important;
}

#menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
  position: absolute !important;
  left: 21px !important;
  right: 21px !important;
  bottom: 25px !important;
  width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 3px !important;
  border-width: 7px 14px !important;
  border-image-width: 7px 14px !important;
}

@media (max-height: 700px) {
  #menuCompanionPanel .companion-currency-bar {
    min-height: 40px !important;
    padding-block: 4px !important;
  }

  #menuCompanionPanel .companion-menu-tabs,
  #menuCompanionPanel .companion-menu-tabs button,
  #menuCompanionPanel .companion-menu-tabs button:not(.active),
  #menuCompanionPanel .companion-menu-tabs button.active {
    height: 35px !important;
    min-height: 35px !important;
  }

  #menuCompanionPanel .companion-summon-card,
  #menuCompanionPanel .companion-summon-card.premium {
    min-height: 238px !important;
    height: 238px !important;
    padding: 35px 18px 20px !important;
  }

  #menuCompanionPanel .companion-summon-card.premium {
    padding-bottom: 57px !important;
  }

  #menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
    left: 18px !important;
    right: 18px !important;
    bottom: 21px !important;
  }
}

/* Remove the synthetic equipment halo behind the player sprite. */
.player-fighter::before {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
}

/* Companion equipment now lives in its own menu tab. */
#menuCompanionPanel .companion-menu-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#menuCompanionPanel .companion-menu-tabs button,
#menuCompanionPanel .companion-menu-tabs button:not(.active),
#menuCompanionPanel .companion-menu-tabs button.active {
  padding-inline: 8px !important;
  font-size: 10px !important;
}

#menuCompanionPanel .companion-party-view.active {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
}

#menuCompanionPanel .companion-party-slot {
  min-height: 88px !important;
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  color: #e9f6ff !important;
}

#menuCompanionPanel .companion-party-slot > img {
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 8px rgba(86, 204, 242, .25)) !important;
}

#menuCompanionPanel .companion-party-slot > span,
#menuCompanionPanel .companion-party-empty {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

#menuCompanionPanel .companion-party-slot small {
  color: #8fcce4 !important;
  font-size: 8px !important;
}

#menuCompanionPanel .companion-party-slot strong {
  color: #fff0ad !important;
  font-size: 13px !important;
}

#menuCompanionPanel .companion-party-slot em {
  color: #c8dce8 !important;
  font-size: 9px !important;
  font-style: normal !important;
  line-height: 1.35 !important;
}

#menuCompanionPanel .companion-party-slot > button {
  min-width: 66px !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  border: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat !important;
  color: #dceaf1 !important;
  font-size: 9px !important;
}

#menuCompanionPanel .companion-party-empty {
  grid-column: 1 / -1 !important;
  place-content: center !important;
  min-height: 64px !important;
  text-align: center !important;
}

#menuCompanionPanel .companion-party-note {
  margin: 0 3px !important;
  color: #91aabd !important;
  font-size: 8px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#menuCompanionPanel .companion-party-list {
  display: grid !important;
  gap: 6px !important;
  padding-bottom: 12px !important;
}

#menuCompanionPanel .companion-party-card {
  position: relative !important;
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 48px !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 13px !important;
  border: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  color: #e8f4fa !important;
  text-align: left !important;
}

#menuCompanionPanel .companion-party-card.active {
  filter: drop-shadow(0 0 7px rgba(95, 216, 247, .42)) brightness(1.13) !important;
}

#menuCompanionPanel .companion-party-card > img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
}

#menuCompanionPanel .companion-party-card > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#menuCompanionPanel .companion-party-card strong {
  color: #fff0ad !important;
  font-size: 12px !important;
}

#menuCompanionPanel .companion-party-card small,
#menuCompanionPanel .companion-party-card em {
  overflow: hidden !important;
  color: #a9c4d3 !important;
  font-size: 8px !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuCompanionPanel .companion-party-card > b {
  justify-self: end !important;
  color: #8fdcf3 !important;
  font-size: 9px !important;
}

#menuCompanionPanel .companion-party-empty-list {
  margin: 18px 6px !important;
  color: #9bb2c0 !important;
  font-size: 9px !important;
  text-align: center !important;
}

/* Sale confirmation window. */
.sale-result-panel {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(2, 5, 11, .76);
  backdrop-filter: blur(2px);
}

.sale-result-panel.active {
  display: grid;
}

.sale-result-card {
  box-sizing: border-box;
  width: min(340px, calc(100vw - 36px));
  min-height: 236px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 36px 38px 30px;
  background: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") center / 100% 100% no-repeat;
  color: #eaf6ff;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .56));
  text-align: center;
}

.sale-result-kicker {
  color: #81d6f1;
  font-size: 9px;
  letter-spacing: .12em;
}

.sale-result-card h2 {
  margin: 0;
  color: #fff0ad;
  font-size: 18px;
  line-height: 1.2;
}

.sale-result-reward {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat;
  text-align: left;
}

.sale-result-reward img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.sale-result-reward span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.sale-result-reward small {
  color: #a8c5d4;
  font-size: 9px;
}

.sale-result-reward strong {
  color: #fff0ad;
  font-size: 14px;
}

.sale-result-bonus {
  margin: 0;
  color: #86e6ba;
  font-size: 9px;
}

.sale-result-close {
  min-width: 116px;
  min-height: 40px;
  border: 0;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-small-primary.png") center / 100% 100% no-repeat;
  color: #fff2b7;
  font-weight: 900;
  font-size: 11px;
}

/* Keep equipped items over the player so they read as that character's gear.
   The left frame corner is reserved for full-board passive effects. */
.player-fighter > .gear-fx {
  position: absolute !important;
  inset: auto !important;
  top: 5px !important;
  left: 0 !important;
  z-index: 9 !important;
  width: 100% !important;
  height: 23px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  pointer-events: none !important;
}

.player-fighter > .gear-fx .gear-piece,
.player-fighter > .gear-fx .gear-piece:nth-child(n) {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  min-height: 23px !important;
  padding: 2px !important;
  border: 1px solid rgba(230, 198, 105, .58) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(29, 38, 55, .97), rgba(4, 13, 23, .99)) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .42), 0 0 5px rgba(255, 214, 100, .14) !important;
  transform: none !important;
}

.player-fighter > .gear-fx .gear-piece img,
#playerFighter > .gear-fx .gear-piece img {
  width: 17px !important;
  height: 17px !important;
  padding: 0 !important;
  translate: none !important;
  transform: none !important;
}

.player-fighter > .gear-fx .gear-piece small {
  right: auto !important;
  left: 50% !important;
  bottom: -3px !important;
  min-width: 14px !important;
  padding: 1px 2px !important;
  font-size: 6.5px !important;
  transform: translateX(-50%) !important;
}

/* Full-board effects alone occupy the authored upper-left frame corner. */
.fight-stage .board-passive-badges,
.fight-stage .board-passive-badges.active {
  top: 7px !important;
  left: 6px !important;
  width: 20px !important;
  max-width: 20px !important;
  grid-template-columns: 20px !important;
  grid-auto-rows: 20px !important;
  gap: 2px !important;
}

.fight-stage .board-passive-badge,
.fight-stage .board-passive-badge.compact {
  box-sizing: border-box !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 2px !important;
  border: 1px solid rgba(115, 205, 241, .55) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(12, 38, 57, .96), rgba(3, 12, 23, .98)) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .42), 0 0 5px rgba(84, 194, 235, .16) !important;
}

.fight-stage .board-passive-badge img,
.fight-stage .board-passive-badge.compact img {
  width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 3px rgba(117, 217, 250, .35)) !important;
}

.enemy-fighter.frame-recovering > img {
  opacity: .92 !important;
}

/* Nine-slice the repeated action controls so their corners no longer stretch. */
.mini-button:not(.icon-close-button) {
  box-sizing: border-box !important;
  border: 9px solid transparent !important;
  border-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") 18 30 fill / 9px 15px stretch !important;
  border-radius: 0 !important;
  background: rgba(4, 17, 31, .96) !important;
  box-shadow: none !important;
}

.mini-button.accent:not(.icon-close-button),
.bag-sell-bar .mini-button.accent {
  border-image-source: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png") !important;
  color: #fff1b0 !important;
}

.mini-button.danger:not(.icon-close-button) {
  border-image-source: url("assets/generated/ui/popup-button-danger.png?v=1781815000000") !important;
  color: #ffd7d1 !important;
}

/* The compact item panel already paints its three action chambers. */
.item-info-card .item-info-actions .mini-button,
.item-info-card .item-info-actions #itemPlaceButton,
.item-info-card .item-info-actions #itemRemoveButton,
.item-info-card .item-info-actions #itemSellButton {
  border: 0 !important;
  border-image: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Quiet item-card sheen 1791033600002.
   Keep the rarity colour, but stop the upper-left specular patch and top rail
   from washing crimson SSS cards toward chalk white on small screens. */
.item-tile::before,
.tray-item::before {
  border-color: rgba(255, 255, 255, .06) !important;
}

.item-tile::after,
.tray-item::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent) !important;
}

.item-tile.rarity-SSS:not(.mythic-item),
.tray-item.rarity-SSS:not(.mythic-item),
.placed-item.rarity-SSS:not(.mythic-item),
.inline-reveal-item.rarity-SSS:not(.mythic-item),
.fusion-material.rarity-SSS:not(.mythic-item),
.fusion-result-pop.rarity-SSS:not(.mythic-item),
.rare-showcase.rarity-SSS:not(.mythic-item) {
  --item-grade-surface:
    radial-gradient(circle at 18% 11%, rgba(255, 207, 174, .18), transparent 25%),
    linear-gradient(145deg, #8d1d2b 0%, #3b101b 48%, #10060b 100%) !important;
  background: var(--item-grade-surface) !important;
}


/* SOURCE: ui/styles/shared/run-prep-polish.css */
/*
 * Expedition preparation mapped to one spacious authored raster frame.
 * The PNG owns every visible rail, option well, ledger cell and button face.
 */

#runPrepPanel .run-prep-card {
  width: min(356px, calc(100vw - 14px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 16px) !important;
  aspect-ratio: 929 / 1693 !important;
  overflow: hidden !important;
  background-color: transparent !important;
  background-image: url("assets/generated/run_prep_rebuild_1790256000150/run-prep-frame-spacious.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.76)) !important;
}

#runPrepPanel .run-prep-head {
  left: 16% !important;
  right: 16% !important;
  top: 5.6% !important;
  height: 10.4% !important;
  gap: 4px !important;
}

#runPrepPanel .run-prep-kicker { font-size: clamp(9px, 2.65vw, 11px) !important; }
#runPrepPanel .run-prep-head > strong { font-size: clamp(22px, 6vw, 25px) !important; }

#runPrepPanel .run-prep-section {
  left: 8.5% !important;
  right: 8.5% !important;
  height: 27.9% !important;
  overflow: visible !important;
}

#runPrepPanel .run-prep-section.inventory-section { top: 17.7% !important; }
#runPrepPanel .run-prep-section.shard-section { top: 46.3% !important; }

#runPrepPanel .run-prep-section-head {
  box-sizing: border-box !important;
  left: 4.4% !important;
  right: 4.4% !important;
  top: 0 !important;
  height: 17.2% !important;
  padding: 0 8.5% !important;
  display: grid !important;
  grid-template-columns: 43% 14% 43% !important;
  gap: 0 !important;
  align-items: center !important;
  transform: none !important;
}

#runPrepPanel .run-prep-section-head > img { display: none !important; }

#runPrepPanel .run-prep-section-head strong {
  grid-column: 1 !important;
  justify-self: center !important;
  padding: 0 !important;
  transform: translateX(-6px) !important;
  font-size: clamp(11px, 3.15vw, 13px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#runPrepPanel .run-prep-section-head span {
  grid-column: 3 !important;
  justify-self: center !important;
  font-size: clamp(8px, 2.35vw, 10px) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: translateX(6px) !important;
}

#runPrepPanel .inventory-section .run-prep-section-head strong {
  transform: translate(-6px, 2px) !important;
}

#runPrepPanel .inventory-section .run-prep-section-head span {
  transform: translate(6px, 2px) !important;
}

#runPrepPanel .shard-section .run-prep-section-head strong {
  transform: translate(-6px, -2px) !important;
}

#runPrepPanel .shard-section .run-prep-section-head span {
  transform: translateX(6px) !important;
}

#runPrepPanel .run-prep-options.inventory-options,
#runPrepPanel .run-prep-options.shard-options {
  position: absolute !important;
  inset: 21.8% 5.8% 6.6% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 6.5% !important;
}

#runPrepPanel .run-prep-options .run-prep-option {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 5.2% !important;
  display: grid !important;
  grid-template-columns: clamp(24px, 6.6vw, 28px) minmax(0, 1fr) clamp(47px, 12.6vw, 53px) !important;
  align-items: center !important;
  gap: clamp(5px, 1.45vw, 7px) !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

#runPrepPanel .run-prep-option > img { display: none !important; }

#runPrepPanel .run-prep-option > span {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  text-align: left !important;
  transform: none !important;
}

#runPrepPanel .run-prep-option > span strong {
  display: block !important;
  overflow: visible !important;
  color: #fff0b0 !important;
  font-size: clamp(13.5px, 3.75vw, 15.5px) !important;
  line-height: 1.08 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

#runPrepPanel .run-prep-option > span small {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #c5d9e7 !important;
  font-size: clamp(9.8px, 2.8vw, 11.2px) !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: keep-all !important;
  word-break: keep-all !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#runPrepPanel .run-prep-option > em {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: #e9dcff !important;
  text-align: center !important;
  transform: none !important;
}

#runPrepPanel .run-prep-option > em b {
  font-size: clamp(17px, 4.7vw, 19.5px) !important;
  line-height: 1 !important;
}

#runPrepPanel .run-prep-option > em small {
  color: #aebfd0 !important;
  font-size: clamp(7.5px, 2.2vw, 9px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#runPrepPanel .run-prep-option.unavailable { opacity: 0.42 !important; }

#runPrepPanel .run-prep-check {
  position: relative !important;
  z-index: 4 !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: clamp(21px, 5.9vw, 25px) !important;
  height: clamp(21px, 5.9vw, 25px) !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/vendor/skymon_icons_free/skymon-icons-white/check-markbox.png") center / contain no-repeat !important;
  box-shadow: none !important;
  opacity: 0.72 !important;
  filter: brightness(0) saturate(100%) invert(60%) sepia(19%) saturate(981%) hue-rotate(158deg) brightness(93%) contrast(89%) drop-shadow(0 1px 1px #000) !important;
  transform: none !important;
}

#runPrepPanel .run-prep-option.selected > span strong,
#runPrepPanel .run-prep-option.selected > em b {
  color: #fff3a8 !important;
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(255, 215, 92, 0.58) !important;
}

#runPrepPanel .run-prep-option.selected .run-prep-check {
  background-image: url("assets/vendor/skymon_icons_free/skymon-icons-white/check-box2c.png") !important;
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(88%) sepia(80%) saturate(884%) hue-rotate(346deg) brightness(104%) contrast(102%) drop-shadow(0 1px 1px #000) !important;
}

#runPrepPanel .run-prep-option.selected > span small { color: #effaff !important; }

#runPrepPanel .run-prep-shard-ledger {
  position: absolute !important;
  z-index: 5 !important;
  top: 75.3% !important;
  left: 9.5% !important;
  right: 9.5% !important;
  width: auto !important;
  height: 12.5% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 39% 61% !important;
  gap: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#runPrepPanel .run-prep-shard-ledger > .run-prep-ledger-title {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: grid !important;
  place-items: center !important;
  color: #cdefff !important;
  font-size: clamp(9px, 2.55vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  transform: translateY(-3px) !important;
}

#runPrepPanel .run-prep-shard-ledger > div {
  grid-row: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  background: none !important;
  transform: translateY(-7px) !important;
}

#runPrepPanel .run-prep-shard-ledger span {
  color: #b9cede !important;
  font-size: clamp(9px, 2.55vw, 11px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#runPrepPanel .run-prep-shard-ledger strong {
  color: #f0dcff !important;
  font-size: clamp(15px, 4.25vw, 18px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#runPrepPanel .run-prep-shard-ledger b { font-size: inherit !important; line-height: inherit !important; }
#runPrepPanel .run-prep-shard-ledger.insufficient strong { color: #ff9d9d !important; }
#runPrepPanel #runPrepHint { display: none !important; }

#runPrepPanel .run-prep-actions {
  position: absolute !important;
  z-index: 6 !important;
  top: 88.35% !important;
  left: 12% !important;
  right: 10.7% !important;
  width: auto !important;
  height: 5.7% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1.74fr !important;
  gap: 7.4% !important;
  transform: none !important;
}

#runPrepPanel .run-prep-actions .mini-button,
#runPrepPanel .run-prep-actions .mini-button.accent {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  color: #e9f0f5 !important;
  font-size: clamp(11px, 3.3vw, 14px) !important;
  line-height: 1 !important;
  text-align: center !important;
  transition: transform 70ms ease-out, filter 70ms ease-out, background-color 70ms ease-out, box-shadow 70ms ease-out !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

#runPrepPanel .run-prep-actions .mini-button::before,
#runPrepPanel .run-prep-actions .mini-button::after { content: none !important; display: none !important; }

#runPrepPanel .run-prep-actions .mini-button.accent {
  color: #fff0ae !important;
  font-size: clamp(13px, 3.75vw, 16px) !important;
}

#runPrepPanel .run-prep-actions .mini-button:active,
#runPrepPanel .run-prep-actions .mini-button.accent:active {
  transform: translateY(2px) scale(0.985) !important;
  filter: brightness(0.78) saturate(1.08) !important;
  background: rgba(3, 7, 12, 0.42) !important;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.92), inset 0 0 0 1px rgba(255, 211, 95, 0.16) !important;
  clip-path: polygon(8% 0, 92% 0, 100% 24%, 100% 76%, 92% 100%, 8% 100%, 0 76%, 0 24%) !important;
  color: #ffe28c !important;
  text-shadow: 0 1px 1px #000 !important;
}

@media (max-height: 700px) {
  #runPrepPanel .run-prep-card { width: min(332px, calc(100vw - 14px)) !important; }
}


/* SOURCE: ui/styles/inventory/item-detail-polish.css */
/* Item detail content alignment v12 1790256000220.
   Three meaningful rows replace the old basic/unique empty split, and the
   relationship bay supports a recipe and linked set at the same time. */
.item-info-panel .item-info-card,
.item-info-panel.mythic-item .item-info-card {
  background-image: url("assets/generated/item_detail_panel_no_center_gems_1793699200000/item-detail-panel-no-center-gems.png") !important;
}

.item-info-panel .item-info-card .item-info-stats {
  top: 24.35% !important;
  height: 37.42% !important;
  padding: 0 8px !important;
  display: block !important;
}

.item-info-panel .item-info-card .item-info-stats > span,
.item-info-panel .item-info-card .item-info-stats > span:nth-child(n),
.item-info-panel .item-info-card .item-info-stats > .base-stat-chip,
.item-info-panel .item-info-card .item-info-stats > .item-effect-detail-chip {
  padding: 0 14px !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  grid-template-columns: 68px minmax(0, 145px) !important;
  justify-content: center !important;
  column-gap: 5px !important;
  align-items: center !important;
}

.item-info-panel .item-info-card .item-info-stats > span:nth-child(1) {
  top: 2.8% !important;
  height: 27% !important;
}

.item-info-panel .item-info-card .item-info-stats > span:nth-child(2) {
  top: 36.4% !important;
  height: 27% !important;
}

.item-info-panel .item-info-card .item-info-stats > span:nth-child(3) {
  top: 70% !important;
  height: 27.4% !important;
}

.item-info-panel .item-info-card #itemInfoStats > span small,
.item-info-panel .item-info-card #itemInfoStats > .base-stat-chip small,
.item-info-panel .item-info-card #itemInfoStats > .item-effect-detail-chip small {
  align-self: center !important;
  margin: 0 !important;
  line-height: 13px !important;
  text-align: center !important;
  font-size: 10.6px !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: center !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 3px !important;
  row-gap: 0 !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong > span {
  display: inline-block !important;
  position: static !important;
  box-sizing: content-box !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: inherit !important;
  white-space: nowrap !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong > i {
  flex: 0 0 auto !important;
  color: #bca966 !important;
  font: inherit !important;
  font-style: normal !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong,
.item-info-panel .item-info-card #itemInfoStats > .base-stat-chip strong,
.item-info-panel .item-info-card #itemInfoStats > .item-effect-detail-chip strong,
.item-info-panel .item-info-card #itemInfoStats > .compact-overflow strong {
  align-self: center !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 13px !important;
  text-align: center !important;
  font-size: 10.9px !important;
}

.item-info-panel .item-info-card .item-info-relations {
  top: 63.75% !important;
  height: 22.15% !important;
  padding: 5px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] {
  grid-template-rows: 52% 48% !important;
}

.item-info-panel .item-info-card .item-relation-row,
.item-info-panel .item-info-card .item-relation-row.recipe.unknown {
  min-height: 0 !important;
  height: auto !important;
  padding: 3px 8px !important;
  grid-template-columns: 72px max-content !important;
  justify-content: center !important;
  gap: 9px !important;
  align-items: center !important;
  background: none !important;
  border: 0 !important;
}

.item-info-panel .item-info-card .item-relation-row + .item-relation-row {
  border-top: 1px solid rgba(193, 158, 66, .5) !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row {
  padding-block: 2px !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row > div {
  gap: 1px !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row small {
  font-size: 8.9px !important;
  line-height: 9.5px !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row strong {
  font-size: 10.7px !important;
  line-height: 11.2px !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row em {
  font-size: 8.8px !important;
  line-height: 9.4px !important;
  max-height: 19px !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row:first-child {
  transform: translateY(-2px) !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row:last-child {
  transform: translateY(3px) !important;
}

.item-info-panel .item-info-card .item-recipe-equation {
  width: 72px !important;
  justify-self: center !important;
}

.item-info-panel .item-info-card .item-relation-row > div {
  width: max-content !important;
  max-width: 126px !important;
  height: auto !important;
  align-self: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

.item-info-panel .item-info-card .item-relation-row small {
  font-size: 9.6px !important;
  line-height: 10.5px !important;
}

.item-info-panel .item-info-card .item-relation-row strong {
  font-size: 11.4px !important;
  line-height: 12.5px !important;
}

.item-info-panel .item-info-card .item-relation-row em {
  font-size: 9.5px !important;
  line-height: 11px !important;
}

.item-info-panel .item-info-card .item-info-actions {
  top: 88.04% !important;
  height: 5.94% !important;
}

.item-info-panel .item-info-card .item-info-actions button {
  transform: none !important;
  padding: 0 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.item-info-panel .item-info-card .item-info-actions button > strong,
.item-info-panel .item-info-card .item-info-actions #itemSellButton > strong {
  margin: 0 !important;
  padding-top: 1px !important;
  box-sizing: border-box !important;
  transform: none !important;
  font-size: 14px !important;
  line-height: 19px !important;
  text-align: center !important;
}

.item-info-panel .item-info-card .item-info-actions button:disabled {
  opacity: 1 !important;
  color: #8798a3 !important;
  filter: brightness(.72) saturate(.55) !important;
}

/* Hidden recipes now use the same readable gather-then-forge language as the
   regular three-item fusion instead of instantly swapping to the result. */
.fusion-panel.secret-fusion #fusionMeta {
  display: none !important;
}

.fusion-panel.secret-fusion.fusion-two.active .fusion-material.material-0 {
  animation: secretFusionGatherLeft 1900ms cubic-bezier(.25,.02,.22,1) both !important;
}

.fusion-panel.secret-fusion.fusion-two.active .fusion-material.material-2 {
  animation: secretFusionGatherRight 1900ms cubic-bezier(.25,.02,.22,1) both !important;
}

.fusion-panel.secret-fusion.fusion-two.active .fusion-core {
  animation: secretFusionCore 1900ms ease-out both !important;
}

.fusion-panel.secret-fusion.fusion-two.active .fusion-result-pop {
  animation: secretFusionResult 1900ms cubic-bezier(.2,.8,.25,1) both !important;
}

.fusion-panel.secret-fusion.active .fusion-material::after {
  opacity: 0 !important;
  transition: opacity 80ms linear !important;
}

.fusion-panel.secret-fusion .fusion-absorb {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fusion-panel.secret-fusion.fusion-complete .fusion-absorb {
  display: grid !important;
}

.fusion-panel.secret-fusion.fusion-complete .fusion-material,
.fusion-panel.secret-fusion.fusion-complete .fusion-core {
  visibility: hidden !important;
}

.fusion-panel.secret-fusion.fusion-complete .fusion-result-pop {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  animation: none !important;
}

.fusion-panel.secret-fusion.fusion-complete .fusion-result-pop img {
  width: 94px !important;
  height: 94px !important;
  padding: 0 !important;
  object-fit: contain !important;
}

.fusion-panel.secret-fusion .fusion-material,
.fusion-panel.secret-fusion .fusion-result-pop {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fusion-panel.secret-fusion .fusion-result-pop {
  width: 114px !important;
  height: 110px !important;
  min-height: 110px !important;
  padding: 0 !important;
  grid-template-rows: 94px 14px !important;
  align-content: stretch !important;
  justify-items: center !important;
  gap: 1px !important;
}

.fusion-panel.secret-fusion .fusion-result-pop img {
  grid-row: 1 !important;
  align-self: center !important;
  width: 94px !important;
  height: 94px !important;
  padding: 0 !important;
}

.fusion-panel.secret-fusion .fusion-result-pop span {
  position: static !important;
  grid-row: 2 !important;
  align-self: center !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  color: #a9ebff !important;
  font-size: 10px !important;
  line-height: 14px !important;
  text-align: center !important;
}

.fusion-panel.secret-fusion .fusion-material img,
.fusion-panel.secret-fusion .fusion-result-pop img {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* During a hidden-recipe forge the two ingredients are already identifiable
   by their art. Keep the gather motion clean; regular three-item fusion still
   retains its labels and grades. */
.fusion-panel.secret-fusion .fusion-material > span,
.fusion-panel.secret-fusion .fusion-material > small {
  display: none !important;
}

.fusion-panel.secret-fusion .fusion-material {
  align-content: center !important;
}

.fusion-panel.secret-fusion .fusion-material img {
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  object-fit: contain !important;
}

@keyframes secretFusionGatherLeft {
  0%, 28% { opacity: 1; transform: translateX(0) scale(1); }
  62% { opacity: 1; transform: translateX(calc(50% + 15px)) scale(.64); }
  74%, 100% { opacity: 0; transform: translateX(calc(50% + 15px)) scale(.06); }
}

@keyframes secretFusionGatherRight {
  0%, 28% { opacity: 1; transform: translateX(0) scale(1); }
  62% { opacity: 1; transform: translateX(calc(-50% - 15px)) scale(.64); }
  74%, 100% { opacity: 0; transform: translateX(calc(-50% - 15px)) scale(.06); }
}

@keyframes secretFusionCore {
  0%, 30% { opacity: 0; transform: translate(-50%, -50%) scale(.16); }
  56% { opacity: .82; transform: translate(-50%, -50%) scale(.82); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
  84%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.05); }
}

@keyframes secretFusionResult {
  0%, 74% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  78% { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  88% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Secret-fusion result: the header already communicates the recipe identity,
   so the result body is reserved for the unique item name and real stats. */
.fusion-panel.secret-fusion .fusion-card {
  position: relative !important;
  gap: 7px !important;
  padding-top: 72px !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000252/fusion-panel-transparent.png") center / 100% 100% no-repeat !important;
  filter: none !important;
}

.fusion-panel.secret-fusion #fusionTitle {
  position: absolute !important;
  z-index: 3 !important;
  top: 22px !important;
  left: 42px !important;
  right: 42px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  color: #ffe6a0 !important;
  font-size: 20px !important;
  line-height: 22px !important;
  text-align: center !important;
}

/* The new result art has a left-heavy silhouette even though its alpha bounds
   are geometrically centered. Keep the grade fixed and optically center only
   the artwork. */
.fusion-panel.secret-fusion .fusion-result-pop img {
  transform: translateX(3px) !important;
}

.fusion-panel.secret-fusion .fusion-result {
  min-height: 92px !important;
  padding: 9px 28px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  gap: 0 !important;
}

.fusion-panel.secret-fusion .fusion-result > .fusion-result-icon {
  display: none !important;
}

.fusion-panel.secret-fusion .fusion-result > div {
  width: 100% !important;
  padding-left: 0 !important;
  text-align: center !important;
}

.fusion-panel.secret-fusion #fusionResultMeta {
  color: #7fe6ff !important;
  font-size: 9.5px !important;
  line-height: 12px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.fusion-panel.secret-fusion #fusionResultName {
  margin: 3px 0 0 !important;
  color: #fff0b1 !important;
  font-size: 18px !important;
  line-height: 22px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.fusion-panel.secret-fusion #fusionResultText[hidden] {
  display: none !important;
}

.fusion-panel.secret-fusion .fusion-result-stats {
  width: 100% !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 8px !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000258/fusion-stat-strip.png") center / 100% 100% no-repeat !important;
}

.fusion-panel.secret-fusion .fusion-result-stats .fusion-stat-card {
  min-width: 0 !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  padding: 7px 8px 6px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fusion-panel.secret-fusion .fusion-result-stats .fusion-stat-card small {
  min-width: 0 !important;
  color: #88dff6 !important;
  font-size: 9px !important;
  line-height: 11px !important;
  font-weight: 900 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.fusion-panel.secret-fusion .fusion-result-stats .fusion-stat-card strong {
  min-width: 0 !important;
  color: #fff1b3 !important;
  font-size: 12px !important;
  line-height: 14px !important;
  font-weight: 1000 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Dedicated quiet confirmation control for the black-steel fusion frame. */
.fusion-panel.secret-fusion #fusionCloseButton {
  box-sizing: border-box !important;
  width: 146px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 auto !important;
  padding: 0 18px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-quiet.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)) !important;
  color: #f5e7ba !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
}

.fusion-panel.secret-fusion #fusionCloseButton:active {
  transform: translateY(2px) scale(.985) !important;
  filter: brightness(.88) drop-shadow(0 1px 2px rgba(0, 0, 0, .62)) !important;
}

/* Item-detail dense text repair 1790428800003.
   Keep the painted frame untouched: each bay owns one small heading row and a
   separate value grid, so long SSS summaries never share a baseline with the
   label or spill across the engraved separators. */
.item-info-panel .item-info-card .item-info-stats > span,
.item-info-panel .item-info-card .item-info-stats > span:nth-child(n),
.item-info-panel .item-info-card .item-info-stats > .base-stat-chip,
.item-info-panel .item-info-card .item-info-stats > .item-effect-detail-chip {
  box-sizing: border-box !important;
  padding: 2px 13px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 14px auto !important;
  row-gap: 2px !important;
  justify-items: center !important;
  align-content: center !important;
  align-items: center !important;
}

.item-info-panel .item-info-card #itemInfoStats > span small,
.item-info-panel .item-info-card #itemInfoStats > .base-stat-chip small,
.item-info-panel .item-info-card #itemInfoStats > .item-effect-detail-chip small {
  width: 100% !important;
  height: 14px !important;
  margin: 0 !important;
  align-self: center !important;
  color: #91e9ff !important;
  font-size: 10.2px !important;
  line-height: 14px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong,
.item-info-panel .item-info-card #itemInfoStats > .base-stat-chip strong,
.item-info-panel .item-info-card #itemInfoStats > .item-effect-detail-chip strong,
.item-info-panel .item-info-card #itemInfoStats > .compact-overflow strong {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, max-content) !important;
  grid-auto-rows: 11.5px !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
  color: #f7e7ad !important;
  font-size: 10.4px !important;
  line-height: 11.5px !important;
  text-align: center !important;
  overflow: visible !important;
}

.item-info-panel .item-info-card #itemInfoStats > .base-stat-chip strong {
  grid-template-columns: repeat(4, max-content) !important;
  column-gap: 7px !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong > i {
  display: none !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong > .item-summary-part {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong > .item-summary-lead {
  grid-column: 1 / -1 !important;
  color: #c9f4ff !important;
  font-size: 9.8px !important;
}

/* Painted-bay registration 1790515200002.
   These coordinates come from the visible gold borders in the authored
   909x1449 panel. The three unequal information bays and the two relationship
   bays are deliberately registered separately. */
.item-info-panel .item-info-card .item-info-stats {
  box-sizing: border-box !important;
  left: 12.7% !important;
  right: 12.6% !important;
  top: 0 !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.item-info-panel .item-info-card .item-info-stats > span,
.item-info-panel .item-info-card .item-info-stats > span:nth-child(n),
.item-info-panel .item-info-card .item-info-stats > .base-stat-chip,
.item-info-panel .item-info-card .item-info-stats > .item-effect-detail-chip {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 2px 13px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px minmax(0, 1fr) !important;
  row-gap: 1px !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.item-info-panel .item-info-card .item-info-stats > span:nth-child(1) {
  top: 24.50% !important;
  height: 5.38% !important;
}

.item-info-panel .item-info-card .item-info-stats > span:nth-child(2) {
  top: 32.37% !important;
  height: 8.97% !important;
}

.item-info-panel .item-info-card .item-info-stats > span:nth-child(3) {
  top: 43.69% !important;
  height: 11.87% !important;
}

.item-info-panel .item-info-card #itemInfoStats > span small,
.item-info-panel .item-info-card #itemInfoStats > .base-stat-chip small,
.item-info-panel .item-info-card #itemInfoStats > .item-effect-detail-chip small {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 11px !important;
  margin: 0 !important;
  color: #8fe8ff !important;
  font-size: 9.3px !important;
  line-height: 11px !important;
  font-weight: 900 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong,
.item-info-panel .item-info-card #itemInfoStats > .base-stat-chip strong,
.item-info-panel .item-info-card #itemInfoStats > .item-effect-detail-chip strong,
.item-info-panel .item-info-card #itemInfoStats > .compact-overflow strong {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, max-content) !important;
  grid-auto-rows: 10px !important;
  column-gap: 9px !important;
  row-gap: 0 !important;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
  color: #f8e6a8 !important;
  font-size: 9.8px !important;
  line-height: 10px !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
  overflow: hidden !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-density="sparse"] strong {
  grid-template-columns: max-content !important;
  font-size: 10.7px !important;
  line-height: 11px !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-density="normal"] strong {
  grid-template-columns: repeat(2, max-content) !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-density="dense"] strong {
  grid-template-columns: repeat(3, max-content) !important;
  column-gap: 7px !important;
  font-size: 9.4px !important;
}

.item-info-panel .item-info-card #itemInfoStats > .base-stat-chip[data-density="dense"] strong,
.item-info-panel .item-info-card #itemInfoStats > .base-stat-chip[data-density="packed"] strong {
  grid-template-columns: repeat(4, max-content) !important;
  column-gap: 6px !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-density="packed"] strong {
  grid-template-columns: repeat(3, max-content) !important;
  grid-auto-rows: 9px !important;
  column-gap: 5px !important;
  font-size: 8.7px !important;
  line-height: 9px !important;
  letter-spacing: -.045em !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong > .item-summary-lead {
  grid-column: 1 / -1 !important;
}

.item-info-panel .item-info-card .item-info-relations {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 12.7% !important;
  right: 12.6% !important;
  top: 0 !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}

.item-info-panel .item-info-card .item-info-relations[hidden] {
  display: none !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row,
.item-info-panel .item-info-card .item-info-relations .item-relation-row.recipe.unknown {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 58.11% !important;
  width: 100% !important;
  height: 12.63% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px 16px !important;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 126px) !important;
  gap: 9px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transform: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row:first-child {
  top: 58.11% !important;
  height: 12.63% !important;
  transform: none !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row:last-child {
  top: 73.15% !important;
  height: 14.29% !important;
  transform: none !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row.linked-set,
.item-info-panel .item-info-card .item-info-relations .item-relation-row.relation-empty {
  grid-template-columns: minmax(0, 1fr) !important;
  padding-inline: 22px !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row + .item-relation-row {
  border-top: 0 !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row > div {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: center !important;
  overflow: hidden !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row small {
  font-size: 9px !important;
  line-height: 10px !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row strong {
  width: 100% !important;
  font-size: 10.8px !important;
  line-height: 12px !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row em {
  width: 100% !important;
  max-height: 22px !important;
  font-size: 8.8px !important;
  line-height: 10px !important;
  text-align: center !important;
  overflow: hidden !important;
}

.item-info-panel .item-info-card .item-info-relations .item-recipe-equation {
  width: 72px !important;
  justify-self: center !important;
}

.item-info-panel .item-info-card .item-info-actions {
  box-sizing: border-box !important;
  left: 12.7% !important;
  right: 12.6% !important;
  top: 89.44% !important;
  width: auto !important;
  height: 5.04% !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 2.65% !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.item-info-panel .item-info-card .item-info-actions button {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 3px !important;
  transform: none !important;
}

.item-info-panel .item-info-card .item-info-actions button > strong,
.item-info-panel .item-info-card .item-info-actions #itemSellButton > strong {
  padding: 0 !important;
  font-size: 12.4px !important;
  line-height: 1 !important;
  transform: none !important;
}

/* Readable item-detail hierarchy 1790601600001.
   The authored unequal bays remain the visual source of truth. Content is
   grouped by importance instead of shrinking every property into one line. */
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"] strong {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 14px !important;
  gap: 0 8px !important;
  font-size: 12.4px !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"] strong {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 13px !important;
  gap: 1px 12px !important;
  font-size: 11.3px !important;
  line-height: 13px !important;
  letter-spacing: 0 !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"] strong {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 13px !important;
  gap: 2px 7px !important;
  font-size: 10.9px !important;
  line-height: 13px !important;
  letter-spacing: 0 !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong > .item-summary-part {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  color: #fff0b1 !important;
  font: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.item-info-panel .item-info-card #itemInfoStats > span small {
  color: #91e7ff !important;
  font-size: 10px !important;
  line-height: 11px !important;
  letter-spacing: .01em !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"] small {
  color: #aeeeff !important;
}

.item-info-panel .item-info-card .item-info-relations {
  pointer-events: none !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row small {
  color: #91e7ff !important;
  font-size: 9.8px !important;
  line-height: 11px !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row strong {
  color: #fff0b1 !important;
  font-size: 12px !important;
  line-height: 14px !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row em {
  color: #c9d9e3 !important;
  font-size: 9.6px !important;
  line-height: 11px !important;
}

.item-info-panel .item-info-card .item-info-head > div {
  right: 18.5% !important;
}

.item-info-panel .item-info-card .item-info-head .icon-close-button {
  box-sizing: border-box !important;
  position: absolute !important;
  left: auto !important;
  right: 3.6% !important;
  top: 3.1% !important;
  width: 12.4% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  opacity: .96 !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .72)) !important;
  transform: none !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.item-info-panel .item-info-card .item-info-head .icon-close-button:hover {
  filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, .75)) !important;
}

.item-info-panel .item-info-card .item-info-head .icon-close-button:active {
  transform: translateY(1px) scale(.96) !important;
  filter: brightness(.88) !important;
}

.item-info-panel .item-info-card .item-info-actions {
  pointer-events: auto !important;
}

/* Placement-state contrast and high-rarity sale guard 1790601600019. */
.item-info-panel .item-info-card .item-info-actions button:not(:disabled) {
  opacity: 1 !important;
  filter: none !important;
}

.item-info-panel .item-info-card .item-info-actions button:disabled {
  opacity: .24 !important;
  color: #687984 !important;
  text-shadow: none !important;
  filter: grayscale(1) brightness(.58) !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* Variable-content registration 1790601600028.
   Each authored bay keeps its fixed painted position, while its value grid is
   derived from the actual number of visible parts. A sparse item therefore
   occupies the optical centre instead of the first cell of an SSS-sized grid. */
.item-info-panel .item-info-card #itemInfoStats > span[data-part-count="1"] strong {
  grid-template-columns: minmax(0, 1fr) !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-part-count="2"] strong {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-part-count="3"] strong {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-part-count="4"] strong {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-part-count="5"] strong,
.item-info-panel .item-info-card #itemInfoStats > span[data-part-count="6"] strong,
.item-info-panel .item-info-card #itemInfoStats > span[data-density="packed"] strong {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 10.5px !important;
  column-gap: 5px !important;
  row-gap: 0 !important;
  font-size: 9.6px !important;
  line-height: 10.5px !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-density="dense"] strong > .item-summary-lead,
.item-info-panel .item-info-card #itemInfoStats > span[data-density="packed"] strong > .item-summary-lead {
  grid-column: auto !important;
  font-size: inherit !important;
}

.item-info-panel .item-info-card #itemInfoStats > span strong > .item-summary-part {
  align-self: center !important;
  justify-self: stretch !important;
}

/* Two-line item-name registration 1790601600042.
   The long-name variant uses the full painted title recess between the icon and
   first stat bay; metadata stays above the title instead of being clipped by it. */
.item-info-panel.long-item-title .item-info-card .item-info-head > div {
  top: 7.75% !important;
  height: 14.2% !important;
  right: 15.8% !important;
  padding-top: 2px !important;
  padding-bottom: 3px !important;
  gap: 2px !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.item-info-panel.long-item-title .item-info-card .item-info-head .label {
  flex: 0 0 auto !important;
  font-size: 8.8px !important;
  line-height: 11px !important;
  letter-spacing: -.02em !important;
  overflow: visible !important;
}

.item-info-panel.long-item-title .item-info-card .item-info-head strong {
  flex: 0 0 auto !important;
  max-height: 40px !important;
  padding: 0 !important;
  font-size: 15.5px !important;
  line-height: 19px !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* Painted header registration 1790601600054.
   Register both metadata and the item name to the title rectangle drawn into
   item-detail-panel-v8. Long names shrink inside that same bay instead of
   expanding the content box beyond the painted border. */
.item-info-panel .item-info-card .item-info-head > div,
.item-info-panel.long-item-title .item-info-card .item-info-head > div {
  left: 41% !important;
  right: 18.4% !important;
  top: 9.4% !important;
  height: 8.4% !important;
  padding: 0 !important;
  gap: 1px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: visible !important;
}

.item-info-panel .item-info-card .item-info-head .label,
.item-info-panel.long-item-title .item-info-card .item-info-head .label {
  width: 100% !important;
  margin: 0 !important;
  font-size: 8.3px !important;
  line-height: 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.item-info-panel .item-info-card .item-info-head strong,
.item-info-panel.long-item-title .item-info-card .item-info-head strong {
  width: 100% !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14.6px !important;
  line-height: 16px !important;
  text-align: center !important;
  word-break: keep-all !important;
  overflow: visible !important;
}

.item-info-panel .item-info-card .item-info-head .icon-close-button {
  left: auto !important;
  right: 2.7% !important;
  top: 2.6% !important;
  width: 10.8% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background: transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center / contain no-repeat !important;
  opacity: .96 !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .72)) !important;
}

/* The blue labels sit below the top jewel of the two taller painted bays.
   Move only the ink, not the fixed bay geometry or value columns. */
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"] small,
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"] small {
  transform: translateY(3px) !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"] strong,
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"] strong {
  transform: translateY(2px) !important;
}

.item-sale-confirm-panel {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  place-items: center;
  box-sizing: border-box;
  padding: 9px;
  background: rgba(0, 4, 10, .74);
  backdrop-filter: blur(2px);
}

.item-sale-confirm-panel.active {
  display: grid;
}

.item-sale-confirm-card {
  position: relative;
  box-sizing: border-box;
  width: min(356px, calc(100vw - 18px));
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent url("assets/generated/item_sale_confirm_gothic_1790601600014/item-sale-confirm-frame-alpha.png") center / 100% 100% no-repeat;
  color: #eaf6fb;
  text-align: center;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .72));
}

.item-sale-confirm-card h2 {
  position: absolute;
  left: 22.5%;
  right: 22.5%;
  top: 6.4%;
  height: 10.5%;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff0ae;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.1;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .78);
}

.item-sale-confirm-item {
  position: absolute;
  left: 12.8%;
  right: 12.8%;
  top: 22.8%;
  height: 32.2%;
  display: grid;
  grid-template-columns: 28.5% minmax(0, 1fr);
  align-items: center;
  gap: 4.5%;
  box-sizing: border-box;
  padding: 2px 5.5% 2px 4%;
  text-align: left;
}

.item-sale-confirm-item img {
  justify-self: center;
  width: 58px;
  height: 58px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .72));
  transform: translate(-1px, 2px);
}

.item-sale-confirm-item span {
  min-width: 0;
  width: 100%;
  display: grid;
  justify-items: center;
  align-self: center;
  gap: 6px;
  text-align: center;
  transform: translate(11px, 2px);
}

.item-sale-confirm-item strong {
  min-width: 0;
  color: #eadba8;
  font-size: 14px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: break-word;
}

.item-sale-confirm-item small {
  color: #9bc9d3;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
}

.item-sale-confirm-card > p {
  position: absolute;
  left: 12.8%;
  right: 12.8%;
  top: 60.2%;
  height: 10.4%;
  display: grid;
  place-items: center;
  margin: 0;
  color: #d6a9a1;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
  transform: translateY(-2px);
}

.item-sale-confirm-actions {
  position: absolute;
  left: 12.6%;
  right: 12.6%;
  bottom: 10.7%;
  height: 16%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.2%;
}

.item-sale-confirm-actions button {
  position: relative;
  top: -1px;
  left: 2px;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: #dce8e9;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 2px #000;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
}

#itemSaleConfirmAcceptButton {
  color: #dfb8af;
}

.item-sale-confirm-actions button:focus-visible {
  color: #f4e5b7;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(196, 155, 68, .42);
}

.item-sale-confirm-actions button:active {
  transform: translateY(1px) scale(.985);
  color: #fff2c3;
  filter: brightness(.82);
}

/* Known recipes use the full painted relationship bay. The former star mark
   consumed a third of the row and forced the actual recipe into a narrow,
   unreadable column. */
.item-info-panel .item-info-card .item-info-relations .item-relation-row.recipe.known {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 4px 14px !important;
}

/* Long item names use the full painted title recess 1790947200014.
   A two-line name plus its metadata was consuming the former 46px live box
   edge-to-edge, so the second line touched the lower gold rail. The live box
   now opens farther upward and keeps extra optical breathing room below. */
.item-info-panel.long-item-title .item-info-card .item-info-head > div {
  top: 8% !important;
  height: 11.3% !important;
  padding: 0 0 4px !important;
  gap: 0 !important;
  justify-content: center !important;
  overflow: visible !important;
}

.item-info-panel.long-item-title .item-info-card .item-info-head .label {
  line-height: 10px !important;
}

.item-info-panel.long-item-title .item-info-card .item-info-head strong {
  max-height: 34px !important;
  line-height: 16px !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row.recipe.known > .item-relation-mark {
  display: none !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row.recipe.known > div {
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  text-align: center !important;
  overflow: visible !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row.recipe.known .item-recipe-known-equation {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  color: #fff0b1 !important;
  font-size: 11.2px !important;
  line-height: 12.5px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row.recipe.known .item-recipe-known-equation > span,
.item-info-panel .item-info-card .item-info-relations .item-relation-row.recipe.known .item-recipe-known-equation > b {
  display: block !important;
  min-width: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row.recipe.known .item-recipe-known-equation > b {
  color: #ffd77b !important;
  font-size: 12px !important;
  line-height: 13.5px !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row.recipe.known em {
  width: 100% !important;
  max-height: none !important;
  color: #c9d9e3 !important;
  font-size: 9.2px !important;
  line-height: 10.5px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* The active set row already names the set above this line. Keep only the
   numeric bonuses and give their glyphs a whole painted text line so the
   descenders are never clipped by fractional line-height rounding. */
.item-info-panel .item-info-card .item-info-relations .item-relation-row.linked-set em {
  min-height: 13px !important;
  line-height: 13px !important;
  overflow: visible !important;
}

/* Dense combat summaries need two readable columns. Three narrow columns made
   the right-hand affinity and resistance values look truncated. */
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="5"] strong,
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="6"] strong,
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-density="packed"] strong {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 11px !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  font-size: 9.9px !important;
  line-height: 11px !important;
}


/* SOURCE: ui/styles/shared/top-hud-gothic.css */
/* Fixed-size gothic HUD skin 1790256000220.
   Geometry intentionally follows the existing 398x64 / 398x32 layout. */
.phone-shell > .topbar {
  box-sizing: border-box;
  height: 64px;
  min-height: 64px;
  padding: 7px 9px 6px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/top_hud_gothic_1790256000243/topbar-frame-alpha.png") center / 100% 100% no-repeat;
  box-shadow: none;
  clip-path: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.46));
}

.phone-shell > .topbar > div:first-child {
  position: relative;
  z-index: 1;
  max-width: 41%;
  padding-left: 13px;
}

.phone-shell > .topbar .eyebrow {
  color: #7dc7e9;
  font-size: 9px;
  line-height: 11px;
  text-shadow: 0 1px 2px #000;
}

.phone-shell > .topbar h1 {
  margin-top: 2px;
  color: #fff0b7;
  font-size: 16px;
  line-height: 17px;
  text-shadow: 0 2px 2px #000, 0 0 6px rgba(185, 132, 51, 0.24);
}

.phone-shell > .topbar .round-chip {
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  width: 130px;
  min-width: 130px;
  height: 30px;
  padding: 4px 7px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #ffe9a7;
  text-shadow: 0 1px 2px #000;
}

.phone-shell > .topbar .round-chip span {
  font-size: 15px;
  line-height: 1;
}

.phone-shell > .topbar .round-chip small {
  color: #a8c3d2;
}

.phone-shell > .topbar .top-menu-button {
  width: 48px;
  min-width: 48px;
  height: 48px;
  margin-right: 0;
}

.phone-shell > .status-strip {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  gap: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/top_hud_gothic_1790256000220/resource-strip.png") center / 100% 100% no-repeat;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.42);
}

.phone-shell > .status-strip .status-resource {
  box-sizing: border-box;
  min-height: 32px;
  grid-template-columns: 24px max-content;
  justify-content: center;
  gap: 3px;
  padding: 3px 6px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.phone-shell > .status-strip .status-resource-supply {
  padding-left: 7px;
  padding-right: 7px;
}

.phone-shell > .status-strip .status-resource-shard {
  padding-left: 6px;
  padding-right: 6px;
}

.phone-shell > .status-strip .status-resource-power {
  padding-left: 6px;
  padding-right: 6px;
}

.phone-shell > .status-strip .status-resource-abyss {
  padding-left: 6px;
  padding-right: 6px;
}

.phone-shell > .status-strip .status-resource::before,
.phone-shell > .status-strip .status-resource::after {
  display: none;
}

.phone-shell > .status-strip .status-resource-icon {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle, rgba(var(--resource-glow), 0.17), transparent 70%);
  box-shadow: none;
}

.phone-shell > .status-strip .status-resource-icon img {
  width: 19px;
  height: 19px;
}

.phone-shell > .status-strip .status-resource .label {
  color: #a5b9c6;
  font-size: 7.5px;
}

.phone-shell > .status-strip .status-resource strong {
  color: #f6e6b4;
  font-size: 11.5px;
  text-shadow: 0 1px 1px #000;
}

.phone-shell > .status-strip .status-resource-copy {
  justify-items: center;
  text-align: center;
}

/* The resource artwork has unequal painted chamber centers. Move only the
   contents of the affected chamber; never translate the four-cell strip. */
.phone-shell > .status-strip .status-resource-power > * {
  transform: translateX(-4px);
}

.phone-shell > .status-strip .status-resource-abyss > * {
  transform: translateX(-8px);
}

.phone-shell > .status-strip .status-resource-shard > * {
  transform: translateX(2px);
}

@media (max-width: 370px), (max-height: 760px) {
  .phone-shell > .topbar {
    height: 64px;
    min-height: 64px;
  }

  .phone-shell > .status-strip {
    height: 32px;
    min-height: 32px;
    gap: 0;
  }

  .phone-shell > .status-strip .status-resource {
    min-height: 32px;
    grid-template-columns: 21px max-content;
    padding-inline: 3px;
  }

  .phone-shell > .status-strip .status-resource-supply {
    padding-left: 3px;
    padding-right: 3px;
  }

  .phone-shell > .status-strip .status-resource-icon {
    width: 21px;
    height: 21px;
  }
}

/* Simplified combat header 1790947200022. Preserve the proven frame geometry,
   but remove the phone-outline clutter and quiet the side compartments. */
.phone-shell {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    inset 0 -18px 42px rgba(0, 0, 0, 0.24),
    0 22px 70px rgba(0, 0, 0, 0.5) !important;
}

.phone-shell > .topbar > div:first-child {
  position: absolute !important;
  left: 3.3% !important;
  top: 15% !important;
  width: 31.5% !important;
  height: 70% !important;
  max-width: none !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none;
}

.phone-shell > .topbar .eyebrow {
  display: none !important;
}

.phone-shell > .topbar h1 {
  margin: 2px 0 0 !important;
  color: #f7e6ad !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.phone-shell > .topbar .top-menu-button {
  position: absolute !important;
  right: 4.1% !important;
  top: 50% !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .58)) !important;
  overflow: visible !important;
}

.phone-shell > .topbar .top-menu-button img {
  width: 44px !important;
  max-width: none !important;
  height: 44px !important;
  margin: auto !important;
  filter: hue-rotate(-48deg) saturate(.86) brightness(.94) drop-shadow(0 1px 1px rgba(0, 0, 0, .76)) !important;
}

/* Painted-socket optical centers 1791120000002.
   The settings image is 44px inside a 34px button. A normal block image starts
   at the button's top-left, which displaced the visible gear 5px right/down.
   Register the three header contents and four resource groups against the
   actual artwork chambers instead of that accidental image box geometry. */
.phone-shell > .topbar > div:first-child {
  left: 3.4% !important;
}

.phone-shell > .topbar .round-chip span {
  position: relative;
  top: 2px;
}

.phone-shell > .topbar .top-menu-button {
  left: 91.96% !important;
  right: auto !important;
  top: 55.9% !important;
  transform: translate(-50%, -50%) !important;
}

.phone-shell > .topbar .top-menu-button img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.phone-shell > .status-strip .status-resource-supply > * {
  transform: translateX(7px);
}

.phone-shell > .status-strip .status-resource-power > * {
  transform: translateX(-3px);
}


/* SOURCE: ui/styles/inventory/loot-tray-alignment.css */
/* Symmetric authored acquisition tray 1790860800000.
   The former bitmap painted a visibly narrow left column and a wide right
   column. This replacement keeps the same 1842x854 silhouette but registers
   four equal chambers around the true centre line. */
#capsulesPanel .pull-inline-panel,
#capsulesPanel .pull-inline-panel.active {
  aspect-ratio: 1842 / 854 !important;
  background-image:
    url("assets/generated/loot_tray_symmetric_1790860800000/loot-tray-frame-symmetric-alpha.png") !important;
}

#capsulesPanel .pull-inline-panel .panel-head.compact {
  left: 7.2% !important;
  right: 4.2% !important;
  top: 6% !important;
  height: 23.5% !important;
}

#capsulesPanel .pull-inline-panel .panel-head.compact > div {
  align-self: center !important;
}

#capsulesPanel .pull-inline-panel .panel-head.compact h2 {
  margin: 0 !important;
  line-height: 18px !important;
  overflow: visible !important;
}

#capsulesPanel .pull-inline-list {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

#capsulesPanel .pull-inline-list > :nth-child(1),
#capsulesPanel .pull-inline-list > :nth-child(2),
#capsulesPanel .pull-inline-list > :nth-child(3),
#capsulesPanel .pull-inline-list > :nth-child(4) {
  position: absolute !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: none !important;
}

#capsulesPanel .pull-inline-list > :nth-child(1) {
  left: 7.6% !important;
  top: 28.9% !important;
  width: 41.2% !important;
  height: 26.5% !important;
}

#capsulesPanel .pull-inline-list > :nth-child(2) {
  left: 51.2% !important;
  top: 28.9% !important;
  width: 41.2% !important;
  height: 26.5% !important;
}

#capsulesPanel .pull-inline-list > :nth-child(3) {
  left: 7.6% !important;
  top: 58% !important;
  width: 41.2% !important;
  height: 26.5% !important;
}

#capsulesPanel .pull-inline-list > :nth-child(4) {
  left: 51.2% !important;
  top: 58% !important;
  width: 41.2% !important;
  height: 26.5% !important;
}

#capsulesPanel .inline-reveal-placeholder {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

#capsulesPanel .inline-reveal-placeholder small {
  position: static !important;
  margin: 0 !important;
  line-height: 10px !important;
  overflow: visible !important;
}

/* Compact the eight utility actions and spend the recovered height on the
   actual loot board. Keep the established 7/7/2, 7/7/6 and 8-column counts. */
#capsulesPanel .chance-strip.board-actions {
  height: 65px !important;
  min-height: 65px !important;
  max-height: 65px !important;
  flex: 0 0 65px !important;
  margin: 2px 0 3px !important;
  gap: 3px 4px !important;
}

#capsulesPanel .chance-strip.board-actions .chance-button {
  height: 31px !important;
  min-height: 31px !important;
  padding: 2px 3px !important;
  gap: 2px !important;
}

#capsulesPanel .chance-strip.board-actions .chance-button span {
  font-size: 8.8px !important;
}

#capsulesPanel .chance-strip.board-actions .chance-button small {
  font-size: 6.9px !important;
}

#capsulesPanel .capsule-board.board-size-16 {
  width: min(100%, 286px) !important;
  gap: 6px !important;
}

#capsulesPanel .capsule-board.board-size-20 {
  width: min(100%, 316px) !important;
  gap: 6px !important;
}

#capsulesPanel .capsule-board.board-size-24 {
  width: min(100%, 330px) !important;
  gap: 5px !important;
}

/* Acquired items have one action only. The complete item bay is the target,
   so the small web-style button is unnecessary. */
#capsulesPanel .inline-reveal-item,
#capsulesPanel .inline-reveal-item:only-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  padding: 3px 8px !important;
  cursor: pointer !important;
}

#capsulesPanel .inline-reveal-main,
#capsulesPanel .inline-reveal-main.compact {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, auto) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
}

#capsulesPanel .inline-item-icon {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}

#capsulesPanel .inline-reveal-copy,
#capsulesPanel .inline-reveal-name {
  font-size: 9.4px !important;
  line-height: 1.08 !important;
}

#capsulesPanel .inline-reveal-name {
  display: block !important;
  max-width: 96px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#capsulesPanel .inline-reveal-item:focus-visible {
  outline: 1px solid #ffe08a !important;
  outline-offset: -4px !important;
}

/* 360x760-class Android screens are shorter than the complete loot surface.
   Keep the app itself locked to 100dvh, but let only this inner panel scroll
   instead of clipping the bottom of the authored tray. The bar stays hidden. */
@media (max-width: 374px) and (max-height: 800px) {
  #capsulesPanel.active {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    scrollbar-width: none !important;
  }

  #capsulesPanel.active::-webkit-scrollbar {
    display: none !important;
  }
}


/* SOURCE: ui/styles/combat/combat-hud-gothic.css */
/*
 * Combat HUD material pass.
 * Keep every combat control in its existing layout box; only replace the
 * modern cyan card surfaces with the expedition's black-metal ornament.
 */

.phone-shell > .combat-panel {
  padding-top: 3px !important;
  padding-bottom: 1px !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.phone-shell > .combat-panel .fight-stage {
  border-radius: 0 !important;
  background:
    url("assets/generated/combat_stage_unified_1790256000254/battle-stage-unified-cut.png")
    center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

/* The frame and arena are now one painted asset. No second rectangular image,
   fade mask or CSS ground shadow is layered inside it. */
.phone-shell > .combat-panel .fight-stage::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* The former separate rim is disabled: it is painted into the unified board. */
.phone-shell > .combat-panel .fight-stage::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.phone-shell > .combat-panel .enemy-fighter {
  cursor: pointer;
  touch-action: manipulation;
}

.phone-shell > .combat-panel .enemy-fighter:focus-visible {
  outline: 1px solid rgba(255, 220, 122, 0.72);
  outline-offset: 2px;
}

.phone-shell > .combat-panel .player-stage-hud,
.phone-shell > .combat-panel .enemy-stage-hud {
  bottom: 11px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 9px 7px !important;
  align-items: center !important;
  gap: 2px 4px !important;
}

.phone-shell > .combat-panel .stage-hud .unit-name {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

.phone-shell > .combat-panel .stage-hud .stage-hp-text {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  width: auto !important;
}

.phone-shell > .combat-panel .stage-hud .hpbar {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: center !important;
}

/* Player HUD mirrors the enemy direction: HP | name, then a full-width bar. */
.phone-shell > .combat-panel .player-stage-hud {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

.phone-shell > .combat-panel .player-stage-hud .unit-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  text-align: right !important;
}

.phone-shell > .combat-panel .player-stage-hud .stage-hp-text {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  text-align: left !important;
}

.phone-shell > .combat-panel .player-stage-hud .hpbar {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

/* Enemy faces the player, so its reading order is mirrored: name | HP. */
.phone-shell > .combat-panel .enemy-stage-hud {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.phone-shell > .combat-panel .enemy-stage-hud .unit-name {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  text-align: left !important;
}

.phone-shell > .combat-panel .enemy-stage-hud .stage-hp-text {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  text-align: right !important;
}

.phone-shell > .combat-panel .enemy-stage-hud .hpbar {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

.phone-shell > .combat-panel #combatStatsMini {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent
    url("assets/generated/top_hud_gothic_1790256000220/resource-strip.png")
    center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.56));
}

.phone-shell > .combat-panel #combatStatsMini::before,
.phone-shell > .combat-panel #combatStatsMini::after {
  content: none !important;
}

.phone-shell > .combat-panel #combatStatsMini > span {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #b8d2df !important;
  text-shadow: 0 1px 1px #000, 0 0 4px rgba(27, 89, 122, 0.34);
}

.phone-shell > .combat-panel #combatStatsMini > span strong {
  color: #fff0b2 !important;
  text-shadow: 0 1px 1px #000, 0 0 4px rgba(174, 123, 39, 0.22);
}

.phone-shell > .combat-panel #battleButton,
.phone-shell > .combat-panel #skillButton {
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.64));
}

.phone-shell > .combat-panel #battleButton {
  color: #fff0b2 !important;
  text-shadow: 0 1px 1px #000, 0 0 5px rgba(197, 157, 62, 0.28);
}

.phone-shell > .combat-panel #skillButton {
  color: #a9bec9 !important;
  text-shadow: 0 1px 1px #000;
}

/*
 * Unified material pass (layout lock)
 *
 * These rules deliberately avoid every geometry property: the existing
 * combat boxes remain at the exact same x/y/width/height. Only the painted
 * materials are tuned to the top HUD's black iron + antique gold language.
 */
.phone-shell > .combat-panel .fight-stage::before {
  filter: none !important;
}

.phone-shell > .combat-panel #battleButton {
  background-image:
    url("assets/generated/lobby_prep_refresh_1788102000000/prep-start.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  filter:
    sepia(0.12)
    saturate(0.72)
    brightness(0.86)
    contrast(1.06)
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.64)) !important;
}

.phone-shell > .combat-panel #skillButton {
  filter:
    sepia(0.10)
    saturate(0.46)
    brightness(0.72)
    contrast(1.04)
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.58)) !important;
}

/* A charged rune must read as an available action at a glance. The neutral
   state stays muted, while ready uses the brighter painted control and a
   steady cyan/gold glow. Control-status badges are excluded. */
.phone-shell > .combat-panel .stage-controls #skillButton.ready:not(.control-status) {
  background-image:
    radial-gradient(ellipse at center, rgba(42, 151, 228, 0.24) 0%, rgba(25, 77, 151, 0.08) 48%, transparent 76%),
    url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-primary.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 88% 72%, 100% 100% !important;
  color: #fff1a8 !important;
  text-shadow:
    0 2px 2px #000,
    0 0 6px rgba(255, 218, 102, 0.82),
    0 0 10px rgba(69, 196, 255, 0.7) !important;
  filter:
    brightness(1.24)
    saturate(1.42)
    contrast(1.08)
    drop-shadow(0 0 5px rgba(66, 201, 255, 0.86))
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.58)) !important;
}

.phone-shell > .combat-panel #wavePreview {
  filter:
    sepia(0.14)
    saturate(0.52)
    brightness(0.78)
    contrast(1.08)
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.44)) !important;
}

.phone-shell > .combat-panel #wavePreview > span {
  color: #c7d4d9 !important;
  text-shadow: 0 1px 1px #000 !important;
}

.phone-shell > .combat-panel #wavePreview > strong {
  color: #ffe7a1 !important;
  text-shadow: 0 1px 1px #000, 0 0 3px rgba(185, 135, 45, 0.24) !important;
}

.phone-shell > .combat-panel #wavePreview > small {
  color: #d8d0b8 !important;
  text-shadow: 0 1px 1px #000 !important;
}

/* The former next-enemy row is gone. Reclaim its grid track so stats and the
   integrated loot/bag tabs rise as one block without stretching either. */
.phone-shell > .combat-panel .battle-core {
  grid-template-rows: auto 32px !important;
}

.phone-shell > .combat-panel + .tabs {
  margin-top: 0 !important;
  column-gap: 7px !important;
  background: none !important;
  filter: none !important;
}

.phone-shell > .combat-panel .enemy-fighter::after {
  content: var(--i18n-css-enemyInfo, "적 정보");
  position: absolute;
  left: 50%;
  bottom: -2px;
  z-index: 5;
  padding: 2px 8px 3px;
  border: 0;
  background: rgba(2, 6, 11, 0.72);
  color: rgba(229, 216, 173, 0.82);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 1px #000;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}

.phone-shell > .combat-panel .enemy-fighter:hover::after,
.phone-shell > .combat-panel .enemy-fighter:focus-visible::after {
  opacity: 1;
}

.phone-shell > .combat-panel .fight-stage.fighting .enemy-fighter {
  cursor: default;
}

.phone-shell > .combat-panel + .tabs {
  filter: none !important;
}

.phone-shell > .combat-panel + .tabs .tab-button {
  border: 0 !important;
  background:
    url("assets/generated/combat_stage_unified_1790256000254/combat-tab-neutral.png")
    center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter:
    sepia(0.10)
    saturate(0.62)
    brightness(0.84)
    contrast(1.06)
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42)) !important;
  color: #c8c3b4 !important;
  text-shadow: 0 1px 1px #000 !important;
}

.phone-shell > .combat-panel + .tabs .tab-button.active {
  background:
    url("assets/generated/combat_stage_unified_1790256000254/combat-tab-active.png")
    center / 100% 100% no-repeat !important;
  color: #ffeba3 !important;
  text-shadow: 0 1px 1px #000, 0 0 4px rgba(189, 141, 48, 0.22) !important;
}

/* King skill calls use authored artwork. CSS only positions the dynamic label;
   the former gradient box, border, shadow and diamond tail are disabled. */
.phone-shell > .combat-panel .enemy-skill-banner {
  top: 18px !important;
  width: 164px !important;
  min-width: 164px !important;
  max-width: 164px !important;
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  padding: 0 31px 7px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/generated/boss_skill_nameplate_1791206400006/boss-skill-nameplate.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.78)) !important;
  color: #fff0b3 !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  text-shadow: 0 1px 1px #000, 0 0 4px rgba(145, 184, 255, 0.34) !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

.phone-shell > .combat-panel .enemy-skill-banner::before,
.phone-shell > .combat-panel .enemy-skill-banner::after {
  content: none !important;
  display: none !important;
}

.phone-shell > .combat-panel .enemy-skill-banner.show {
  animation: enemySkillNameplateHold 3600ms ease both !important;
}

/* Regular enemies share the finished painted nameplate, but their one-shot
   tactics read as a compact combat call rather than a king proclamation. */
.phone-shell > .combat-panel .enemy-skill-banner[data-enemy-tier="regular"] {
  top: 6px !important;
  width: 146px !important;
  min-width: 146px !important;
  max-width: 146px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 28px 6px !important;
  color: #d9f7ff !important;
  font-size: 9px !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72)) saturate(0.82) !important;
}

.phone-shell > .combat-panel .enemy-skill-banner[data-enemy-tier="regular"].show {
  animation: regularEnemySkillNameplateHold 2200ms ease both !important;
}

/* A regular tactic is deliberately short and must not hide the player's skill
   or battle controls for several seconds as a king introduction does. */
.phone-shell > .combat-panel .fight-stage:has(.enemy-skill-banner[data-enemy-tier="regular"].show) #battleButton,
.phone-shell > .combat-panel .fight-stage:has(.enemy-skill-banner[data-enemy-tier="regular"].show) .stage-controls {
  opacity: 1 !important;
}

/* Enemy callouts may overlap the combat action, but the controls themselves
   must never vanish. This is especially important at low HP, where a king
   callout and defeat can otherwise make both action slots look deleted. */
.phone-shell > .combat-panel .fight-stage:has(.enemy-skill-banner.show) .enemy-fighter {
  z-index: 10 !important;
}

.phone-shell > .combat-panel .fight-stage:has(.enemy-skill-banner.show) #battleButton,
.phone-shell > .combat-panel .fight-stage:has(.enemy-skill-banner.show) .stage-controls {
  opacity: 1 !important;
}

@keyframes enemySkillNameplateHold {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.94);
  }
  8%,
  88% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -4px) scale(0.98);
  }
}

@keyframes regularEnemySkillNameplateHold {
  0% { opacity: 0; transform: translate(-50%, 5px) scale(0.94); }
  10%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -3px) scale(0.98); }
}

html[data-qa-boss-skill-banner-hold="1"] .phone-shell > .combat-panel .enemy-skill-banner.show {
  animation: none !important;
  opacity: 1 !important;
  transform: translate(-50%, 0) scale(1) !important;
}

/* A live control ailment is gameplay information, so it stays visible while
   the king nameplate is on screen. The painted status badge remains centered. */
.phone-shell > .combat-panel .fight-stage:has(.enemy-skill-banner.show) .stage-controls:has(.skill-button.control-status) {
  z-index: 24 !important;
  opacity: 1 !important;
}

.phone-shell > .combat-panel .stage-controls .skill-button.control-status {
  width: 122px !important;
  min-width: 122px !important;
  padding-inline: 17px !important;
  color: #fff4ff !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

/* No equipped skill is information, not an action. Keep the authored button
   asset but return the inactive slot to its original compact proportion. */
.phone-shell > .combat-panel .stage-controls .skill-button.skill-absent:not(.control-status) {
  width: 70px !important;
  min-width: 70px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 7px 1px !important;
  font-size: 7.5px !important;
  opacity: 0.54 !important;
  filter: brightness(0.62) saturate(0.42) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)) !important;
}

/* Enemy info hold affordance 1792854000001: keep the hint above the painted
   fighter, but reveal it only while the enemy is being inspected. */
.phone-shell > .combat-panel .enemy-fighter::after {
  top: 30% !important;
  bottom: auto !important;
  width: 64px !important;
  height: 24px !important;
  box-sizing: border-box !important;
  padding: 0 12px 1px !important;
  color: rgba(255, 234, 170, 0.96) !important;
  font-size: 8px !important;
  line-height: 23px !important;
  text-align: center !important;
  background: transparent url("./assets/generated/enemy_info_prompt_1791811200107/enemy-info-prompt.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.64)) !important;
  opacity: 0 !important;
  transition: opacity 100ms ease, filter 100ms ease !important;
}

.phone-shell > .combat-panel .enemy-fighter:active::after,
.phone-shell > .combat-panel .enemy-fighter:focus-visible::after,
.phone-shell > .combat-panel .enemy-fighter.qa-enemy-info-hold::after {
  opacity: 1 !important;
}

.phone-shell > .combat-panel .enemy-fighter:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}

.phone-shell > .combat-panel .enemy-fighter:active::after,
.phone-shell > .combat-panel .enemy-fighter.qa-enemy-info-hold::after {
  filter: brightness(0.92) saturate(0.9) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.68)) !important;
}

@media (hover: hover) and (pointer: fine) {
  .phone-shell > .combat-panel .enemy-fighter:hover::after {
    opacity: 1 !important;
  }
}


/* SOURCE: ui/styles/inventory/loot-board-polish.css */
/*
 * Loot board optical polish 1790342400000.
 * Geometry is intentionally locked: this pass changes selection hierarchy,
 * partial-row centering and edge luminance without changing panel height.
 */

/* The two authored tab bitmaps are nearly identical. Dim the inactive plate
   and give only the selected plate a warm expedition glow. */
.phone-shell > .combat-panel + .tabs .tab-button {
  background:
    linear-gradient(180deg, rgba(3, 8, 15, 0.18), rgba(0, 0, 0, 0.34)),
    url("assets/generated/combat_stage_unified_1790256000254/combat-tab-neutral.png")
    center / 100% 100% no-repeat !important;
  color: #9faab0 !important;
  filter:
    sepia(0.08)
    saturate(0.42)
    brightness(0.68)
    contrast(1.1)
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.34)) !important;
  text-shadow: 0 1px 1px #000 !important;
}

.phone-shell > .combat-panel + .tabs .tab-button.active {
  background:
    radial-gradient(ellipse at 50% 56%, rgba(255, 209, 91, 0.16), transparent 56%),
    url("assets/generated/combat_stage_unified_1790256000254/combat-tab-active.png")
    center / 100% 100% no-repeat !important;
  color: #fff1ad !important;
  filter:
    sepia(0.18)
    saturate(1.08)
    brightness(1.06)
    contrast(1.1)
    drop-shadow(0 0 4px rgba(232, 183, 66, 0.28))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.46)) !important;
  text-shadow:
    0 1px 1px #000,
    0 0 5px rgba(255, 211, 91, 0.44) !important;
}

/* Keep the established 7/7/2 and 7/7/6 layouts, but center incomplete rows
   against the visible board rather than the CSS grid's left edge. */
#capsulesPanel .capsule-board.board-size-16 > :nth-child(15) {
  grid-column-start: 3 !important;
}

#capsulesPanel .capsule-board.board-size-16 > :nth-child(n + 15) {
  position: relative !important;
  left: 20.85px !important;
}

#capsulesPanel .capsule-board.board-size-20 > :nth-child(n + 15) {
  position: relative !important;
  left: 23px !important;
}

/* The adjacent rails already provide enough depth. Lighter shadows stop the
   stat strip, tabs and panel rim from reading as one dense stack. */
#capsulesPanel.active {
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.24)) !important;
}

/* Tone down only the over-bright lower corner feet of the authored tray.
   The center jewel and all four item chambers remain untouched. */
#capsulesPanel .pull-inline-panel::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 6 !important;
  display: block !important;
  height: 12px !important;
  background: linear-gradient(
    90deg,
    rgba(1, 5, 10, 0.94) 0%,
    rgba(1, 5, 10, 0.82) 17%,
    rgba(1, 5, 10, 0.42) 27%,
    rgba(1, 5, 10, 0.42) 73%,
    rgba(1, 5, 10, 0.82) 83%,
    rgba(1, 5, 10, 0.94) 100%
  ) !important;
  pointer-events: none !important;
}

/* Loot-board state clarity and max-size bag reservation 1790428800001. */
#boardSummary {
  min-height: 11px !important;
  padding-bottom: 1px !important;
  overflow: visible !important;
  line-height: 10px !important;
}

/* Purged capsules are a burnt-copper discard state, not a rarity colour.
   This deliberately follows every rarity rule so F/D/etc. cannot repaint it. */
#capsulesPanel .capsule.purged,
#capsulesPanel .capsule.opened.purged,
#capsulesPanel .capsule.purged[class*="rarity-"] {
  opacity: .94 !important;
  border-color: #df7b35 !important;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 226, 175, .34) 0 6%, transparent 8%),
    radial-gradient(circle at 50% 43%, #7b3219 0 34%, #42170f 38% 59%, #160807 63% 100%) !important;
  color: #ffe2b2 !important;
  font-size: 8.5px !important;
  filter: none !important;
  text-shadow: 0 1px 1px #000, 0 0 4px rgba(255, 145, 65, .58) !important;
  box-shadow:
    inset 0 0 0 2px rgba(24, 7, 3, .94),
    inset 0 0 9px rgba(244, 106, 42, .28),
    0 0 0 1px rgba(255, 177, 82, .24),
    0 0 7px rgba(210, 86, 32, .28) !important;
}

/* Revealed grades use one shared dark token face. The previous F/D (and the
   still-hidden high-grade variants) painted a second concentric disc inside
   the capsule, which read as an accidental circle after opening. Rarity stays
   on the outer rim, glyph colour and glow; purged tokens keep their own face. */
#capsulesPanel .capsule[class*="rarity-"]:not(.purged) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .09) 0 16%, transparent 38%),
    linear-gradient(180deg, #202833 0%, #111821 54%, #080d13 100%) !important;
}

/* The bag always reserves its final 5x4 footprint. Only unlocked cells accept
   items; the future right column and bottom row remain visibly locked. */
#bagPanel .bag-board-row {
  grid-template-columns: minmax(172px, .98fr) minmax(0, 1.02fr) !important;
}

#bagPanel .bag-grid {
  --bag-cell-size: 30px;
  align-content: center !important;
  justify-content: center !important;
}

/* Invalid footprint stays visible above equipment art while dragging. */
#bagPanel .bag-cell.drop-invalid {
  outline: 2px solid #ed6863 !important;
  outline-offset: -2px !important;
  box-shadow: inset 0 0 9px rgba(173, 31, 29, .65) !important;
  position: relative;
  z-index: 6;
  pointer-events: none;
}
body .pointer-ghost.drop-invalid {
  outline: 3px solid #ed6863 !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 9px rgba(173, 31, 29, .65) !important;
}
body .pointer-ghost {
  display: block !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body .pointer-ghost > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  box-sizing: border-box !important;
  padding: 4px !important;
  margin: 0 !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

#bagPanel .bag-cell.locked,
#bagPanel .bag-cell.locked:disabled {
  opacity: .46 !important;
  border-color: rgba(83, 102, 118, .34) !important;
  background:
    url("assets/vendor/skymon_icons_free/skymon-icons-white/padlock-locked.png") center / 9px 9px no-repeat,
    radial-gradient(circle at 50% 45%, rgba(53, 67, 78, .16), transparent 64%),
    #040b12 !important;
  box-shadow: inset 0 0 0 1px rgba(1, 5, 9, .82) !important;
  filter: saturate(.35) brightness(.76) !important;
  cursor: default !important;
}

@media (max-width: 374px) {
  #bagPanel .bag-board-row {
    grid-template-columns: minmax(160px, 1fr) minmax(0, .92fr) !important;
  }

  #bagPanel .bag-grid {
    --bag-cell-size: 27.5px;
  }
}

/* Compact battle-bag controls and legible waiting-card hierarchy 1790774400001.
   The painted header is only 41px high: normal and sell-mode actions now sit
   inside its inner rails instead of nearly filling or exceeding the plate.
   Enhancement moves beside rarity so the larger item name gets its own line. */
#bagPanel > .panel-head > div:first-child h2 {
  font-size: 14px !important;
  line-height: 14px !important;
}

#bagPanel > .panel-head > .button-row {
  display: grid !important;
  grid-template-columns: 70px 58px !important;
  gap: 4px !important;
  width: auto !important;
  align-items: center !important;
}

#bagPanel > .panel-head > .button-row #bagMultiSellButton,
#bagPanel > .panel-head > .button-row #clearBagButton {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 6px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
}

#bagPanel > .panel-head > .bag-sell-bar {
  box-sizing: border-box !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 3px 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bagPanel > .panel-head > .bag-sell-bar > span {
  gap: 1px !important;
  padding-left: 3px !important;
}

#bagPanel > .panel-head > .bag-sell-bar > span strong {
  font-size: 9px !important;
  line-height: 10px !important;
}

#bagPanel > .panel-head > .bag-sell-bar > span small {
  font-size: 7px !important;
  line-height: 8px !important;
}

#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions {
  display: grid !important;
  grid-template-columns: 72px 84px 54px !important;
  justify-content: end !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  height: 26px !important;
}

#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions .mini-button,
#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellLowButton,
#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellConfirmButton,
#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellCancelButton {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 26px !important;
  min-height: 26px !important;
  min-width: 0 !important;
  padding: 0 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/loot_header_buttons_subdued_1790601600071/button-header-subdued.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  color: #c9d5dc !important;
  font-size: 9px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
}

#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellConfirmButton {
  color: #d8c58e !important;
}

#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellCancelButton {
  color: #d1aaa6 !important;
}

#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions .mini-button:disabled {
  opacity: .5 !important;
  filter: grayscale(.35) brightness(.72) !important;
}

#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions .mini-button:active:not(:disabled) {
  transform: translateY(1px) !important;
  filter: brightness(.84) !important;
}

#bagPanel .tray-item .tray-grade {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  width: auto !important;
  max-width: calc(100% - 8px) !important;
  font-size: 7.2px !important;
  line-height: 7.2px !important;
  white-space: nowrap !important;
}

#bagPanel .tray-item .tray-grade b,
#bagPanel .tray-item .tray-grade em {
  color: inherit !important;
  font: inherit !important;
  font-weight: 1000 !important;
  font-style: normal !important;
}

#bagPanel .tray-item .tray-grade em {
  color: #e7edf0 !important;
  text-shadow: 0 1px 1px #000 !important;
}

#bagPanel .tray-item .tray-name {
  font-size: 9px !important;
  line-height: 9.4px !important;
}

@media (max-width: 410px) {
}

@media (max-width: 374px) {
}

/* Battle-bag top plate breathing room 1790774400005.
   Grow the authored dual bay instead of shrinking its 30px equipment slots,
   then center the slot block between the painted top and bottom rails. */

/* Battle-bag label and sell-shelf optical registration 1790774400007.
   The effect plate carries one centered label.  The sell shelf is registered
   to the painted inner rails: its summary is inset from the left ornament,
   while the three controls are shorter, narrower, and sit lower than before. */
#bagPanel .effect-summary-head {
  display: grid !important;
  place-items: center !important;
  justify-content: stretch !important;
  padding: 0 8px !important;
}

#bagPanel .effect-summary-head strong {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

#bagPanel > .panel-head > .bag-sell-bar {
  grid-template-columns: 84px minmax(0, 1fr) !important;
  padding: 3px 10px 3px 6px !important;
}

#bagPanel > .panel-head > .bag-sell-bar > span {
  padding-left: 9px !important;
  transform: translateY(1px) !important;
}

#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions {
  grid-template-columns: 66px 76px 50px !important;
  gap: 4px !important;
  height: 24px !important;
  transform: translateY(2px) !important;
}

#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions .mini-button,
#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellLowButton,
#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellConfirmButton,
#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellCancelButton {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 4px 1px !important;
  font-size: 8.6px !important;
}

/* Unified dark-fantasy loot-board surface 1790601600056.
   Geometry stays fixed; authored plates and a dedicated rune socket replace
   the flat web-button and plastic-disc appearance. */
.phone-shell > .combat-panel + .tabs .tab-button {
  background:
    linear-gradient(180deg, rgba(4, 12, 22, .06), rgba(0, 0, 0, .18)),
    url("assets/generated/combat_stage_unified_1790256000254/combat-tab-neutral.png")
    center / 100% 100% no-repeat !important;
  color: #c5d0d7 !important;
  filter:
    sepia(.04)
    saturate(.68)
    brightness(.84)
    contrast(1.08)
    drop-shadow(0 1px 2px rgba(0, 0, 0, .58)) !important;
}

.phone-shell > .combat-panel + .tabs .tab-button.active {
  color: #ffe7a0 !important;
  filter:
    sepia(.12)
    saturate(.94)
    brightness(1.02)
    contrast(1.1)
    drop-shadow(0 0 4px rgba(236, 191, 70, .22))
    drop-shadow(0 2px 2px rgba(0, 0, 0, .5)) !important;
}

#capsulesPanel.active {
  /* The border-image is the one retained frame. The former menu-content-panel
     bitmap painted a second, visibly cropped frame inside it. */
  background: rgba(2, 8, 14, .72) !important;
}

#capsulesPanel .panel-head h2 {
  color: #ffe6a0 !important;
  text-shadow: 0 1px 1px #000, 0 0 6px rgba(221, 176, 69, .18) !important;
}

#capsulesPanel #boardSummary {
  color: #b9cad3 !important;
  text-shadow: 0 1px 1px #000 !important;
}

#capsulesPanel .board-actions {
  gap: 4px !important;
  margin: 1px 0 3px !important;
}

#capsulesPanel .board-actions .chance-button,
#capsulesPanel #adPullButton,
#capsulesPanel #adHealButton,
#capsulesPanel #adRerollBoardButton {
  box-sizing: border-box !important;
  min-height: 35px !important;
  padding: 5px 7px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-chance-neutral.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)) !important;
}

#capsulesPanel #adPullButton,
#capsulesPanel #adHealButton,
#capsulesPanel #adRerollBoardButton,
#capsulesPanel #buyTicketButton,
#capsulesPanel #rerollBoardButton,
#capsulesPanel #peekCapsuleButton,
#capsulesPanel #purgeCapsuleButton,
#capsulesPanel #boostPullButton {
  background-image: url("assets/generated/prep_board_grade_refresh_1790256000070/board-action-button-cropped.png") !important;
  filter: none !important;
}

#capsulesPanel .board-actions .chance-button span {
  color: #fff0b1 !important;
  font-size: 8.8px !important;
  line-height: 10px !important;
  text-shadow: 0 1px 1px #000, 0 0 4px rgba(252, 216, 115, .16) !important;
}

#capsulesPanel .board-actions .chance-button small {
  color: #b9d5e3 !important;
  font-size: 7.2px !important;
  line-height: 8.5px !important;
  text-shadow: 0 1px 1px #000 !important;
}

#capsulesPanel .board-actions .chance-button:disabled {
  opacity: .42 !important;
  filter: grayscale(.72) brightness(.72) !important;
}

/* The board cells are information tokens, not decorative sockets. Keep the
   surrounding board ornate, while making unopened / preview / collected
   states readable at a glance on a phone. */
#capsulesPanel .capsule-board,
#capsulesPanel .capsule-board[class*="board-size-"] {
  margin: 9px auto 0 !important;
}

#capsulesPanel .capsule,
#capsulesPanel .capsule[class*="rarity-"]:not(.purged),
#capsulesPanel .capsule.opened,
#capsulesPanel .capsule.peeked:not(.opened) {
  position: relative !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  width: 31px !important;
  height: 31px !important;
  justify-self: center !important;
  align-self: center !important;
  border: 1px solid #718092 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 37% 29%, rgba(255, 255, 255, .12) 0 5%, transparent 7%),
    linear-gradient(180deg, #303a47 0%, #18212b 54%, #080d13 100%) !important;
  color: #e8f0f5 !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .48) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
  filter: none !important;
}

/* Preserve the established core grade palette inside the simpler state
   tokens. State is carried by size/rim/brightness; rarity stays on the glyph. */
#capsulesPanel .capsule.rarity-F:not(.purged) { color: #f4f7ef !important; }
#capsulesPanel .capsule.rarity-D:not(.purged) { color: #8297aa !important; }
#capsulesPanel .capsule.rarity-C:not(.purged) { color: #4ade80 !important; }
#capsulesPanel .capsule.rarity-B:not(.purged) { color: #35c8ff !important; }
#capsulesPanel .capsule.rarity-A:not(.purged) { color: #a970ff !important; }
#capsulesPanel .capsule.rarity-S:not(.purged) { color: #ff873b !important; }
#capsulesPanel .capsule.rarity-SS:not(.purged) {
  color: #ffe052 !important;
  font-size: 10.8px !important;
  letter-spacing: -.25px !important;
  text-indent: -.35px !important;
}

#capsulesPanel .capsule.rarity-SSS:not(.purged) {
  color: #ff4d59 !important;
  font-size: 8.6px !important;
  letter-spacing: -.45px !important;
  text-indent: -.55px !important;
}

/* A collected cell recedes through brightness only. Extra seals make the
   small grade glyphs feel off-centre and are unnecessary. */
#capsulesPanel .capsule.opened:not(.purged) {
  border: 1px solid color-mix(in srgb, currentColor 46%, #34404a) !important;
  background: linear-gradient(180deg, #111820 0%, #05090d 100%) !important;
  box-shadow: none !important;
  opacity: .4 !important;
  transform: none !important;
  text-shadow: 0 1px 2px #000, 0 0 4px currentColor !important;
}

#capsulesPanel .capsule.opened:not(.purged)::after,
#capsulesPanel .capsule.peeked:not(.opened):not(.purged)::after {
  content: none !important;
  display: none !important;
}

/* A preview stays full-sized and uses its single grade-colour rim. It remains
   clickable; the collected row is distinguished by its lower brightness. */
#capsulesPanel .capsule.peeked:not(.opened):not(.purged) {
  border: 1px solid currentColor !important;
  background: linear-gradient(180deg, #202b36 0%, #091018 100%) !important;
  box-shadow: 0 0 5px color-mix(in srgb, currentColor 58%, transparent) !important;
  opacity: 1 !important;
  transform: none !important;
  text-shadow: 0 1px 2px #000, 0 0 5px currentColor !important;
}

#capsulesPanel .capsule.purged,
#capsulesPanel .capsule.opened.purged,
#capsulesPanel .capsule.purged[class*="rarity-"] {
  width: 31px !important;
  height: 31px !important;
  justify-self: center !important;
  align-self: center !important;
  border: 1px solid #8d4135 !important;
  border-radius: 50% !important;
  background:
    linear-gradient(45deg, transparent 46%, rgba(255, 111, 74, .72) 47% 52%, transparent 53%),
    radial-gradient(circle at 50% 43%, #351a19 0 46%, #190c0d 50% 69%, #080506 72% 100%) !important;
  color: #e79578 !important;
  font-family: inherit !important;
  font-size: 7.5px !important;
  box-shadow: none !important;
  opacity: .64 !important;
  transform: none !important;
  filter: none !important;
}

#capsulesPanel .capsule.purged::after {
  content: none !important;
}

/* Equipped items above the hero use a readable forged socket rather than a
   tiny corner rail. The grade tab stays visible over the combat artwork. */
.player-fighter > .gear-fx .gear-piece,
.player-fighter > .gear-fx .gear-piece:nth-child(n),
.player-fighter > .gear-fx .gear-piece[class*="rarity-"] {
  padding: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/loot_board_rune_socket_1790601600055/loot-rune-socket.png") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .64)) !important;
}

.player-fighter > .gear-fx .gear-piece img {
  width: 15px !important;
  height: 15px !important;
  padding: 0 !important;
}

.player-fighter > .gear-fx .gear-piece small {
  right: auto !important;
  left: 50% !important;
  bottom: -3px !important;
  min-width: 14px !important;
  padding: 1px 2px !important;
  border: 1px solid rgba(255, 220, 116, .68) !important;
  border-radius: 4px !important;
  background: rgba(10, 12, 18, .94) !important;
  font-size: 6.5px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000, 0 0 3px currentColor !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .72) !important;
  transform: translateX(-50%) !important;
}

.player-fighter > .gear-fx .gear-piece.rarity-SSS {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 70, 84, .56) 0 33%, rgba(104, 13, 30, .24) 48%, transparent 66%),
    url("assets/generated/loot_board_rune_socket_1790601600055/loot-rune-socket.png") center / contain no-repeat !important;
  box-shadow: 0 0 0 1px rgba(255, 69, 83, .74), 0 0 10px rgba(232, 35, 55, .58) !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .72)) !important;
}

.player-fighter > .gear-fx .gear-piece.rarity-SSS small {
  min-width: 18px !important;
  color: #fff0e8 !important;
  border-color: #ff6671 !important;
  background: linear-gradient(180deg, #bd2538, #560a19) !important;
  font-size: 6.8px !important;
  letter-spacing: -.35px !important;
  box-shadow: 0 0 6px rgba(238, 43, 62, .58), 0 1px 3px rgba(0, 0, 0, .8) !important;
}

.fight-stage .board-passive-badge,
.fight-stage .board-passive-badge.compact {
  padding: 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(49, 191, 244, .5) 0 36%, rgba(22, 105, 160, .22) 51%, transparent 67%),
    url("assets/generated/loot_board_rune_socket_1790601600055/loot-rune-socket.png") center / contain no-repeat !important;
  box-shadow: 0 0 0 1px rgba(83, 202, 244, .66), 0 0 7px rgba(36, 166, 229, .48) !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)) !important;
  opacity: 1 !important;
}

.fight-stage .board-passive-badge img,
.fight-stage .board-passive-badge.compact img {
  width: 14px !important;
  height: 14px !important;
  image-rendering: auto !important;
  filter: saturate(1.65) brightness(1.28) contrast(1.1) drop-shadow(0 0 4px rgba(124, 226, 255, .7)) !important;
  opacity: 1 !important;
}

/* Header actions should support the loot board instead of competing with it.
   One restrained forged plate serves all four actions; meaning is carried by
   copy colour, not jewels, neon rims or different silhouettes. */
#pullOneButton,
#pullFiveButton,
#bagMultiSellButton,
#clearBagButton,
#bagMultiSellButton.active {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/loot_header_buttons_subdued_1790601600071/button-header-subdued.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  color: #d6e0e6 !important;
  text-shadow: 0 1px 2px #000 !important;
}

#pullFiveButton {
  color: #ddc990 !important;
}

#clearBagButton {
  color: #d7aaa4 !important;
}

#bagMultiSellButton.active {
  color: #b9d7df !important;
  filter: brightness(1.06) !important;
}

#pullOneButton:active,
#pullFiveButton:active,
#bagMultiSellButton:active,
#clearBagButton:active {
  transform: translateY(1px) !important;
  filter: brightness(.88) !important;
}

/* Battle-bag content artwork 1790601600072.
   Keep the established 390/360 geometry and all live interactions. These
   authored plates replace the flat cyan rounded cards and CSS gradients. */
#bagPanel > .panel-head {
  border: 0 !important;
  background: transparent url("assets/generated/bag_content_gothic_1790601600072/bag-section-header.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#bagPanel .bag-board-row {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/bag_content_gothic_1790601600072/bag-top-dual-bay.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

#bagPanel .bag-grid,
#bagPanel .bag-effect-summary,
#bagPanel .bag-effect-summary.is-empty {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

#bagPanel .bag-cell,
#bagPanel .bag-cell.available,
#bagPanel .bag-cell.filled,
#bagPanel .bag-cell.recommended,
#bagPanel .bag-cell.best,
#bagPanel .bag-cell.drop-target,
#bagPanel .bag-cell.touch-target {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/bag_content_gothic_1790601600072/bag-slot-frame.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#bagPanel .bag-cell.locked,
#bagPanel .bag-cell.locked:disabled {
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url("assets/vendor/skymon_icons_free/skymon-icons-white/padlock-locked.png") center / 8px 8px no-repeat,
    url("assets/generated/bag_content_gothic_1790601600072/bag-slot-frame.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  opacity: .42 !important;
  filter: grayscale(.72) brightness(.7) !important;
}

#bagPanel.active .bag-tray,
#bagPanel.active .bag-tray:not(.is-empty) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/bag_content_gothic_1790601600072/bag-waiting-panel.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

#bagPanel .tray-head {
  border-bottom: 0 !important;
}

#bagPanel .tray-item,
#bagPanel .tray-item[class*="rarity-"],
#bagPanel .tray-item.secret-item {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/bag_content_gothic_1790601600072/bag-waiting-card.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

#bagPanel .tray-item::before,
#bagPanel .tray-item::after {
  content: none !important;
  display: none !important;
}

#bagPanel .tray-item.selected,
#bagPanel .tray-item.sell-selected {
  filter: brightness(1.14) saturate(1.06) !important;
}

/* Optical registration for the authored bag plates 1790688000002.
   The artwork divider sits at 60% of the usable width. The previous fixed
   172px first column only happened to line up at 390px and drifted badly in
   the 430px phone shell. Header and tray insets now follow their painted
   inner rails as well. */
#bagPanel > .panel-head {
  box-sizing: border-box !important;
  padding: 1px 16px 6px !important;
}

#bagPanel .bag-board-row {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
}

#bagPanel.active .bag-tray,
#bagPanel.active .bag-tray:not(.is-empty) {
  padding: 8px 12px 7px !important;
}

#bagPanel .tray-head {
  margin: 0 0 22px !important;
  padding: 0 2px 4px !important;
}

/* Full-bag optical registration 1790688000006.
   The previous bitmap replacement accidentally erased the rarity surface of
   waiting cards.  Keep the authored forged-card art and tint only its inner
   field, while registering live content to the painted rails at the normal
   430px shell and the 390/360 mobile widths. */
#bagPanel > .panel-head > div:first-child,
#bagPanel > .panel-head > .button-row {
  transform: translateY(2px) !important;
}

#bagPanel .bag-grid {
  transform: translateX(4px) !important;
}

#bagPanel .bag-effect-summary.is-empty .effect-summary-empty {
  transform: translateY(12px) !important;
}

#bagPanel.active .bag-tray,
#bagPanel.active .bag-tray:not(.is-empty) {
  padding: 21px 12px 7px !important;
}

#bagPanel .tray-head {
  margin: 0 0 9px !important;
}

#bagPanel .tray-item.rarity-F,
#bagPanel .placed-item.rarity-F { --bag-card-rarity: #eef1f4; --bag-card-rgb: 238,241,244; }
#bagPanel .tray-item.rarity-D,
#bagPanel .placed-item.rarity-D { --bag-card-rarity: #8297aa; --bag-card-rgb: 130,151,170; }
#bagPanel .tray-item.rarity-C,
#bagPanel .placed-item.rarity-C { --bag-card-rarity: #4ade80; --bag-card-rgb: 74,222,128; }
#bagPanel .tray-item.rarity-B,
#bagPanel .placed-item.rarity-B { --bag-card-rarity: #35c8ff; --bag-card-rgb: 53,200,255; }
#bagPanel .tray-item.rarity-A,
#bagPanel .placed-item.rarity-A { --bag-card-rarity: #a970ff; --bag-card-rgb: 169,112,255; }
#bagPanel .tray-item.rarity-S,
#bagPanel .placed-item.rarity-S { --bag-card-rarity: #ff873b; --bag-card-rgb: 255,135,59; }
#bagPanel .tray-item.rarity-SS,
#bagPanel .placed-item.rarity-SS { --bag-card-rarity: #ffe052; --bag-card-rgb: 255,224,82; }
#bagPanel .tray-item.rarity-SSS,
#bagPanel .placed-item.rarity-SSS { --bag-card-rarity: #ff4d59; --bag-card-rgb: 255,77,89; }

#bagPanel .tray-item[class*="rarity-"] {
  background:
    linear-gradient(
      145deg,
      rgba(var(--bag-card-rgb), .30) 0%,
      rgba(var(--bag-card-rgb), .13) 52%,
      rgba(1, 6, 11, .06) 100%
    ),
    transparent url("assets/generated/bag_content_gothic_1790601600072/bag-waiting-card.png")
    center / 100% 100% no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--bag-card-rgb), .36),
    inset 0 0 13px rgba(var(--bag-card-rgb), .18) !important;
}

#bagPanel .tray-item .tray-grade {
  color: var(--bag-card-rarity) !important;
  transform: translateY(2px) !important;
  text-shadow: 0 1px 1px #000, 0 0 4px currentColor !important;
}

@media (max-width: 410px) {
  #bagPanel .bag-tray-list {
    grid-auto-rows: 51px !important;
  }

  #bagPanel .tray-item,
  #bagPanel .tray-item[class*="rarity-"] {
    height: 51px !important;
    min-height: 51px !important;
    padding: 8px 2px 3px !important;
  }

  #bagPanel .tray-item .tray-icon {
    width: 22px !important;
    height: 18px !important;
    padding: 1px !important;
  }

  #bagPanel .tray-item .tray-name {
    font-size: 7.6px !important;
    line-height: 8px !important;
  }
}

@media (max-width: 374px) {
  #bagPanel .bag-tray-list {
    grid-auto-rows: 48px !important;
  }

  #bagPanel .tray-item,
  #bagPanel .tray-item[class*="rarity-"] {
    height: 48px !important;
    min-height: 48px !important;
    padding: 7px 2px 2px !important;
  }

  #bagPanel .tray-item .tray-icon {
    width: 21px !important;
    height: 17px !important;
  }

  #bagPanel .tray-item .tray-name {
    font-size: 7.3px !important;
    line-height: 7.7px !important;
  }
}

/* Keep the enlarged name line last in the cascade at narrow phone widths. */
@media (max-width: 410px) {
  #bagPanel .tray-item .tray-name {
    font-size: 8.4px !important;
    line-height: 8.8px !important;
  }
}

@media (max-width: 374px) {
  #bagPanel .tray-item .tray-name {
    font-size: 8px !important;
    line-height: 8.4px !important;
  }
}

/* Final optical registration for the taller dual bay. */
#bagPanel .bag-board-row {
  height: calc(var(--bag-board-height, 124px) + 12px) !important;
  min-height: calc(var(--bag-board-height, 124px) + 12px) !important;
}

#bagPanel .bag-grid {
  align-content: center !important;
}

#bagPanel .effect-summary-head small {
  margin-right: 6px !important;
}

#bagPanel .bag-effect-summary.is-empty .effect-summary-scroll {
  align-content: center !important;
}

#bagPanel .bag-effect-summary.is-empty .effect-summary-empty {
  width: calc(100% - 10px) !important;
  max-width: 106px !important;
  margin: 0 auto !important;
  transform: none !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
  text-align: center !important;
}

/* Sell-mode shelf fill and optical centering 1790947200010.
   The sell-mode header is 47px tall; keep its painted strip and live controls
   centered inside that full bay. Its three buttons deliberately reuse the
   normal header controls' 26px height and 9.5px label scale. */
#bagPanel > .panel-head > .bag-sell-bar {
  top: 50% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 6px !important;
  transform: translateY(-50%) !important;
}

#bagPanel > .panel-head > .bag-sell-bar > span {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
  padding-left: 7px !important;
  overflow: hidden !important;
  transform: none !important;
}

#bagPanel > .panel-head > .bag-sell-bar > span strong {
  font-size: 11px !important;
  line-height: 11px !important;
}

#bagPanel > .panel-head > .bag-sell-bar > span small {
  font-size: 8px !important;
  line-height: 9px !important;
}

#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions {
  min-width: 0 !important;
  height: 26px !important;
  grid-template-columns: .98fr 1.16fr .76fr !important;
  align-items: center !important;
  gap: 4px !important;
  transform: none !important;
}

#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions .mini-button,
#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellLowButton,
#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellConfirmButton,
#bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellCancelButton {
  display: grid !important;
  place-items: center !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 6px !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

@media (max-width: 374px) {
  #bagPanel > .panel-head > .bag-sell-bar {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 3px !important;
    padding-inline: 5px !important;
  }

  #bagPanel > .panel-head > .bag-sell-bar > span {
    padding-left: 5px !important;
  }

  #bagPanel > .panel-head > .bag-sell-bar > span strong {
    font-size: 10.4px !important;
  }

  #bagPanel > .panel-head > .bag-sell-bar > span small {
    font-size: 7.5px !important;
  }

  #bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions {
    gap: 3px !important;
  }

  #bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions .mini-button,
  #bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellLowButton,
  #bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellConfirmButton,
  #bagPanel > .panel-head > .bag-sell-bar .bag-sell-actions #bagSellCancelButton {
    padding-inline: 6px !important;
    font-size: 9.5px !important;
  }
}

/* Lock normal and sell-mode shelves to one painted header bay 1790947200011.
   Both states reuse the normal 39px authored header so the board and waiting
   tray below do not jump when selection mode is entered or cancelled. */
#bagPanel > .panel-head,
#bagPanel.sell-mode > .panel-head {
  box-sizing: border-box !important;
  height: 39px !important;
  min-height: 39px !important;
}

#bagPanel > .panel-head > .bag-sell-bar {
  height: 36px !important;
  min-height: 36px !important;
}

/* The dual-bay bitmap already paints the complete right-hand effect frame.
   Keep its title directly on that surface instead of nesting a stretched
   second plate inside it. Effect rows use the authored forged-card and slot
   bitmaps, not a rounded CSS gradient card. */
#bagPanel .effect-summary-head {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: calc(100% - 4px) !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 2px 6px !important;
  padding: 0 7px 1px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bagPanel .effect-summary-head strong {
  width: 100% !important;
  margin: 0 !important;
  color: #f5df9a !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(75, 169, 222, 0.25) !important;
  transform: none !important;
}

#bagPanel .effect-summary-scroll {
  gap: 5px !important;
  padding: 0 0 2px !important;
}

#bagPanel .effect-summary-list {
  gap: 5px !important;
}

#bagPanel .effect-summary-chip,
#bagPanel .effect-summary-chip.complete,
#bagPanel .effect-summary-chip.upcoming,
#bagPanel .effect-summary-chip.placement,
#bagPanel .effect-summary-chip.boost,
#bagPanel .effect-summary-chip.elementGood,
#bagPanel .effect-summary-chip.elementBad {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  grid-template-columns: 29px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 1px 3px !important;
  overflow: hidden !important;
  border: 7px solid transparent !important;
  border-radius: 0 !important;
  border-image: url("assets/generated/bag_content_gothic_1790601600072/bag-waiting-card.png") 28 fill / 7px / 0 stretch !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translateX(-4px) !important;
}

#bagPanel .effect-summary-chip img {
  box-sizing: border-box !important;
  width: 27px !important;
  height: 27px !important;
  padding: 3px !important;
  background: transparent url("assets/generated/bag_content_gothic_1790601600072/bag-slot-frame.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 0 4px rgba(87, 191, 237, 0.34)) !important;
}

#bagPanel .effect-summary-chip > span {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  height: 100% !important;
}

#bagPanel .effect-summary-chip b {
  display: block !important;
  overflow: hidden !important;
  color: #f6e5aa !important;
  font-size: 8.2px !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
}

/* Effect-card optical inset 1791811200103: preserve the slight left bias
   without pushing the forged card's left border outside the painted bay. */
#bagPanel .effect-summary-chip,
#bagPanel .effect-summary-chip.complete,
#bagPanel .effect-summary-chip.upcoming,
#bagPanel .effect-summary-chip.placement,
#bagPanel .effect-summary-chip.boost,
#bagPanel .effect-summary-chip.elementGood,
#bagPanel .effect-summary-chip.elementBad {
  width: calc(100% - 4px) !important;
  margin: 0 4px 0 0 !important;
  transform: none !important;
}

/* Equipped items retain their slot shape and use the waiting tray's grade palette. */
html body #bagPanel #bagGrid .placed-item[class*="rarity-"]:not(.mythic-item) {
  color: var(--bag-card-rarity) !important;
  border-color: var(--bag-card-rarity) !important;
  background: linear-gradient(145deg,
    rgba(var(--bag-card-rgb), .30) 0%,
    rgba(var(--bag-card-rgb), .13) 52%,
    rgba(1,6,11,.06) 100%), #17191b !important;
  box-shadow: inset 0 0 0 1px rgba(var(--bag-card-rgb), .36),
    inset 0 0 13px rgba(var(--bag-card-rgb), .18) !important;
}

html body #bagPanel #bagGrid .placed-item[class*="rarity-"]:not(.mythic-item):is(.adjacency-source,.adjacency-boosted) {
  outline-color: var(--bag-card-rarity) !important;
}
html body #bagPanel #bagGrid .placed-item[class*="rarity-"]:not(.mythic-item):is(.bonus-active,.set-active)::before {
  background: radial-gradient(circle, rgba(var(--bag-card-rgb), .18), transparent 72%) !important;
}

/* D is the near-black waiting-card surface, not the old blue grade fill. */
html body #bagPanel #bagGrid .placed-item.rarity-D:not(.mythic-item) {
  background: linear-gradient(145deg, #15191d, #080b0f 70%) !important;
  border-color: #555d65 !important;
  box-shadow: inset 0 0 0 1px #30363c !important;
  outline-color: #555d65 !important;
}


/* SOURCE: ui/styles/inventory/fusion-upgrade-polish.css */
/*
 * One-to-one rarity promotion.
 * A direct D -> C reward transforms one item in place; it is not a recipe or
 * a multi-material fusion. Its result summary gets a compact mobile layout.
 */
.fusion-panel.rarity-upgrade .fusion-absorb {
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  padding: 10px 70px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.fusion-panel.rarity-upgrade .fusion-card {
  max-height: calc(100dvh - 16px) !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  background: transparent url("assets/generated/item_detail_refresh_1790256000252/fusion-panel-transparent.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 14px 25px rgba(0, 0, 0, .78)) !important;
}

.fusion-panel.rarity-upgrade .fusion-card::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.fusion-panel.rarity-upgrade #fusionTitle {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  width: 260px;
  min-height: 44px;
  justify-self: center;
  display: grid;
  place-items: center;
  margin-bottom: -18px !important;
  padding: 0 30px 2px;
  background: transparent url("assets/generated/companion_ui_v6/mark-label-wide.png") center / 100% 100% no-repeat !important;
  transform: translateY(-30px);
}

.fusion-panel.rarity-upgrade .fusion-material.material-0 {
  width: 104px !important;
  min-height: 82px !important;
  justify-self: center !important;
}

.fusion-panel.rarity-upgrade .fusion-material.material-0::after {
  content: none !important;
  display: none !important;
}

.fusion-panel.rarity-upgrade.active .fusion-material.material-0 {
  animation: rarityUpgradeSource 1450ms cubic-bezier(.24, .04, .2, 1) both !important;
}

.fusion-panel.rarity-upgrade .fusion-core {
  width: 74px !important;
  height: 74px !important;
  background:
    radial-gradient(
      circle,
      #fff 0 7%,
      #cafff2 12%,
      rgba(65, 218, 178, .78) 31%,
      rgba(54, 143, 178, .32) 56%,
      transparent 73%
    ) !important;
  filter:
    drop-shadow(0 0 9px rgba(92, 231, 202, .78))
    drop-shadow(0 0 17px rgba(91, 183, 241, .42)) !important;
}

.fusion-panel.rarity-upgrade.active .fusion-core {
  animation: rarityUpgradeCore 1450ms ease-out both !important;
}

.fusion-panel.rarity-upgrade.active .fusion-result-pop {
  animation: rarityUpgradeResult 1450ms cubic-bezier(.18, .78, .2, 1) both !important;
}

.fusion-panel.rarity-upgrade .fusion-result {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 132px !important;
  padding: 15px 16px !important;
}

.fusion-panel.rarity-upgrade .fusion-result-icon {
  width: 64px !important;
  height: 64px !important;
  padding: 4px !important;
  border-radius: 0 !important;
  object-position: center !important;
  overflow: visible !important;
}

.fusion-panel.rarity-upgrade .fusion-result-pop img {
  width: 38px !important;
  height: 38px !important;
  padding: 2px !important;
  border-radius: 0 !important;
  background: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

.fusion-panel.rarity-upgrade .fusion-result > div {
  padding-left: 2px !important;
}

.fusion-panel.rarity-upgrade #fusionResultText {
  min-height: 30px !important;
  margin-top: 4px !important;
  max-width: 100% !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  white-space: pre-line !important;
  overflow-wrap: anywhere !important;
  overflow: hidden !important;
}

.fusion-panel.rarity-upgrade #fusionResultStats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 40px !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 40px !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000258/fusion-stat-strip.png") center top / 100% 40px repeat-y !important;
}

.fusion-panel.rarity-upgrade #fusionResultStats > span {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 2px 7px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.fusion-panel.rarity-upgrade #fusionResultStats > span > small,
.fusion-panel.rarity-upgrade #fusionResultStats > span > strong {
  display: block !important;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* The global compact-button skin used to paint an opaque blue rectangle
   underneath this control. Use the dedicated transparent fusion button only. */
.fusion-panel:not(.secret-fusion) #fusionCloseButton {
  box-sizing: border-box !important;
  width: 188px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 auto !important;
  padding: 0 26px 1px !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  appearance: none !important;
  background-color: transparent !important;
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-fusion-primary.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

/* During a three-item merge the moving sources only show their grade. The
   enhancement suffix returns on the completed result card. */
.fusion-panel.fusion-three.active .fusion-material-enhancement {
  display: none !important;
}

/* Three-item grade fusion: align the title with the painted upper name bay,
   remove the generic circular icon backing, and use the authored stat strip
   instead of floating CSS pills. */
.fusion-panel.fusion-three:not(.secret-fusion) #fusionTitle {
  position: relative !important;
  z-index: 4 !important;
  min-height: 28px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 8px 1px !important;
  line-height: 1 !important;
  transform: translateY(-20px) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) .fusion-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000252/fusion-panel-transparent.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 14px 25px rgba(0, 0, 0, .72)) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) .fusion-absorb {
  min-height: 136px !important;
  padding: 18px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-transparent.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  -webkit-mask: url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-transparent.png") center / 100% 100% no-repeat !important;
  mask: url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-transparent.png") center / 100% 100% no-repeat !important;
}

/* The separators are pseudo-elements from the original fusion layout, not
   enhancement suffixes. Hide them for the whole three-card gather animation. */
.fusion-panel.fusion-three.active:not(.secret-fusion) .fusion-material::after {
  content: none !important;
  display: none !important;
}

/* The three source cards used to fill the entire painted bay (76x78 each),
   touching its gold edge before they started moving. Keep their track centers,
   but give every card real breathing room and preserve exact convergence. */
.fusion-panel.fusion-three.active:not(.secret-fusion) .fusion-material {
  box-sizing: border-box !important;
  width: 68px !important;
  height: 68px !important;
  min-height: 68px !important;
  justify-self: center !important;
}

.fusion-panel.fusion-three.active:not(.secret-fusion) .fusion-material img {
  width: 24px !important;
  height: 24px !important;
}

.fusion-panel.fusion-three.active:not(.secret-fusion) .material-0 {
  animation: fusionGatherLeftCompact 1350ms cubic-bezier(.34, .05, .24, 1) both !important;
}

.fusion-panel.fusion-three.active:not(.secret-fusion) .material-1 {
  animation: fusionGatherCenterCompact 1350ms cubic-bezier(.34, .05, .24, 1) both !important;
}

.fusion-panel.fusion-three.active:not(.secret-fusion) .material-2 {
  animation: fusionGatherRightCompact 1350ms cubic-bezier(.34, .05, .24, 1) both !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) .fusion-result-pop img {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .72)) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) .fusion-result-pop {
  width: 94px !important;
  min-height: 94px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) .fusion-result-pop img {
  width: 52px !important;
  height: 52px !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) .fusion-result-pop span {
  color: #ffe9aa !important;
  font-size: 10px !important;
  line-height: 12px !important;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(111, 207, 255, .5) !important;
}

/* Keep the authored result plate shape, but let the completed grade tint travel
   with the item itself. SSS is crimson without restoring the old red circle. */
.fusion-panel.fusion-three:not(.secret-fusion) .fusion-result-pop.rarity-SSS img {
  filter:
    drop-shadow(0 3px 4px rgba(0, 0, 0, .74))
    drop-shadow(0 0 4px rgba(255, 82, 76, .95))
    drop-shadow(0 0 10px rgba(210, 28, 48, .72)) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) .fusion-result-pop.rarity-SSS span {
  color: #ff736b !important;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 72, 70, .95) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultText[hidden] {
  display: none !important;
}

/* Centre the two visible result lines by their painted bay, not by the heavier
   lower headline's baseline. */
.fusion-panel.fusion-three:not(.secret-fusion) .fusion-result {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultIcon {
  display: none !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) .fusion-result > div {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  width: 100% !important;
  padding: 0 18px !important;
  text-align: center !important;
  gap: 2px !important;
  transform: translateY(-2px) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultMeta {
  display: block !important;
  line-height: 12px !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultName {
  margin: 0 !important;
  line-height: 21px !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 40px !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 40px !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000258/fusion-stat-strip.png") center top / 100% 40px repeat-y !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats > span {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 40px !important;
  display: grid !important;
  place-content: center !important;
  justify-items: center !important;
  gap: 1px !important;
  padding: 3px 7px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats > span > small {
  margin: 0 !important;
  color: #9bdcf2 !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats > span > strong {
  margin: 0 !important;
  color: #ffe7a4 !important;
  font-size: 10.5px !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats > span:nth-child(n + 5) > strong {
  font-size: 9.2px !important;
  line-height: 1.08 !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats > span:last-child:nth-child(3n + 1) {
  grid-column: 2 !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: 46px !important;
  grid-auto-rows: 58px !important;
  gap: 4px 0 !important;
  min-height: 170px !important;
  background: transparent url("assets/generated/fusion_stat_strip_alpha_1791206400006/resource-strip-alpha.png") center top / 100% 46px no-repeat !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-core {
  grid-column: span 1 !important;
  min-height: 46px !important;
  padding: 2px 4px !important;
  transform: translateY(0) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-core > small {
  font-size: 10px !important;
  line-height: 11px !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-core > strong {
  font-size: 13px !important;
  line-height: 14px !important;
}

/* The painted end caps consume more width than the inner dividers. Pull the
   first and last labels into the actual black cells instead of the outer trim. */
.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-core:first-child {
  transform: translate(6px, 0) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-core:nth-child(2) {
  transform: translate(3px, 0) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-core:nth-child(3) {
  transform: translate(-3px, 0) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-core:nth-child(4) {
  transform: translate(-6px, 0) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-feature {
  grid-column: 1 / -1 !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: 1fr !important;
  place-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: 8px !important;
  padding: 6px 18px 4px !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% auto no-repeat !important;
  overflow: hidden !important;
  transform: translateY(2px) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-feature > small {
  width: auto !important;
  font-size: 11.5px !important;
  line-height: 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: translateY(3px) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-feature > strong {
  width: auto !important;
  font-size: 13.5px !important;
  line-height: 15px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  transform: translateY(3px) !important;
}

@keyframes fusionGatherLeftCompact {
  0%, 38% { opacity: 1; transform: translateX(0) scale(1); }
  72% { opacity: 1; transform: translateX(calc(100% + 20px)) scale(.66); }
  88%, 100% { opacity: 0; transform: translateX(calc(100% + 20px)) scale(.08); }
}

@keyframes fusionGatherCenterCompact {
  0%, 38% { opacity: 1; transform: scale(1); }
  72% { opacity: 1; transform: scale(.66); }
  88%, 100% { opacity: 0; transform: scale(.08); }
}

@keyframes fusionGatherRightCompact {
  0%, 38% { opacity: 1; transform: translateX(0) scale(1); }
  72% { opacity: 1; transform: translateX(calc(-100% - 20px)) scale(.66); }
  88%, 100% { opacity: 0; transform: translateX(calc(-100% - 20px)) scale(.08); }
}

@keyframes rarityUpgradeSource {
  0%, 30% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  56% {
    opacity: 1;
    transform: scale(1.08);
    filter: brightness(1.35) drop-shadow(0 0 9px rgba(76, 218, 192, .72));
  }
  72%, 100% {
    opacity: 0;
    transform: scale(.82);
    filter: brightness(2.35) drop-shadow(0 0 15px rgba(193, 255, 235, .9));
  }
}

@keyframes rarityUpgradeCore {
  0%, 26% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.24);
  }
  48% {
    opacity: .86;
    transform: translate(-50%, -50%) scale(.9);
  }
  67% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.48);
  }
  84%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.1);
  }
}

@keyframes rarityUpgradeResult {
  0%, 66% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72);
  }
  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Newly unlocked ascent powers need a full readable row below the compact
   combat stats. Keep the original four-stat layout intact for wide items. */
.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats:not([data-core-count="4"])[data-feature-count]:not([data-feature-count="0"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 40px 58px !important;
  grid-auto-rows: 58px !important;
  gap: 4px 0 !important;
  min-height: 102px !important;
  background: transparent url("assets/generated/fusion_stat_strip_alpha_1791206400006/resource-strip-alpha.png") center top / 100% 40px no-repeat !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="1"] > .fusion-stat-core {
  grid-column: 1 !important;
  transform: translateY(2px) !important;
}

/* A single combat stat must read as one painted cell, not one label floating
   over the middle of a four-cell strip. The wide plate keeps the same gothic
   material while removing all empty dividers. */
.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="1"][data-feature-count]:not([data-feature-count="0"]),
.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="1"][data-feature-count="0"] {
  grid-template-columns: minmax(0, 1fr) !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center top / 100% 40px no-repeat !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="2"][data-feature-count]:not([data-feature-count="0"]) > .fusion-stat-core:first-child {
  grid-column: 1 !important;
  transform: translate(6px, 0) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="2"][data-feature-count]:not([data-feature-count="0"]) > .fusion-stat-core:nth-child(2) {
  grid-column: 4 !important;
  transform: translate(-6px, 0) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="2"][data-feature-count]:not([data-feature-count="0"]) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats:not([data-core-count="4"])[data-feature-count]:not([data-feature-count="0"]) > .fusion-stat-feature {
  grid-column: 1 / -1 !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  place-content: center !important;
  align-items: center !important;
  column-gap: 8px !important;
  padding: 6px 18px 4px !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% auto no-repeat !important;
  transform: translateY(2px) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats:not([data-core-count="4"])[data-feature-count]:not([data-feature-count="0"]) > .fusion-stat-feature > small {
  font-size: 11.5px !important;
  line-height: 12px !important;
  white-space: nowrap !important;
  transform: translateY(3px) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats:not([data-core-count="4"])[data-feature-count]:not([data-feature-count="0"]) > .fusion-stat-feature > strong {
  font-size: 13px !important;
  line-height: 15px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  transform: translateY(3px) !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"] > .fusion-stat-feature:nth-child(n + 5) {
  grid-column: 1 / -1 !important;
}

.fusion-panel.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count="4"][data-feature-count="3"] {
  min-height: 234px !important;
}

/* One result language for promotion, ordinary fusion, and hidden recipes.
   The title is registered to the painted header by the frame's own height;
   it no longer participates in grid flow or drifts when result rows change. */
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) .fusion-card {
  position: relative !important;
  max-height: calc(100dvh - 16px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  /* The raster already paints a complete outer frame. A second drop shadow
     turned its transparent top and bottom margins into wide black slabs. */
  filter: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item):not(.secret-fusion) .fusion-card {
  padding-top: 82px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) .fusion-card::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionTitle {
  position: absolute !important;
  z-index: 4 !important;
  top: clamp(34px, 7%, 46px) !important;
  left: 42px !important;
  right: 42px !important;
  width: auto !important;
  height: 34px !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
  margin: 0 !important;
  padding: 0 8px 1px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  font-size: 20px !important;
  line-height: 22px !important;
  text-align: center !important;
  transform: none !important;
}

/* The completed item identity always occupies the same authored name plate.
   Rarity and item name stay centered even when a one-item promotion keeps a
   short explanatory sentence below them. */
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) .fusion-result {
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  gap: 0 !important;
  padding: 9px 28px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) .fusion-result > .fusion-result-icon {
  display: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) .fusion-result > div {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  width: 100% !important;
  padding: 0 12px !important;
  gap: 2px !important;
  text-align: center !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultMeta,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultName,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultText {
  width: 100% !important;
  text-align: center !important;
}

/* Numeric bonuses use the same four engraved cells as mythic acquisition.
   Incomplete rows are shifted by painted-cell units, not by text widths. */
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  gap: 4px 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 12px 5px !important;
  background: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core {
  --fusion-stat-optical-x: 0px;
  box-sizing: border-box !important;
  grid-column: auto !important;
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 3px 2px 4px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 15px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: url("assets/generated/top_hud_gothic_1790256000220/resource-strip.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 100% !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="0"],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="4"],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="8"] {
  --fusion-stat-optical-x: 3px;
  background-position: 0 0 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="1"],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="5"],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="9"] {
  --fusion-stat-optical-x: 1px;
  background-position: 33.333% 0 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="2"],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="6"],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="10"] {
  --fusion-stat-optical-x: -1px;
  background-position: 66.667% 0 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="3"],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="7"],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="11"] {
  --fusion-stat-optical-x: -3px;
  background-position: 100% 0 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core.fusion-stat-wide {
  --fusion-stat-optical-x: 0px;
  grid-column: span 2 !important;
  background:
    linear-gradient(180deg, rgba(23, 30, 39, .98), rgba(8, 13, 20, .99)) !important;
  border-top: 1px solid rgba(210, 184, 125, .44) !important;
  border-bottom: 1px solid rgba(72, 137, 176, .38) !important;
  box-shadow: inset 0 0 10px rgba(58, 117, 159, .12) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-grid-remainder="1"] > .fusion-stat-core.fusion-stat-tail:not(.fusion-stat-wide) {
  transform: translateX(150%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-grid-remainder="2"] > .fusion-stat-core.fusion-stat-tail:not(.fusion-stat-wide) {
  transform: translateX(100%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-grid-remainder="3"] > .fusion-stat-core.fusion-stat-tail:not(.fusion-stat-wide) {
  transform: translateX(50%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core > small,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core > strong {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  place-self: center !important;
  transform: translate(var(--fusion-stat-optical-x), 1px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core > small {
  color: #88dff6 !important;
  font-size: 8.5px !important;
  line-height: 11px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-core > strong {
  color: #fff1b3 !important;
  font-size: 11.2px !important;
  line-height: 15px !important;
}

/* Authored powers are semantic rows, never gold CSS pills. This covers the
   current 4-slot, upper-grade, and ascent powers and automatically applies to
   future feature labels classified by the shared renderer. */
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature {
  box-sizing: border-box !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  width: auto !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: 8px !important;
  border: 0 !important;
  border-top: 1px solid rgba(91, 206, 235, .26) !important;
  border-bottom: 1px solid rgba(222, 175, 88, .24) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, transparent 0, rgba(7, 15, 25, .9) 8%, rgba(11, 24, 38, .96) 50%, rgba(7, 15, 25, .9) 92%, transparent 100%) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-feature > small {
  width: 100% !important;
  margin: 0 !important;
  color: #88dff6 !important;
  font-size: 9px !important;
  line-height: 11px !important;
  text-align: left !important;
  white-space: nowrap !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-feature > strong {
  width: 100% !important;
  max-height: 28px !important;
  margin: 0 !important;
  color: #fff1b3 !important;
  font-size: 10.8px !important;
  line-height: 13px !important;
  text-align: right !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-feature.fusion-stat-feature-two-lines > strong {
  max-height: none !important;
  display: grid !important;
  grid-template-rows: repeat(2, 14px) !important;
  align-content: center !important;
  justify-items: end !important;
  white-space: nowrap !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-feature.fusion-stat-feature-two-lines > strong > .fusion-feature-line {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 14px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Promotion powers use a complete authored tray. The full metal end caps,
   inset recess, gold bevel, and sapphire anchors are painted into this asset;
   this must not regress to the thin CSS gradient/line used by generic rows. */
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power {
  height: 78px !important;
  min-height: 78px !important;
  padding: 17px 38px 16px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 28px !important;
  place-content: center !important;
  justify-items: center !important;
  row-gap: 2px !important;
  column-gap: 0 !important;
  border: 0 !important;
  background: transparent url("assets/generated/fusion_ascent_power_plate_deeper_1791552000118/ascent-power-plate-deeper.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power > small,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power > strong,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power > strong > .fusion-feature-line {
  width: 100% !important;
  text-align: center !important;
  justify-items: center !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power > strong {
  grid-template-rows: repeat(2, 14px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power > small {
  line-height: 11px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power > strong > .fusion-feature-line {
  line-height: 14px !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] {
    padding-inline: 10px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 6px !important;
    padding-inline: 10px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats > .fusion-stat-feature > strong {
    font-size: 10.2px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power {
    padding-inline: 36px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }
}

/* A one-stat ascent uses the original compact horizontal footprint, but a
   deliberately deeper painted recess so its two text lines fill the vertical
   slot instead of becoming a wide, shallow banner. */
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="1"][data-feature-count] {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="1"][data-feature-count] > .fusion-stat-core {
  --fusion-stat-optical-x: 0px;
  grid-column: 1 !important;
  justify-self: center !important;
  width: 122px !important;
  min-width: 122px !important;
  height: 60px !important;
  min-height: 60px !important;
  background-image: url("assets/generated/fusion_single_stat_plate_deeper_1791552000114/single-stat-plate-deeper.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  overflow: visible !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="1"][data-grid-remainder="1"] > .fusion-stat-core.fusion-stat-tail:not(.fusion-stat-wide) {
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="1"][data-feature-count] > .fusion-stat-feature {
  grid-column: 1 !important;
  justify-self: stretch !important;
  width: auto !important;
}

/* Two- and three-stat results use complete authored plates. The plate is one
   continuous raster behind the whole row, so neither end cap nor a divider is
   assembled from cropped quarters of the four-cell HUD strip. */
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
  position: relative !important;
  isolation: isolate !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] {
  grid-template-columns: minmax(0, 1fr) 110px 110px minmax(0, 1fr) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
  grid-template-columns: minmax(0, 1fr) repeat(3, 84px) minmax(0, 1fr) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count]::before,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count]::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 50% !important;
  top: 4px !important;
  height: 40px !important;
  transform: translateX(-50%) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  pointer-events: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count]::before {
  width: 220px !important;
  background-image: url("assets/generated/fusion_multi_stat_plates_1791465600018/two-stat-plate.png") !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count]::before {
  width: 252px !important;
  background-image: url("assets/generated/fusion_multi_stat_plates_1791465600018/three-stat-plate.png") !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats:is([data-core-count="2"],[data-core-count="3"])[data-feature-count] > .fusion-stat-core {
  --fusion-stat-optical-x: 0px;
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats:is([data-core-count="2"],[data-core-count="3"])[data-grid-remainder] > .fusion-stat-core.fusion-stat-tail:not(.fusion-stat-wide) {
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="0"],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="0"] {
  grid-column: 2 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="1"],
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="1"] {
  grid-column: 3 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="2"] {
  grid-column: 4 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats:is([data-core-count="2"],[data-core-count="3"])[data-feature-count] > .fusion-stat-core > small,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats:is([data-core-count="2"],[data-core-count="3"])[data-feature-count] > .fusion-stat-core > strong {
  transform: translateY(1px) !important;
}

/* The two painted recesses sit eight pixels closer to the central jewel than
   equal CSS columns do. Register each text pair to those optical centers and
   tighten the label/value stack without resizing the authored plate. */
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core {
  row-gap: 0 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core > small,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core > strong {
  width: calc(100% - 16px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="0"] > small,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="0"] > strong {
  transform: translate(8px, 1px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="1"] > small,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="1"] > strong {
  transform: translate(-8px, 1px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionResultStats:is([data-core-count="2"],[data-core-count="3"])[data-feature-count] > .fusion-stat-feature {
  position: relative !important;
  z-index: 1 !important;
  grid-column: 1 / -1 !important;
}

/* The blue button text sat below the painted recess. Bias the live label upward
   inside the raster without moving the button itself. */
.fusion-panel:not(.secret-fusion) #fusionCloseButton {
  display: grid !important;
  place-items: center !important;
  padding: 0 26px 4px !important;
  line-height: 1 !important;
}


/* SOURCE: ui/styles/rewards/board-passive-polish.css */
/* Authored board-clear frame with one automatic reward, three passive choices,
   and one rewarded-ad refresh bay. CSS only places live content in painted bays. */
.board-passive-choice-card{
  width:min(380px,calc(100vw - 6px))!important;
  aspect-ratio:938/1677!important;
  max-height:calc(100dvh - 8px)!important;
  background:transparent url("assets/generated/board_passive_single_joint_1790601600069/board-passive-frame-single-joint-alpha.png") center/100% 100% no-repeat!important;
}

.board-passive-choice-card>div:first-child{
  left:14%!important;
  right:14%!important;
  top:9.2%!important;
  height:14.8%!important;
  gap:4px!important;
}

.board-passive-choice-card>div:first-child>.label{font-size:10px!important}
.board-passive-choice-card>div:first-child>strong{font-size:21px!important;line-height:1.08!important}
.board-passive-choice-card>div:first-child>small{font-size:10.5px!important;line-height:1.14!important}

.board-passive-choice-card>.board-clear-supply-preview{
  position:absolute!important;
  left:10.2%!important;
  right:10.2%!important;
  top:24.25%!important;
  height:12.55%!important;
  padding:0 9px!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:9px!important;
  overflow:hidden!important;
  border:0!important;
  border-image:none!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
}

.board-passive-choice-card>.board-clear-supply-preview::before,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  top:50%!important;
  width:39px!important;
  height:39px!important;
  display:block!important;
  pointer-events:none!important;
  background:transparent url("assets/generated/board_passive_readable_rows_1790601600048/board-passive-icon-well-neutral.svg") center/100% 100% no-repeat!important;
  transform:translate(-50%,-50%)!important;
}

.board-passive-choice-card>.board-clear-supply-preview::before{left:43px!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]::before{left:46.5px!important}

.board-passive-choice-card>.board-clear-supply-preview>*,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]>*{
  position:relative!important;
  z-index:1!important;
}

.board-passive-choice-card>.board-clear-supply-preview img{
  width:34px!important;
  height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  place-self:center!important;
  object-fit:contain!important;
  transform:translate(5px,-5px)!important;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.72)) drop-shadow(0 0 6px rgba(255,201,74,.28))!important;
}

.board-passive-choice-card>.board-clear-supply-preview>span{
  width:calc(100% - 18px)!important;
  min-width:0!important;
  height:70px!important;
  grid-template-rows:12px 20px 28px!important;
  gap:5px!important;
  align-content:center!important;
  transform:translate(12px,-3px)!important;
}

.board-passive-choice-card>.board-clear-supply-preview>span>b{font-size:10.8px!important;line-height:12px!important}
.board-passive-choice-card>.board-clear-supply-preview>span>strong{font-size:17.3px!important;line-height:20px!important}
.board-passive-choice-card>.board-clear-supply-preview>span>small{
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  font-size:11.3px!important;
  line-height:13px!important;
  letter-spacing:-.025em!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
  -webkit-line-clamp:2!important;
}

.board-passive-choice-card>.board-passive-choice-list{
  left:9.2%!important;
  right:9.2%!important;
  top:37.25%!important;
  bottom:22.3%!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  gap:1.1%!important;
  overflow:hidden!important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]{
  position:relative!important;
  padding:2px 5% 2px 5.5%!important;
  grid-template-columns:55px minmax(0,1fr)!important;
  gap:6px!important;
  overflow:hidden!important;
  border:0!important;
  border-image:none!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]>img{
  width:36px!important;
  height:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  place-self:center!important;
  transform:translate(0,-3px)!important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality]>span{
  width:calc(100% - 20px)!important;
  min-width:0!important;
  height:72px!important;
  grid-template-rows:12px 21px 29px!important;
  gap:5px!important;
  align-content:center!important;
  transform:translate(13px,-3px)!important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality] b{font-size:11.3px!important;line-height:12px!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality] strong{font-size:18px!important;line-height:21px!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality] em{
  width:100%!important;
  height:29px!important;
  min-height:29px!important;
  max-height:29px!important;
  display:-webkit-box!important;
  color:#e4f0f5!important;
  font-size:12.1px!important;
  font-weight:650!important;
  line-height:13.8px!important;
  letter-spacing:-.01em!important;
  text-shadow:0 1px 1px rgba(0,0,0,.95)!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-effect-lines="3"]>span{
  height:72px!important;
  grid-template-rows:10px 18px 38px!important;
  gap:3px!important;
  overflow:hidden!important;
  transform:translate(13px,-1px)!important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-effect-lines="3"] b{
  font-size:10.5px!important;
  line-height:10px!important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-effect-lines="3"] strong{
  font-size:17px!important;
  line-height:18px!important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-effect-lines="3"] em{
  box-sizing:border-box!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  font-size:11px!important;
  line-height:12px!important;
  letter-spacing:-.015em!important;
  overflow:hidden!important;
  -webkit-line-clamp:3!important;
}

.board-passive-reroll-ad{
  position:absolute!important;
  z-index:3!important;
  left:9.7%!important;
  right:9.7%!important;
  top:78.45%!important;
  height:15.25%!important;
  min-height:0!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:28px auto auto!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#e8eff7!important;
  font-family:inherit!important;
  text-align:left!important;
  cursor:pointer!important;
  appearance:none!important;
}

.board-passive-reroll-icon{
  display:grid!important;
  place-items:center!important;
  color:#e5b95d!important;
  font-size:24px!important;
  line-height:1!important;
  text-shadow:0 0 7px rgba(143,81,255,.72),0 2px 3px #000!important;
  transform:translateY(-9px)!important;
}

.board-passive-reroll-copy{
  min-width:0!important;
  display:grid!important;
  align-content:center!important;
  gap:4px!important;
  transform:translateY(-9px)!important;
}

.board-passive-reroll-copy b{
  color:#fff0b0!important;
  font-size:16px!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-shadow:0 2px 3px #000!important;
}

.board-passive-reroll-copy small{
  color:#bcd2e0!important;
  font-size:11.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.board-passive-reroll-state{
  color:#b98cff!important;
  font-size:9.5px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 0 6px rgba(128,71,255,.72),0 1px 2px #000!important;
  transform:translateY(-9px)!important;
}

.board-passive-reroll-ad:active:not(:disabled){filter:brightness(1.15)!important;transform:translateY(1px)!important}
.board-passive-reroll-ad.watched{cursor:default!important;filter:saturate(.72) brightness(.82)!important}
.board-passive-reroll-ad.watched{
  grid-template-columns:30px auto!important;
  justify-content:center!important;
  gap:10px!important;
  padding-left:0!important;
  padding-right:0!important;
}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(1)>img{transform:translate(2px,-5px)!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(2)>img{transform:translate(2px,-7px)!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(3)>img{transform:translate(2px,-13px)!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(1):not([data-effect-lines="3"])>span{transform:translate(13px,-5px)!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(2):not([data-effect-lines="3"])>span{transform:translate(13px,-6px)!important}
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(3):not([data-effect-lines="3"])>span{transform:translate(13px,-9px)!important}

.board-passive-reroll-ad.watched .board-passive-reroll-icon{
  position:absolute!important;
  left:calc(50% - 67px)!important;
  top:calc(50% - 15px)!important;
  transform:translate(-50%,-50%)!important;
}
.board-passive-reroll-ad.watched .board-passive-reroll-copy{
  position:absolute!important;
  left:50%!important;
  top:calc(50% - 7px)!important;
  width:max-content!important;
  max-width:72%!important;
  justify-items:center!important;
  text-align:center!important;
  transform:translate(-50%,-50%)!important;
}
.board-passive-reroll-ad.watched .board-passive-reroll-state{display:none!important}
.board-passive-reroll-ad.watched .board-passive-reroll-icon,
.board-passive-reroll-ad.watched .board-passive-reroll-state{color:#74dfbc!important}

/* Board-clear result: dedicated forged-metal confirm control. */
.unlock-showcase.board-clear .unlock-confirm-button{
  background:transparent url("assets/generated/board_result_confirm_button_1790688000000/board-result-confirm-button-trimmed.png") center/100% 100% no-repeat!important;
  outline:0!important;
  color:#f5e8b2!important;
  font-size:11.5px!important;
  line-height:1!important;
  text-shadow:0 1px 2px #000,0 0 4px rgba(218,190,112,.18)!important;
  box-shadow:none!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.48))!important;
  transition:transform 90ms ease,filter 90ms ease!important;
}
.unlock-showcase.board-clear .unlock-confirm-button:hover,
.unlock-showcase.board-clear .unlock-confirm-button:focus-visible{
  filter:brightness(1.08) drop-shadow(0 4px 4px rgba(0,0,0,.52))!important;
}
.unlock-showcase.board-clear .unlock-confirm-button:active{
  transform:translateY(1px) scale(.985)!important;
  filter:brightness(.88) drop-shadow(0 2px 2px rgba(0,0,0,.5))!important;
}

@media(max-height:700px){.board-passive-choice-card{width:min(310px,calc(100vw - 12px))!important}}


/* SOURCE: ui/styles/shared/daily-challenge-polish.css */
/* Daily challenge clear popup: transparent outer frame, clean copy, current button art. */
.unlock-showcase.daily .unlock-card {
  background: transparent url("assets/generated/daily_challenge_polish_1790688000004/daily-challenge-panel-transparent.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.62)) !important;
}

.unlock-showcase.daily .unlock-card > p {
  margin-top: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #e8edf2 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.95) !important;
}

.unlock-showcase.daily .unlock-confirm-button {
  width: 132px !important;
  min-width: 132px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin-top: 4px !important;
  padding: 0 20px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent url("assets/generated/board_result_confirm_button_1790688000000/board-result-confirm-button-trimmed.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #f5e8b2 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.48)) !important;
  transition: transform 90ms ease, filter 90ms ease !important;
}

.unlock-showcase.daily .unlock-confirm-button:hover,
.unlock-showcase.daily .unlock-confirm-button:focus-visible {
  outline: 0 !important;
  filter: brightness(1.08) drop-shadow(0 4px 5px rgba(0, 0, 0, 0.52)) !important;
}

.unlock-showcase.daily .unlock-confirm-button:active {
  transform: translateY(1px) scale(0.985) !important;
  filter: brightness(0.88) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.42)) !important;
}


/* SOURCE: ui/styles/shared/high-rarity-reveal-polish.css */
/* High-rarity loot reveal shrine, visually verified at 390x844.
   The painted shrine owns every panel surface; CSS only positions live content
   and animates authored bitmap effect sprites. */

.pull-reveal.high-rarity {
  box-sizing: border-box !important;
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 43%, rgba(16, 37, 58, .16), transparent 56%),
    rgba(1, 5, 11, 0.68) !important;
  backdrop-filter: blur(2px) brightness(.78) !important;
}

.pull-reveal.high-rarity .pull-reveal-card,
.pull-reveal.high-rarity.sss-reveal .pull-reveal-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(356px, calc(100vw - 12px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 12px) !important;
  aspect-ratio: 1046 / 1504 !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/popup_rework_single_info_alpha_1790947200024/sss-reveal-frame-single-info-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.8)) !important;
  animation: highRarityShrineIn 520ms cubic-bezier(.16, .82, .21, 1.08) both !important;
}

.pull-reveal.high-rarity.sss-reveal .pull-reveal-card {
  animation: sssShrineIn 720ms cubic-bezier(.12, .82, .18, 1.08) both !important;
}

.pull-reveal.high-rarity .pull-reveal-card > .panel-head.compact {
  position: absolute !important;
  z-index: 9 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

.pull-reveal.high-rarity .panel-head.compact > div {
  position: absolute !important;
  left: 26.5% !important;
  right: 26.5% !important;
  top: 7.35% !important;
  width: auto !important;
  height: 7.2% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  transform: none !important;
  text-align: center !important;
}

.pull-reveal.high-rarity .panel-head.compact .label {
  display: none !important;
  margin: 0 !important;
  color: #75dff5 !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
  text-shadow: 0 2px 2px #000 !important;
}

.pull-reveal.high-rarity .panel-head.compact h2 {
  width: 100% !important;
  margin: 0 !important;
  color: #fff1b6 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: translateY(2px) !important;
  text-shadow: 0 2px 2px #000 !important;
}

.pull-reveal.high-rarity #closeRevealButton.icon-close-button {
  position: absolute !important;
  left: auto !important;
  right: 4.35% !important;
  top: 5.25% !important;
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui/popup-close-button.png") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .7)) !important;
  pointer-events: auto !important;
}

.pull-reveal.high-rarity #closeRevealButton.icon-close-button::before,
.pull-reveal.high-rarity #closeRevealButton.icon-close-button::after {
  content: none !important;
  display: none !important;
}

.pull-reveal.high-rarity .pull-reveal-list {
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  overflow: visible !important;
}

.pull-reveal.high-rarity .rare-showcase,
.pull-reveal.high-rarity .rare-showcase.rarity-SS,
.pull-reveal.high-rarity.sss-reveal .rare-showcase.rarity-SSS {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}

.pull-reveal.high-rarity .rare-showcase::before,
.pull-reveal.high-rarity .rare-showcase::after {
  content: none !important;
  display: none !important;
}

.pull-reveal.high-rarity .rare-kicker {
  position: absolute !important;
  z-index: 5 !important;
  left: 19% !important;
  right: 19% !important;
  top: 14.85% !important;
  margin: 0 !important;
  color: #8be5f5 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  letter-spacing: .08em !important;
  text-shadow: 0 2px 2px #000, 0 0 8px rgba(83, 211, 255, .35) !important;
  animation: revealDetailIn 360ms 230ms ease-out both !important;
}

.pull-reveal.high-rarity.sss-reveal .rare-kicker {
  color: #ffb3a4 !important;
  text-shadow: 0 2px 2px #000, 0 0 9px rgba(255, 61, 68, .62) !important;
  animation-delay: 430ms !important;
}

.pull-reveal.high-rarity .rare-item-focus {
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  overflow: visible !important;
  animation: highRarityFocusIn 680ms 80ms cubic-bezier(.18, .78, .25, 1.08) both !important;
}

.pull-reveal.high-rarity.sss-reveal .rare-item-focus {
  animation: sssFocusIn 900ms 70ms cubic-bezier(.12, .84, .18, 1.1) both !important;
}

.pull-reveal.high-rarity .rare-reveal-fx {
  position: absolute !important;
  z-index: 0 !important;
  left: 50% !important;
  top: 38.4% !important;
  width: 152px !important;
  height: 152px !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

.pull-reveal.high-rarity .rare-reveal-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 116px !important;
  height: 116px !important;
  margin: -58px 0 0 -58px !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(255, 222, 91, .72) !important;
  border-radius: 50% !important;
  background: transparent !important;
  opacity: .55 !important;
  box-shadow: 0 0 7px rgba(255, 220, 76, .72), inset 0 0 8px rgba(255, 220, 76, .46) !important;
  filter: none !important;
  animation: rareRingBreathe 1800ms ease-in-out infinite !important;
}

.pull-reveal.high-rarity .rare-reveal-ring.ring-two {
  width: 136px !important;
  height: 136px !important;
  margin: -68px 0 0 -68px !important;
  opacity: .3 !important;
  border-width: 1px !important;
  border-style: dashed !important;
  animation: rareRingCounter 2200ms linear infinite !important;
}

.pull-reveal.high-rarity.sss-reveal .rare-reveal-ring {
  width: 124px !important;
  height: 124px !important;
  margin: -62px 0 0 -62px !important;
  opacity: .78 !important;
  border-color: rgba(255, 91, 79, .92) !important;
  box-shadow: 0 0 9px rgba(255, 42, 55, .92), 0 0 21px rgba(255, 42, 55, .45), inset 0 0 10px rgba(255, 103, 72, .62) !important;
  filter: none !important;
  animation: sssRingBreathe 1200ms ease-in-out infinite !important;
}

.pull-reveal.high-rarity.sss-reveal .rare-reveal-ring.ring-two {
  width: 146px !important;
  height: 146px !important;
  margin: -73px 0 0 -73px !important;
  opacity: .4 !important;
  border-color: rgba(255, 210, 170, .7) !important;
  box-shadow: 0 0 12px rgba(255, 77, 64, .55) !important;
  animation: sssRingCounter 1650ms linear infinite !important;
}

.pull-reveal.high-rarity .rare-reveal-spark {
  position: absolute !important;
  z-index: 2 !important;
  width: 4px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #fff4bd !important;
  opacity: 0 !important;
  box-shadow: 0 0 5px #ffd34f, 0 0 10px rgba(255, 211, 79, .7) !important;
  filter: none !important;
  animation: rareSpark 1800ms ease-out infinite !important;
}

.pull-reveal.high-rarity.sss-reveal .rare-reveal-spark {
  width: 5px !important;
  height: 13px !important;
  background: #fff0dc !important;
  box-shadow: 0 0 5px #fff, 0 0 9px #ff3e55, 0 0 15px rgba(255, 44, 64, .7) !important;
  animation-duration: 1150ms !important;
}

.pull-reveal.high-rarity .spark-one { left: 13%; top: 58%; animation-delay: -120ms !important; --spark-x: -18px; --spark-y: -54px; }
.pull-reveal.high-rarity .spark-two { left: 28%; top: 76%; animation-delay: -720ms !important; --spark-x: -10px; --spark-y: -68px; }
.pull-reveal.high-rarity .spark-three { left: 50%; top: 82%; animation-delay: -430ms !important; --spark-x: 0px; --spark-y: -76px; }
.pull-reveal.high-rarity .spark-four { left: 69%; top: 76%; animation-delay: -960ms !important; --spark-x: 11px; --spark-y: -64px; }
.pull-reveal.high-rarity .spark-five { left: 84%; top: 57%; animation-delay: -300ms !important; --spark-x: 19px; --spark-y: -52px; }
.pull-reveal.high-rarity .spark-six { left: 52%; top: 16%; animation-delay: -1080ms !important; --spark-x: 6px; --spark-y: -42px; }

.pull-reveal.high-rarity .rare-grade,
.pull-reveal.high-rarity .rare-reveal-icon,
.pull-reveal.high-rarity .rare-item-focus .name {
  position: relative !important;
  z-index: 3 !important;
}

.pull-reveal.high-rarity .rare-grade {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 23% !important;
  height: 6.8% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffe052 !important;
  font-size: 27px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-shadow: 0 2px 2px #000, 0 0 6px #ffc928, 0 0 14px rgba(255, 204, 37, .72) !important;
  box-shadow: none !important;
  filter: none !important;
  text-align: center !important;
}

.pull-reveal.high-rarity.sss-reveal .rare-grade {
  color: #ff5b65 !important;
  font-size: 31px !important;
  text-shadow: 0 2px 2px #000, 0 0 7px #ff5360, 0 0 16px rgba(255, 29, 54, .75) !important;
  animation: sssGradePulse 1450ms ease-in-out infinite !important;
}

.pull-reveal.high-rarity .rare-reveal-icon {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 29.3% !important;
  box-sizing: border-box !important;
  width: 84px !important;
  height: 84px !important;
  margin: 0 auto !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  image-rendering: auto !important;
  box-shadow: none !important;
  filter: saturate(1.15) drop-shadow(0 7px 4px rgba(0, 0, 0, .76)) drop-shadow(0 0 12px rgba(255, 210, 55, .5)) !important;
  animation: rareItemFloat 2.15s 720ms ease-in-out infinite !important;
}

.pull-reveal.high-rarity.sss-reveal .rare-reveal-icon {
  width: 90px !important;
  height: 90px !important;
  filter: saturate(1.22) contrast(1.04) drop-shadow(0 8px 4px rgba(0, 0, 0, .8)) drop-shadow(0 0 13px rgba(255, 51, 68, .82)) drop-shadow(0 0 24px rgba(255, 151, 71, .44)) !important;
  animation: sssItemFloat 1.65s 920ms ease-in-out infinite !important;
}

.pull-reveal.high-rarity .rare-showcase .name {
  position: absolute !important;
  left: 16% !important;
  right: 16% !important;
  top: 44.6% !important;
  height: 4.6% !important;
  box-sizing: border-box !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff4c7 !important;
  font-size: 21px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 3px #000, 0 0 8px rgba(255, 207, 54, .38) !important;
}

.pull-reveal.high-rarity.sss-reveal .rare-showcase .name {
  color: #ff5b65 !important;
  font-size: 22px !important;
  text-shadow: 0 2px 3px #000, 0 0 10px rgba(255, 77, 74, .55) !important;
}

.pull-reveal.high-rarity .rare-showcase .stats {
  position: absolute !important;
  z-index: 5 !important;
  left: 16.8% !important;
  right: 16.8% !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 18.6% !important;
  min-height: 0 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: stretch !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  white-space: normal !important;
  text-shadow: 0 2px 2px #000 !important;
}

.pull-reveal.high-rarity .rare-showcase .stats {
  top: 61.15% !important;
  color: #fff1b8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.14 !important;
  animation: revealDetailIn 380ms 420ms ease-out both !important;
}

.pull-reveal.high-rarity .rare-showcase .hint {
  display: none !important;
}

.pull-reveal.high-rarity.sss-reveal .rare-showcase .stats { color: #ffe0d4 !important; }
.pull-reveal.high-rarity.sss-reveal .rare-showcase .stats { animation-delay: 720ms !important; }

.pull-reveal.high-rarity .reveal-card-actions.single {
  position: absolute !important;
  z-index: 7 !important;
  left: 21.3% !important;
  right: 21.3% !important;
  top: 82.15% !important;
  width: auto !important;
  height: 10.55% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  animation: revealDetailIn 380ms 600ms ease-out both !important;
}

.pull-reveal.high-rarity.sss-reveal .reveal-card-actions.single { animation-delay: 930ms !important; }

.pull-reveal.high-rarity .reveal-card-actions.single .mini-button {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 14px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff1bd !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow: none !important;
  filter: none !important;
}

.pull-reveal.high-rarity.sss-reveal .reveal-card-actions.single .mini-button {
  filter: none !important;
}

.pull-reveal.high-rarity .reveal-card-actions.single .mini-button::before,
.pull-reveal.high-rarity .reveal-card-actions.single .mini-button::after {
  content: none !important;
  display: none !important;
}

.pull-reveal.high-rarity .pull-reveal-card > .reveal-actions { display: none !important; }

@keyframes highRarityShrineIn {
  0% { opacity: 0; transform: translateY(18px) scale(.91); filter: brightness(1.7) drop-shadow(0 16px 26px rgba(0, 0, 0, .8)); }
  58% { opacity: 1; transform: translateY(-2px) scale(1.012); }
  100% { opacity: 1; transform: none; filter: brightness(1) drop-shadow(0 16px 26px rgba(0, 0, 0, .8)); }
}

@keyframes sssShrineIn {
  0% { opacity: 0; transform: scale(.78); filter: brightness(2.8) saturate(.4) drop-shadow(0 0 30px rgba(255, 255, 255, .8)); }
  38% { opacity: 1; transform: scale(1.035); filter: brightness(1.5) saturate(1.28) drop-shadow(0 0 28px rgba(255, 45, 62, .8)); }
  72% { transform: scale(.992); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1) drop-shadow(0 16px 30px rgba(0, 0, 0, .82)); }
}

@keyframes highRarityFocusIn {
  0% { opacity: 0; transform: translateY(14px) scale(.76); filter: brightness(2); }
  65% { opacity: 1; transform: translateY(-2px) scale(1.04); }
  100% { opacity: 1; transform: none; filter: none; }
}

@keyframes sssFocusIn {
  0%, 18% { opacity: 0; transform: scale(.36); filter: brightness(4) saturate(.3); }
  54% { opacity: 1; transform: scale(1.12); filter: brightness(1.7) saturate(1.45); }
  78% { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes rareRingBreathe { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.07); } }
@keyframes rareRingCounter { from { transform: rotate(0deg) scale(1.02); } to { transform: rotate(-360deg) scale(1.02); } }
@keyframes sssRingBreathe { 0%, 100% { transform: scale(.9); opacity: .72; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes sssRingCounter { from { transform: rotate(0deg) scale(1.02); opacity: .38; } to { transform: rotate(-360deg) scale(1.02); opacity: .58; } }

@keyframes rareSpark {
  0% { opacity: 0; transform: translate(0, 0) scale(.35) rotate(0deg); }
  22% { opacity: .94; }
  72% { opacity: .68; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(1.05) rotate(95deg); }
}

@keyframes revealDetailIn {
  from { opacity: 0; transform: translateY(7px); filter: brightness(1.7); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes rareItemFloat { 0%, 100% { transform: translateY(1px) scale(1); } 50% { transform: translateY(-4px) scale(1.025); } }
@keyframes sssItemFloat { 0%, 100% { transform: translateY(1px) scale(1); } 50% { transform: translateY(-5px) scale(1.035); } }
@keyframes sssGradePulse { 0%, 100% { opacity: .9; filter: brightness(1); transform: scale(1); } 50% { opacity: 1; filter: brightness(1.35); transform: scale(1.045); } }

@media (max-height: 650px) {
  .pull-reveal.high-rarity .pull-reveal-card,
  .pull-reveal.high-rarity.sss-reveal .pull-reveal-card {
    width: min(332px, calc((100dvh - 10px) * .69548), calc(100vw - 10px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pull-reveal.high-rarity .pull-reveal-card,
  .pull-reveal.high-rarity .rare-item-focus,
  .pull-reveal.high-rarity .rare-reveal-ring,
  .pull-reveal.high-rarity .rare-reveal-spark,
  .pull-reveal.high-rarity .rare-reveal-icon,
  .pull-reveal.high-rarity .rare-grade { animation: none !important; }
}

/* Final optical map. Older popup repair layers use first-child and SSS rules
   with unusually high specificity. Keep every live label tied to the painted
   frame's authored recess instead of inheriting those legacy coordinates. */
#pullRevealPanel.pull-reveal.high-rarity .pull-reveal-card > .panel-head.compact {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  align-content: normal !important;
  justify-content: normal !important;
  justify-items: normal !important;
}

#pullRevealPanel.pull-reveal.high-rarity .pull-reveal-card > .panel-head.compact > div:first-child {
  position: absolute !important;
  inset: 7.35% 26.5% auto !important;
  width: auto !important;
  height: 7.2% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  place-items: center !important;
  gap: 1px !important;
}

#pullRevealPanel.pull-reveal.high-rarity .pull-reveal-card > .panel-head.compact .label {
  display: none !important;
}

#pullRevealPanel.pull-reveal.high-rarity .pull-reveal-card > .panel-head.compact h2 {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

#pullRevealPanel.pull-reveal.high-rarity .pull-reveal-card > .panel-head.compact #closeRevealButton {
  position: absolute !important;
  inset: 5.25% 4.35% auto auto !important;
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui/popup-close-button.png") center / contain no-repeat !important;
}

#pullRevealPanel.pull-reveal.high-rarity .pull-reveal-card > .panel-head.compact #closeRevealButton::before,
#pullRevealPanel.pull-reveal.high-rarity .pull-reveal-card > .panel-head.compact #closeRevealButton::after {
  content: none !important;
  display: none !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-item-focus {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  grid-template: none !important;
  gap: 0 !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-item-focus .rare-grade {
  position: absolute !important;
  inset: 23% 0 auto !important;
  width: auto !important;
  height: 6.8% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-item-focus .rare-reveal-icon {
  position: absolute !important;
  inset: 29.3% 0 auto !important;
  width: 84px !important;
  height: 84px !important;
  margin: 0 auto !important;
  padding: 2px !important;
}

#pullRevealPanel.pull-reveal.high-rarity.sss-reveal .rare-item-focus .rare-reveal-icon {
  width: 90px !important;
  height: 90px !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-item-focus .name {
  position: absolute !important;
  inset: 44.6% 16% auto !important;
  width: auto !important;
  height: 4.6% !important;
  max-width: none !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .stats {
  inset: 59.55% 17.7% auto 15.9% !important;
  width: auto !important;
  height: 22.05% !important;
  display: grid !important;
  align-content: center !important;
  justify-items: stretch !important;
  gap: 1px !important;
  padding: 9px 12px 7px !important;
  overflow: hidden !important;
  font-size: 11.25px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .stats .rare-stat-line {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  text-align: center !important;
  line-height: 1.14 !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .stats .rare-stat-line.dense {
  font-size: 10.35px !important;
  letter-spacing: -.02em !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .stats .rare-stat-feature {
  display: grid !important;
  gap: 1px !important;
  line-height: 1.08 !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .stats .rare-stat-heading {
  color: #72d9ff !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  letter-spacing: .04em !important;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(32, 188, 255, .42) !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .stats .rare-stat-values {
  display: block !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .stats .rare-stat-values.dense {
  font-size: 10px !important;
  letter-spacing: -.02em !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .hint {
  display: none !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .reveal-card-actions.single {
  inset: 82.15% 21.3% auto !important;
  width: auto !important;
  height: 10.55% !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .reveal-card-actions.single .mini-button {
  width: 100% !important;
  height: 100% !important;
  padding: 15px 14px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform-origin: 50% 50% !important;
  transition: transform 90ms ease, color 90ms ease, text-shadow 90ms ease !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .reveal-card-actions.single .mini-button:active:not(:disabled) {
  transform: translateY(2px) scale(.965) !important;
  color: #fff7da !important;
  filter: brightness(1.28) !important;
  text-shadow: 0 1px 1px #000, 0 0 9px rgba(80, 231, 255, .9) !important;
}

#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .reveal-card-actions.single .mini-button.is-pressing {
  animation: highRarityPlacePress 130ms ease-out both !important;
  color: #fff7da !important;
  pointer-events: none !important;
}

@keyframes highRarityPlacePress {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1) !important;
  }
  52% {
    transform: translateY(2px) scale(.965);
    filter: brightness(1.28) !important;
    text-shadow: 0 1px 1px #000, 0 0 9px rgba(80, 231, 255, .9) !important;
  }
  100% {
    transform: translateY(1px) scale(.985);
    filter: brightness(1.08) !important;
  }
}


/* SOURCE: ui/styles/menus/settings-gothic.css */
/* Settings content layout and controls.
   The outer frame is supplied once by menu-surface-unification-v1.css; this
   file only places the live settings content and its controls. */

:root {
  --settings-button-primary: url("assets/generated/settings_controls_redraw_1790947200010/settings-button-quiet.png");
  --settings-button-secondary: url("assets/generated/settings_controls_redraw_1790947200010/settings-button-quiet.png");
  --settings-button-danger: url("assets/generated/settings_button_crops_1790860800005/settings-button-danger.png");
}

.main-menu[data-panel="settings"] .menu-scene {
  width: min(100%, 480px) !important;
  background:
    radial-gradient(circle at 50% 17%, rgba(54, 102, 137, .18), transparent 40%),
    linear-gradient(180deg, #091b29, #04101a) !important;
  box-shadow: inset 0 0 34px rgba(2, 7, 12, .34) !important;
}

.main-menu[data-panel="settings"] .menu-scene::before {
  content: none !important;
}

.main-menu[data-panel="settings"] .menu-card {
  top: max(4px, env(safe-area-inset-top)) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  display: grid !important;
  place-items: start center !important;
}

#menuSettingsPanel.menu-panel.active {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 480px !important;
  height: min(calc(100dvh - 8px), max(520px, min(131.25vw, 630px))) !important;
  min-height: 0 !important;
  max-height: calc(100vh - max(4px, env(safe-area-inset-top)) - max(4px, env(safe-area-inset-bottom))) !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .32) !important;
  transform: none !important;
}

#menuSettingsPanel.menu-panel.active::before {
  content: none !important;
  display: none !important;
  pointer-events: none !important;
  background: none !important;
}

#menuSettingsPanel.menu-panel.active::after {
  content: none !important;
}

#menuSettingsPanel .menu-panel-head,
#menuSettingsPanel .settings-gothic-group,
#menuSettingsPanel .menu-game-home-box {
  position: absolute !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Live labels placed into the shared lobby header artwork. */
#menuSettingsPanel .menu-panel-head {
  top: 2.2% !important;
  right: 6.6% !important;
  left: 6.6% !important;
  height: 10.5% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 18.5% 1fr 18% !important;
  align-items: center !important;
}

#menuSettingsPanel .menu-panel-head > strong {
  position: absolute !important;
  top: calc(50% + 4px) !important;
  left: 50% !important;
  grid-column: auto !important;
  justify-self: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  color: #f1df9b !important;
  font-size: clamp(20px, 4.9vw, 23px) !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 3px #000, 0 0 5px rgba(186, 139, 43, .2) !important;
}

#menuSettingsPanel .menu-panel-head > .menu-back-button {
  grid-column: 1 !important;
  justify-self: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(30px, 7vw, 34px) !important;
  min-height: 30px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 12px 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #e7d8a6 !important;
  font-size: clamp(11px, 2.9vw, 13px) !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 3px #000, 0 0 3px rgba(7, 13, 19, .9) !important;
  box-shadow: none !important;
  filter: brightness(1.1) contrast(1.22) saturate(1.05) !important;
}

#menuSettingsPanel .menu-panel-head::after {
  content: none !important;
}

/* The shell rails sit at 34%, 53% and 72%. */
#menuSettingsPanel .settings-account-group {
  top: 14.6% !important;
  right: 8.6% !important;
  left: 8.6% !important;
  height: 18.4% !important;
  display: grid !important;
  grid-template-rows: 22% 35% 43% !important;
}

#menuSettingsPanel .settings-guide-group {
  top: 34.8% !important;
  right: 8.6% !important;
  left: 8.6% !important;
  height: 17.4% !important;
  display: grid !important;
  grid-template-rows: 24% 38% 38% !important;
}

#menuSettingsPanel .settings-policy-group {
  top: 54.1% !important;
  right: 8.6% !important;
  left: 8.6% !important;
  height: 16.7% !important;
  display: grid !important;
  grid-template-rows: 25% 75% !important;
}

#menuSettingsPanel .menu-game-home-box {
  top: 73.2% !important;
  right: 8.6% !important;
  left: 8.6% !important;
  height: 22.4% !important;
  display: grid !important;
  grid-template-rows: 24% 43% 18% !important;
  align-content: center !important;
  gap: 2% !important;
}

#menuSettingsPanel .menu-game-home-box[hidden] {
  display: none !important;
}

#menuSettingsPanel .settings-section-heading {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 2% !important;
  border: 0 !important;
  background: none !important;
  text-align: left !important;
}

#menuSettingsPanel .settings-section-heading::before {
  content: "◆" !important;
  color: #3f9dc1 !important;
  font-size: clamp(7px, 1.85vw, 9px) !important;
  line-height: 1 !important;
  text-shadow: 0 0 5px rgba(45, 149, 195, .42) !important;
}

#menuSettingsPanel .settings-section-heading > strong {
  color: #ead791 !important;
  font-size: clamp(12.5px, 3.35vw, 15px) !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px #000 !important;
}

#menuSettingsPanel .settings-section-heading > small {
  color: #78a4b8 !important;
  font-size: clamp(9px, 2.35vw, 10px) !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#menuSettingsPanel .menu-account-box,
#menuSettingsPanel .menu-cloud-box,
#menuSettingsPanel .menu-tutorial-box,
#menuSettingsPanel .menu-policy-box {
  box-sizing: border-box !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuSettingsPanel .menu-account-box {
  display: grid !important;
  grid-template-columns: 13% minmax(0, 1.1fr) 11% minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 2% !important;
  padding: 0 4% !important;
  border-top: 1px solid rgba(149, 129, 74, .18) !important;
  border-bottom: 1px solid rgba(65, 106, 123, .14) !important;
}

#menuSettingsPanel .menu-account-box > span {
  color: #75c9e5 !important;
  font-size: clamp(9.5px, 2.5vw, 11px) !important;
  font-weight: 750 !important;
  text-align: center !important;
}

#menuSettingsPanel .menu-account-box > strong {
  min-width: 0 !important;
  color: #f0dfa4 !important;
  font-size: clamp(11px, 3vw, 13px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#menuSettingsPanel .menu-cloud-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 27% !important;
  align-items: center !important;
  gap: 5% !important;
  padding: 0 3% 1% 4% !important;
}

#menuSettingsPanel .menu-cloud-box > span {
  min-width: 0 !important;
  color: #91afbd !important;
  font-size: clamp(9px, 2.4vw, 10.2px) !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#menuSettingsPanel .menu-tutorial-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 24% !important;
  align-items: center !important;
  gap: 3% !important;
  padding: 0 3% 0 4% !important;
  border-top: 1px solid rgba(145, 125, 72, .15) !important;
}

#menuSettingsPanel .menu-tutorial-box > span,
#menuSettingsPanel .menu-policy-box > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#menuSettingsPanel .menu-tutorial-box strong,
#menuSettingsPanel .menu-policy-box > span strong {
  color: #e7d593 !important;
  font-size: clamp(10.5px, 2.9vw, 12.5px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#menuSettingsPanel .menu-tutorial-box small,
#menuSettingsPanel .menu-policy-box > span small {
  color: #90aab7 !important;
  font-size: clamp(9px, 2.35vw, 10px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

#menuSettingsPanel .menu-policy-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 48% !important;
  align-items: center !important;
  gap: 3% !important;
  padding: 0 3% 0 4% !important;
  border-top: 1px solid rgba(145, 125, 72, .15) !important;
}

#menuSettingsPanel .menu-policy-links {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2% !important;
}

/* Each painted button is tightly cropped, so live text centers on the visible plate. */
#menuSettingsPanel .menu-small-button,
#menuSettingsPanel .menu-small-button.ghost,
#menuSettingsPanel .menu-policy-links a,
#menuSettingsPanel .menu-policy-links button,
#menuSettingsPanel .menu-game-home-button {
  box-sizing: border-box !important;
  min-width: 0 !important;
  height: clamp(30px, 8vw, 36px) !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 7% 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--settings-button-primary) center / 100% 100% no-repeat !important;
  color: #d7e2e6 !important;
  font-family: inherit !important;
  font-size: clamp(9.8px, 2.55vw, 11px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px #000 !important;
  box-shadow: none !important;
  filter: brightness(1.04) contrast(1.1) saturate(1.02) !important;
}

#menuSettingsPanel .menu-small-button.ghost,
#menuSettingsPanel .menu-policy-links a,
#menuSettingsPanel .menu-policy-links button {
  background-image: var(--settings-button-secondary) !important;
  color: #d7e2e6 !important;
  filter: brightness(1.04) contrast(1.1) saturate(1.02) !important;
}

#menuSettingsPanel .menu-policy-links a,
#menuSettingsPanel .menu-policy-links button {
  height: clamp(27px, 7.3vw, 31px) !important;
  padding: 0 4% 2px !important;
  font-size: clamp(8.6px, 2.2vw, 9.6px) !important;
}

#menuSettingsPanel .menu-policy-links #deleteAccountButton {
  grid-column: auto !important;
  background-image: var(--settings-button-danger) !important;
  color: #e6b6a4 !important;
  filter: brightness(1.12) contrast(1.26) saturate(1.12) !important;
}

#menuSettingsPanel .menu-small-button:disabled,
#menuSettingsPanel .menu-policy-links button:disabled {
  opacity: .7 !important;
  filter: brightness(.72) contrast(1.12) saturate(.72) !important;
}

#menuSettingsPanel .menu-small-button:not(:disabled):hover,
#menuSettingsPanel .menu-small-button:not(:disabled):focus-visible,
#menuSettingsPanel .menu-policy-links a:hover,
#menuSettingsPanel .menu-policy-links a:focus-visible,
#menuSettingsPanel .menu-policy-links button:not(:disabled):hover,
#menuSettingsPanel .menu-policy-links button:not(:disabled):focus-visible,
#menuSettingsPanel .menu-back-button:hover,
#menuSettingsPanel .menu-back-button:focus-visible {
  color: #fff1bd !important;
  outline: 0 !important;
  filter: brightness(1.12) !important;
}

#menuSettingsPanel .menu-small-button:not(:disabled):active,
#menuSettingsPanel .menu-policy-links a:active,
#menuSettingsPanel .menu-policy-links button:not(:disabled):active,
#menuSettingsPanel .menu-back-button:active {
  transform: translateY(1px) scale(.985) !important;
  filter: brightness(.82) !important;
}

#menuSettingsPanel .menu-game-home-button {
  align-self: center !important;
  justify-self: center !important;
  width: 88% !important;
  height: clamp(36px, 9vw, 42px) !important;
  background-image: var(--settings-button-danger) !important;
  color: #efc0aa !important;
  font-size: clamp(10px, 2.8vw, 12.5px) !important;
  padding-bottom: 4px !important;
}

#menuSettingsPanel .menu-game-home-button.confirming {
  color: #ffe3a2 !important;
  filter: brightness(1.08) !important;
}

#menuSettingsPanel .menu-game-home-box > small {
  align-self: start !important;
  color: #8ca8b4 !important;
  font-size: clamp(9px, 2.35vw, 10px) !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-align: center !important;
}

@media (max-width: 370px) {
  #menuSettingsPanel.menu-panel.active {
    width: 100% !important;
    max-width: 100vw !important;
    height: min(calc(100dvh - 8px), 520px) !important;
  }

  #menuSettingsPanel .settings-account-group,
  #menuSettingsPanel .settings-guide-group,
  #menuSettingsPanel .settings-policy-group,
  #menuSettingsPanel .menu-game-home-box {
    right: 8.8% !important;
    left: 8.8% !important;
  }

  #menuSettingsPanel .menu-policy-box {
    grid-template-columns: minmax(0, 1fr) 50% !important;
    gap: 2% !important;
  }
}

@media (max-height: 560px) {
  #menuSettingsPanel.menu-panel.active {
    height: calc(100vh - 8px) !important;
    width: 100% !important;
  }
}


/* SOURCE: ui/styles/shared/mythic-grade-polish.css */
/*
 * Mythic grade language v1.
 * SSS stays crimson. Mythic uses a near-black obsidian center with a thin
 * cyan-magenta-gold aurora rim, so it cannot be confused with any single-color
 * F-SSS grade. Existing painted panels keep ownership of their surfaces.
 */

:root {
  --mythic-obsidian: #03050b;
  --mythic-cyan: #45f3e6;
  --mythic-violet: #8d64ff;
  --mythic-magenta: #ff4fd8;
  --mythic-gold: #ffe477;
  --mythic-aurora: linear-gradient(110deg, #45f3e6 0%, #8d64ff 27%, #ff4fd8 51%, #ffe477 76%, #45f3e6 100%);
}

@keyframes mythicAuroraShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes mythicRevealBreath {
  0%, 100% { filter: brightness(.96) saturate(1.02); opacity: .82; }
  50% { filter: brightness(1.2) saturate(1.24); opacity: 1; }
}

/* Compact inventory surfaces: quiet black body, unmistakable living rim. */
.item-tile.mythic-item,
.tray-item.mythic-item,
.inline-reveal-item.mythic-item,
.rare-showcase.mythic-item,
.fusion-material.mythic-item,
.fusion-result-pop.mythic-item,
.qa-rarity-card.mythic-item {
  --bag-card-rarity: var(--mythic-cyan) !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(145deg, rgba(7, 9, 18, .98), rgba(2, 4, 9, .99)) padding-box,
    var(--mythic-aurora) border-box !important;
  background-size: 100% 100%, 260% 260% !important;
  box-shadow:
    inset 0 0 15px rgba(69, 243, 230, .09),
    inset 0 0 24px rgba(255, 79, 216, .07),
    0 0 5px rgba(69, 243, 230, .34),
    0 0 9px rgba(255, 79, 216, .18) !important;
}

#bagPanel .tray-item.mythic-item[class*="rarity-"] {
  background:
    linear-gradient(145deg, rgba(69, 243, 230, .09), rgba(141, 100, 255, .075) 44%, rgba(255, 79, 216, .08) 76%, rgba(2, 5, 10, .04)),
    transparent url("assets/generated/bag_content_gothic_1790601600072/bag-waiting-card.png") center / 100% 100% no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(69, 243, 230, .55),
    inset 0 0 14px rgba(255, 79, 216, .2),
    0 0 7px rgba(255, 228, 119, .22) !important;
}

.item-tile.mythic-item::after,
.tray-item.mythic-item::after {
  color: #071017 !important;
  border-color: rgba(255, 228, 119, .88) !important;
  background: var(--mythic-aurora) !important;
  background-size: 220% 220% !important;
  text-shadow: 0 1px rgba(255, 255, 255, .48) !important;
  animation: mythicAuroraShift 6s ease-in-out infinite !important;
}

.tray-item.mythic-item .tray-grade,
.mythic-item .rare-grade,
.mythic-item .reveal-grade,
.qa-rarity-card.mythic-item .qa-rarity-code,
.qa-rarity-card.mythic-item .qa-rarity-color {
  color: #d9fffb !important;
  text-shadow:
    0 0 4px var(--mythic-cyan),
    0 0 8px var(--mythic-magenta),
    0 1px 2px #000 !important;
}

/* Opened board capsule: a separate state from ordinary crimson SSS. */
#capsulesPanel .capsule.mythic,
#capsulesPanel .capsule.rarity-SSS.mythic {
  color: #eafffb !important;
  border-color: transparent !important;
  background:
    radial-gradient(circle, rgba(4, 7, 14, .98) 0 57%, transparent 59%) padding-box,
    var(--mythic-aurora) border-box !important;
  background-size: 100% 100%, 240% 240% !important;
  box-shadow:
    inset 0 0 7px rgba(69, 243, 230, .25),
    0 0 6px rgba(255, 79, 216, .42),
    0 0 11px rgba(255, 228, 119, .2) !important;
  text-shadow: 0 0 4px var(--mythic-cyan), 0 0 7px var(--mythic-magenta) !important;
  animation: mythicAuroraShift 6s ease-in-out infinite !important;
}

/* Detail and fusion keep the authored frame art; only readable live accents change. */
.item-info-panel.mythic-item .item-info-card,
.fusion-panel.mythic-item .fusion-card {
  border-color: transparent !important;
  box-shadow:
    inset 0 0 22px rgba(69, 243, 230, .08),
    inset 0 0 34px rgba(255, 79, 216, .07),
    0 0 18px rgba(69, 243, 230, .22),
    0 0 28px rgba(255, 79, 216, .13) !important;
}

.item-info-panel.mythic-item #itemInfoTitle,
.fusion-panel.mythic-item #fusionResultName,
.fusion-panel.mythic-item #fusionTitle {
  color: #eafffb !important;
  text-shadow:
    0 0 5px var(--mythic-cyan),
    0 0 10px var(--mythic-magenta),
    0 2px 2px #000 !important;
}

.fusion-panel.mythic-item .fusion-result-pop {
  border: 1px solid transparent !important;
  background:
    radial-gradient(circle, rgba(4, 7, 14, .96) 0 62%, transparent 64%) padding-box,
    var(--mythic-aurora) border-box !important;
  background-size: 100% 100%, 240% 240% !important;
  box-shadow: 0 0 11px rgba(69, 243, 230, .38), 0 0 18px rgba(255, 79, 216, .22) !important;
}

/* Mythic can expose eight combat lines plus four apex lines. Keep every line
   inside the painted 360px fusion card instead of pushing the confirm button
   below the phone viewport. */
#fusionPanel.fusion-panel.mythic-item.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count][data-feature-count] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: 40px !important;
  grid-auto-flow: row !important;
  gap: 4px 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  background: transparent url("assets/generated/top_hud_gothic_1790256000220/resource-strip.png") center top / 100% 40px repeat-y !important;
}

#fusionPanel.fusion-panel.mythic-item.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core {
  grid-column: auto !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 3px 3px 2px !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.mythic-item.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core > small {
  font-size: 8.4px !important;
  line-height: 9px !important;
}

#fusionPanel.fusion-panel.mythic-item.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core > strong {
  font-size: 10.6px !important;
  line-height: 11px !important;
}

#fusionPanel.fusion-panel.mythic-item.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature {
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  height: 48px !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  place-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: 6px !important;
  padding: 4px 15px !important;
  overflow: visible !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.mythic-item.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature > small {
  width: auto !important;
  font-size: 10px !important;
  line-height: 11px !important;
  white-space: nowrap !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.mythic-item.fusion-three:not(.secret-fusion) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature > strong {
  width: 100% !important;
  max-height: 32px !important;
  font-size: 11.2px !important;
  line-height: 13px !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  transform: none !important;
}

/* Dedicated mythic hidden recipes use short vertical plaques for ordinary
   numbers and wide engraved rows only for authored powers. This keeps Korean
   labels away from their values and restores a clear acquisition hierarchy. */
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
  gap: 4px 0 !important;
  padding: 4px 12px 5px !important;
  height: auto !important;
  min-height: 0 !important;
  background: none !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core {
  --mythic-stat-optical-x: 0px;
  grid-column: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 3px 2px 4px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 15px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 2px !important;
  background-image: url("assets/generated/top_hud_gothic_1790256000220/resource-strip.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 100% !important;
  overflow: hidden !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="0"],
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="4"],
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="8"] {
  --mythic-stat-optical-x: 3px;
  background-position: 0 0 !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="1"],
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="5"],
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="9"] {
  --mythic-stat-optical-x: 1px;
  background-position: 33.333% 0 !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="2"],
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="6"],
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="10"] {
  --mythic-stat-optical-x: -1px;
  background-position: 66.667% 0 !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="3"],
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="7"],
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index="11"] {
  --mythic-stat-optical-x: -3px;
  background-position: 100% 0 !important;
}

/* Descriptive fields such as boost targeting and skill identity get half a
   strip each; they are not squeezed into a 66px numeric plaque. */
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core.fusion-stat-wide {
  --mythic-stat-optical-x: 0px;
  grid-column: span 2 !important;
  background-size: 200% 100% !important;
  background:
    linear-gradient(180deg, rgba(23, 30, 39, .98), rgba(8, 13, 20, .99)) !important;
  border-top: 1px solid rgba(210, 184, 125, .44) !important;
  border-bottom: 1px solid rgba(72, 137, 176, .38) !important;
  box-shadow: inset 0 0 10px rgba(58, 117, 159, .12) !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core.fusion-stat-wide[data-wide-index="0"],
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core.fusion-stat-wide[data-wide-index="2"] {
  background-position: 0 0 !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core.fusion-stat-wide[data-wide-index="1"],
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core.fusion-stat-wide[data-wide-index="3"] {
  background-position: 100% 0 !important;
}

/* Center an incomplete final numeric row by its painted plaques, not merely
   by the occupied DOM columns. Ragna's two wide descriptors count as four
   grid units, so its following eight numeric plaques remain untouched. */
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-grid-remainder="1"] > .fusion-stat-core.fusion-stat-tail:not(.fusion-stat-wide) {
  transform: translateX(150%) !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-grid-remainder="2"] > .fusion-stat-core.fusion-stat-tail:not(.fusion-stat-wide) {
  transform: translateX(100%) !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-grid-remainder="3"] > .fusion-stat-core.fusion-stat-tail:not(.fusion-stat-wide) {
  transform: translateX(50%) !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core > small {
  width: 100% !important;
  font-size: 8.5px !important;
  line-height: 11px !important;
  text-align: center !important;
  place-self: center !important;
  transform: translate(var(--mythic-stat-optical-x), 1px) !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core > strong {
  width: 100% !important;
  font-size: 11.2px !important;
  line-height: 15px !important;
  text-align: center !important;
  white-space: nowrap !important;
  place-self: center !important;
  transform: translate(var(--mythic-stat-optical-x), 1px) !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature {
  grid-column: 1 / -1 !important;
  position: relative !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 4px 12px !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  column-gap: 8px !important;
  background:
    linear-gradient(90deg, transparent 0, rgba(7, 15, 25, .9) 8%, rgba(11, 24, 38, .96) 50%, rgba(7, 15, 25, .9) 92%, transparent 100%) !important;
  border-top: 1px solid rgba(91, 206, 235, .26) !important;
  border-bottom: 1px solid rgba(222, 175, 88, .24) !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature > small {
  width: 100% !important;
  font-size: 9px !important;
  line-height: 11px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature > strong {
  width: 100% !important;
  max-height: 28px !important;
  font-size: 10.8px !important;
  line-height: 13px !important;
  text-align: right !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

/* A mythic power is a real combat action, not a decorative proper noun.
   Keep its current-build damage and mechanical effect together in one
   readable full-width plaque. */
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.mythic-power-summary {
  height: 52px !important;
  min-height: 52px !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  padding: 4px 13px !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .mythic-power-summary > small {
  display: grid !important;
  grid-template-rows: 12px 11px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  text-align: center !important;
  white-space: normal !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .mythic-power-summary > small > b,
#fusionPanel.fusion-panel.mythic-item.secret-fusion .mythic-power-summary > small > em {
  display: block !important;
  width: 100% !important;
  font-style: normal !important;
  line-height: inherit !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .mythic-power-summary > small > b {
  color: #9feeff !important;
  font-size: 8.7px !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .mythic-power-summary > small > em {
  color: #ffe69c !important;
  font-size: 8.1px !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.mythic-power-summary > strong {
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 15px 14px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 2px !important;
  text-align: center !important;
  white-space: normal !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .mythic-power-summary > strong > b,
#fusionPanel.fusion-panel.mythic-item.secret-fusion .mythic-power-summary > strong > em {
  width: 100% !important;
  display: block !important;
  font-style: normal !important;
  line-height: inherit !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .mythic-power-summary > strong > b {
  color: #fff1b3 !important;
  font-size: 10.7px !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .mythic-power-summary > strong > em {
  color: #9feeff !important;
  font-size: 9.2px !important;
}

/* Ragna's adjacency explanation is one semantic ability. Present it as one
   uninterrupted engraved row so its text never crosses segmented stat art,
   and let the eight numeric plaques restart at the correct four-piece edge. */
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats.fusion-result-ragna > .fusion-stat-feature.fusion-stat-ragna-boost {
  height: 38px !important;
  min-height: 38px !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  padding-inline: 14px !important;
  background:
    linear-gradient(90deg, transparent 0, rgba(8, 17, 29, .94) 7%, rgba(13, 28, 44, .98) 50%, rgba(8, 17, 29, .94) 93%, transparent 100%) !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultStats.fusion-result-ragna > .fusion-stat-feature.fusion-stat-ragna-boost > strong {
  text-align: center !important;
  white-space: nowrap !important;
}

/* Register the two live text groups to the centers of their painted bays by eye. */
#fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionTitle {
  top: 46px !important;
}

/* The painted forge bay is lower than the generic three-card absorb row.
   Move only the incoming ingredients and forge light to that optical center;
   the already-approved final result art stays where it is. */
#fusionPanel.fusion-panel.mythic-item.secret-fusion.fusion-two.active .fusion-material.material-0 {
  animation-name: mythicSecretFusionGatherLeft !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion.fusion-two.active .fusion-material.material-2 {
  animation-name: mythicSecretFusionGatherRight !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .fusion-core {
  top: calc(50% + 18px) !important;
}

@keyframes mythicSecretFusionGatherLeft {
  0%, 28% { opacity: 1; transform: translate(0, 18px) scale(1); }
  62% { opacity: 1; transform: translate(calc(50% + 15px), 18px) scale(.64); }
  74%, 100% { opacity: 0; transform: translate(calc(50% + 15px), 18px) scale(.06); }
}

@keyframes mythicSecretFusionGatherRight {
  0%, 28% { opacity: 1; transform: translate(0, 18px) scale(1); }
  62% { opacity: 1; transform: translate(calc(-50% - 15px), 18px) scale(.64); }
  74%, 100% { opacity: 0; transform: translate(calc(-50% - 15px), 18px) scale(.06); }
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .fusion-result-pop {
  top: calc(50% + 12px) !important;
  height: 94px !important;
  min-height: 94px !important;
  grid-template-rows: 94px !important;
  gap: 0 !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .fusion-result-pop > span {
  display: none !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .fusion-result {
  gap: 0 !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .fusion-result > div {
  transform: translateY(-4px) !important;
}

/* The generic mythic tile aurora is useful in inventory cards, but it becomes
   a flat cyan-magenta square inside the painted hidden-fusion shrine. Keep the
   generated transparent object and move the aura to a soft image glow only. */
#fusionPanel.fusion-panel.mythic-item.secret-fusion .fusion-result-pop.mythic-item {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#fusionPanel.fusion-panel.mythic-item.secret-fusion .fusion-result-pop.mythic-item img {
  filter:
    drop-shadow(0 0 5px rgba(69, 243, 230, .7))
    drop-shadow(0 0 9px rgba(255, 79, 216, .42)) !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.mythic-item.secret-fusion #fusionResultName {
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: -.2px !important;
  }
}

/* Mythic reveal is intentionally stronger than SS/SSS but still uses the painted shrine. */
#pullRevealPanel.pull-reveal.high-rarity.sss-reveal.mythic-reveal .rare-showcase.mythic-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

#pullRevealPanel.pull-reveal.high-rarity.sss-reveal.mythic-reveal .rare-showcase.mythic-item::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 50% !important;
  top: 12.4% !important;
  width: 70% !important;
  aspect-ratio: 1 !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, rgba(4, 5, 13, .1) 0 28%, rgba(69, 243, 230, .24) 45%, rgba(255, 79, 216, .18) 59%, transparent 73%),
    conic-gradient(from 18deg, transparent 0 8%, rgba(69, 243, 230, .44) 11%, transparent 17% 31%, rgba(255, 79, 216, .4) 35%, transparent 42% 63%, rgba(255, 228, 119, .36) 67%, transparent 74% 100%) !important;
  filter: blur(.2px) !important;
  animation: mythicRevealBreath 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

#pullRevealPanel.pull-reveal.high-rarity.sss-reveal.mythic-reveal .rare-grade,
#pullRevealPanel.pull-reveal.high-rarity.sss-reveal.mythic-reveal .rare-kicker,
#pullRevealPanel.pull-reveal.high-rarity.sss-reveal.mythic-reveal .rare-item-focus .name {
  color: #eafffb !important;
  text-shadow:
    0 0 5px var(--mythic-cyan),
    0 0 11px var(--mythic-magenta),
    0 2px 2px #000 !important;
}

#pullRevealPanel.pull-reveal.high-rarity.sss-reveal.mythic-reveal .rare-reveal-ring {
  border-color: rgba(69, 243, 230, .72) !important;
  box-shadow: 0 0 8px rgba(69, 243, 230, .48), inset 0 0 8px rgba(255, 79, 216, .24) !important;
}

#pullRevealPanel.pull-reveal.high-rarity.sss-reveal.mythic-reveal .rare-reveal-spark {
  background: #fff7c9 !important;
  box-shadow: 0 0 6px var(--mythic-cyan), 0 0 11px var(--mythic-magenta) !important;
}

.player-fighter > .gear-fx .gear-piece.mythic-item,
.player-fighter > .gear-fx .gear-piece.rarity-SSS.mythic-item {
  background:
    radial-gradient(circle at 50% 48%, rgba(3, 6, 12, .92) 0 34%, rgba(69, 243, 230, .18) 48%, transparent 67%),
    url("assets/generated/loot_board_rune_socket_1790601600055/loot-rune-socket.png") center / contain no-repeat !important;
  box-shadow:
    0 0 0 1px rgba(69, 243, 230, .68),
    0 0 7px rgba(255, 79, 216, .48),
    0 0 11px rgba(255, 228, 119, .24) !important;
}

.player-fighter > .gear-fx .gear-piece.mythic-item small {
  min-width: 20px !important;
  color: #071017 !important;
  border-color: rgba(255, 228, 119, .84) !important;
  background: var(--mythic-aurora) !important;
  background-size: 220% 220% !important;
  text-shadow: 0 1px rgba(255, 255, 255, .5) !important;
  animation: mythicAuroraShift 6s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .mythic-item,
  #capsulesPanel .capsule.mythic,
  #pullRevealPanel.pull-reveal.high-rarity.sss-reveal.mythic-reveal .rare-showcase.mythic-item::before {
    animation: none !important;
  }
}


/* SOURCE: ui/styles/menus/attendance-polish-v5.css */
/* 2026-08-18 attendance board V5.
   Mobile-first 4 x 7 layout with one readable reward object per cell. */
.menu-card:has(#menuAttendancePanel.active){
  width:min(366px,calc(100vw - 12px))!important;
  height:min(632px,calc(100dvh - 28px))!important;
  max-width:none!important;
  max-height:none!important;
}

#menuAttendancePanel.active{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:8px 4px 10px!important;
  overflow:hidden!important;
}

#menuAttendancePanel .menu-panel-head{
  box-sizing:border-box!important;
  width:calc(100% - 12px)!important;
  height:52px!important;
  min-height:52px!important;
  margin:0 auto 2px!important;
}

#menuAttendancePanel .attendance-board-shell{
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  width:min(348px,calc(100% - 8px))!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:2/3!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
  background:url("assets/generated/attendance_board_v5_1791120000000/attendance-board-v5.png") center/100% 100% no-repeat!important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.62))!important;
}

#menuAttendancePanel .attendance-summary{
  position:absolute!important;
  left:10.2%!important;
  right:10.2%!important;
  top:6.4%!important;
  width:auto!important;
  height:16.9%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 55px!important;
  grid-template-rows:30px 20px 7px!important;
  align-content:center!important;
  align-items:center!important;
  column-gap:9px!important;
  row-gap:2px!important;
  margin:0!important;
  padding:8px 15px 7px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#menuAttendancePanel .attendance-summary-title{
  display:flex!important;
  align-items:baseline!important;
  min-width:0!important;
  gap:6px!important;
  overflow:hidden!important;
}

#menuAttendancePanel .attendance-summary-title small{
  flex:0 0 auto!important;
  color:#6fddf3!important;
  font-size:8px!important;
  font-weight:900!important;
}

#menuAttendancePanel .attendance-summary-title strong{
  min-width:0!important;
  color:#fff0ae!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-shadow:0 2px 3px #000,0 0 8px rgba(225,181,69,.24)!important;
}

#menuAttendancePanel .attendance-summary-count{
  grid-column:2!important;
  grid-row:1/3!important;
  align-self:center!important;
  justify-self:end!important;
  min-width:52px!important;
  display:flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:2px!important;
}

#menuAttendancePanel .attendance-summary-count b{
  color:#fff2a8!important;
  font-size:27px!important;
  font-weight:950!important;
  line-height:1!important;
}

#menuAttendancePanel .attendance-summary-count span{
  color:#d6deec!important;
  font-size:10px!important;
  font-weight:800!important;
}

#menuAttendancePanel .attendance-summary-next{
  grid-column:1!important;
  grid-row:2!important;
  min-width:0!important;
  color:#bfcede!important;
  font-size:8.5px!important;
  font-weight:800!important;
  line-height:1!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#menuAttendancePanel .attendance-progress-track{
  grid-column:1/-1!important;
  grid-row:3!important;
  align-self:end!important;
  width:100%!important;
  height:6px!important;
  margin:0!important;
  border:1px solid #423c4f!important;
  border-radius:999px!important;
  background:#050912!important;
  overflow:hidden!important;
}

#menuAttendancePanel .attendance-progress-track i{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#49cce8,#8d64ff 66%,#f5c95c)!important;
  box-shadow:0 0 7px rgba(101,211,255,.52)!important;
}

#menuAttendancePanel .attendance-claim-button{
  position:absolute!important;
  left:13%!important;
  right:13%!important;
  top:26.35%!important;
  width:74%!important;
  height:6.5%!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:0!important;
  padding:2px 20px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#menuAttendancePanel .attendance-claim-button img{
  position:static!important;
  width:31px!important;
  height:31px!important;
  flex:0 0 31px!important;
  object-fit:contain!important;
  transform:none!important;
  filter:drop-shadow(0 0 5px rgba(128,99,255,.62)) drop-shadow(0 2px 2px #000)!important;
}

#menuAttendancePanel .attendance-claim-button>strong{
  width:auto!important;
  color:#fff1b2!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  text-align:center!important;
  text-shadow:0 2px 2px #000!important;
  white-space:nowrap!important;
}

#menuAttendancePanel .attendance-claim-button:disabled{
  opacity:.62!important;
  filter:saturate(.46)!important;
}

#menuAttendancePanel .attendance-grid{
  position:absolute!important;
  left:7.6%!important;
  right:7.6%!important;
  top:36.1%!important;
  bottom:6.7%!important;
  width:auto!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(7,minmax(0,1fr))!important;
  column-gap:2.2%!important;
  row-gap:1.05%!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

#menuAttendancePanel .attendance-day{
  position:relative!important;
  isolation:isolate!important;
  display:block!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:center!important;
}

#menuAttendancePanel .attendance-day::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  background:url("assets/generated/attendance_board_v5_1791120000000/attendance-cell-v5.png") center/100% 100% no-repeat!important;
  filter:brightness(.9) saturate(.8)!important;
  pointer-events:none!important;
}

#menuAttendancePanel .attendance-day>*{
  position:absolute!important;
  z-index:1!important;
}

#menuAttendancePanel .attendance-day>b{
  left:7px!important;
  top:5px!important;
  display:flex!important;
  align-items:baseline!important;
  gap:1px!important;
  color:#eef6ff!important;
  line-height:1!important;
  text-shadow:0 1px 2px #000!important;
}

#menuAttendancePanel .attendance-day>b strong{
  font-size:9px!important;
  font-weight:950!important;
}

#menuAttendancePanel .attendance-day>b span{
  font-size:5.5px!important;
  font-weight:850!important;
}

#menuAttendancePanel .attendance-day>img{
  left:50%!important;
  top:45%!important;
  width:30px!important;
  height:30px!important;
  max-width:none!important;
  object-fit:contain!important;
  transform:translate(-50%,-50%)!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.82)) drop-shadow(0 0 4px rgba(103,105,255,.26))!important;
}

#menuAttendancePanel .attendance-day[data-reward-type="supply"]>img,
#menuAttendancePanel .attendance-day[data-reward-type="common"]>img,
#menuAttendancePanel .attendance-day[data-reward-type="premium"]>img{
  width:34px!important;
  height:34px!important;
}

#menuAttendancePanel .attendance-reward-copy{
  left:5px!important;
  right:5px!important;
  bottom:5px!important;
  width:auto!important;
  height:9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  overflow:hidden!important;
  line-height:1!important;
  white-space:nowrap!important;
}

#menuAttendancePanel .attendance-reward-copy strong{
  color:#c9d5e4!important;
  font-size:6.5px!important;
  font-weight:800!important;
  line-height:1!important;
}

#menuAttendancePanel .attendance-reward-copy small{
  color:#fff0a4!important;
  font-size:7.5px!important;
  font-weight:950!important;
  line-height:1!important;
}

#menuAttendancePanel .attendance-day>em{
  right:6px!important;
  top:5px!important;
  left:auto!important;
  bottom:auto!important;
  width:12px!important;
  height:12px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(112,242,195,.72)!important;
  border-radius:50%!important;
  background:#0b503c!important;
  color:#bffff0!important;
  font-size:8px!important;
  font-style:normal!important;
  font-weight:950!important;
  line-height:1!important;
  box-shadow:0 0 5px rgba(80,237,181,.48)!important;
}

#menuAttendancePanel .attendance-day>em:empty{
  display:none!important;
}

#menuAttendancePanel .attendance-day.claimed::before{
  filter:brightness(.48) saturate(.42)!important;
}

#menuAttendancePanel .attendance-day.claimed>img{
  opacity:.42!important;
  filter:grayscale(.45) brightness(.7)!important;
}

#menuAttendancePanel .attendance-day.today::before{
  filter:brightness(1.18) saturate(1.22) drop-shadow(0 0 5px rgba(92,221,255,.7))!important;
}

#menuAttendancePanel .attendance-day.today{
  animation:attendanceV5Pulse 1.65s ease-in-out infinite!important;
}

#menuAttendancePanel .attendance-day.milestone::before{
  filter:brightness(1.12) saturate(1.1) sepia(.12) drop-shadow(0 0 4px rgba(255,203,83,.58))!important;
}

#menuAttendancePanel .attendance-day.milestone>img{
  width:34px!important;
  height:34px!important;
}

#menuAttendancePanel .attendance-note{
  box-sizing:border-box!important;
  width:calc(100% - 32px)!important;
  min-height:22px!important;
  margin:3px auto 0!important;
  color:#90a6ba!important;
  font-size:8px!important;
  font-weight:750!important;
  line-height:1.35!important;
  text-align:center!important;
}

@keyframes attendanceV5Pulse{
  0%,100%{filter:none}
  50%{filter:brightness(1.08) drop-shadow(0 0 4px rgba(92,221,255,.3))}
}

@media (max-width:370px){
  .menu-card:has(#menuAttendancePanel.active){
    width:min(348px,calc(100vw - 10px))!important;
    height:min(604px,calc(100dvh - 24px))!important;
  }
  #menuAttendancePanel .menu-panel-head{
    height:49px!important;
    min-height:49px!important;
  }
  #menuAttendancePanel .attendance-board-shell{
    width:min(326px,calc(100% - 8px))!important;
  }
  #menuAttendancePanel .attendance-summary-title strong{font-size:14px!important}
  #menuAttendancePanel .attendance-summary-count b{font-size:24px!important}
  #menuAttendancePanel .attendance-day>img{width:28px!important;height:28px!important}
  #menuAttendancePanel .attendance-day[data-reward-type="supply"]>img,
  #menuAttendancePanel .attendance-day[data-reward-type="common"]>img,
  #menuAttendancePanel .attendance-day[data-reward-type="premium"]>img,
  #menuAttendancePanel .attendance-day.milestone>img{width:31px!important;height:31px!important}
  #menuAttendancePanel .attendance-reward-copy strong{font-size:6px!important}
  #menuAttendancePanel .attendance-reward-copy small{font-size:7px!important}
}

@media (prefers-reduced-motion:reduce){
  #menuAttendancePanel .attendance-day.today{animation:none!important}
}


/* SOURCE: ui/styles/menus/attendance-polish-v6.css */
/* 2026-08-19 attendance board V6.
   One readable seven-day page at a time, while preserving the full 28-day cycle. */

.menu-card:has(#menuAttendancePanel.active){
  left:50%!important;
  right:auto!important;
  width:min(354px,calc(100% - 8px))!important;
  height:min(620px,calc(100dvh - 28px))!important;
  transform:translateX(-50%)!important;
}

#menuAttendancePanel.active{
  padding:8px 3px 10px!important;
}

#menuAttendancePanel .menu-panel-head{
  width:calc(100% - 10px)!important;
}

#menuAttendancePanel .attendance-board-shell{
  width:min(338px,calc(100% - 4px))!important;
}

#menuAttendancePanel .attendance-summary{
  left:10.8%!important;
  right:10.8%!important;
}

#menuAttendancePanel .attendance-claim-button{
  z-index:4!important;
  left:9.5%!important;
  right:9.5%!important;
  top:24.2%!important;
  width:81%!important;
  height:9.1%!important;
  gap:6px!important;
  padding:5px 28px 6px!important;
  background:transparent url("assets/generated/loot_bag_shell_1790147000000/button-plate-9slice.png") center/100% 100% no-repeat!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.62))!important;
}

#menuAttendancePanel .attendance-claim-button img{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 3px rgba(128,99,255,.5)) drop-shadow(0 1px 1px #000)!important;
}

#menuAttendancePanel .attendance-claim-button>strong{
  font-size:12.5px!important;
}

#menuAttendancePanel .attendance-week-tabs{
  position:absolute!important;
  z-index:3!important;
  left:8.8%!important;
  right:8.8%!important;
  top:34.2%!important;
  height:7.7%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  box-sizing:border-box!important;
  padding:9px 15px 4px!important;
  background:transparent url("assets/generated/ui_controls_purpose_1788505000000/tab-tray-wide.png") center/100% 100% no-repeat!important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.72))!important;
}

#menuAttendancePanel .attendance-week-tabs button{
  position:relative!important;
  isolation:isolate!important;
  min-width:0!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1px!important;
  margin:0!important;
  padding:0 2px 1px!important;
  overflow:hidden!important;
  border:0!important;
  background:transparent!important;
  color:#8f9cac!important;
  font-weight:900!important;
  filter:none!important;
  text-shadow:0 2px 2px #000!important;
}

#menuAttendancePanel .attendance-week-tabs button:not(:last-child)::after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  top:24%!important;
  bottom:24%!important;
  width:1px!important;
  background:linear-gradient(180deg,transparent,rgba(150,139,114,.46),transparent)!important;
}

#menuAttendancePanel .attendance-week-tabs button::before{
  display:none!important;
}

#menuAttendancePanel .attendance-week-tabs button>strong,
#menuAttendancePanel .attendance-week-tabs button>span,
#menuAttendancePanel .attendance-week-tabs button>i{
  position:relative!important;
  z-index:1!important;
}

#menuAttendancePanel .attendance-week-tabs button strong{
  color:inherit!important;
  font-size:11px!important;
  line-height:1!important;
}

#menuAttendancePanel .attendance-week-tabs button span{
  color:inherit!important;
  font-size:8px!important;
  line-height:1!important;
}

#menuAttendancePanel .attendance-week-tabs button.active{
  color:#fff1ad!important;
  background:transparent url("assets/generated/ui/tab-button-active.png") center/100% 100% no-repeat!important;
  filter:none!important;
  text-shadow:0 2px 2px #000,0 0 6px rgba(255,211,99,.5)!important;
}

#menuAttendancePanel .attendance-week-tabs button.active::before{
  display:none!important;
}

#menuAttendancePanel .attendance-week-tabs button.current:not(.active){
  color:#8feaff!important;
  filter:none!important;
}

#menuAttendancePanel .attendance-week-tabs button i{
  position:absolute!important;
  top:1px!important;
  right:5px!important;
  width:auto!important;
  height:auto!important;
  display:grid!important;
  place-items:center!important;
  border-radius:0!important;
  background:transparent!important;
  color:#bfffe8!important;
  font-size:7px!important;
  font-style:normal!important;
  text-shadow:0 0 5px rgba(85,238,187,.7)!important;
  box-shadow:none!important;
}

#menuAttendancePanel .attendance-grid{
  left:8.2%!important;
  right:8.2%!important;
  top:42.8%!important;
  bottom:6.6%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(4,minmax(0,1fr))!important;
  column-gap:3.3%!important;
  row-gap:2.2%!important;
}

#menuAttendancePanel .attendance-day:last-child:nth-child(odd){
  grid-column:1/-1!important;
  width:48.4%!important;
  justify-self:center!important;
}

#menuAttendancePanel .attendance-day{
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
}

#menuAttendancePanel .attendance-day>b{
  left:10px!important;
  top:9px!important;
}

#menuAttendancePanel .attendance-day>b strong{
  font-size:10px!important;
}

#menuAttendancePanel .attendance-day>b span{
  font-size:6px!important;
}

#menuAttendancePanel .attendance-day>img,
#menuAttendancePanel .attendance-day[data-reward-type="supply"]>img,
#menuAttendancePanel .attendance-day[data-reward-type="common"]>img,
#menuAttendancePanel .attendance-day[data-reward-type="premium"]>img,
#menuAttendancePanel .attendance-day.milestone>img{
  position:absolute!important;
  left:50%!important;
  top:38%!important;
  width:28px!important;
  height:28px!important;
  transform:translate(-50%,-50%)!important;
}

#menuAttendancePanel .attendance-reward-copy{
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  top:auto!important;
  bottom:9px!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  overflow:hidden!important;
  white-space:normal!important;
  transform:none!important;
}

#menuAttendancePanel .attendance-reward-copy strong{
  color:#d8e4ef!important;
  font-size:7.5px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}

#menuAttendancePanel .attendance-reward-copy small{
  color:#fff0a4!important;
  font-size:9px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}

#menuAttendancePanel .attendance-day>em{
  right:7px!important;
  top:6px!important;
  width:14px!important;
  height:14px!important;
  font-size:9px!important;
}

#menuAttendancePanel .attendance-note{
  box-sizing:border-box!important;
  width:calc(100% - 24px)!important;
  min-height:31px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:3px auto 0!important;
  padding:7px 18px 8px!important;
  background:transparent url("assets/generated/ui_controls_purpose_1788505000000/tab-tray-wide.png") center/100% 100% no-repeat!important;
  color:#aebfd0!important;
  font-size:8px!important;
  line-height:1.2!important;
  text-shadow:0 1px 2px #000!important;
}

@media (max-width:370px){
  .menu-card:has(#menuAttendancePanel.active){
    width:min(344px,calc(100% - 6px))!important;
    height:min(604px,calc(100dvh - 24px))!important;
  }
  #menuAttendancePanel .attendance-board-shell{
    width:min(326px,calc(100% - 4px))!important;
  }
  #menuAttendancePanel .attendance-week-tabs{padding-inline:13px!important}
  #menuAttendancePanel .attendance-day>img,
  #menuAttendancePanel .attendance-day[data-reward-type="supply"]>img,
  #menuAttendancePanel .attendance-day[data-reward-type="common"]>img,
  #menuAttendancePanel .attendance-day[data-reward-type="premium"]>img,
  #menuAttendancePanel .attendance-day.milestone>img{width:28px!important;height:28px!important}
  #menuAttendancePanel .attendance-reward-copy{left:8px!important;right:8px!important;bottom:8px!important}
  #menuAttendancePanel .attendance-reward-copy strong{font-size:7.2px!important}
  #menuAttendancePanel .attendance-reward-copy small{font-size:8.7px!important}
  #menuAttendancePanel .attendance-note{min-height:29px!important;padding:6px 14px 7px!important;font-size:7.5px!important}
}


/* SOURCE: ui/styles/menus/attendance-polish-v7.css */
/* Attendance board V7: use the painted board's own recesses and readable type. */

/* The board artwork already contains this long reward recess. Do not stack a
   second button plate on top of its gold and steel rails. */
#menuAttendancePanel .attendance-claim-button {
  left: 13% !important;
  right: 13% !important;
  top: 26.2% !important;
  width: 74% !important;
  height: 6.7% !important;
  gap: 6px !important;
  padding: 2px 16px 3px !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#menuAttendancePanel .attendance-claim-button img {
  width: 19px !important;
  height: 19px !important;
  flex-basis: 19px !important;
  filter: drop-shadow(0 0 3px rgba(128, 99, 255, .46)) drop-shadow(0 1px 1px #000) !important;
}

#menuAttendancePanel .attendance-claim-button > strong {
  font-size: 12.5px !important;
  line-height: 1 !important;
}

#menuAttendancePanel .attendance-claim-button:disabled {
  opacity: .8 !important;
  filter: none !important;
}

/* Let the complete next-reward sentence use the summary recess. */
#menuAttendancePanel .attendance-summary {
  grid-template-columns: minmax(0, 1fr) 50px !important;
  column-gap: 6px !important;
  padding-inline: 13px !important;
}

#menuAttendancePanel .attendance-summary-next {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  color: #c9d8e6 !important;
  font-size: 10px !important;
  letter-spacing: -.025em !important;
  text-shadow: 0 1px 2px #000 !important;
}

/* One calm tray and one restrained selected raster. Remove the inner gold
   rectangle and centre every week label across the full tray height. */
#menuAttendancePanel .attendance-week-tabs {
  left: 9.8% !important;
  right: 9.8% !important;
  top: 34.15% !important;
  height: 7.25% !important;
  gap: 2px !important;
  padding: 2px 9px !important;
  overflow: visible !important;
  background: none !important;
  filter: none !important;
}

#menuAttendancePanel .attendance-week-tabs::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/tab-tray-wide.png") center / 100% 100% no-repeat !important;
  opacity: .48 !important;
  filter: brightness(.72) saturate(.66) !important;
}

#menuAttendancePanel .attendance-week-tabs button {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 2px !important;
  overflow: visible !important;
  background: none !important;
}

#menuAttendancePanel .attendance-week-tabs button:not(:last-child)::after {
  display: none !important;
}

#menuAttendancePanel .attendance-week-tabs button.active {
  background: none !important;
  color: #fff0aa !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(255, 211, 99, .36) !important;
}

#menuAttendancePanel .attendance-week-tabs button.active::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px 0 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: transparent url("assets/generated/companion_tab_buttons_v5_1793116800000/companion-tab-v5.webp") center / 100% 100% no-repeat !important;
  opacity: .68 !important;
  filter: brightness(.72) saturate(.7) !important;
}

#menuAttendancePanel .attendance-week-tabs button strong {
  font-size: 11.5px !important;
}

#menuAttendancePanel .attendance-week-tabs button span {
  font-size: 8.5px !important;
}

#menuAttendancePanel .attendance-week-tabs button i {
  top: 3px !important;
  right: 3px !important;
  font-size: 7.5px !important;
}

/* Reward names are information, not micro decoration. */
#menuAttendancePanel .attendance-day > b strong {
  font-size: 10.8px !important;
}

#menuAttendancePanel .attendance-day > b span {
  font-size: 6.6px !important;
}

#menuAttendancePanel .attendance-reward-copy {
  left: 8px !important;
  right: 8px !important;
  height: 13px !important;
  bottom: 8px !important;
  gap: 3px !important;
  overflow: visible !important;
}

#menuAttendancePanel .attendance-reward-copy strong {
  font-size: 8.6px !important;
}

#menuAttendancePanel .attendance-reward-copy small {
  font-size: 10px !important;
}

#menuAttendancePanel .attendance-note {
  font-size: 9px !important;
}

@media (max-width: 370px) {
  #menuAttendancePanel .attendance-claim-button {
    padding-inline: 13px !important;
  }

  #menuAttendancePanel .attendance-summary {
    padding-inline: 12px !important;
  }

  #menuAttendancePanel .attendance-summary-next {
    font-size: 9.5px !important;
  }

  #menuAttendancePanel .attendance-week-tabs {
    padding-inline: 8px !important;
  }

  #menuAttendancePanel .attendance-week-tabs button strong {
    font-size: 11px !important;
  }

  #menuAttendancePanel .attendance-week-tabs button span {
    font-size: 8.2px !important;
  }

  #menuAttendancePanel .attendance-reward-copy strong {
    font-size: 8.3px !important;
  }

  #menuAttendancePanel .attendance-reward-copy small {
    font-size: 9.6px !important;
  }

  #menuAttendancePanel .attendance-note {
    font-size: 8.6px !important;
  }
}

/* Final painted-safe-area registration: lower the week tray into its recess
   and keep both reward columns inside the dark inner field. */
#menuAttendancePanel .attendance-week-tabs {
  top: 35% !important;
}

#menuAttendancePanel .attendance-grid {
  left: 10.1% !important;
  right: 10.1% !important;
  top: 43.65% !important;
}


/* SOURCE: ui/styles/menus/attendance-polish-v8.css */
/* Attendance board V8
   Make the current reward the unmistakable primary action, keep the painted
   board intact, and replace the detached neon footer tray with a calm plate. */

#menuAttendancePanel .attendance-claim-button {
  isolation: isolate !important;
  display: grid !important;
  place-items: center !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 0 18px 1px !important;
}

#menuAttendancePanel .attendance-claim-button::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 4px 9px !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at center, rgba(255, 211, 86, .2), rgba(74, 47, 15, .03) 68%, transparent 76%) !important;
  opacity: .9 !important;
}

#menuAttendancePanel .attendance-claim-button:not(:disabled) {
  animation: attendanceV8ClaimPulse 1.8s ease-in-out infinite !important;
}

#menuAttendancePanel .attendance-claim-button img {
  position: absolute !important;
  left: 18.5% !important;
  top: 50% !important;
  width: 23px !important;
  height: 23px !important;
  transform: translateY(-50%) !important;
  filter: drop-shadow(0 0 5px rgba(164, 116, 255, .72)) drop-shadow(0 2px 2px #000) !important;
}

#menuAttendancePanel .attendance-claim-copy {
  grid-area: 1 / 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

#menuAttendancePanel .attendance-claim-copy > strong {
  color: #fff0a2 !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  transform: translateY(0) !important;
  text-shadow: 0 2px 2px #000, 0 0 6px rgba(255, 205, 73, .45) !important;
  white-space: nowrap !important;
}

#menuAttendancePanel .attendance-day[data-attendance-claim-day] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  color: inherit !important;
  font: inherit !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

#menuAttendancePanel .attendance-day[data-attendance-claim-day]::before {
  filter: brightness(1.3) saturate(1.28) drop-shadow(0 0 7px rgba(255, 211, 87, .76)) !important;
}

#menuAttendancePanel .attendance-day[data-attendance-claim-day] .attendance-reward-copy strong,
#menuAttendancePanel .attendance-day[data-attendance-claim-day] .attendance-reward-copy small {
  color: #fff0a3 !important;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(255, 210, 83, .36) !important;
}

#menuAttendancePanel .attendance-day[data-attendance-claim-day]:active {
  transform: translateY(1px) !important;
  filter: brightness(.9) !important;
}

#menuAttendancePanel .attendance-day[data-attendance-claim-day]:focus-visible {
  outline: 1px solid rgba(255, 225, 126, .86) !important;
  outline-offset: 1px !important;
}

#menuAttendancePanel .attendance-note {
  position: relative !important;
  isolation: isolate !important;
  width: calc(100% - 34px) !important;
  min-height: 32px !important;
  padding: 7px 20px 8px !important;
  overflow: hidden !important;
  background: none !important;
  color: #9eafbd !important;
  font-size: 8.6px !important;
  text-shadow: 0 1px 2px #000 !important;
}

#menuAttendancePanel .attendance-note::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: transparent url("assets/generated/loot_bag_shell_1790147000000/button-plate-9slice.png") center / 100% 100% no-repeat !important;
  opacity: .56 !important;
  filter: brightness(.62) saturate(.5) !important;
}

@keyframes attendanceV8ClaimPulse {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 2px rgba(255, 205, 75, .18)); }
  50% { filter: brightness(1.12) drop-shadow(0 0 7px rgba(255, 205, 75, .5)); }
}

@media (max-width: 370px) {
  #menuAttendancePanel .attendance-claim-button {
    grid-template-columns: 1fr !important;
    padding-inline: 16px !important;
  }

  #menuAttendancePanel .attendance-claim-button img {
    width: 21px !important;
    height: 21px !important;
    left: 18% !important;
  }

  #menuAttendancePanel .attendance-claim-copy > strong {
    font-size: 12.8px !important;
  }

  #menuAttendancePanel .attendance-note {
    min-height: 30px !important;
    padding: 6px 17px 7px !important;
    font-size: 8.1px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #menuAttendancePanel .attendance-claim-button:not(:disabled) {
    animation: none !important;
  }
}


/* SOURCE: ui/styles/shared/element-affinity-polish.css */
/* Final painted affinity wheel. Scoped to the merged guide tab, not the removed legacy panel. */
#guideElementView .menu-element-box {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 7px 9px 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#guideElementView .element-rule-head {
  box-sizing: border-box;
  min-height: 34px;
  padding: 3px 7px;
  border-bottom: 1px solid rgba(105, 205, 241, .24);
}

#guideElementView .element-rule-head span {
  color: #fff0a9;
  font-size: 13px;
  font-weight: 1000;
}

#guideElementView .element-rule-head strong {
  color: #8fe3ff;
  font-size: 10px;
  font-weight: 1000;
}

#guideElementView .element-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0 3px;
}

#guideElementView .element-mode-tab {
  min-height: 35px;
  border: 1px solid rgba(80, 187, 229, .42);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(19, 63, 91, .96), rgba(3, 17, 30, .99));
  color: #acd3e4;
  font-size: 10.5px;
  font-weight: 1000;
  box-shadow: inset 0 0 0 1px rgba(207, 244, 255, .035), 0 3px 8px rgba(0, 0, 0, .24);
}

#guideElementView .element-mode-tab.active {
  border-color: rgba(255, 215, 101, .78);
  background:
    radial-gradient(circle at 50% -15%, rgba(84, 203, 245, .28), transparent 70%),
    linear-gradient(180deg, #174664, #061827);
  color: #fff0a5;
  box-shadow: inset 0 0 10px rgba(69, 198, 241, .19), 0 0 8px rgba(255, 218, 104, .1);
}

#guideElementView .element-affinity-guide {
  margin: 0 5px;
  color: #cce3ed;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

#guideElementView .element-affinity-section {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(91, 193, 232, .35);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 24%, rgba(42, 111, 146, .18), transparent 48%),
    linear-gradient(180deg, rgba(8, 27, 43, .96), rgba(2, 10, 20, .99));
  box-shadow: inset 0 0 21px rgba(52, 178, 225, .07), 0 5px 12px rgba(0, 0, 0, .25);
}

#guideElementView .element-affinity-five,
#guideElementView .element-affinity-dual {
  flex: 0 0 auto;
}

#guideElementView .element-affinity-section > header {
  box-sizing: border-box;
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px 4px;
  border-bottom: 1px solid rgba(108, 207, 242, .2);
  background: linear-gradient(90deg, rgba(31, 93, 122, .26), transparent);
}

#guideElementView .element-affinity-section > header span {
  color: #fff0a5;
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}

#guideElementView .element-affinity-section > header small {
  min-width: 0;
  overflow: hidden;
  color: #8ed1e8;
  font-size: 7.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#guideElementView .element-cycle-map {
  position: relative;
  width: min(252px, calc(100vw - 92px));
  aspect-ratio: 1;
  margin: 3px auto 0;
  isolation: isolate;
}

#guideElementView .element-cycle-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .48));
  pointer-events: none;
}

#guideElementView .element-cycle-node {
  position: absolute;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#guideElementView .element-cycle-node > i {
  display: none;
}

#guideElementView .element-cycle-node > strong {
  position: absolute;
  left: 50%;
  top: 72%;
  min-width: 27px;
  padding: 2px 7px 3px;
  border: 1px solid color-mix(in srgb, var(--element-color) 62%, #d9f5ff);
  border-radius: 999px;
  background: rgba(2, 10, 19, .9);
  color: var(--element-color);
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
  transform: translate(-50%, -50%);
}

#guideElementView .element-cycle-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 92px;
  height: 92px;
  display: grid;
  grid-template-rows: 32px 18px 13px;
  place-items: center;
  align-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#guideElementView .element-cycle-core i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 221, 117, .52);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 76, 103, .96), rgba(3, 15, 27, .98));
  color: #fff3bd;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
  text-shadow: 0 1px 3px #000;
}

#guideElementView .element-cycle-core strong {
  color: #fff0a5;
  font-size: 11px;
  font-weight: 1000;
}

#guideElementView .element-cycle-core small {
  color: #91c7d9;
  font-size: 7px;
  font-weight: 850;
}

#guideElementView .element-cycle-sequence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: -3px 6px 7px;
  color: #a8d0df;
  font-size: 8px;
  font-weight: 1000;
  white-space: nowrap;
}

#guideElementView .element-cycle-sequence b {
  color: var(--element-color);
  font-size: 10px;
}

#guideElementView .element-cycle-sequence i {
  color: #78daf5;
  font-style: normal;
}

#guideElementView .element-affinity-dual {
  flex: 0 0 auto;
}

#guideElementView .element-dual-map {
  position: relative;
  width: min(267px, calc(100vw - 76px));
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  padding: 0;
}

#guideElementView .element-dual-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .46));
  pointer-events: none;
}

#guideElementView .element-dual-node {
  position: absolute;
  z-index: 2;
  top: 52%;
  width: 73px;
  height: 73px;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#guideElementView .element-dual-node.element-light { left: 23%; }
#guideElementView .element-dual-node.element-dark { left: 77%; }
#guideElementView .element-dual-node i { display: none; }

#guideElementView .element-dual-node strong {
  position: absolute;
  left: 50%;
  top: 76%;
  min-width: 30px;
  padding: 2px 8px 3px;
  border: 1px solid color-mix(in srgb, var(--element-color) 64%, #f4fbff);
  border-radius: 999px;
  background: rgba(2, 9, 18, .9);
  color: var(--element-color);
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  transform: translate(-50%, -50%);
}

#guideElementView .element-dual-link {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 2;
  width: 64px;
  display: grid;
  place-items: center;
  color: #9ee8ff;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#guideElementView .element-dual-link b {
  display: none;
}

#guideElementView .element-dual-link small {
  color: #fff0a4;
  font-size: 8px;
  font-weight: 1000;
  line-height: 1.2;
  text-shadow: 0 1px 3px #000;
}

#guideElementView .element-dual-copy {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: -5px 18px 7px;
  color: #bed8e4;
  font-size: 7.5px;
  font-weight: 850;
  text-align: center;
}

#guideElementView .element-dual-copy b:first-child { color: #ffe073; }
#guideElementView .element-dual-copy span + span b { color: #c88cff; }

#guideElementView .element-neutral-note {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 3px;
  color: #a9c4d0;
  font-size: 8px;
  font-weight: 850;
}

#guideElementView .element-neutral-note i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(169, 192, 205, .46);
  border-radius: 50%;
  background: radial-gradient(circle, #233846, #07131d);
  color: #edf5f7;
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
}

#guideElementView .element-neutral-note strong {
  color: #e1edf1;
  font-size: 9px;
}

@media (max-width: 370px) {
  #guideElementView .menu-element-box { gap: 6px; padding-inline: 7px; }
  #guideElementView .element-affinity-section > header { min-height: 29px; padding-block: 4px; }
  #guideElementView .element-cycle-map { width: min(238px, calc(100vw - 88px)); }
  #guideElementView .element-cycle-node { width: 59px; height: 59px; }
  #guideElementView .element-cycle-node > strong { font-size: 9px; }
  #guideElementView .element-cycle-core { width: 84px; height: 84px; }
  #guideElementView .element-dual-map { width: min(235px, calc(100vw - 72px)); }
  #guideElementView .element-dual-node { width: 67px; height: 67px; }
  #guideElementView .element-dual-node strong { font-size: 9px; }
}

/* Plain-language guide: keep the copy readable within its own framed recess. */
#guideElementView .element-cycle-copy > small { font-size:10px!important; line-height:1.55!important; }
#guideElementView .element-cycle-sequence { font-size:11px!important; line-height:1.4!important; }
#guideElementView .element-cycle-copy { padding:8px 7px!important; gap:6px!important; }
#guideElementView .element-simple-note { margin:8px 10px 12px; color:#a8c1cc; font-size:10px; line-height:1.5; text-align:center; }
#guideElementView .element-cycle-art { border-radius:8px; }


/* SOURCE: ui/styles/menus/guide-menu-polish.css */
/* Authored guide frame, tabs, literal locked marker, and optical header alignment. */

#menuRecipePanel.active {
  border: 0 !important;
  border-image: none !important;
  padding: 29px 27px 25px !important;
  background:
    url("assets/generated/guide_recipe_ui_1791552000100/guide-frame.png") center / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 5%, rgba(49, 35, 88, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(3, 11, 22, 0.985), rgba(2, 8, 16, 0.995)) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.56) !important;
}

#menuRecipePanel .guide-tabbar {
  height: 44px !important;
  min-height: 44px !important;
  gap: 8px !important;
}

#menuRecipePanel .guide-tabbar button {
  position: relative;
  box-sizing: border-box;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 17px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/generated/guide_recipe_ui_1791552000100/guide-tab-neutral.png") !important;
  background-position: center !important;
  background-size: 100% 205% !important;
  background-repeat: no-repeat !important;
  color: #c7d8e5 !important;
  font-size: 11.5px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.02em;
  line-height: 1 !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.96) !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent;
  filter: brightness(0.82) saturate(0.86) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.42));
}

#menuRecipePanel .guide-tabbar button.active {
  background-image: url("assets/generated/guide_recipe_ui_1791552000100/guide-tab-active.png") !important;
  color: #fff0a8 !important;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.98),
    0 0 6px rgba(255, 212, 95, 0.24) !important;
  filter:
    brightness(1.12)
    saturate(1.18)
    drop-shadow(0 0 5px rgba(68, 117, 255, 0.52))
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.48));
}

#menuRecipePanel .unlock-pill-icon.locked-mark {
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(173, 139, 184, 0.48) !important;
  border-radius: 5px !important;
  background: rgba(13, 15, 25, 0.9) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.74) !important;
}

#menuRecipePanel .unlock-pill-icon.locked-mark::before,
#menuRecipePanel .unlock-pill-icon.locked-mark::after,
#menuRecipePanel .unlock-pill-icon.locked-mark i,
#menuRecipePanel .unlock-pill-icon.locked-mark i::before,
#menuRecipePanel .unlock-pill-icon.locked-mark i::after {
  display: none !important;
  content: none !important;
}

#menuRecipePanel .unlock-pill-question {
  display: block;
  margin: 0;
  color: #e6d7df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(176, 108, 170, 0.35);
  transform: translateY(-1px);
}

/* The visible button painting, not only its DOM box, shares one header baseline. */
.menu-sub-panel .menu-panel-head,
#menuSettingsPanel .menu-panel-head,
#menuCompanionPanel .menu-panel-head {
  grid-template-columns: 70px minmax(0, 1fr) 70px !important;
  align-items: center !important;
  padding: 5px 12px 6px !important;
}

.menu-sub-panel .menu-panel-head > .menu-back-button,
#menuSettingsPanel .menu-panel-head > .menu-back-button,
#menuCompanionPanel .menu-panel-head > .menu-back-button {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  box-sizing: border-box !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 1px 8px 0 !important;
  line-height: 29px !important;
  transform: translate(2px, 1px) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}

.menu-sub-panel .menu-panel-head > strong,
#menuSettingsPanel .menu-panel-head > strong,
.menu-store-panel .menu-panel-head .store-panel-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  align-self: center !important;
  margin: 0 !important;
  text-align: center !important;
}

.menu-sub-panel .menu-panel-head::after,
#menuSettingsPanel .menu-panel-head::after {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  width: 64px !important;
  height: 30px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuRecipePanel.active {
    padding: 27px 24px 23px !important;
  }

  .menu-sub-panel .menu-panel-head,
  #menuSettingsPanel .menu-panel-head,
  #menuCompanionPanel .menu-panel-head {
    grid-template-columns: 66px minmax(0, 1fr) 66px !important;
    padding-inline: 9px !important;
  }

  .menu-sub-panel .menu-panel-head > .menu-back-button,
  #menuSettingsPanel .menu-panel-head > .menu-back-button,
  #menuCompanionPanel .menu-panel-head > .menu-back-button {
    width: 61px !important;
    min-width: 61px !important;
  }
}

/* The settings shell paints its own header wells. Keep its authored optical
   alignment after the shared sub-page header rules above. */
#menuSettingsPanel .menu-panel-head {
  grid-template-columns: 18.5% 1fr 18% !important;
  padding: 0 !important;
}

#menuSettingsPanel .menu-panel-head > .menu-back-button {
  justify-self: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(30px, 7vw, 34px) !important;
  min-height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 12px 4px 0 !important;
  line-height: 1 !important;
  transform: none !important;
}


/* SOURCE: ui/styles/rewards/defeat-result-polish-v9.css */
/* Defeat result V9: open action field, authored button hierarchy, optical centering. */

.end-panel:is(.defeat, .victory) .result-summary-grid {
  left: 7.2% !important;
  right: 7.2% !important;
  top: 38.3% !important;
  height: 14.4% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
}

.end-panel:is(.defeat, .victory) .result-mini-card {
  display: grid !important;
  grid-template-rows: 15px 25px !important;
  align-content: center !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  gap: 1px !important;
  padding: 0 9px !important;
  text-align: center !important;
}

.end-panel:is(.defeat, .victory) .result-mini-card small,
.end-panel:is(.defeat, .victory) .result-mini-card strong {
  box-sizing: border-box;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  text-align: center !important;
}

.end-panel:is(.defeat, .victory) .result-mini-card small {
  font-size: 11px !important;
  line-height: 15px !important;
  transform: translateY(1px);
}

.end-panel:is(.defeat, .victory) .result-mini-card strong {
  font-size: 22px !important;
  line-height: 25px !important;
  transform: translateY(-1px);
}

.end-panel:is(.defeat, .victory) .result-line,
.end-panel:is(.defeat, .victory) .result-line:has(> span:nth-child(6)) {
  left: 7.2% !important;
  right: 7.2% !important;
  top: 67.1% !important;
  height: 13.1% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 2.3% 2.5% !important;
  padding: 3px 4px !important;
}

.end-panel:is(.defeat, .victory) .result-line > span,
.end-panel:is(.defeat, .victory) .result-line:has(> span:nth-child(6)) > span {
  display: grid !important;
  grid-template-rows: 12px 17px !important;
  align-content: center !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 4px !important;
  text-align: center !important;
}

.end-panel:is(.defeat, .victory) .result-line small,
.end-panel:is(.defeat, .victory) .result-line b {
  box-sizing: border-box;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  text-align: center !important;
}

.end-panel:is(.defeat, .victory) .result-line small {
  font-size: 8.7px !important;
  line-height: 12px !important;
  transform: translateY(1px);
}

.end-panel:is(.defeat, .victory) .result-line b {
  font-size: 12.2px !important;
  line-height: 17px !important;
  transform: translateY(-1px);
}

.end-panel:is(.defeat, .victory) .end-actions {
  left: 7.4% !important;
  right: 7.4% !important;
  top: 80.4% !important;
  bottom: 2.4% !important;
  width: auto !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1.05fr) !important;
  grid-auto-flow: row !important;
  gap: 2px 3.2% !important;
  padding: 0 !important;
  overflow: visible !important;
}

.end-panel:is(.defeat, .victory) .end-actions .mini-button {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1px 12px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/generated/defeat_result_frame_v9_1791552000200/defeat-button-compact.png") !important;
  background-position: center !important;
  background-size: 100% 215% !important;
  background-repeat: no-repeat !important;
  color: #dce9f2 !important;
  font-size: 8.8px !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)) !important;
}

.end-panel:is(.defeat, .victory) .end-actions .end-restart {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  justify-self: stretch !important;
  width: 100% !important;
  padding: 1px 30px 0 !important;
  background-image: url("assets/generated/defeat_result_frame_v9_1791552000200/defeat-button-restart.png") !important;
  background-size: 100% 152% !important;
  color: #fff2bd !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 2px #000, 0 0 8px rgba(91, 155, 255, 0.65) !important;
  filter: drop-shadow(0 0 5px rgba(53, 92, 214, 0.5)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)) !important;
}

.end-panel:is(.defeat, .victory) .end-actions .end-home {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  justify-self: center !important;
  width: 72% !important;
  padding: 1px 22px 0 !important;
  background-image: url("assets/generated/defeat_result_frame_v9_1791552000200/defeat-button-home.png") !important;
  background-size: 100% 190% !important;
  color: #e6e2d5 !important;
  font-size: 11px !important;
  text-shadow: 0 2px 2px #000 !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.52)) !important;
}

.end-panel:is(.defeat, .victory) .end-actions .mini-button:not(:disabled):active {
  transform: translateY(1px) scale(0.99) !important;
  filter: brightness(0.88) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)) !important;
}

.end-panel:is(.defeat, .victory) .end-actions .mini-button:disabled {
  opacity: 0.52 !important;
  color: #85939a !important;
  filter: saturate(0.35) brightness(0.72) !important;
}

@media (max-width: 370px) {
  .end-panel:is(.defeat, .victory) .result-mini-card small { font-size: 10px !important; }
  .end-panel:is(.defeat, .victory) .result-mini-card strong { font-size: 20px !important; }
  .end-panel:is(.defeat, .victory) .result-line small { font-size: 8px !important; }
  .end-panel:is(.defeat, .victory) .result-line b { font-size: 11.2px !important; }
  .end-panel:is(.defeat, .victory) .end-actions { top: 80.1% !important; bottom: 2.2% !important; }
  .end-panel:is(.defeat, .victory) .end-actions .mini-button { font-size: 8px !important; padding-inline: 8px !important; }
  .end-panel:is(.defeat, .victory) .end-actions .end-restart { font-size: 13px !important; padding-inline: 25px !important; }
  .end-panel:is(.defeat, .victory) .end-actions .end-home { width: 74% !important; font-size: 10px !important; }
}


/* SOURCE: ui/styles/rewards/defeat-result-polish-v10.css */
/* Defeat result V10: expanded painted bays and roomier mobile action controls. */

.end-panel:is(.defeat, .victory) .end-card {
  width: min(386px, calc(100vw - 4px)) !important;
  height: min(750px, calc(100dvh - 24px)) !important;
  aspect-ratio: auto !important;
}

.end-panel:is(.defeat, .victory) .end-card > strong {
  left: 24% !important;
  right: 24% !important;
  width: auto !important;
  top: 7.8% !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  transform: none !important;
  white-space: nowrap !important;
}

.end-panel:is(.defeat, .victory) .run-result-hero {
  top: 14.6% !important;
  height: 21.7% !important;
  grid-template-columns: 98px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 8px 20px !important;
}

.end-panel:is(.defeat, .victory) .run-result-hero img {
  width: 94px !important;
  height: 94px !important;
}

.end-panel:is(.defeat, .victory) .result-summary-grid {
  left: 7.1% !important;
  right: 7.1% !important;
  top: 37.5% !important;
  height: 9.7% !important;
}

.end-panel:is(.defeat, .victory) .result-mini-card {
  grid-template-rows: 16px 26px !important;
  gap: 2px !important;
  padding: 2px 10px !important;
}

.end-panel:is(.defeat, .victory) .result-mini-card small {
  font-size: 11.2px !important;
  line-height: 16px !important;
  transform: none !important;
}

.end-panel:is(.defeat, .victory) .result-mini-card strong {
  font-size: 22px !important;
  line-height: 26px !important;
  transform: none !important;
}

.end-panel:is(.defeat, .victory) .result-unlock-list,
.end-panel:is(.defeat, .victory) .result-best-item {
  top: 48.5% !important;
  height: 14% !important;
  padding: 8px 13px !important;
}

.end-panel:is(.defeat, .victory) .result-unlock-list {
  left: 7.3% !important;
  width: 42.7% !important;
  grid-template-rows: 18px minmax(0, 1fr) !important;
  gap: 4px !important;
}

.end-panel:is(.defeat, .victory) .result-best-item {
  left: 50% !important;
  right: 7.3% !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  grid-template-rows: 18px minmax(0, 1fr) !important;
  gap: 4px 8px !important;
}

.end-panel:is(.defeat, .victory) .result-unlock-list > strong,
.end-panel:is(.defeat, .victory) .result-best-heading {
  font-size: 12.2px !important;
  line-height: 18px !important;
}

.end-panel:is(.defeat, .victory) .result-unlock-chip {
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 8px !important;
}

.end-panel:is(.defeat, .victory) .result-unlock-chip img,
.end-panel:is(.defeat, .victory) .result-best-item > img {
  width: 48px !important;
  height: 48px !important;
}

.end-panel:is(.defeat, .victory) .result-unlock-chip b,
.end-panel:is(.defeat, .victory) .result-best-grade {
  font-size: 10.2px !important;
}

.end-panel:is(.defeat, .victory) .result-unlock-chip strong,
.end-panel:is(.defeat, .victory) .result-best-copy > strong {
  font-size: 11.2px !important;
  line-height: 1.16 !important;
  padding-bottom: 1px !important;
}

.end-panel:is(.defeat, .victory) .result-unlock-chip small,
.end-panel:is(.defeat, .victory) .result-best-copy > em {
  font-size: 8.2px !important;
  line-height: 1.1 !important;
}

.end-panel:is(.defeat, .victory) .result-line,
.end-panel:is(.defeat, .victory) .result-line:has(> span:nth-child(6)) {
  left: 6.8% !important;
  right: 6.8% !important;
  top: 63.2% !important;
  height: 15.4% !important;
  gap: 2.2% 2.3% !important;
  padding: 4px 5px !important;
}

.end-panel:is(.defeat, .victory) .result-line > span,
.end-panel:is(.defeat, .victory) .result-line:has(> span:nth-child(6)) > span {
  grid-template-rows: 13px 18px !important;
  align-content: center !important;
  gap: 2px !important;
  padding: 1px 5px 0 !important;
  transform: translateY(3px) !important;
}

.end-panel:is(.defeat, .victory) .result-line > span:nth-child(n + 4),
.end-panel:is(.defeat, .victory) .result-line:has(> span:nth-child(6)) > span:nth-child(n + 4) {
  transform: translateY(8px) !important;
}

.end-panel:is(.defeat, .victory) .result-line small,
.end-panel:is(.defeat, .victory) .result-line b {
  transform: none !important;
}

.end-panel:is(.defeat, .victory) .result-line small {
  font-size: 9.2px !important;
  line-height: 13px !important;
}

.end-panel:is(.defeat, .victory) .result-line b {
  font-size: 12.8px !important;
  line-height: 18px !important;
}

.end-panel:is(.defeat, .victory) .end-actions {
  left: 5.2% !important;
  right: 5.2% !important;
  top: 79.6% !important;
  bottom: .2% !important;
  grid-template-rows: 33px 33px 40px 30px !important;
  align-content: start !important;
  gap: 2px 3% !important;
}

.end-panel:is(.defeat, .victory) .end-actions .mini-button {
  padding: 2px 12px 1px !important;
  background-image: url("assets/generated/defeat_result_buttons_v14_1791552000340/defeat-button-compact-balanced-final.png") !important;
  background-size: 100% 100% !important;
  font-size: 10.2px !important;
  line-height: 1.08 !important;
}

.end-panel:is(.defeat, .victory) .end-actions > .mini-button:nth-child(-n + 4) {
  width: 94% !important;
}

.end-panel:is(.defeat, .victory) .end-actions > .mini-button:nth-child(odd):nth-child(-n + 4) {
  justify-self: end !important;
}

.end-panel:is(.defeat, .victory) .end-actions > .mini-button:nth-child(even):nth-child(-n + 4) {
  justify-self: start !important;
}

.end-panel:is(.defeat, .victory) .end-actions .end-restart {
  padding-inline: 34px !important;
  background-image: url("assets/generated/defeat_result_buttons_v14_1791552000340/defeat-button-restart-balanced-final.png") !important;
  background-size: 100% 100% !important;
  font-size: 16px !important;
}

.end-panel:is(.defeat, .victory) .end-actions .end-home {
  width: 82% !important;
  padding-inline: 25px !important;
  background-image: url("assets/generated/defeat_result_buttons_v14_1791552000340/defeat-button-home-balanced-final.png") !important;
  background-size: 100% 100% !important;
  font-size: 11.8px !important;
}

@media (max-width: 370px) {
  .end-panel:is(.defeat, .victory) .end-card {
    width: min(356px, calc(100vw - 4px)) !important;
    height: min(740px, calc(100dvh - 20px)) !important;
  }
  .end-panel:is(.defeat, .victory) .end-card > strong { top: 7.8% !important; font-size: 21px !important; }
  .end-panel:is(.defeat, .victory) .run-result-hero { grid-template-columns: 88px minmax(0, 1fr) !important; gap: 10px !important; padding-inline: 16px !important; }
  .end-panel:is(.defeat, .victory) .run-result-hero img { width: 86px !important; height: 86px !important; }
  .end-panel:is(.defeat, .victory) .result-mini-card small { font-size: 10.5px !important; }
  .end-panel:is(.defeat, .victory) .result-mini-card strong { font-size: 20.5px !important; }
  .end-panel:is(.defeat, .victory) .result-unlock-list,
  .end-panel:is(.defeat, .victory) .result-best-item { padding: 7px 10px !important; }
  .end-panel:is(.defeat, .victory) .result-unlock-list > strong,
  .end-panel:is(.defeat, .victory) .result-best-heading { font-size: 11.4px !important; }
  .end-panel:is(.defeat, .victory) .result-unlock-chip,
  .end-panel:is(.defeat, .victory) .result-best-item { grid-template-columns: 44px minmax(0, 1fr) !important; }
  .end-panel:is(.defeat, .victory) .result-unlock-chip img,
  .end-panel:is(.defeat, .victory) .result-best-item > img { width: 42px !important; height: 42px !important; }
  .end-panel:is(.defeat, .victory) .result-unlock-chip strong,
  .end-panel:is(.defeat, .victory) .result-best-copy > strong { font-size: 10.2px !important; }
  .end-panel:is(.defeat, .victory) .result-line small { font-size: 8.6px !important; }
  .end-panel:is(.defeat, .victory) .result-line b { font-size: 12px !important; }
  .end-panel:is(.defeat, .victory) .end-actions { left: 5% !important; right: 5% !important; top: 79.5% !important; bottom: .2% !important; grid-template-rows: 33px 33px 40px 30px !important; row-gap: 2px !important; }
  .end-panel:is(.defeat, .victory) .end-actions .mini-button { font-size: 9.5px !important; padding-inline: 9px !important; }
  .end-panel:is(.defeat, .victory) .end-actions .end-restart { font-size: 15px !important; padding-inline: 28px !important; }
  .end-panel:is(.defeat, .victory) .end-actions .end-home { width: 84% !important; font-size: 11px !important; }
}


/* SOURCE: ui/styles/shared/interface-unification-v1.css */
/*
 * Final interface unification pass 1791811200000.
 *
 * This file only touches the screens that still used flat browser-dashboard
 * cards or a mismatched control aspect. Existing finished combat/result art is
 * deliberately left alone. Painted controls are adapted with border-image so
 * their end caps and corner ornaments keep their authored proportions.
 */

:root {
  --ui-unified-gold: #f4d77d;
  --ui-unified-ice: #9eddf2;
  --ui-unified-copy: #d9e8f1;
  --ui-unified-muted: #8fa9b8;
  --ui-unified-row: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-neutral.png");
  --ui-unified-row-active: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-primary.png");
  --ui-unified-panel: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png");
  --ui-unified-header: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png");
}

/* Native scrollbars were the last obvious browser chrome in these pages. */
#menuGrowthPanel .menu-meta-box,
#menuCodexPanel .codex-page,
#menuRecipePanel .unlock-scroll,
#menuRecipePanel .menu-recipe-list,
#menuRankingPanel .game-ranking-list,
#menuStorePanel .store-product-list,
#bagPanel .effect-summary-scroll {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#menuGrowthPanel .menu-meta-box::-webkit-scrollbar,
#menuCodexPanel .codex-page::-webkit-scrollbar,
#menuRecipePanel .unlock-scroll::-webkit-scrollbar,
#menuRecipePanel .menu-recipe-list::-webkit-scrollbar,
#menuRankingPanel .game-ranking-list::-webkit-scrollbar,
#menuStorePanel .store-product-list::-webkit-scrollbar,
#bagPanel .effect-summary-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Use the compact control whose authored 2.91:1 ratio matches the live mini
   buttons. The old 2:1 bitmap was being pulled into long thin bars. */
.mini-button:not(.icon-close-button) {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

.mini-button.accent:not(.icon-close-button) {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png") !important;
}

.tutorial-actions button,
.tutorial-actions button:first-child,
.tutorial-actions button:last-child,
.tutorial-panel.tutorial-single-action .tutorial-actions button:not([hidden]),
.tutorial-panel.tutorial-final-actions .tutorial-actions button {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") !important;
}

.tutorial-actions button:first-child:not([hidden]) {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-medium-primary.png") !important;
}

/* Raster-backed confirmation controls use an inset light response instead of
   the rectangular browser focus ring that sat outside their silhouettes. */
.unlock-confirm-button:focus,
.unlock-confirm-button:focus-visible,
.sale-result-close:focus,
.sale-result-close:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(104, 210, 255, 0.52) !important;
}

/* ---------------------------- Abyss growth ---------------------------- */

#menuGrowthPanel .menu-meta-box {
  box-sizing: border-box !important;
  padding: 3px 5px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuGrowthPanel .meta-progress-head {
  min-height: 42px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 5px !important;
  padding: 7px 17px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--ui-unified-header) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuGrowthPanel .meta-progress-head span,
#menuGrowthPanel .meta-progress-head strong {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

#menuGrowthPanel .meta-progress-head span {
  color: var(--ui-unified-gold) !important;
  font-size: 13px !important;
}

#menuGrowthPanel .meta-progress-head strong {
  color: #9fe7ff !important;
  font-size: 11px !important;
}

#menuGrowthPanel .meta-progress-summary {
  min-height: 31px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 2px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/button-ultrawide-neutral.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuGrowthPanel .meta-progress-summary + .meta-progress-summary {
  margin-top: 3px !important;
}

#menuGrowthPanel .meta-progress-summary.meta-inventory-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#menuGrowthPanel .meta-progress-summary span {
  min-width: 0 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 5px !important;
  border: 0 !important;
  border-right: 1px solid rgba(214, 178, 78, 0.2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #c6dbe7 !important;
  font-size: 8.8px !important;
  white-space: nowrap !important;
}

#menuGrowthPanel .meta-progress-summary span:last-child {
  border-right: 0 !important;
}

#menuGrowthPanel .meta-next-unlock {
  min-height: 43px !important;
  box-sizing: border-box !important;
  margin: 6px 0 0 !important;
  padding: 6px 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--ui-unified-row) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuGrowthPanel .meta-next-unlock img {
  width: 25px !important;
  height: 25px !important;
  image-rendering: auto !important;
}

#menuGrowthPanel .meta-next-unlock strong {
  color: #f8eab0 !important;
  font-size: 10.5px !important;
}

#menuGrowthPanel .meta-next-unlock em {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #7fdcff !important;
  font-size: 10px !important;
}

#menuGrowthPanel .meta-progress-track {
  height: 6px !important;
  margin: 4px 14px 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(199, 161, 72, 0.34) !important;
  border-radius: 0 !important;
  background: #020811 !important;
  box-shadow: inset 0 1px 3px #000 !important;
}

#menuGrowthPanel .meta-progress-track i {
  background: linear-gradient(90deg, #2d87b9, #69d6ee 60%, #e9c968) !important;
  box-shadow: 0 0 7px rgba(77, 207, 244, 0.5) !important;
}

#menuGrowthPanel .menu-meta-box > p {
  margin: 4px 14px 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #8eacbc !important;
  font-size: 8px !important;
  text-align: center !important;
}

#menuGrowthPanel .meta-upgrade-list {
  display: grid !important;
  gap: 3px !important;
}

#menuGrowthPanel .meta-upgrade-card,
#menuGrowthPanel .meta-activation-card {
  box-sizing: border-box !important;
  min-height: 49px !important;
  margin: 0 !important;
  padding: 7px 15px !important;
  border: 8px solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--ui-unified-row) !important;
  border-image-slice: 30 52 fill !important;
  border-image-width: 8px 14px !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuGrowthPanel .meta-upgrade-card span,
#menuGrowthPanel .meta-activation-card span {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#menuGrowthPanel .meta-upgrade-card strong,
#menuGrowthPanel .meta-activation-card strong {
  color: #f6e9b2 !important;
  font-size: 10px !important;
}

#menuGrowthPanel .meta-upgrade-card small,
#menuGrowthPanel .meta-activation-card small {
  color: #9eb8c6 !important;
  font-size: 7.6px !important;
}

#menuGrowthPanel .meta-upgrade-card em,
#menuGrowthPanel .meta-activation-card em {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #f0cb6b !important;
  font-size: 9.5px !important;
}

#menuGrowthPanel .meta-upgrade-card:disabled,
#menuGrowthPanel .meta-activation-card:disabled {
  opacity: 0.48 !important;
  filter: grayscale(0.42) brightness(0.78) !important;
}

#menuGrowthPanel .meta-activation-list {
  margin-top: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#menuGrowthPanel .meta-activation-list > strong {
  display: block !important;
  min-height: 30px !important;
  box-sizing: border-box !important;
  padding: 8px 16px !important;
  background: transparent var(--ui-unified-header) center / 100% 100% no-repeat !important;
  color: var(--ui-unified-gold) !important;
  font-size: 9.5px !important;
}

/* ------------------------------- Codex -------------------------------- */

#menuCodexPanel .codex-tabbar {
  gap: 5px !important;
}

#menuCodexPanel .codex-tab {
  min-height: 64px !important;
  padding: 9px 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--ui-unified-row) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: brightness(0.8) saturate(0.84) !important;
}

#menuCodexPanel .codex-tab.open {
  background-image: var(--ui-unified-row-active) !important;
  filter: brightness(1.06) saturate(1.04) drop-shadow(0 0 5px rgba(66, 168, 237, 0.32)) !important;
}

#menuCodexPanel .codex-book {
  padding: 20px 17px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--ui-unified-panel) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-page,
#menuCodexPanel .codex-page.open {
  padding: 1px 0 !important;
}

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row {
  min-height: 58px !important;
  padding: 4px 7px !important;
  border: 8px solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--ui-unified-row) !important;
  border-image-slice: 30 52 fill !important;
  border-image-width: 8px 14px !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-row img {
  border: 0 !important;
  border-radius: 0 !important;
  background: radial-gradient(circle, rgba(63, 155, 198, 0.14), transparent 68%) !important;
}

#menuCodexPanel .codex-row-open {
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
  background: #17364b !important;
  color: #8ce3ff !important;
  font-size: 15px !important;
}

#menuCodexPanel .codex-boss-counters > span,
#menuCodexPanel .codex-boss-abilities > span {
  border: 0 !important;
  border-left: 1px solid rgba(224, 186, 82, 0.38) !important;
  border-radius: 0 !important;
  background: rgba(2, 12, 22, 0.48) !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-element-badge,
#menuCodexPanel .codex-boss-open {
  border-radius: 0 !important;
  background: rgba(3, 14, 25, 0.72) !important;
}

/* -------------------------- Recipes and unlocks ----------------------- */

#menuRecipePanel .menu-unlock-guide {
  min-height: 35px !important;
  box-sizing: border-box !important;
  display: grid !important;
  align-items: center !important;
  padding: 6px 17px !important;
  border: 0 !important;
  background: transparent var(--ui-unified-header) center / 100% 100% no-repeat !important;
  color: #b7cbd7 !important;
}

#menuRecipePanel .unlock-row {
  gap: 3px !important;
}

#menuRecipePanel .unlock-pill,
#menuRecipePanel button.unlock-pill {
  min-height: 43px !important;
  padding: 3px 5px !important;
  border: 7px solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--ui-unified-row) !important;
  border-image-slice: 30 52 fill !important;
  border-image-width: 7px 12px !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRecipePanel .unlock-pill.locked {
  opacity: 0.58 !important;
  filter: grayscale(0.55) brightness(0.75) !important;
}

#menuRecipePanel .unlock-pill-icon {
  border-radius: 0 !important;
  background: rgba(2, 11, 20, 0.75) !important;
}

#menuRecipePanel .menu-recipe-box {
  padding: 8px 9px 10px !important;
  border: 10px solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--ui-unified-panel) !important;
  border-image-slice: 120 fill !important;
  border-image-width: 10px !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRecipePanel .menu-recipe-head {
  min-height: 34px !important;
  box-sizing: border-box !important;
  padding: 7px 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--ui-unified-header) center / 100% 100% no-repeat !important;
}

#menuRecipePanel .menu-recipe-row {
  min-height: 78px !important;
  margin: 0 0 4px !important;
  padding: 5px 8px !important;
  border: 8px solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--ui-unified-row) !important;
  border-image-slice: 30 52 fill !important;
  border-image-width: 8px 14px !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRecipePanel .menu-recipe-row::before,
#menuRecipePanel .menu-recipe-row::after {
  content: none !important;
  display: none !important;
}

#menuRecipePanel .menu-recipe-unknown,
#menuRecipePanel .menu-recipe-empty {
  border-radius: 0 !important;
  background: rgba(2, 12, 22, 0.66) !important;
}

/* ------------------------------ Ranking ------------------------------- */

#menuRankingPanel .ranking-scope-tabs {
  min-height: 42px !important;
  box-sizing: border-box !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/tab-tray-wide.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuRankingPanel .ranking-scope-button {
  height: 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--ui-unified-row) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuRankingPanel .ranking-scope-button.active {
  background-image: var(--ui-unified-row-active) !important;
  color: #fff0ab !important;
}

#menuRankingPanel .lobby-ranking-meta {
  min-height: 39px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 5px 14px !important;
  background: transparent var(--ui-unified-header) center / 100% 100% no-repeat !important;
}

#menuRankingPanel .ranking-scope-summary {
  margin: 0 !important;
  color: #bcd3df !important;
}

#menuRankingPanel .game-ranking-list {
  box-sizing: border-box !important;
  align-content: start !important;
  gap: 4px !important;
  padding: 18px 16px !important;
  border: 0 !important;
  background: transparent var(--ui-unified-panel) center / 100% 100% no-repeat !important;
}

#menuRankingPanel .game-ranking-row {
  min-height: 48px !important;
  padding: 4px 7px !important;
  border: 8px solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--ui-unified-row) !important;
  border-image-slice: 30 52 fill !important;
  border-image-width: 8px 14px !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRankingPanel .game-ranking-row strong {
  width: 23px !important;
  height: 23px !important;
  border: 1px solid rgba(229, 194, 92, 0.48) !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
  background: #26200f !important;
  color: #f2d46f !important;
}

#menuRankingPanel .menu-recipe-empty {
  margin-top: 10px !important;
  padding: 20px !important;
  border: 0 !important;
  background: transparent !important;
  color: #829dad !important;
}

/* ------------------------------- Credits ------------------------------ */

.main-menu[data-panel="credits"] .menu-title {
  display: none !important;
}

.main-menu[data-panel="credits"] {
  padding: 0 !important;
}

.main-menu[data-panel="credits"] .menu-scene {
  width: min(100%, 430px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
}

.main-menu[data-panel="credits"] .menu-card {
  top: max(6px, env(safe-area-inset-top)) !important;
  right: 7px !important;
  bottom: max(6px, env(safe-area-inset-bottom)) !important;
  left: 7px !important;
}

#menuCreditsPanel.active {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 15px 12px 13px !important;
  overflow: hidden !important;
  border: 14px solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--ui-unified-panel) !important;
  border-image-slice: 120 fill !important;
  border-image-width: 14px !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46) !important;
}

#menuCreditsPanel .menu-panel-head {
  min-height: 46px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) 70px !important;
  align-items: center !important;
  padding: 5px 12px 6px !important;
  background: transparent var(--ui-unified-header) center / 100% 100% no-repeat !important;
}

#menuCreditsPanel .menu-panel-head > strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  color: #fff0ad !important;
  font-size: 17px !important;
  text-align: center !important;
}

#menuCreditsPanel .menu-panel-head > .menu-back-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 1px 8px 0 !important;
  transform: translate(2px, 1px) !important;
}

#menuCreditsPanel .credits-box {
  place-self: center stretch !important;
  box-sizing: border-box !important;
  min-height: 230px !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  align-content: center !important;
  gap: 13px 10px !important;
  margin: 0 8px !important;
  padding: 35px 30px !important;
  border: 12px solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--ui-unified-panel) !important;
  border-image-slice: 120 fill !important;
  border-image-width: 12px !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuCreditsPanel .credits-box span {
  align-self: center !important;
  padding-right: 10px !important;
  border-right: 1px solid rgba(224, 186, 78, 0.38) !important;
  color: #8fcfe5 !important;
  font-size: 10px !important;
  text-align: right !important;
}

#menuCreditsPanel .credits-box strong {
  min-width: 0 !important;
  align-self: center !important;
  color: #f6eab9 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* --------------------------- Bag effect rail -------------------------- */

#bagPanel .effect-summary-scroll {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#bagPanel .effect-summary-list {
  gap: 2px !important;
}

#bagPanel .effect-summary-chip {
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 2px 3px !important;
  border: 6px solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/generated/bag_content_gothic_1790601600072/bag-section-header.png") !important;
  border-image-slice: 30 48 fill !important;
  border-image-width: 6px 9px !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bagPanel .effect-summary-chip.complete {
  filter: brightness(1.12) saturate(1.06) !important;
}

#bagPanel .effect-summary-chip:focus-visible {
  outline: 0 !important;
  filter: brightness(1.18) !important;
}

/* -------------------------- Combat callouts --------------------------- */

/* Keep skill calls in the upper combat air-space. They no longer sit on the
   lower unit-name and HP rails, while remaining anchored to the enemy. */
.phone-shell > .combat-panel .enemy-skill-banner {
  top: 30px !important;
}

.phone-shell > .combat-panel .enemy-skill-banner[data-enemy-tier="regular"] {
  left: 62% !important;
  top: 30px !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 23px 5px !important;
}

/* ------------------------- Reveal transition -------------------------- */

/* The reveal frame still enters first, but useful SSS content is readable by
   the half-second frame rather than leaving a blank shrine for nearly 1 s. */
#pullRevealPanel.pull-reveal.high-rarity.sss-reveal .rare-showcase .stats {
  animation-delay: 220ms !important;
}

#pullRevealPanel.pull-reveal.high-rarity.sss-reveal .rare-showcase .reveal-card-actions.single {
  animation-delay: 320ms !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuGrowthPanel .meta-progress-summary span {
    padding-inline: 3px !important;
    font-size: 8.2px !important;
  }

  #menuGrowthPanel .meta-upgrade-card,
  #menuGrowthPanel .meta-activation-card {
    min-height: 46px !important;
    padding-block: 5px !important;
  }

  #menuGrowthPanel .meta-upgrade-card strong,
  #menuGrowthPanel .meta-activation-card strong {
    font-size: 9.5px !important;
  }

  #menuGrowthPanel .meta-upgrade-card small,
  #menuGrowthPanel .meta-activation-card small {
    font-size: 7.2px !important;
  }

  #menuCodexPanel .codex-book {
    padding: 18px 14px 16px !important;
  }

  #menuCreditsPanel .menu-panel-head {
    grid-template-columns: 66px minmax(0, 1fr) 66px !important;
    padding-inline: 9px !important;
  }

  #menuCreditsPanel .menu-panel-head > .menu-back-button {
    width: 61px !important;
    min-width: 61px !important;
  }

  #menuCreditsPanel .credits-box {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    margin-inline: 3px !important;
    padding-inline: 21px !important;
  }

  #menuCreditsPanel .credits-box strong {
    font-size: 11.5px !important;
  }
}


/* SOURCE: ui/styles/rewards/lobby-reward-cta-polish.css */
/* Home reward calls to action: one fixed special-reward board, not status chips. */
.menu-lobby-panel .lobby-side-actions {
  right: 5px !important;
  width: 168px !important;
  display: grid !important;
  grid-template-rows: 31px 56px 56px !important;
  gap: 2px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-side-actions-title {
  position: relative !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
  width: 168px !important;
  height: 31px !important;
  display: grid !important;
  place-items: center !important;
  padding: 6px 18px 1px !important;
  overflow: hidden !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/panel-header-wide.png") center / 100% 100% no-repeat !important;
  color: #f3dfa1 !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px #000, 0 0 5px rgba(75, 191, 235, .28) !important;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .62)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 168px !important;
  height: 56px !important;
  min-height: 56px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  color: #fff5cf !important;
  text-align: left !important;
  isolation: isolate !important;
  transform: none !important;
  transition: transform .12s ease, filter .12s ease !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer {
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .72)) drop-shadow(0 0 5px rgba(255, 194, 70, .22)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .72)) drop-shadow(0 0 6px rgba(87, 190, 255, .26)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer::after,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut::after {
  content: none !important;
  display: none !important;
}

.menu-lobby-panel .lobby-side-actions button > img,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  position: absolute !important;
  z-index: 2 !important;
  left: 12px !important;
  top: 50% !important;
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)) drop-shadow(0 0 4px rgba(255, 191, 77, .3)) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .72)) drop-shadow(0 0 5px rgba(118, 153, 255, .42)) !important;
  transform: translateY(-50%) scale(.98) rotate(-4deg) !important;
}

.menu-lobby-panel .lobby-side-actions button > span {
  position: absolute !important;
  z-index: 2 !important;
  top: 7px !important;
  right: 12px !important;
  left: 49px !important;
  height: 27px !important;
  display: grid !important;
  place-content: center !important;
  gap: 2px !important;
  padding: 0 !important;
  text-align: center !important;
}

.menu-lobby-panel .lobby-side-actions button small {
  color: #ffca68 !important;
  font-size: 6.8px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut small {
  color: #8ce8ff !important;
}

.menu-lobby-panel .lobby-side-actions button strong,
.menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
  color: #fff2bd !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut strong {
  color: #eaf8ff !important;
}

.menu-lobby-panel .lobby-side-actions button > b {
  position: absolute !important;
  z-index: 3 !important;
  right: 12px !important;
  bottom: 7px !important;
  left: 49px !important;
  height: 12px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 0 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #ffd66c !important;
  font-size: 7.6px !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  transform: none !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > b {
  color: #8eeaff !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > b {
  display: block !important;
  text-align: center !important;
  line-height: 12px !important;
}

.menu-lobby-panel .lobby-side-actions button:hover,
.menu-lobby-panel .lobby-side-actions button:focus-visible {
  filter: brightness(1.14) saturate(1.08) !important;
  transform: translateY(-1px) !important;
}

.menu-lobby-panel .lobby-side-actions button:active {
  filter: brightness(.96) !important;
  transform: translateY(2px) !important;
}

.menu-lobby-panel .lobby-attendance-shortcut .lobby-tool-badge {
  z-index: 5 !important;
  top: 2px !important;
  right: 2px !important;
  width: 17px !important;
  height: 17px !important;
  border: 1px solid #ffd8e2 !important;
  background: #ff426b !important;
  font-size: 11px !important;
  line-height: 16px !important;
  box-shadow: 0 0 9px rgba(255, 65, 105, .85) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-side-actions {
    right: 4px !important;
    width: 152px !important;
    grid-template-rows: 29px 50px 50px !important;
    gap: 2px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-side-actions-title {
    width: 152px !important;
    height: 29px !important;
    padding-top: 6px !important;
    font-size: 8.4px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
    width: 152px !important;
    height: 50px !important;
    min-height: 50px !important;
  }

  .menu-lobby-panel .lobby-side-actions button > img,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
    left: 10px !important;
    width: 31px !important;
    height: 31px !important;
  }

  .menu-lobby-panel .lobby-side-actions button > span { left: 43px !important; right: 10px !important; top: 6px !important; height: 25px !important; }
  .menu-lobby-panel .lobby-side-actions button > b { left: 43px !important; right: 10px !important; bottom: 6px !important; height: 11px !important; }
  .menu-lobby-panel .lobby-side-actions button small { font-size: 6.3px !important; }
  .menu-lobby-panel .lobby-side-actions button strong,
  .menu-lobby-panel .lobby-side-actions .lobby-first-offer strong { font-size: 9.3px !important; }
  .menu-lobby-panel .lobby-side-actions button > b { font-size: 7.2px !important; }
}

@media (prefers-reduced-motion: reduce) {
}


/* SOURCE: ui/styles/menus/menu-integrated-header-polish.css */
/*
 * Lobby menu integrated header — final-precedence visual pass.
 * The title and back control use separate painted assets. The title plaque
 * stays centred while the back control overlaps its left shoulder, giving
 * both live labels a fully enclosed dark text well.
 */

body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head {
  --menu-integrated-divider: 24%;
  box-sizing: border-box !important;
  width: 100% !important;
  height: clamp(60px, 16.4vw, 66px) !important;
  min-height: 60px !important;
  display: grid !important;
  grid-template-columns: var(--menu-integrated-divider) minmax(0, 52%) minmax(0, 24%) !important;
  grid-template-rows: 1fr !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: url("./assets/generated/menu_header_v5_1792949400000/title-plaque-v5-alpha.png") center / 97% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .72)) !important;
  isolation: isolate !important;
}

body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuCreditsPanel) > .menu-panel-head {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 8 !important;
}

/* These four content hubs share one viewport-centred header footprint even
   though the recipe page's ornamental shell changes its inner content width. */
body :is(#menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel) > .menu-panel-head {
  width: min(324px, calc(100vw - 66px)) !important;
  max-width: 324px !important;
  justify-self: center !important;
  margin-inline: auto !important;
}

#menuRecipePanel > .menu-panel-head {
  transform: translateX(-1px) !important;
}

body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head::before,
body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head::after {
  content: none !important;
  display: none !important;
}

body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head > [data-menu-back] {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 82% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1px 0 0 7% !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: url("./assets/generated/menu_header_v5_1792949400000/back-control-v5-alpha.png") center / 100% 100% no-repeat !important;
  color: #eaf4ff !important;
  font-size: clamp(12px, 3.2vw, 13px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(62, 172, 255, .55) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .72)) !important;
  transform: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head > [data-menu-back]:active {
  color: #fff0ad !important;
  text-shadow: 0 2px 2px #000, 0 0 7px rgba(255, 204, 82, .72) !important;
  transform: translateY(1px) !important;
}

body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head > strong,
body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head > .store-panel-title {
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  display: grid !important;
  place-items: center !important;
  background: none !important;
  border: 0 !important;
  color: #ffe997 !important;
  font-size: clamp(17px, 4.8vw, 20px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000, 0 0 6px rgba(255, 193, 48, .38) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body #menuStorePanel.menu-panel > .menu-panel-head > .store-panel-title > strong {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: inherit !important;
  transform: none !important;
}

/* Companion used to have a bespoke left-anchored title. Center it in the
   painted title bay just like every other lobby destination. */
body #menuCompanionPanel.menu-panel > .menu-panel-head > strong {
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #ffe997 !important;
  font-size: clamp(17px, 4.8vw, 20px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000, 0 0 6px rgba(255, 193, 48, .38) !important;
  transform: none !important;
}

/* The settings page keeps its painted full-page shell; only its top well is replaced. */
body #menuSettingsPanel.menu-panel > .menu-panel-head {
  position: absolute !important;
  top: 2.2% !important;
  right: 6.2% !important;
  bottom: auto !important;
  left: 6.2% !important;
  z-index: 4 !important;
  width: auto !important;
  height: clamp(50px, 9.2%, 58px) !important;
  min-height: 50px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head {
    height: 58px !important;
    min-height: 58px !important;
  }

  body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head > [data-menu-back] {
    padding-right: 0 !important;
    font-size: 12px !important;
  }

  body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head > strong,
  body :is(#menuStoryArchivePanel, #menuGrowthPanel, #menuRecipePanel, #menuCodexPanel, #menuRankingPanel, #menuStorePanel, #menuCompanionPanel, #menuAttendancePanel, #menuLoginPanel, #menuSettingsPanel, #menuCreditsPanel) > .menu-panel-head > .store-panel-title {
    padding-right: 0 !important;
    font-size: 17px !important;
  }

  body #menuSettingsPanel.menu-panel > .menu-panel-head {
    height: 56px !important;
    min-height: 56px !important;
  }

  #menuRecipePanel > .menu-panel-head {
    transform: translateY(2px) !important;
  }
}


/* SOURCE: ui/styles/shared/interface-content-refine-v2.css */
/*
 * Content-only refinement for growth, codex, guide, and ranking.
 * The shared page title and submenu header are intentionally out of scope.
 */

:root {
  --content-refine-gold: #f2d474;
  --content-refine-ice: #8fe4ff;
  --content-refine-copy: #d8e8ef;
  --content-refine-muted: #8ea9b7;
  --content-refine-row: url("assets/generated/bag_content_gothic_1790601600072/bag-waiting-card.png");
  --content-refine-section: url("assets/generated/bag_content_gothic_1790601600072/bag-section-header.png");
  --content-refine-panel: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png");
  --content-refine-header: url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png");
  --content-refine-mini: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-neutral.png");
  --content-refine-mini-active: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-primary.png");
  --content-refine-compact: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png");
  --content-refine-compact-active: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png");
}

#menuGrowthPanel .menu-meta-box,
#menuCodexPanel .codex-page,
#menuRecipePanel .unlock-scroll,
#menuRecipePanel .menu-recipe-list,
#guideElementView,
#menuRankingPanel .game-ranking-list {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#menuGrowthPanel .menu-meta-box::-webkit-scrollbar,
#menuCodexPanel .codex-page::-webkit-scrollbar,
#menuRecipePanel .unlock-scroll::-webkit-scrollbar,
#menuRecipePanel .menu-recipe-list::-webkit-scrollbar,
#guideElementView::-webkit-scrollbar,
#menuRankingPanel .game-ranking-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ---------------------------- Abyss growth ---------------------------- */

#menuGrowthPanel .menu-meta-box {
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  padding: 4px 5px max(18px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuGrowthPanel .growth-wallet {
  box-sizing: border-box;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 16px;
  background: transparent var(--content-refine-section) center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.38));
}

#menuGrowthPanel .growth-wallet > img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(99, 217, 255, 0.5));
}

#menuGrowthPanel .growth-wallet > span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

#menuGrowthPanel .growth-wallet small {
  color: #bdd2dc;
  font-size: 10px;
  font-weight: 900;
}

#menuGrowthPanel .growth-wallet strong {
  color: #a4ebff;
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(70, 204, 245, 0.3);
}

#menuGrowthPanel .growth-section-head {
  box-sizing: border-box;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 17px 7px;
  background: transparent var(--content-refine-header) center / 100% 100% no-repeat;
}

#menuGrowthPanel .growth-section-head strong,
#menuGrowthPanel .meta-activation-list > strong {
  color: var(--content-refine-gold) !important;
  font-size: 10.5px !important;
  font-weight: 1000 !important;
}

#menuGrowthPanel .growth-section-head span {
  color: var(--content-refine-ice);
  font-size: 9px;
  font-weight: 1000;
}

#menuGrowthPanel .meta-upgrade-list,
#menuGrowthPanel .meta-activation-list {
  display: grid !important;
  gap: 5px !important;
}

#menuGrowthPanel .meta-upgrade-card,
#menuGrowthPanel .meta-activation-card {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 8px solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--content-refine-row) !important;
  border-image-slice: 28 fill !important;
  border-image-width: 7px !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

#menuGrowthPanel .meta-upgrade-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 52px !important;
  align-items: center !important;
  gap: 9px !important;
}

#menuGrowthPanel .meta-upgrade-card.affordable {
  border-image-source: var(--content-refine-mini-active) !important;
  border-image-slice: 30 52 fill !important;
  border-image-width: 8px 14px !important;
  filter: drop-shadow(0 0 5px rgba(69, 185, 232, 0.22)) !important;
}

#menuGrowthPanel .meta-upgrade-card > span,
#menuGrowthPanel .meta-activation-card > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

#menuGrowthPanel .meta-upgrade-card strong,
#menuGrowthPanel .meta-activation-card strong {
  color: #f5e9b5 !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}

#menuGrowthPanel .meta-upgrade-card > span small,
#menuGrowthPanel .meta-activation-card > span small {
  margin: 0 !important;
  color: #9cb7c4 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

#menuGrowthPanel .meta-upgrade-card > em {
  min-height: 36px;
  display: grid;
  place-content: center;
  gap: 1px;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--content-refine-gold) !important;
  font-size: 14px !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-align: center;
}

#menuGrowthPanel .meta-upgrade-card > em small {
  color: #88a9b7 !important;
  font-size: 7px !important;
  font-weight: 900 !important;
}

#menuGrowthPanel .meta-upgrade-card.needs-shards > em {
  color: #92aab5 !important;
}

#menuGrowthPanel .meta-activation-list {
  margin-top: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

#menuGrowthPanel .meta-activation-list > strong {
  box-sizing: border-box;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  padding: 6px 17px 7px !important;
  background: transparent var(--content-refine-header) center / 100% 100% no-repeat !important;
}

#menuGrowthPanel .meta-activation-card {
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
}

#menuGrowthPanel .meta-activation-card img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}

#menuGrowthPanel .meta-activation-card em {
  color: var(--content-refine-gold) !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

#menuGrowthPanel .growth-empty {
  min-height: 88px;
  display: grid;
  place-items: center;
  margin: 0 !important;
  padding: 12px !important;
  border: 8px solid transparent;
  border-image: var(--content-refine-row) 28 fill / 7px / 0 stretch;
  color: var(--content-refine-muted) !important;
  font-size: 9px !important;
  text-align: center;
}

/* -------------------------------- Codex ------------------------------- */

#menuCodexPanel.active {
  grid-template-rows: auto 30px minmax(0, 1fr) !important;
  gap: 7px !important;
  overflow: hidden !important;
}

#menuCodexPanel .codex-tabbar {
  height: 30px !important;
  min-height: 30px !important;
  gap: 5px !important;
}

#menuCodexPanel .codex-tab {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 30px !important;
  height: 30px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 1px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--content-refine-mini) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: brightness(0.82) saturate(0.8) !important;
}

#menuCodexPanel .codex-tab.open {
  background-image: var(--content-refine-mini-active) !important;
  filter: brightness(1.07) saturate(1.05) drop-shadow(0 0 5px rgba(66, 175, 226, 0.26)) !important;
}

#menuCodexPanel .codex-tab:focus,
#menuCodexPanel .codex-tab:focus-visible,
#menuRecipePanel .guide-tabbar button:focus,
#menuRecipePanel .guide-tabbar button:focus-visible,
#guideElementView .element-mode-tab:focus,
#guideElementView .element-mode-tab:focus-visible,
#menuRankingPanel .ranking-scope-button:focus,
#menuRankingPanel .ranking-scope-button:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-tab::after,
#menuCodexPanel .codex-tab > span small {
  content: none !important;
  display: none !important;
}

#menuCodexPanel .codex-tab > img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}

#menuCodexPanel .codex-tab > span b {
  display: block !important;
  overflow: hidden !important;
  color: #d6e8ef !important;
  font-size: 9px !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuCodexPanel .codex-tab.open > span b {
  color: #ffefad !important;
}

#menuCodexPanel .codex-tab > strong {
  padding: 0 !important;
  color: var(--content-refine-ice) !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

#menuCodexPanel .codex-book {
  box-sizing: border-box !important;
  min-height: 0 !important;
  padding: 18px 16px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--content-refine-panel) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-book::before,
#menuCodexPanel .codex-book::after {
  content: none !important;
  display: none !important;
}

#menuCodexPanel .codex-page,
#menuCodexPanel .codex-page.open {
  padding: 0 !important;
}

#menuCodexPanel .codex-boss-list,
#menuCodexPanel .codex-item-list {
  gap: 5px !important;
}

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row {
  box-sizing: border-box !important;
  min-height: 54px !important;
  padding: 5px 7px !important;
  border: 8px solid transparent !important;
  border-radius: 0 !important;
  border-image: var(--content-refine-row) 28 fill / 7px / 0 stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-row.item {
  grid-template-columns: 40px minmax(0, 1fr) 18px !important;
}

#menuCodexPanel .codex-row img,
#menuCodexPanel .codex-row.boss.found > img {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: radial-gradient(circle, rgba(62, 162, 204, 0.16), transparent 69%) !important;
  object-fit: contain !important;
}

#menuCodexPanel .codex-row strong {
  color: #f4e7ad !important;
  font-size: 10px !important;
}

#menuCodexPanel .codex-row span {
  color: #9db6c3 !important;
  font-size: 8px !important;
}

#menuCodexPanel .codex-row.locked {
  opacity: 0.54 !important;
  filter: grayscale(0.58) brightness(0.82) !important;
}

#menuCodexPanel .codex-row.boss.found {
  min-height: 96px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 7px !important;
  padding: 6px 7px !important;
}

#menuCodexPanel .codex-boss-copy {
  gap: 4px !important;
}

#menuCodexPanel .codex-boss-name > strong {
  font-size: 10.5px !important;
}

#menuCodexPanel .codex-element-badge {
  padding: 2px 5px !important;
  border-radius: 0 !important;
  background: rgba(2, 13, 22, 0.72) !important;
  font-size: 7px !important;
}

#menuCodexPanel .codex-boss-counters {
  gap: 3px !important;
}

#menuCodexPanel .codex-boss-counters > span {
  min-height: 18px !important;
  padding: 2px 5px !important;
  border: 0 !important;
  border-left: 1px solid rgba(217, 181, 80, 0.35) !important;
  border-radius: 0 !important;
  background: rgba(2, 12, 21, 0.46) !important;
}

#menuCodexPanel .codex-boss-counters small,
#menuCodexPanel .codex-boss-counters b {
  font-size: 6.8px !important;
}

#menuCodexPanel .codex-boss-abilities {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3px !important;
}

#menuCodexPanel .codex-boss-abilities > span,
#menuCodexPanel .codex-row.boss.found .codex-boss-abilities > span {
  min-height: 20px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px 4px !important;
  border: 0 !important;
  border-left: 1px solid rgba(72, 191, 232, 0.42) !important;
  border-radius: 0 !important;
  background: rgba(2, 13, 23, 0.48) !important;
}

#menuCodexPanel .codex-boss-abilities small,
#menuCodexPanel .codex-boss-abilities b,
#menuCodexPanel .codex-row.boss.found .codex-boss-abilities small,
#menuCodexPanel .codex-row.boss.found .codex-boss-abilities b {
  font-size: 6.7px !important;
}

#menuCodexPanel .codex-boss-abilities em {
  display: none !important;
}

#menuCodexPanel .codex-row-open {
  width: 17px !important;
  height: 17px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #163549 !important;
  color: var(--content-refine-ice) !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
}

/* ------------------------ Recipes and affinity ------------------------ */

#menuRecipePanel.active {
  grid-template-rows: auto 30px minmax(0, 1fr) !important;
  gap: 7px !important;
  overflow: hidden !important;
}

#menuRecipePanel .guide-tabbar {
  box-sizing: border-box !important;
  height: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#menuRecipePanel .guide-tabbar button {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 15px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--content-refine-mini) center / 100% 100% no-repeat !important;
  color: #bed2dc !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  filter: brightness(0.82) saturate(0.82) !important;
}

#menuRecipePanel .guide-tabbar button.active {
  background-image: var(--content-refine-mini-active) !important;
  color: #ffefac !important;
  filter: brightness(1.07) saturate(1.05) drop-shadow(0 0 5px rgba(67, 178, 229, 0.26)) !important;
}

#guideRecipeView.active {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(250px, 0.84fr) minmax(238px, 1.16fr) !important;
  gap: 7px !important;
  overflow: hidden !important;
}

#menuRecipePanel .menu-unlock-list {
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRecipePanel .unlock-overview {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 34px 18px 34px minmax(0, 1fr) !important;
  gap: 4px !important;
}

#menuRecipePanel .menu-unlock-head {
  min-height: 34px !important;
  flex-wrap: nowrap !important;
  padding: 5px 16px 6px !important;
  background: transparent var(--content-refine-header) center / 100% 100% no-repeat !important;
}

#menuRecipePanel .menu-unlock-head span,
#menuRecipePanel .menu-unlock-head strong {
  font-size: 9px !important;
}

#menuRecipePanel .menu-unlock-note {
  align-self: center !important;
  margin: 0 8px !important;
  color: #89aab8 !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
  text-align: center !important;
}

#menuRecipePanel .menu-unlock-guide {
  box-sizing: border-box !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 5px 14px !important;
  border: 0 !important;
  border-left: 1px solid rgba(216, 180, 80, 0.38) !important;
  background: rgba(2, 12, 22, 0.58) !important;
  color: #a9c2cd !important;
  font-size: 7.2px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

#menuRecipePanel .unlock-scroll {
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  padding: 0 1px 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#menuRecipePanel .unlock-group {
  grid-template-columns: 29px minmax(0, 1fr) !important;
  gap: 4px !important;
}

#menuRecipePanel .unlock-group > strong {
  padding-top: 8px !important;
  font-size: 9px !important;
  text-align: center !important;
}

#menuRecipePanel .unlock-group > strong small {
  font-size: 7px !important;
}

#menuRecipePanel .unlock-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
}

#menuRecipePanel .unlock-pill,
#menuRecipePanel button.unlock-pill {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  grid-template-columns: 29px minmax(0, 1fr) 12px !important;
  gap: 5px !important;
  padding: 4px 5px !important;
  border: 7px solid transparent !important;
  border-radius: 0 !important;
  border-image: var(--content-refine-row) 28 fill / 7px / 0 stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRecipePanel .unlock-pill.locked {
  opacity: 0.56 !important;
  filter: grayscale(0.54) brightness(0.8) !important;
}

#menuRecipePanel .unlock-pill-icon,
#menuRecipePanel .unlock-pill-icon.locked-mark {
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(2, 10, 18, 0.62) !important;
  box-shadow: none !important;
}

#menuRecipePanel .unlock-pill-copy b {
  color: #f2e6b0 !important;
  font-size: 8px !important;
}

#menuRecipePanel .unlock-pill-copy small {
  color: #8eacb9 !important;
  font-size: 7px !important;
  line-height: 1.2 !important;
}

#menuRecipePanel .menu-recipe-box {
  box-sizing: border-box !important;
  min-height: 0 !important;
  grid-template-rows: 34px minmax(0, 1fr) !important;
  gap: 4px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRecipePanel .menu-recipe-head {
  box-sizing: border-box !important;
  min-height: 34px !important;
  padding: 5px 16px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--content-refine-header) center / 100% 100% no-repeat !important;
}

#menuRecipePanel .menu-recipe-head span,
#menuRecipePanel .menu-recipe-head strong {
  font-size: 9px !important;
}

#menuRecipePanel .menu-recipe-body,
#menuRecipePanel .menu-recipe-list {
  min-height: 0 !important;
}

#menuRecipePanel .menu-recipe-body {
  overflow: hidden !important;
}

#menuRecipePanel .menu-recipe-list {
  height: 100% !important;
  max-height: none !important;
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  padding: 0 1px 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#menuRecipePanel .menu-recipe-row {
  box-sizing: border-box !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border: 8px solid transparent !important;
  border-radius: 0 !important;
  border-image: var(--content-refine-row) 28 fill / 7px / 0 stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRecipePanel .menu-recipe-materials > span,
#menuRecipePanel .menu-recipe-result {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRecipePanel .menu-recipe-materials small {
  color: #a9bec8 !important;
  font-size: 6.8px !important;
}

#menuRecipePanel .menu-recipe-result strong {
  color: #f4e7ae !important;
  font-size: 9px !important;
}

#menuRecipePanel .menu-recipe-result small {
  color: #8fa9b6 !important;
  font-size: 6.8px !important;
}

#menuRecipePanel .menu-recipe-unknown,
#menuRecipePanel .menu-recipe-empty {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(2, 11, 20, 0.58) !important;
}

#guideElementView.active {
  min-height: 0 !important;
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#guideElementView .menu-element-box {
  box-sizing: border-box !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 2px 12px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#guideElementView .element-rule-head {
  box-sizing: border-box !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 15px 7px !important;
  border: 0 !important;
  background: transparent var(--content-refine-header) center / 100% 100% no-repeat !important;
}

#guideElementView .element-rule-head span {
  color: var(--content-refine-gold) !important;
  font-size: 10px !important;
}

#guideElementView .element-rule-head strong {
  color: var(--content-refine-ice) !important;
  font-size: 8px !important;
}

#guideElementView .element-mode-tabs {
  box-sizing: border-box !important;
  height: 29px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 0 !important;
}

#guideElementView .element-mode-tab {
  min-height: 29px !important;
  height: 29px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--content-refine-mini) center / 100% 100% no-repeat !important;
  color: #b9ced8 !important;
  font-size: 8.5px !important;
  box-shadow: none !important;
}

#guideElementView .element-mode-tab.active {
  background-image: var(--content-refine-mini-active) !important;
  color: #ffefad !important;
}

#guideElementView .element-affinity-guide {
  margin: 0 8px !important;
  color: #a8c0cb !important;
  font-size: 7.5px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#guideElementView .element-affinity-section {
  box-sizing: border-box !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  border: 8px solid transparent !important;
  border-radius: 0 !important;
  border-image: var(--content-refine-row) 28 fill / 7px / 0 stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#guideElementView .element-affinity-section > header {
  min-height: 28px !important;
  padding: 4px 7px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(214, 179, 78, 0.22) !important;
  background: transparent !important;
}

#guideElementView .element-affinity-section > header span {
  color: #f3e5a8 !important;
  font-size: 9px !important;
}

#guideElementView .element-affinity-section > header small {
  color: #8fb7c8 !important;
  font-size: 7px !important;
}

#guideElementView .element-cycle-node > strong,
#guideElementView .element-dual-node > strong {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 2px 3px #000, 0 0 5px currentColor !important;
}

#guideElementView .element-cycle-core i {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 2px 3px #000, 0 0 6px rgba(255, 222, 112, 0.38) !important;
}

#guideElementView .element-neutral-note {
  min-height: 28px !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 7.5px !important;
  text-align: center !important;
}

#guideElementView .element-neutral-note i {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* -------------------------------- Ranking ----------------------------- */

#menuRankingPanel.active {
  grid-template-rows: auto 33px 48px minmax(0, 1fr) !important;
  gap: 7px !important;
  overflow: hidden !important;
}

#menuRankingPanel .ranking-scope-tabs {
  box-sizing: border-box !important;
  min-height: 33px !important;
  height: 33px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRankingPanel .ranking-scope-button {
  box-sizing: border-box !important;
  height: 33px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--content-refine-compact) center / 100% 100% no-repeat !important;
  color: #bdd0d9 !important;
  font-size: 9px !important;
  box-shadow: none !important;
  filter: brightness(0.82) saturate(0.82) !important;
}

#menuRankingPanel .ranking-scope-button.active {
  background-image: var(--content-refine-compact-active) !important;
  color: #ffefad !important;
  filter: brightness(1.06) saturate(1.04) !important;
}

#menuRankingPanel .lobby-ranking-meta {
  box-sizing: border-box !important;
  min-height: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 15px !important;
  border: 0 !important;
  background: transparent var(--content-refine-header) center / 100% 100% no-repeat !important;
}

#menuRankingPanel .ranking-scope-summary {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #b8ced8 !important;
  font-size: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuRankingPanel #rankingRefreshButton {
  box-sizing: border-box !important;
  flex: 0 0 84px !important;
  width: 84px !important;
  min-width: 84px !important;
  height: 29px !important;
  min-height: 29px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--content-refine-compact) center / 100% 100% no-repeat !important;
  color: #d2e3ea !important;
  font-size: 8px !important;
  box-shadow: none !important;
}

#menuRankingPanel .game-ranking-list {
  box-sizing: border-box !important;
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  grid-auto-rows: min-content !important;
  gap: 5px !important;
  padding: 30px 16px 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--content-refine-panel) center / 100% 100% no-repeat !important;
  overscroll-behavior: contain !important;
}

#menuRankingPanel .ranking-column-head {
  box-sizing: border-box;
  min-height: 24px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 7px;
  padding: 2px 8px 4px;
  border-bottom: 1px solid rgba(215, 180, 80, 0.28);
  color: #7f9eac;
  font-size: 7px;
  font-weight: 900;
}

#menuRankingPanel .ranking-column-head span:first-child,
#menuRankingPanel .ranking-column-head span:last-child {
  text-align: center;
}

#menuRankingPanel .game-ranking-row {
  box-sizing: border-box !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 92px !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 8px !important;
  border: 8px solid transparent !important;
  border-radius: 0 !important;
  border-image: var(--content-refine-row) 28 fill / 7px / 0 stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRankingPanel .game-ranking-row.me {
  filter: drop-shadow(0 0 5px rgba(242, 210, 102, 0.22)) !important;
}

#menuRankingPanel .game-ranking-row > strong {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(212, 180, 85, 0.42) !important;
  border-radius: 0 !important;
  background: #201c10 !important;
  color: #f0d36f !important;
  font-size: 10px !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
}

#menuRankingPanel .game-ranking-row.rank-1 > strong {
  background: #3a2d0b !important;
  color: #ffe58a !important;
}

#menuRankingPanel .game-ranking-row.rank-2 > strong {
  background: #26313a !important;
  color: #dfeff7 !important;
}

#menuRankingPanel .game-ranking-row.rank-3 > strong {
  background: #392014 !important;
  color: #edb184 !important;
}

#menuRankingPanel .game-ranking-player i {
  color: #e9f1f4 !important;
  font-size: 9.5px !important;
}

#menuRankingPanel .game-ranking-player small {
  color: #829eac !important;
  font-size: 7.5px !important;
}

#menuRankingPanel .game-ranking-stats {
  min-width: 0 !important;
  gap: 2px !important;
}

#menuRankingPanel .game-ranking-stats em {
  color: var(--content-refine-ice) !important;
  font-size: 8.5px !important;
}

#menuRankingPanel .game-ranking-stats b {
  color: var(--content-refine-gold) !important;
  font-size: 7.5px !important;
}

#menuRankingPanel .menu-recipe-empty {
  margin: 0 !important;
  padding: 22px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--content-refine-muted) !important;
  font-size: 9px !important;
}

@media (max-width: 370px) {
  #menuGrowthPanel .growth-wallet {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-inline: 14px;
  }

  #menuGrowthPanel .growth-wallet > img {
    width: 35px;
    height: 35px;
  }

  #menuGrowthPanel .meta-upgrade-card {
    grid-template-columns: minmax(0, 1fr) 46px !important;
  }

  #menuCodexPanel .codex-tab {
    padding-inline: 11px !important;
  }

  #menuCodexPanel .codex-boss-abilities > span,
  #menuCodexPanel .codex-row.boss.found .codex-boss-abilities > span {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  #guideRecipeView.active {
    grid-template-rows: minmax(235px, 0.84fr) minmax(225px, 1.16fr) !important;
  }

  #guideElementView .element-cycle-map {
    width: min(230px, calc(100vw - 92px)) !important;
  }

  #guideElementView .element-dual-map {
    width: min(229px, calc(100vw - 78px)) !important;
  }

  #menuRankingPanel .ranking-column-head,
  #menuRankingPanel .game-ranking-row {
    grid-template-columns: 27px minmax(0, 1fr) 82px !important;
    gap: 5px !important;
  }

  #menuRankingPanel #rankingRefreshButton {
    flex-basis: 78px !important;
    width: 78px !important;
    min-width: 78px !important;
  }
}

/* ---------------------- Requested content simplification ---------------------- */

/* Codex lists now behave as compact records. All verbose combat data stays in
   the existing detail view instead of becoming nested CSS cards in the list. */
#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row,
#menuCodexPanel .codex-row.boss,
#menuCodexPanel .codex-row.boss.found {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 17px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 6px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(114, 175, 201, 0.2) !important;
  border-image: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-boss-list > .codex-row:last-child,
#menuCodexPanel .codex-item-list > .codex-row:last-child {
  border-bottom: 0 !important;
}

#menuCodexPanel .codex-row.locked,
#menuCodexPanel .codex-row.boss.locked {
  grid-template-columns: 40px minmax(0, 1fr) !important;
}

#menuCodexPanel .codex-row > img,
#menuCodexPanel .codex-row.boss.found > img {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-row > div,
#menuCodexPanel .codex-boss-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

#menuCodexPanel .codex-row > div > strong,
#menuCodexPanel .codex-boss-copy > strong {
  display: block !important;
  overflow: hidden !important;
  color: #f4e7ad !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuCodexPanel .codex-row > div > span,
#menuCodexPanel .codex-boss-copy > span {
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #96b2bf !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuCodexPanel .codex-row-open {
  align-self: center !important;
  justify-self: center !important;
}

/* Affinity artwork is now artwork-only. Every explanation sits in a dedicated
   strip below its image, so no label can drift over a painted symbol. */
#guideElementView .element-affinity-guide {
  box-sizing: border-box !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 5px 11px !important;
  border: 6px solid transparent !important;
  border-image: var(--content-refine-row) 28 fill / 6px / 0 stretch !important;
  background: transparent !important;
  color: #c5d8e0 !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

#guideElementView .element-cycle-map,
#guideElementView .element-dual-map {
  overflow: hidden !important;
}

#guideElementView .element-cycle-copy {
  box-sizing: border-box !important;
  min-height: 50px !important;
  display: grid !important;
  place-items: center !important;
  gap: 4px !important;
  margin: 0 5px 6px !important;
  padding: 6px 9px !important;
  border: 6px solid transparent !important;
  border-image: var(--content-refine-row) 28 fill / 6px / 0 stretch !important;
  background: transparent !important;
}

#guideElementView .element-cycle-sequence {
  margin: 0 !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

#guideElementView .element-cycle-copy > small {
  display: block !important;
  color: #a8c1cc !important;
  font-size: 7.5px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

#guideElementView .element-pair-strip {
  box-sizing: border-box !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 5px 6px !important;
  padding: 5px 8px !important;
  border: 6px solid transparent !important;
  border-image: var(--content-refine-row) 28 fill / 6px / 0 stretch !important;
  background: transparent !important;
  text-align: center !important;
}

#guideElementView .element-pair-strip > span {
  font-size: 10px !important;
  font-weight: 1000 !important;
  text-shadow: 0 1px 3px #000 !important;
}

#guideElementView .element-pair-strip > .element-light {
  color: #ffe88d !important;
}

#guideElementView .element-pair-strip > .element-dark {
  color: #c494ff !important;
}

#guideElementView .element-pair-strip > strong {
  min-width: 0 !important;
  padding: 5px 4px !important;
  border-inline: 1px solid rgba(141, 205, 229, 0.24) !important;
  color: #d6e8ef !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

/* Ranking period controls use the authored 2.5:1 guide-tab artwork at its
   matching live aspect. The list begins directly with records. */
#menuRankingPanel.active {
  --ranking-period-height: clamp(38px, 10.5vw, 41px);
  grid-template-rows: auto var(--ranking-period-height) 34px minmax(0, 1fr) !important;
  gap: 6px !important;
}

#menuRankingPanel .ranking-scope-tabs {
  min-height: var(--ranking-period-height) !important;
  height: var(--ranking-period-height) !important;
  gap: 4px !important;
  padding: 0 !important;
  background: transparent !important;
}

#menuRankingPanel .ranking-scope-button {
  height: var(--ranking-period-height) !important;
  padding: 0 9px 1px !important;
  background: transparent url("assets/generated/guide_recipe_ui_1791552000100/guide-tab-neutral.png") center / 100% 100% no-repeat !important;
  color: #b8cdd7 !important;
  font-size: 9px !important;
  filter: brightness(0.8) saturate(0.82) !important;
}

#menuRankingPanel .ranking-scope-button.active {
  background-image: url("assets/generated/guide_recipe_ui_1791552000100/guide-tab-active.png") !important;
  color: #ffefad !important;
  filter: brightness(1.08) saturate(1.06) drop-shadow(0 0 4px rgba(72, 180, 230, 0.25)) !important;
}

#menuRankingPanel .lobby-ranking-meta {
  min-height: 34px !important;
  height: 34px !important;
  justify-content: center !important;
  padding: 5px 14px 6px !important;
}

#menuRankingPanel .ranking-scope-summary {
  width: 100% !important;
  color: #a9c2cd !important;
  font-size: 7.8px !important;
  text-align: center !important;
}

#menuRankingPanel .game-ranking-list {
  gap: 5px !important;
  padding: 30px 22px 20px !important;
}

#menuRankingPanel .game-ranking-row {
  width: 100% !important;
  min-height: 58px !important;
  grid-template-columns: 28px minmax(0, 1fr) 86px !important;
  gap: 6px !important;
  padding: 6px 7px !important;
  border-width: 7px !important;
  border-image-width: 7px !important;
}

#menuRankingPanel .game-ranking-row > strong {
  width: 22px !important;
  height: 22px !important;
  font-size: 9px !important;
}

@media (max-width: 370px) {
  #guideElementView .element-cycle-copy {
    margin-inline: 3px !important;
  }

  #guideElementView .element-pair-strip {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    margin-inline: 3px !important;
    padding-inline: 6px !important;
  }

  #menuRankingPanel .game-ranking-list {
    padding-inline: 20px !important;
  }

  #menuRankingPanel .game-ranking-row {
    grid-template-columns: 26px minmax(0, 1fr) 78px !important;
    gap: 5px !important;
  }
}


/* SOURCE: ui/styles/menus/menu-header-codex-v3.css */
/* Codex selector and content-scene rules only. All menu back/title headers are
   owned by menu-integrated-header-polish.css so this feature sheet cannot
   revive the retired split-button header. */

/* One authored two-slot tray replaces two unrelated stretched buttons. */
#menuCodexPanel.active {
  grid-template-rows: auto clamp(45px, 12.7vw, 49px) minmax(0, 1fr) !important;
  gap: 6px !important;
}

#menuCodexPanel .codex-tabbar {
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  height: clamp(45px, 12.7vw, 49px) !important;
  min-height: 45px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 3px 19px 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("./assets/generated/loot_bag_tabs_1790139000000/loot-bag-tabs-integrated.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .68)) !important;
}

#menuCodexPanel .codex-tab {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 1px 17px 0 15px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #9cb1c0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

#menuCodexPanel .codex-tab:first-child {
  padding-right: 22px !important;
}

#menuCodexPanel .codex-tab:last-child {
  padding-left: 22px !important;
}

#menuCodexPanel .codex-tab::after {
  content: "" !important;
  position: absolute !important;
  inset: 5px 7px !important;
  z-index: -1 !important;
  display: block !important;
  opacity: 0 !important;
  border-radius: 45% !important;
  background: radial-gradient(ellipse at 50% 55%, rgba(63, 157, 217, .25), rgba(17, 45, 76, .08) 58%, transparent 76%) !important;
  box-shadow: inset 0 -1px rgba(94, 197, 255, .28) !important;
  transition: opacity 120ms ease !important;
  pointer-events: none !important;
}

#menuCodexPanel .codex-tab.open {
  background: none !important;
  color: #fff0b0 !important;
  filter: none !important;
}

#menuCodexPanel .codex-tab.open::after {
  opacity: 1 !important;
}

#menuCodexPanel .codex-tab > img,
#menuCodexPanel .codex-tab > span > small {
  display: none !important;
}

#menuCodexPanel .codex-tab > span > b {
  display: block !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(68, 172, 235, .3) !important;
}

#menuCodexPanel .codex-tab.open > span > b {
  color: #fff0b0 !important;
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(255, 199, 55, .42) !important;
}

#menuCodexPanel .codex-tab > strong {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #74bfe7 !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
}

#menuCodexPanel .codex-tab.open > strong {
  color: #f7d97b !important;
}

#menuCodexPanel .codex-tab:focus,
#menuCodexPanel .codex-tab:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Content pages should not reveal the lobby party/boss behind their edge. */
.main-menu:is([data-panel="growth"], [data-panel="recipes"], [data-panel="elements"], [data-panel="codex"], [data-panel="ranking"]) .menu-characters {
  display: none !important;
}

.main-menu:is([data-panel="growth"], [data-panel="recipes"], [data-panel="elements"], [data-panel="codex"], [data-panel="ranking"]) .menu-scene {
  background: #040914 !important;
  box-shadow: none !important;
}

.main-menu:is([data-panel="growth"], [data-panel="recipes"], [data-panel="elements"], [data-panel="codex"], [data-panel="ranking"]) .menu-scene::before,
.main-menu:is([data-panel="growth"], [data-panel="recipes"], [data-panel="elements"], [data-panel="codex"], [data-panel="ranking"]) .menu-scene::after {
  content: none !important;
  display: none !important;
}

/* Old builds painted a text chevron as a blue diamond at every row end. */
#menuCodexPanel .codex-row-open {
  display: none !important;
}

@media (max-width: 370px) {
  #menuCodexPanel .codex-tabbar {
    padding-inline: 17px !important;
  }

  #menuCodexPanel .codex-tab {
    gap: 5px !important;
    padding-inline: 13px 18px !important;
  }

  #menuCodexPanel .codex-tab:last-child {
    padding-inline: 18px 13px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-polish-v1.css */
/* 2026-08-22 companion screen rebuild.
   Keeps authored game art while restoring mobile hierarchy, readable lists,
   and useful full-height space across summon, roster, and party tabs. */

.main-menu[data-panel="companions"] .menu-card{
  top:max(8px,env(safe-area-inset-top))!important;
  bottom:auto!important;
  left:50%!important;
  right:auto!important;
  width:min(378px,calc(100% - 10px))!important;
  height:min(760px,calc(100dvh - 18px))!important;
  transform:translateX(-50%)!important;
}

#menuCompanionPanel.active{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  display:grid!important;
  grid-template-rows:auto auto auto minmax(0,1fr)!important;
  align-content:stretch!important;
  gap:7px!important;
  box-sizing:border-box!important;
  padding:12px 10px max(13px,env(safe-area-inset-bottom))!important;
  overflow:hidden!important;
  border:12px solid transparent!important;
  border-image:url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") 120 fill / 12px stretch!important;
  background:radial-gradient(circle at 50% 17%,rgba(35,120,154,.15),transparent 40%),linear-gradient(180deg,rgba(3,14,25,.98),rgba(2,7,15,.99))!important;
}

#menuCompanionPanel>.menu-panel-head{
  min-height:48px!important;
}

#menuCompanionPanel>.menu-panel-head>strong{
  color:#fff0ad!important;
  font-size:17px!important;
  letter-spacing:-.02em!important;
}

#menuCompanionPanel .companion-currency-bar{
  height:42px!important;
  min-height:42px!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
}

#menuCompanionPanel .companion-currency-bar span{
  min-width:0!important;
  min-height:42px!important;
  grid-template-columns:24px minmax(0,1fr)!important;
  padding:4px 5px 4px 4px!important;
}

#menuCompanionPanel .companion-currency-bar img{
  width:21px!important;
  height:21px!important;
}

#menuCompanionPanel .companion-currency-bar em{
  font-size:7px!important;
}

#menuCompanionPanel .companion-currency-bar b{
  margin-top:2px!important;
  font-size:11px!important;
}

#menuCompanionPanel .companion-menu-tabs{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  height:39px!important;
  min-height:39px!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:4px!important;
  margin:0!important;
}

#menuCompanionPanel .companion-menu-tabs button,
#menuCompanionPanel .companion-menu-tabs button:not(.active),
#menuCompanionPanel .companion-menu-tabs button.active{
  width:100%!important;
  height:39px!important;
  min-height:39px!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0 10px 1px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:url("assets/generated/companion_ui_v6/companion-tab-inactive.png") center/100% 100% no-repeat!important;
  color:#b8cad7!important;
  font-size:10.5px!important;
  line-height:1!important;
  text-shadow:0 2px 2px #000!important;
  box-shadow:none!important;
  filter:none!important;
}

#menuCompanionPanel .companion-menu-tabs button.active{
  background-image:url("assets/generated/companion_ui_v6/companion-tab-active.png")!important;
  color:#fff1aa!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7)) brightness(1.06)!important;
}

#menuCompanionPanel .companion-menu-tabs button:focus-visible{
  filter:drop-shadow(0 0 5px rgba(255,221,116,.52)) brightness(1.08)!important;
}

#menuCompanionPanel .companion-tab-view{
  position:static!important;
  inset:auto!important;
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
  padding:2px 2px 16px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:#3a83a7 rgba(3,12,22,.7)!important;
}

#menuCompanionPanel .companion-summon-cards{
  width:100%!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start!important;
  gap:8px!important;
}

#menuCompanionPanel .companion-summon-card,
#menuCompanionPanel .companion-summon-card.premium{
  min-width:0!important;
  min-height:338px!important;
  height:338px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  box-sizing:border-box!important;
  padding:34px 17px 22px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  background:url("assets/generated/companion_ui_v6/companion-card-common.png") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.48))!important;
}

#menuCompanionPanel .companion-summon-card.premium{
  background-image:url("assets/generated/companion_ui_v6/companion-card-premium.png")!important;
}

#menuCompanionPanel .companion-summon-art{
  width:66px!important;
  height:66px!important;
  flex:0 0 66px!important;
  align-self:center!important;
  margin:1px 0 3px!important;
  object-fit:contain!important;
  border-radius:0!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(71,207,246,.3))!important;
}

#menuCompanionPanel .companion-summon-art.premium-star{
  width:68px!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.65)) drop-shadow(0 0 8px rgba(178,90,238,.35))!important;
}

#menuCompanionPanel .companion-summon-card>strong{
  min-height:18px!important;
  color:#fff1ad!important;
  font-size:14px!important;
  line-height:1.15!important;
  text-align:center!important;
}

#menuCompanionPanel .companion-summon-card>p{
  min-height:30px!important;
  display:grid!important;
  place-content:center!important;
  margin:4px 0 1px!important;
  color:#d8e8f2!important;
  font-size:8.5px!important;
  line-height:1.35!important;
  text-align:center!important;
}

#menuCompanionPanel .companion-summon-card>small{
  min-height:20px!important;
  display:grid!important;
  place-items:center!important;
  color:#92b2c5!important;
  font-size:7.2px!important;
  line-height:1.25!important;
  text-align:center!important;
}

#menuCompanionPanel .companion-summon-card>div{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:4px!important;
  margin-top:auto!important;
}

#menuCompanionPanel .companion-summon-card button,
#menuCompanionPanel .companion-summon-card .summon-store-link{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:36px!important;
  min-height:36px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0 4px 1px!important;
  border-style:solid!important;
  border-color:transparent!important;
  border-width:8px 13px!important;
  border-image-slice:74 270 fill!important;
  border-image-width:8px 13px!important;
  border-image-repeat:stretch!important;
  border-radius:0!important;
  background:none!important;
  color:#fff7d4!important;
  font-size:8.2px!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-shadow:0 2px 2px #000!important;
  box-shadow:none!important;
  filter:none!important;
}

#menuCompanionPanel .companion-summon-card.common button{
  border-image-source:url("assets/generated/companion_summon_controls_v4/summon-common-button.png")!important;
}

#menuCompanionPanel .companion-summon-card.premium button{
  border-image-source:url("assets/generated/companion_summon_controls_v4/summon-premium-button.png")!important;
}

#menuCompanionPanel .companion-summon-card.premium button.summon-store-link{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  height:34px!important;
  min-height:34px!important;
  margin-top:4px!important;
  border-image-source:url("assets/generated/companion_summon_controls_v4/summon-store-button.png")!important;
  color:#fff0ad!important;
}

#menuCompanionPanel .companion-summon-card button::after{
  display:none!important;
}

#menuCompanionPanel .companion-summon-notice{
  min-height:34px!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  margin:8px 5px 6px!important;
  padding:4px 18px!important;
  background:url("assets/generated/companion_ui_v6/companion-tab-inactive.png") center/100% 100% no-repeat!important;
  color:#b7cedb!important;
  font-size:8.5px!important;
  line-height:1.25!important;
  text-align:center!important;
}

#menuCompanionPanel .companion-summon-results{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}

#menuCompanionPanel .summon-result{
  min-height:68px!important;
  padding:8px 12px!important;
}

#menuCompanionPanel .companion-collection-summary{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  min-height:38px!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  margin:0 2px 7px!important;
  padding:5px 22px!important;
  background:url("assets/generated/companion_ui_v6/companion-tab-inactive.png") center/100% 100% no-repeat,#071421!important;
  color:#d7e9f2!important;
  font-size:9px!important;
  line-height:1.2!important;
  text-align:center!important;
}

#menuCompanionPanel .companion-collection-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  padding:0 1px 14px!important;
}

#menuCompanionPanel .companion-collection-card{
  position:relative!important;
  min-width:0!important;
  min-height:82px!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) 46px!important;
  align-items:center!important;
  gap:7px!important;
  box-sizing:border-box!important;
  padding:9px 14px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center/100% 100% no-repeat!important;
  color:#e8f5fa!important;
  box-shadow:none!important;
  filter:none!important;
}

#menuCompanionPanel .companion-collection-card>img{
  width:60px!important;
  height:60px!important;
  border-radius:0!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.55))!important;
}

#menuCompanionPanel .companion-collection-card>span{
  min-width:0!important;
  display:grid!important;
  gap:3px!important;
}

#menuCompanionPanel .companion-collection-card strong{
  overflow:hidden!important;
  color:#fff0ad!important;
  font-size:12px!important;
  line-height:1.1!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#menuCompanionPanel .companion-collection-card small{
  color:#91cfe3!important;
  font-size:8px!important;
  line-height:1!important;
}

#menuCompanionPanel .companion-collection-card em{
  display:-webkit-box!important;
  overflow:hidden!important;
  color:#c7dce6!important;
  font-size:8.5px!important;
  font-style:normal!important;
  line-height:1.3!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

#menuCompanionPanel .companion-collection-card>b{
  justify-self:end!important;
  min-width:38px!important;
  min-height:20px!important;
  display:grid!important;
  place-items:center!important;
  padding:2px 5px!important;
  background:url("assets/generated/ui/tab-button.png") center/100% 100% no-repeat!important;
  color:#a8dced!important;
  font-size:8px!important;
  line-height:1!important;
}

#menuCompanionPanel .companion-collection-card.owned{
  filter:brightness(1.08) drop-shadow(0 3px 4px rgba(0,0,0,.38))!important;
}

#menuCompanionPanel .companion-collection-card.active{
  filter:brightness(1.14) drop-shadow(0 0 7px rgba(255,214,103,.34))!important;
}

#menuCompanionPanel .companion-collection-card.active>b{
  color:#fff0a8!important;
}

#menuCompanionPanel .companion-collection-card.locked{
  opacity:.82!important;
  filter:saturate(.34) brightness(.82)!important;
}

#menuCompanionPanel .companion-collection-card.locked>img{
  filter:grayscale(.68) brightness(.7) drop-shadow(0 4px 4px rgba(0,0,0,.55))!important;
}

#menuCompanionPanel .companion-party-view.active{
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  align-content:stretch!important;
  gap:7px!important;
}

#menuCompanionPanel .companion-party-slot{
  min-height:104px!important;
  grid-template-columns:76px minmax(0,1fr) auto!important;
  gap:9px!important;
  padding:12px 16px!important;
}

#menuCompanionPanel .companion-party-slot>img{
  width:70px!important;
  height:70px!important;
}

#menuCompanionPanel .companion-party-slot>.companion-party-empty-icon{
  opacity:.52!important;
  filter:grayscale(.38) drop-shadow(0 0 8px rgba(86,204,242,.22))!important;
}

#menuCompanionPanel .companion-party-empty{
  grid-column:2!important;
  place-content:center start!important;
  min-height:0!important;
  text-align:left!important;
}

#menuCompanionPanel .companion-party-slot strong{
  font-size:13px!important;
}

#menuCompanionPanel .companion-party-slot em{
  font-size:8.5px!important;
}

#menuCompanionPanel .companion-party-note{
  min-height:34px!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  margin:0 2px!important;
  padding:5px 18px!important;
  background:url("assets/generated/companion_ui_v6/companion-tab-inactive.png") center/100% 100% no-repeat!important;
  color:#b6ccd8!important;
  font-size:8.5px!important;
  line-height:1.25!important;
}

#menuCompanionPanel .companion-party-list{
  min-height:0!important;
  align-content:start!important;
  gap:7px!important;
  padding:0 1px 16px!important;
  overflow-y:auto!important;
}

#menuCompanionPanel .companion-party-card{
  min-height:82px!important;
  grid-template-columns:62px minmax(0,1fr) 48px!important;
  padding:9px 14px!important;
}

#menuCompanionPanel .companion-party-card>img{
  width:58px!important;
  height:58px!important;
}

#menuCompanionPanel .companion-party-card strong{
  font-size:12px!important;
}

#menuCompanionPanel .companion-party-card small,
#menuCompanionPanel .companion-party-card em{
  font-size:8.3px!important;
}

#menuCompanionPanel .companion-party-card>b{
  min-width:42px!important;
  min-height:22px!important;
  display:grid!important;
  place-items:center!important;
  background:url("assets/generated/ui/tab-button.png") center/100% 100% no-repeat!important;
  color:#a9deef!important;
  font-size:8.5px!important;
}

#menuCompanionPanel .companion-party-card.active>b{
  color:#fff0a8!important;
}

@media(max-width:370px){
  .main-menu[data-panel="companions"] .menu-card{
    width:calc(100% - 6px)!important;
    height:calc(100dvh - 12px)!important;
  }

  #menuCompanionPanel.active{
    gap:5px!important;
    padding:9px 7px 11px!important;
    border-width:10px!important;
    border-image-width:10px!important;
  }

  #menuCompanionPanel .companion-currency-bar{
    height:38px!important;
    min-height:38px!important;
  }

  #menuCompanionPanel .companion-currency-bar span{
    min-height:38px!important;
    grid-template-columns:20px minmax(0,1fr)!important;
    padding-inline:3px!important;
  }

  #menuCompanionPanel .companion-currency-bar img{
    width:18px!important;
    height:18px!important;
  }

  #menuCompanionPanel .companion-currency-bar em{font-size:6.4px!important}
  #menuCompanionPanel .companion-currency-bar b{font-size:10px!important}

  #menuCompanionPanel .companion-summon-cards{gap:5px!important}

  #menuCompanionPanel .companion-summon-card,
  #menuCompanionPanel .companion-summon-card.premium{
    min-height:322px!important;
    height:322px!important;
    padding:31px 13px 20px!important;
  }

  #menuCompanionPanel .companion-summon-art{
    width:58px!important;
    height:58px!important;
    flex-basis:58px!important;
  }

  #menuCompanionPanel .companion-summon-art.premium-star{width:60px!important}
  #menuCompanionPanel .companion-summon-card>strong{font-size:13px!important}
  #menuCompanionPanel .companion-summon-card>p{font-size:7.8px!important}
  #menuCompanionPanel .companion-summon-card>small{font-size:6.7px!important}
  #menuCompanionPanel .companion-summon-card button,
  #menuCompanionPanel .companion-summon-card .summon-store-link{font-size:7.5px!important}

  #menuCompanionPanel .companion-collection-card{
    grid-template-columns:58px minmax(0,1fr) 42px!important;
    min-height:78px!important;
    padding:8px 11px!important;
  }

  #menuCompanionPanel .companion-collection-card>img{
    width:54px!important;
    height:54px!important;
  }

  #menuCompanionPanel .companion-party-slot{
    grid-template-columns:66px minmax(0,1fr) auto!important;
    padding:10px 12px!important;
  }

  #menuCompanionPanel .companion-party-slot>img{
    width:62px!important;
    height:62px!important;
  }
}

@media(max-height:700px){
  .main-menu[data-panel="companions"] .menu-card{
    height:calc(100dvh - 12px)!important;
  }

  #menuCompanionPanel .companion-summon-card,
  #menuCompanionPanel .companion-summon-card.premium{
    min-height:304px!important;
    height:304px!important;
    padding-top:28px!important;
    padding-bottom:18px!important;
  }

  #menuCompanionPanel .companion-summon-art{
    width:52px!important;
    height:52px!important;
    flex-basis:52px!important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-redesign-v2.css */
/* Companion summon screen — painted-background optical alignment pass.
   Coordinates below follow the visible wells in companion-menu-plate-v2.png,
   not the legacy DOM rectangles. */

.main-menu[data-panel="companions"] .menu-card {
  top: max(4px, env(safe-area-inset-top)) !important;
  width: min(390px, 100%) !important;
  height: min(804px, calc(100dvh - 8px)) !important;
}

body #menuCompanionPanel.active {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #020711 url("assets/generated/companion_summon_redesign_1791901200100/companion-menu-plate-v2.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

/* The companion plate already paints this header. Keep only the live title and
   the full left bay as its back hit target. */
body #menuCompanionPanel.menu-panel > .menu-panel-head {
  --menu-integrated-divider: 16.5%;
  position: absolute !important;
  top: 4.45% !important;
  right: 9.1% !important;
  left: 9.1% !important;
  z-index: 8 !important;
  width: auto !important;
  height: 6.25% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: var(--menu-integrated-divider) minmax(0, 1fr) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  filter: none !important;
}

body #menuCompanionPanel.menu-panel > .menu-panel-head > .menu-back-button {
  padding: 1px 8% 0 0 !important;
  font-size: clamp(10px, 2.9vw, 12px) !important;
}

body #menuCompanionPanel.menu-panel > .menu-panel-head > strong {
  padding: 1px 3% 0 0 !important;
  font-size: clamp(17px, 5vw, 20px) !important;
}

body #menuCompanionPanel .companion-onboarding-guide {
  position: absolute !important;
  top: 26.9% !important;
  right: 8.3% !important;
  left: 8.3% !important;
  z-index: 15 !important;
  margin: 0 !important;
}

body #menuCompanionPanel .companion-currency-bar {
  position: absolute !important;
  top: 13.35% !important;
  right: 11.75% !important;
  left: 11.75% !important;
  z-index: 6 !important;
  width: auto !important;
  height: 4.85% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.8% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

body #menuCompanionPanel .companion-currency-bar > span {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  align-items: center !important;
  column-gap: 2px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 4px 6px 4px 7px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body #menuCompanionPanel .companion-currency-bar > span + span {
  border: 0 !important;
}

body #menuCompanionPanel .companion-currency-bar img {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  place-self: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 2px #000) !important;
}

body #menuCompanionPanel .companion-currency-bar em,
body #menuCompanionPanel .companion-currency-bar b {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-self: end !important;
  color: #c7dce8 !important;
  font-size: clamp(6.7px, 1.85vw, 7.5px) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-currency-bar b {
  align-self: start !important;
  padding-top: 2px !important;
  color: #fff0a2 !important;
  font-size: clamp(10px, 2.9vw, 12px) !important;
}

body #menuCompanionPanel .companion-menu-tabs {
  position: absolute !important;
  top: 20.55% !important;
  right: 7.9% !important;
  left: 7.9% !important;
  z-index: 6 !important;
  width: auto !important;
  height: 4.85% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.9% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

body #menuCompanionPanel .companion-menu-tabs button,
body #menuCompanionPanel .companion-menu-tabs button:not(.active),
body #menuCompanionPanel .companion-menu-tabs button.active {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 1px 4px 0 !important;
  border: 0 !important;
  background: none !important;
  color: #9fb7c6 !important;
  font-size: clamp(9.5px, 2.75vw, 11px) !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-menu-tabs button.active {
  color: #fff0a8 !important;
  text-shadow: 0 2px 2px #000, 0 0 8px rgba(83, 187, 255, .62) !important;
}

body #menuCompanionPanel .companion-tab-view {
  position: absolute !important;
  top: 27.45% !important;
  right: 7.8% !important;
  bottom: 9.5% !important;
  left: 7.8% !important;
  z-index: 5 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 8px 6px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: none !important;
}

body #menuCompanionPanel #companionSummonView.active {
  display: block !important;
}

body #menuCompanionPanel .companion-summon-cards {
  width: 100% !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 6px !important;
}

body #menuCompanionPanel .companion-summon-card,
body #menuCompanionPanel .companion-summon-card.premium {
  min-width: 0 !important;
  min-height: 340px !important;
  height: 340px !important;
  padding: 27px 15px 19px !important;
  overflow: hidden !important;
  background: url("assets/generated/companion_ui_v6/companion-card-common.png") center / 100% 100% no-repeat !important;
}

body #menuCompanionPanel .companion-summon-card.premium {
  background-image: url("assets/generated/companion_ui_v6/companion-card-premium.png") !important;
}

body #menuCompanionPanel .companion-summon-art,
body #menuCompanionPanel .companion-summon-art.premium-star {
  width: 136px !important;
  max-width: 100% !important;
  height: 102px !important;
  flex: 0 0 102px !important;
  align-self: center !important;
  margin: 0 0 1px !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  background: none !important;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .62)) !important;
}

body #menuCompanionPanel .companion-summon-card > strong {
  min-height: 18px !important;
  margin: 0 !important;
  color: #fff0a8 !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-summon-card > p {
  min-height: 28px !important;
  margin: 3px -3px 0 !important;
  place-content: center !important;
  color: #d3e5ee !important;
  font-size: 8px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-summon-card > small {
  min-height: 21px !important;
  margin: 0 -5px !important;
  color: #91b5c7 !important;
  font-size: 7px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-summon-card > div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  margin-top: auto !important;
}

body #menuCompanionPanel .companion-summon-card button,
body #menuCompanionPanel .companion-summon-card .summon-store-link,
body #menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  place-content: center !important;
  gap: 2px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 3px 10px 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/companion_summon_controls_v4/summon-common-button.png") center / 100% 100% no-repeat !important;
  color: #f4fbff !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)) !important;
}

body #menuCompanionPanel .companion-summon-card.premium button {
  background-image: url("assets/generated/companion_summon_controls_v4/summon-premium-button.png") !important;
}

body #menuCompanionPanel .companion-summon-card button > b,
body #menuCompanionPanel .companion-summon-card .summon-store-link > b {
  color: #fff4c8 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-summon-card button > small {
  color: #b7d3df !important;
  font-size: 6.7px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
  height: 32px !important;
  min-height: 32px !important;
  margin-top: 3px !important;
  background-image: url("assets/generated/companion_summon_controls_v4/summon-store-button.png") !important;
}

body #menuCompanionPanel .companion-summon-card button::after,
body #menuCompanionPanel .companion-summon-card .summon-store-link::after {
  content: none !important;
  display: none !important;
}

body #menuCompanionPanel .companion-summon-notice {
  position: relative !important;
  min-height: 38px !important;
  margin: 86px 4.5% 5px !important;
  padding: 5px 18px !important;
  background: none !important;
  color: #b9ced9 !important;
  font-size: 8px !important;
  line-height: 1.25 !important;
}

body #menuCompanionPanel .companion-summon-results {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .main-menu[data-panel="companions"] .menu-card {
    height: calc(100dvh - 6px) !important;
  }

  body #menuCompanionPanel .companion-currency-bar > span {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    padding-inline: 5px !important;
  }

  body #menuCompanionPanel .companion-currency-bar img {
    width: 19px !important;
    height: 19px !important;
  }

  body #menuCompanionPanel .companion-summon-card,
  body #menuCompanionPanel .companion-summon-card.premium {
    min-height: 320px !important;
    height: 320px !important;
    padding: 25px 12px 17px !important;
  }

  body #menuCompanionPanel .companion-summon-art,
  body #menuCompanionPanel .companion-summon-art.premium-star {
    width: 120px !important;
    height: 92px !important;
    flex-basis: 92px !important;
  }

  body #menuCompanionPanel .companion-summon-card > strong { font-size: 12px !important; }
  body #menuCompanionPanel .companion-summon-card button > b { font-size: 9px !important; }
  body #menuCompanionPanel .companion-summon-card button > small { font-size: 6.2px !important; }
}


/* SOURCE: ui/styles/companions/growth-companion-controls-v3.css */
/* Premium summon controls and abyss-growth cards.
   These final-precedence rules use purpose-built painted assets instead of
   stretching unrelated bag/button art. */

body #menuCompanionPanel .companion-summon-card.common button {
  height: 39px !important;
  min-height: 39px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-content: center !important;
  place-items: center !important;
  gap: 1px !important;
  padding: 5px 12px 6px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/companion_summon_controls_v4/summon-common-button.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: brightness(1.08) saturate(1.04) drop-shadow(0 2px 2px rgba(0, 0, 0, .66)) !important;
}

body #menuCompanionPanel .companion-summon-card.common button:hover,
body #menuCompanionPanel .companion-summon-card.common button:focus-visible {
  filter: brightness(1.18) saturate(1.08) drop-shadow(0 0 5px rgba(63, 202, 246, .42)) !important;
}

body #menuCompanionPanel .companion-summon-card.common button:active {
  filter: brightness(.95) saturate(.94) !important;
  transform: translateY(1px) !important;
}

body #menuCompanionPanel .companion-summon-card.common button > b,
body #menuCompanionPanel .companion-summon-card.common button > small {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-summon-card.common button > b {
  color: #f2fbff !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(69, 196, 240, .32) !important;
}

body #menuCompanionPanel .companion-summon-card.common button > small {
  color: #b9dce7 !important;
  font-size: 6.8px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-summon-card.premium > div {
  gap: 4px !important;
}

body #menuCompanionPanel .companion-summon-card.premium button,
body #menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
  height: 39px !important;
  min-height: 39px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-content: center !important;
  place-items: center !important;
  gap: 1px !important;
  padding: 5px 12px 6px !important;
  overflow: hidden !important;
  background: transparent url("assets/generated/growth_companion_controls_v2_1792936800200/premium-button-v2.png") center / 100% 100% no-repeat !important;
  filter: brightness(1.04) saturate(.96) drop-shadow(0 2px 2px rgba(0, 0, 0, .66)) !important;
}

body #menuCompanionPanel .companion-summon-card.premium button:hover,
body #menuCompanionPanel .companion-summon-card.premium button:focus-visible {
  filter: brightness(1.14) saturate(1.04) drop-shadow(0 0 5px rgba(151, 93, 235, .42)) !important;
}

body #menuCompanionPanel .companion-summon-card.premium button:active {
  filter: brightness(.94) saturate(.92) !important;
  transform: translateY(1px) !important;
}

body #menuCompanionPanel .companion-summon-card.premium button > b,
body #menuCompanionPanel .companion-summon-card.premium button.summon-store-link > b {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: #fff1b8 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  transform: none !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(160, 96, 233, .3) !important;
}

body #menuCompanionPanel .companion-summon-card.premium button > small {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: #c6bddb !important;
  font-size: 6.8px !important;
  line-height: 1 !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  filter: brightness(.82) saturate(.82) drop-shadow(0 2px 2px rgba(0, 0, 0, .66)) !important;
}

body #menuCompanionPanel .companion-summon-card.premium button.summon-store-link > b {
  color: #e6d8b4 !important;
  font-size: 9.2px !important;
}

/* Growth rows use one complete painted card with a real integrated cost bay. */
body #menuGrowthPanel .meta-upgrade-list,
body #menuGrowthPanel .meta-activation-list {
  gap: 7px !important;
  width: 100% !important;
  transform: translateX(4px) !important;
}

body #menuGrowthPanel .meta-upgrade-card,
body #menuGrowthPanel .meta-activation-card {
  position: relative !important;
  width: 100% !important;
  min-height: 70px !important;
  height: 70px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 11px 18px 12px 20px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/growth_companion_controls_v2_1792936800200/growth-upgrade-card-v2.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: brightness(.94) saturate(.88) drop-shadow(0 3px 4px rgba(0, 0, 0, .45)) !important;
}

body #menuGrowthPanel .meta-upgrade-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 71px !important;
  align-items: center !important;
  gap: 10px !important;
}

body #menuGrowthPanel .meta-upgrade-card.affordable {
  border: 0 !important;
  background-image: url("assets/generated/growth_companion_controls_v2_1792936800200/growth-upgrade-card-v2.png") !important;
  filter: brightness(1.07) saturate(1.02) drop-shadow(0 0 5px rgba(224, 174, 63, .18)) !important;
}

body #menuGrowthPanel .meta-upgrade-card.needs-shards,
body #menuGrowthPanel .meta-activation-card:disabled {
  opacity: .66 !important;
  filter: grayscale(.28) brightness(.72) saturate(.56) !important;
}

body #menuGrowthPanel .meta-upgrade-card > span,
body #menuGrowthPanel .meta-activation-card > span {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  padding-left: 2px !important;
}

/* The painted row's left spearhead occupies more space than the old content
   inset. Keep the two upgrade labels clear of that ornament. */
body #menuGrowthPanel .meta-upgrade-card > span {
  padding-left: 18px !important;
}

body #menuGrowthPanel .meta-upgrade-card strong,
body #menuGrowthPanel .meta-activation-card strong {
  color: #f7e8ad !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 2px #000 !important;
}

body #menuGrowthPanel .meta-upgrade-card > span small,
body #menuGrowthPanel .meta-activation-card > span small {
  overflow: hidden !important;
  color: #a9c0cb !important;
  font-size: 8.2px !important;
  line-height: 1.22 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #menuGrowthPanel .meta-upgrade-card > em {
  min-width: 0 !important;
  min-height: 42px !important;
  display: grid !important;
  place-content: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 1px 1px !important;
  border: 0 !important;
  background: none !important;
  color: #ffe37d !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
}

body #menuGrowthPanel .meta-upgrade-card > em small {
  color: #9fb4bf !important;
  font-size: 7px !important;
  font-weight: 900 !important;
}

body #menuGrowthPanel .meta-upgrade-card.needs-shards > em {
  color: #c0bdaf !important;
}

body #menuGrowthPanel .meta-activation-card {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 71px !important;
  align-items: center !important;
  gap: 8px !important;
}

body #menuGrowthPanel .meta-activation-card img {
  width: 38px !important;
  height: 38px !important;
  place-self: center !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55)) !important;
}

body #menuGrowthPanel .meta-activation-card em {
  min-width: 0 !important;
  color: #ffe37d !important;
  font-size: 8.5px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
  text-shadow: 0 2px 2px #000 !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body #menuCompanionPanel .companion-summon-card.common button,
  body #menuCompanionPanel .companion-summon-card.premium button,
  body #menuCompanionPanel .companion-summon-card.premium button.summon-store-link {
    height: 36px !important;
    min-height: 36px !important;
  }

  body #menuGrowthPanel .meta-upgrade-list,
  body #menuGrowthPanel .meta-activation-list {
    gap: 6px !important;
  }

  body #menuGrowthPanel .meta-upgrade-card,
  body #menuGrowthPanel .meta-activation-card {
    min-height: 66px !important;
    height: 66px !important;
    padding: 9px 15px 10px 17px !important;
  }

  body #menuGrowthPanel .meta-upgrade-card {
    grid-template-columns: minmax(0, 1fr) 66px !important;
    gap: 8px !important;
  }

  body #menuGrowthPanel .meta-upgrade-card strong,
  body #menuGrowthPanel .meta-activation-card strong {
    font-size: 10.5px !important;
  }

  body #menuGrowthPanel .meta-upgrade-card > span small,
  body #menuGrowthPanel .meta-activation-card > span small {
    font-size: 7.5px !important;
  }
}


/* SOURCE: ui/styles/shared/visual-alignment-pass-v1.css */
/* Final optical alignment pass measured against the painted mobile artwork. */

/* Codex records open as a centered information window, not a top-pinned sheet. */
#menuCodexPanel .codex-item-detail {
  top: 50% !important;
  width: min(360px, calc(100vw - 18px)) !important;
  height: min(700px, calc(100dvh - 24px)) !important;
  max-height: min(700px, calc(100dvh - 24px)) !important;
  transform: translate(-50%, -50%) !important;
}

/*
 * The bottom passive row already sits correctly in its painted bay. Move only
 * the automatic reward and the first two choice-copy groups down by 3px so
 * their grade lines share the same optical height; keep icons and row art fixed.
 */
.board-passive-choice-card > .board-clear-supply-preview > span {
  transform: translate(12px, 0) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(1)[data-effect-lines="3"] > span,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(2)[data-effect-lines="3"] > span {
  transform: translate(13px, 2px) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(1):not([data-effect-lines="3"]) > span {
  transform: translate(13px, -2px) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(2):not([data-effect-lines="3"]) > span {
  transform: translate(13px, -3px) !important;
}

/* Keep the added stacking condition inside each painted choice bay. The font,
 * title, icon and independent row anchors stay as authored. */
#boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice:is(
  [data-board-passive-choice="runeSpark"],
  [data-board-passive-choice="starFurnace"],
  [data-board-passive-choice="ruinClock"],
  [data-board-passive-choice="kingsBadge"],
  [data-board-passive-choice="predestinationCrown"]
) > span > em {
  line-height: 12px !important;
}

@media (max-width: 370px), (max-height: 700px) {
  #menuCodexPanel .codex-item-detail {
    width: calc(100vw - 14px) !important;
    height: min(680px, calc(100dvh - 18px)) !important;
    max-height: min(680px, calc(100dvh - 18px)) !important;
  }
}


/* SOURCE: ui/styles/menus/codex-detail-raster-v1.css */
/* Drawn codex record window. The bitmap owns the frame and information wells;
   CSS below only places live copy inside the painted safe areas. */

#menuCodexPanel .codex-item-detail {
  top: 50% !important;
  width: min(360px, calc(100vw - 18px)) !important;
  height: min(700px, calc(100dvh - 24px)) !important;
  max-height: min(700px, calc(100dvh - 24px)) !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/codex_detail_frame_v1_1792939500000/codex-detail-frame-v1-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: 0 0 0 999px rgba(0, 4, 10, .9), 0 18px 42px rgba(0, 0, 0, .76) !important;
  filter: none !important;
}

#menuCodexPanel .codex-item-detail[hidden] {
  display: none !important;
}

#menuCodexPanel .codex-item-detail::before,
#menuCodexPanel .codex-item-detail::after {
  content: none !important;
  display: none !important;
}

#menuCodexPanel .codex-detail-titlebar {
  position: absolute !important;
  z-index: 4 !important;
  left: 18.5% !important;
  right: 13% !important;
  top: 9.6% !important;
  height: 7.6% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  clip-path: none !important;
}

#menuCodexPanel .codex-detail-titlebar > span {
  color: #8fdaf1 !important;
  font-size: 8.5px !important;
  font-weight: 950 !important;
  text-align: left !important;
  text-shadow: 0 2px 3px #000 !important;
}

#menuCodexPanel .codex-detail-titlebar > strong {
  color: #fff0ad !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 4px #000, 0 0 8px rgba(117, 74, 255, .28) !important;
}

#menuCodexPanel .codex-detail-close {
  position: absolute !important;
  right: -36px !important;
  top: -18px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: none !important;
  color: #e9f6ff !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  text-shadow: 0 2px 3px #000 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

#menuCodexPanel .codex-detail-scroll {
  position: absolute !important;
  z-index: 3 !important;
  left: 9.7% !important;
  right: 8.2% !important;
  top: 18.45% !important;
  bottom: 6.8% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 112px minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  padding: 0 5px 15px !important;
  overflow: hidden !important;
}

#menuCodexPanel .codex-detail-record-body {
  min-height: 0 !important;
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  padding: 0 0 15px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(75, 183, 226, .55) transparent !important;
}

#menuCodexPanel .codex-detail-hero {
  height: 112px !important;
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 11px !important;
  box-sizing: border-box !important;
  padding: 7px 12px 7px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-detail-art {
  width: 84px !important;
  height: 84px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-detail-art img,
#menuCodexPanel .codex-boss-hero .codex-detail-art img {
  width: 74px !important;
  height: 74px !important;
  padding: 0 !important;
  filter: drop-shadow(0 0 8px rgba(107, 215, 255, .28)) drop-shadow(0 5px 4px rgba(0, 0, 0, .6)) !important;
}

#menuCodexPanel .codex-detail-art b {
  right: 1px !important;
  bottom: 1px !important;
  min-width: 28px !important;
  padding: 2px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(2, 12, 20, .88) !important;
  box-shadow: inset 0 0 0 1px rgba(228, 187, 82, .38) !important;
}

#menuCodexPanel .codex-detail-identity {
  gap: 5px !important;
  padding-right: 4px !important;
}

#menuCodexPanel .codex-detail-identity > strong {
  font-size: 19px !important;
}

#menuCodexPanel .codex-detail-identity > div span {
  padding: 2px 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: inset 0 -1px 0 rgba(97, 191, 228, .3) !important;
}

#menuCodexPanel .codex-detail-section,
#menuCodexPanel .codex-detail-relations,
#menuCodexPanel .codex-detail-unlock {
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-detail-section {
  gap: 6px !important;
  padding: 7px 12px 9px !important;
  overflow: visible !important;
}

#menuCodexPanel .codex-detail-section + .codex-detail-section,
#menuCodexPanel .codex-detail-section + .codex-detail-relations,
#menuCodexPanel .codex-detail-relations + .codex-detail-unlock {
  border-top: 1px solid rgba(179, 133, 44, .34) !important;
}

#menuCodexPanel .codex-detail-section-head {
  min-height: 21px !important;
  padding: 0 1px 4px !important;
  border: 0 !important;
  background: none !important;
}

#menuCodexPanel .codex-detail-section-head > span {
  color: #ffeaa5 !important;
}

#menuCodexPanel .codex-detail-stat-grid {
  gap: 0 !important;
}

#menuCodexPanel .codex-detail-stat {
  min-height: 49px !important;
  gap: 3px !important;
  padding: 5px 4px !important;
  border: 0 !important;
  border-left: 1px solid rgba(83, 167, 202, .22) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-detail-stat:nth-child(3n + 1) {
  border-left: 0 !important;
}

#menuCodexPanel .codex-detail-stat strong {
  color: #ffe99a !important;
  font-size: 14px !important;
}

#menuCodexPanel .codex-detail-ability {
  gap: 8px !important;
  padding: 5px 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-detail-ability > img {
  border-color: rgba(232, 190, 83, .36) !important;
  border-radius: 2px !important;
  background: rgba(0, 7, 13, .58) !important;
}

#menuCodexPanel .codex-detail-traits {
  gap: 0 !important;
  border-top: 1px solid rgba(83, 167, 202, .18) !important;
}

#menuCodexPanel .codex-detail-traits > span {
  padding: 6px 7px !important;
  border: 0 !important;
  border-left: 1px solid rgba(83, 167, 202, .18) !important;
  border-radius: 0 !important;
  background: none !important;
}

#menuCodexPanel .codex-detail-traits > span:first-child {
  border-left: 0 !important;
}

#menuCodexPanel .codex-detail-relations {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 8px 12px !important;
}

#menuCodexPanel .codex-detail-relations > div,
#menuCodexPanel .codex-detail-relations > div.recipe {
  min-height: 72px !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-left: 1px solid rgba(94, 178, 211, .2) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-detail-relations > div:first-child {
  border-left: 0 !important;
}

#menuCodexPanel .item-secret-recipe-hint {
  width: 100% !important;
  min-width: 0 !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  padding: 7px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(94, 178, 211, .2) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .secret-recipe-hint-track {
  gap: 2px !important;
}

#menuCodexPanel .secret-recipe-hint-node,
#menuCodexPanel .secret-recipe-hint-node.current,
#menuCodexPanel .secret-recipe-hint-node.unknown {
  min-height: 40px !important;
  padding: 3px 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .secret-recipe-hint-node i {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-detail-unlock {
  min-height: 38px !important;
  padding: 7px 12px !important;
}

#menuCodexPanel .codex-boss-detail-skills {
  gap: 0 !important;
}

#menuCodexPanel .codex-boss-detail-skills > div {
  padding: 8px 3px !important;
  border: 0 !important;
  border-top: 1px solid rgba(86, 171, 205, .18) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-boss-detail-skills > div:first-child {
  border-top: 0 !important;
}

#menuCodexPanel .codex-boss-detail-skills span {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: inset 0 0 0 1px rgba(229, 186, 78, .3) !important;
}

/* One optical baseline for the automatic reward and every passive choice row. */
.board-passive-choice-card > .board-clear-supply-preview > span {
  height: 72px !important;
  transform: translate(12px, 2px) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-quality] > span,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-effect-lines="3"] > span,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(1) > span,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(2) > span,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(3) > span {
  transform: translate(13px, 2px) !important;
}

@media (max-width: 370px), (max-height: 700px) {
  #menuCodexPanel .codex-item-detail {
    width: calc(100vw - 14px) !important;
    height: min(672px, calc(100dvh - 18px)) !important;
    max-height: min(672px, calc(100dvh - 18px)) !important;
  }

  #menuCodexPanel .codex-detail-hero {
    height: 108px !important;
    min-height: 108px !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    padding-left: 18px !important;
  }

  #menuCodexPanel .codex-detail-scroll {
    grid-template-rows: 108px minmax(0, 1fr) !important;
  }

  #menuCodexPanel .codex-detail-art {
    width: 80px !important;
    height: 80px !important;
  }

  #menuCodexPanel .codex-detail-art img,
  #menuCodexPanel .codex-boss-hero .codex-detail-art img {
    width: 70px !important;
    height: 70px !important;
  }
}


/* SOURCE: ui/styles/combat/reward-skill-integration-v1.css */
/* Reward title and ready-skill integration 1793023200107.
   These final-precedence rules use dedicated painted controls so the two
   states read as part of the surrounding forged HUD instead of generic CSS. */

/* Armor now uses the accepted V14 title bay like other reward results.
   The old lower plaque conflicted with V14's horizontal centering. */

/* The painted defense shield has slightly more opaque weight on its right and
   upper side. Counter that bitmap weight, not the DOM box, by about 2px. */
.unlock-showcase.reward-result[data-reward-type="armor"] .unlock-icon {
  transform: translate(-52%, -48%) !important;
}

/* The confirm label is optically high inside the black painted recess even
   though its element box is centered. Bias only the glyph downward. */
.unlock-showcase.reward-result[data-reward-type="armor"] .unlock-confirm-button {
  display: grid !important;
  place-items: center !important;
  padding: 8px 0 0 !important;
  line-height: 1 !important;
}

.phone-shell > .combat-panel .stage-controls #skillButton.ready:not(.control-status) {
  box-sizing: border-box !important;
  width: 102px !important;
  min-width: 102px !important;
  height: 27px !important;
  min-height: 27px !important;
  margin: 0 !important;
  padding: 0 14px 2px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/reward_skill_integration_1793023200102/combat-skill-ready-button.png") center / 100% 100% no-repeat !important;
  color: #fff0ad !important;
  font-size: 9.25px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: -0.015em !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000, 0 0 6px rgba(255, 216, 111, 0.34) !important;
  box-shadow: none !important;
  filter: brightness(1.05) saturate(1.03) drop-shadow(0 0 4px rgba(45, 186, 239, 0.38)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.62)) !important;
  animation: none !important;
}

.phone-shell > .combat-panel .stage-controls #skillButton.ready:not(.control-status):active {
  filter: brightness(0.92) saturate(0.98) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.64)) !important;
  transform: translateY(1px) !important;
}

@media (max-width: 365px) {
  .phone-shell > .combat-panel .stage-controls #skillButton.ready:not(.control-status) {
    width: 100px !important;
    min-width: 100px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 9px !important;
  }
}


/* SOURCE: ui/styles/menus/codex-detail-raster-v2.css */
/* Codex detail readability pass: drawn title plates and a real 3x3 stat board. */

/* Keep the record source label inside its own painted plate, away from the
   large frame's left bevel and cyan rule. */
#menuCodexPanel [data-codex-detail] .codex-detail-titlebar {
  left: 19.5% !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 3px !important;
  padding: 0 !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-titlebar > span {
  width: 70px !important;
  height: 24px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 0 1px !important;
  border: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center / 100% 100% no-repeat !important;
  color: #b9eaff !important;
  font-size: 8px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000 !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-titlebar > strong {
  transform: translateX(-2px) !important;
}

/* Section names sit in a separate raster nameplate instead of directly on top
   of the engraved horizontal rules in the large codex frame. */
#menuCodexPanel [data-codex-detail] .codex-detail-section {
  padding: 5px 9px 10px !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-section-head {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  margin: 0 0 3px !important;
  padding: 0 17px 1px !important;
  border: 0 !important;
  background: transparent url("assets/generated/bag_content_gothic_1790601600072/bag-section-header.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-section-head > span,
#menuCodexPanel [data-codex-detail] .codex-detail-section-head > small {
  position: relative !important;
  z-index: 1 !important;
  transform: translateY(1px) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-section-head > span {
  color: #ffeaa5 !important;
  font-size: 11px !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-section-head > small {
  color: #92dff5 !important;
  font-size: 8px !important;
}

/* Seven or more stats need three real rows. The ninth-cell plate leaves the
   unused eighth/ninth wells empty instead of dropping the seventh stat onto an
   unframed patch of leather. */
#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:not(:has(> .codex-detail-stat:nth-child(4))) {
  width: 100% !important;
  aspect-ratio: 1514 / 242 !important;
  box-sizing: border-box !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 6px 23px !important;
  background: url("assets/generated/fusion_multi_stat_plates_1791465600018/three-stat-plate.png") center / 100% 100% no-repeat !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(4)):not(:has(> .codex-detail-stat:nth-child(7))) {
  width: 100% !important;
  aspect-ratio: 1514 / 484 !important;
  box-sizing: border-box !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 6px 23px !important;
  background:
    url("assets/generated/fusion_multi_stat_plates_1791465600018/three-stat-plate.png") center top / 100% 50% no-repeat,
    url("assets/generated/fusion_multi_stat_plates_1791465600018/three-stat-plate.png") center bottom / 100% 50% no-repeat !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid > .codex-detail-stat {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  place-content: center !important;
  gap: 2px !important;
  padding: 0 3px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid > .codex-detail-stat small {
  font-size: 7.5px !important;
  line-height: 1 !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid > .codex-detail-stat strong {
  font-size: 13px !important;
  line-height: 1 !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(7)) {
  width: 100% !important;
  aspect-ratio: 1599 / 984 !important;
  box-sizing: border-box !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 20px 18px 17px !important;
  overflow: visible !important;
  background: transparent url("assets/generated/codex_detail_stats_v2_1792940400000/codex-stat-grid-3x3-alpha.png") center / 100% 100% no-repeat !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(7)) > .codex-detail-stat {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  place-content: center !important;
  gap: 2px !important;
  padding: 0 3px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(7)) > .codex-detail-stat small {
  font-size: 7.5px !important;
  line-height: 1 !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(7)) > .codex-detail-stat strong {
  font-size: 13px !important;
  line-height: 1 !important;
}

@media (max-width: 370px), (max-height: 700px) {
  #menuCodexPanel [data-codex-detail] .codex-detail-titlebar {
    left: 19% !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-titlebar > span {
    width: 66px !important;
    height: 23px !important;
    font-size: 7.5px !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-section-head {
    height: 38px !important;
    min-height: 38px !important;
    padding-inline: 15px !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(7)) {
    padding: 19px 17px 16px !important;
  }
}


/* SOURCE: ui/styles/menus/codex-detail-raster-v3.css */
/* Codex detail optical alignment pass.
   The painted frame owns the geometry; these rules only place live content
   inside its visual centres. */

/* Treat the source and analysis labels as one centred inscription. The former
   compact button looked like an unrelated control inside the title plate. */
#menuCodexPanel [data-codex-detail] .codex-detail-titlebar {
  left: 19.5% !important;
  right: 13% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 12px 22px !important;
  place-content: center !important;
  justify-items: center !important;
  gap: 1px !important;
  padding: 5px 28px 4px !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-titlebar > span {
  width: auto !important;
  height: auto !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #9be8ff !important;
  font-size: 8px !important;
  line-height: 12px !important;
  letter-spacing: .13em !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000, 0 0 7px rgba(71, 194, 238, .34) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-titlebar > strong {
  transform: none !important;
  align-self: start !important;
  font-size: 16px !important;
  line-height: 22px !important;
  text-align: center !important;
}

/* The image box was mathematically centred in its grid column, but the painted
   portrait well sits four pixels down and right at the 390px reference size. */
#menuCodexPanel [data-codex-detail] .codex-detail-hero .codex-detail-art {
  transform: translate(4px, 4px) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-hero .codex-detail-art img {
  display: block !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* The repeated item art in the ability copy is an unframed emblem, not another
   inventory tile. */
#menuCodexPanel [data-codex-detail] .codex-detail-ability {
  grid-template-columns: 43px minmax(0, 1fr) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-ability > img {
  width: 38px !important;
  height: 38px !important;
  box-sizing: border-box !important;
  justify-self: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 5px rgba(97, 208, 245, .28)) drop-shadow(0 3px 3px rgba(0, 0, 0, .72)) !important;
}

@media (max-width: 370px), (max-height: 700px) {
  #menuCodexPanel [data-codex-detail] .codex-detail-titlebar {
    left: 19% !important;
    padding-inline: 26px !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-titlebar > strong {
    font-size: 15px !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-hero .codex-detail-art {
    transform: translate(4px, 4px) !important;
  }
}


/* SOURCE: ui/styles/menus/codex-catalog-polish-v4.css */
/* Codex catalog V5: the raster record itself owns three intentional zones:
   icon medallion, copy field, and grade plaque. */

#menuCodexPanel .codex-book {
  padding: 32px 25px 27px !important;
  background: #020711 url("assets/generated/codex_catalog_panel_v5_1793028600000/codex-catalog-panel-v5.png") center / 100% 100% no-repeat !important;
}

#menuCodexPanel .codex-boss-list,
#menuCodexPanel .codex-item-list {
  gap: 0 !important;
  padding: 0 0 8px !important;
}

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row,
#menuCodexPanel .codex-row.item,
#menuCodexPanel button.codex-row.item,
#menuCodexPanel .codex-row.boss,
#menuCodexPanel .codex-row.boss.found {
  box-sizing: border-box !important;
  position: relative !important;
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: 24% minmax(0, 1fr) 16% !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 9px 3% !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/codex_catalog_row_v5_1793118600000/codex-record-row-three-zone-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55)) !important;
  transform: none !important;
}

#menuCodexPanel button.codex-row:not(:disabled):active {
  filter: brightness(.82) saturate(.86) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)) !important;
  transform: translateY(1px) !important;
}

#menuCodexPanel .codex-row.locked,
#menuCodexPanel .codex-row.boss.locked {
  grid-template-columns: 24% minmax(0, 1fr) 16% !important;
  opacity: 1 !important;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55)) !important;
}

#menuCodexPanel .codex-row.locked > *,
#menuCodexPanel .codex-row.boss.locked > * {
  opacity: .48 !important;
}

#menuCodexPanel .codex-row-art {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
}

#menuCodexPanel .codex-row-art > img,
#menuCodexPanel .codex-row.boss.found .codex-row-art > img {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 5px rgba(80, 194, 235, .22)) drop-shadow(0 3px 2px rgba(0, 0, 0, .65)) !important;
}

#menuCodexPanel .codex-row.locked .codex-row-art > img {
  width: 24px !important;
  height: 24px !important;
  opacity: .72 !important;
  filter: drop-shadow(0 2px 2px #000) !important;
}

#menuCodexPanel .codex-row > div,
#menuCodexPanel .codex-boss-copy {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 1px 8px 0 1px !important;
  overflow: hidden !important;
}

#menuCodexPanel .codex-row > div > strong,
#menuCodexPanel .codex-boss-copy > strong {
  display: block !important;
  overflow: hidden !important;
  color: #fff0ad !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
  letter-spacing: -.015em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 3px #000, 0 0 6px rgba(223, 175, 58, .18) !important;
}

#menuCodexPanel .codex-row > div > span,
#menuCodexPanel .codex-boss-copy > span {
  display: block !important;
  overflow: hidden !important;
  color: #a9c4d0 !important;
  font-size: 7.7px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
}

#menuCodexPanel .codex-row-grade {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  margin: 0 !important;
  padding: 3px 2px 2px !important;
  border: 0 !important;
  background: none !important;
  color: #8fe4ff !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(72, 186, 238, .45) !important;
  transform: translateX(-14px) !important;
}

#menuCodexPanel .codex-row[data-codex-rarity="SSS"] .codex-row-grade {
  color: #ffe286 !important;
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(255, 191, 47, .5) !important;
}

#menuCodexPanel .codex-modal-dimmer {
  position: fixed !important;
  z-index: 2840 !important;
  inset: 0 !important;
  display: block !important;
  background: rgba(0, 3, 8, .955) !important;
  backdrop-filter: blur(3px) brightness(.34) !important;
  -webkit-backdrop-filter: blur(3px) brightness(.34) !important;
}

/* The codex pages normally sit below the shared menu title/tabs.  Promote only
   the page whose detail card is open so its viewport dimmer also covers those
   shared controls instead of leaving a bright strip behind the modal. */
#menuCodexPanel .codex-page:has(.codex-item-detail:not([hidden])) {
  z-index: 3000 !important;
}

#menuCodexPanel .codex-modal-dimmer[hidden] {
  display: none !important;
}

#menuCodexPanel .codex-item-detail {
  z-index: 2850 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .82) !important;
}

#menuCodexPanel .codex-detail-close {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .74)) !important;
}

#menuCodexPanel .codex-detail-close:active {
  transform: none !important;
  filter: brightness(.72) saturate(.8) drop-shadow(0 2px 2px rgba(0, 0, 0, .72)) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-ability p {
  color: #d5e8ef !important;
  font-size: 8.8px !important;
  line-height: 1.45 !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits > span {
  min-width: 0 !important;
}

@media (max-width: 370px), (max-height: 700px) {
  #menuCodexPanel .codex-book {
    padding: 29px 22px 24px !important;
  }

  #menuCodexPanel .codex-row,
  #menuCodexPanel button.codex-row,
  #menuCodexPanel .codex-row.item,
  #menuCodexPanel button.codex-row.item,
  #menuCodexPanel .codex-row.boss,
  #menuCodexPanel .codex-row.boss.found {
    min-height: 61px !important;
    grid-template-columns: 24% minmax(0, 1fr) 16% !important;
    gap: 0 !important;
    padding: 8px 3% !important;
  }

  #menuCodexPanel .codex-row.locked,
  #menuCodexPanel .codex-row.boss.locked {
    grid-template-columns: 24% minmax(0, 1fr) 16% !important;
  }

  #menuCodexPanel .codex-row > div,
  #menuCodexPanel .codex-boss-copy {
    padding-left: 1px !important;
  }

  #menuCodexPanel .codex-row-art {
    width: 42px !important;
    height: 42px !important;
  }

  #menuCodexPanel .codex-row-art > img,
  #menuCodexPanel .codex-row.boss.found .codex-row-art > img {
    width: 33px !important;
    height: 33px !important;
  }

  #menuCodexPanel .codex-row > div > strong,
  #menuCodexPanel .codex-boss-copy > strong {
    font-size: 10.5px !important;
  }

  #menuCodexPanel .codex-row > div > span,
  #menuCodexPanel .codex-boss-copy > span {
    font-size: 7.3px !important;
  }
}


/* SOURCE: ui/styles/menus/codex-detail-ornament-v5.css */
/* Codex detail V5: every information group owns a finished game-native plate.
   No standalone CSS rules or underline-like chip treatments remain. */

#menuCodexPanel [data-codex-detail] .codex-detail-record-body {
  gap: 10px !important;
}

/* The size/set metadata previously read as two underlined links. */
#menuCodexPanel [data-codex-detail] .codex-detail-identity > div {
  gap: 3px !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-identity > div span {
  min-height: 21px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 0 9px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

/* Section spacing replaces the old full-width 1px separators. */
#menuCodexPanel [data-codex-detail] .codex-detail-section + .codex-detail-section,
#menuCodexPanel [data-codex-detail] .codex-detail-section + .codex-detail-relations,
#menuCodexPanel [data-codex-detail] .codex-detail-relations + .codex-detail-unlock {
  border-top: 0 !important;
}

/* The effect copy now lives inside one complete engraved plate. */
#menuCodexPanel [data-codex-detail] .codex-detail-ability {
  min-height: 92px !important;
  box-sizing: border-box !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 18px 14.5% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_single_stat_plate_wide_1791552000006/single-stat-plate-wide.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-ability > img {
  display: none !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-ability > div {
  min-width: 0 !important;
  justify-items: center !important;
  text-align: center !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-ability strong {
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-ability p {
  max-width: 100% !important;
  font-size: 8.4px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Three traits share one authored three-socket board instead of hand-drawn
   borders and a dangling third cell on the next row. */
#menuCodexPanel [data-codex-detail] .codex-detail-traits {
  width: 100% !important;
  aspect-ratio: 1512 / 240 !important;
  box-sizing: border-box !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 6px 23px !important;
  border: 0 !important;
  background: transparent url("assets/generated/fusion_multi_stat_plates_1791465600018/three-stat-plate.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits > span,
#menuCodexPanel [data-codex-detail] .codex-detail-traits > span:first-child {
  min-width: 0 !important;
  min-height: 0 !important;
  place-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: center !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits b {
  display: block !important;
  overflow: visible !important;
  font-size: 7.5px !important;
  line-height: 1.16 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* Set, recipe and unlock information use complete plates as well. */
#menuCodexPanel [data-codex-detail] .codex-detail-relations {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  padding: 0 9px 8px !important;
  border: 0 !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-relations > div,
#menuCodexPanel [data-codex-detail] .codex-detail-relations > div:first-child,
#menuCodexPanel [data-codex-detail] .codex-detail-relations > div.recipe {
  width: 100% !important;
  min-height: 82px !important;
  box-sizing: border-box !important;
  align-content: center !important;
  padding: 15px 13.5% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_single_stat_plate_wide_1791552000006/single-stat-plate-wide.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .item-secret-recipe-hint {
  width: 100% !important;
  min-height: 100px !important;
  box-sizing: border-box !important;
  align-content: center !important;
  padding: 18px 13.5% 17px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_single_stat_plate_deeper_1791552000114/single-stat-plate-deeper.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .item-secret-recipe-hint > small {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

#menuCodexPanel [data-codex-detail] .secret-recipe-hint-track {
  width: min(174px, 100%) !important;
  justify-self: center !important;
  gap: 2px !important;
}

#menuCodexPanel [data-codex-detail] .secret-recipe-hint-node,
#menuCodexPanel [data-codex-detail] .secret-recipe-hint-node.current,
#menuCodexPanel [data-codex-detail] .secret-recipe-hint-node.unknown {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 4px !important;
  padding-inline: 3px !important;
}

#menuCodexPanel [data-codex-detail] .secret-recipe-hint-node img,
#menuCodexPanel [data-codex-detail] .secret-recipe-hint-node i {
  width: 28px !important;
  height: 28px !important;
}

/* The single-row core board must never wrap a label/value into the rail. */
#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:not(:has(> .codex-detail-stat:nth-child(4))) {
  height: 46px !important;
  min-height: 46px !important;
  aspect-ratio: auto !important;
  padding-block: 7px !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:not(:has(> .codex-detail-stat:nth-child(4))) .codex-detail-stat small,
#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:not(:has(> .codex-detail-stat:nth-child(4))) .codex-detail-stat strong {
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:not(:has(> .codex-detail-stat:nth-child(4))) .codex-detail-stat small {
  font-size: 7px !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:not(:has(> .codex-detail-stat:nth-child(4))) .codex-detail-stat strong {
  font-size: 12px !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat[data-stat="피해 감소"] strong {
  font-size: 11.5px !important;
  letter-spacing: -.04em !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-unlock {
  min-height: 58px !important;
  margin: 0 9px 7px !important;
  padding: 12px 13.5% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_single_stat_plate_wide_1791552000006/single-stat-plate-wide.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

@media (max-width: 370px), (max-height: 700px) {
  #menuCodexPanel [data-codex-detail] .codex-detail-record-body {
    gap: 8px !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-ability {
    min-height: 92px !important;
    padding: 18px 14.5% !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-traits {
    padding-inline: 21px !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-relations > div,
  #menuCodexPanel [data-codex-detail] .item-secret-recipe-hint,
  #menuCodexPanel [data-codex-detail] .codex-detail-unlock {
    padding-inline: 13.5% !important;
  }
}

/* Optical request: the set copy sits slightly right of the plate's geometric
   centre while preserving the same safe width. */
#menuCodexPanel [data-codex-detail] .codex-detail-relations > div:not(.recipe) {
  padding-left: calc(13.5% + 5px) !important;
  padding-right: calc(13.5% - 5px) !important;
}


/* SOURCE: ui/styles/menus/codex-detail-calm-v6.css */
/* Codex detail V6: the outer codex frame carries the ornament. Inner data
   surfaces are deliberately quiet, spacious, and subordinate. */

/* One or two values share a calm uninterrupted information well. */
#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:not(:has(> .codex-detail-stat:nth-child(3))) {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  aspect-ratio: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  gap: 7px !important;
  padding: 9px 10% !important;
  background: transparent url("assets/generated/codex_detail_inner_v6_1793206800000/codex-info-panel-calm.png") center / 100% 100% no-repeat !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:not(:has(> .codex-detail-stat:nth-child(2))) {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Three values receive a taller purpose-built board. Two text lines fit in
   every well without touching the engraved rail. */
#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(3)):not(:has(> .codex-detail-stat:nth-child(4))) {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  aspect-ratio: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
  padding: 9px 18px !important;
  background: transparent url("assets/generated/codex_detail_inner_v6_1793206800000/codex-stat-board-calm.png") center / 100% 100% no-repeat !important;
}

/* Larger records stack the same restrained three-well board by row. */
#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(4)):not(:has(> .codex-detail-stat:nth-child(7))) {
  width: 100% !important;
  height: 112px !important;
  min-height: 112px !important;
  aspect-ratio: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 0 !important;
  padding: 9px 18px !important;
  background:
    url("assets/generated/codex_detail_inner_v6_1793206800000/codex-stat-board-calm.png") center top / 100% 50% no-repeat,
    url("assets/generated/codex_detail_inner_v6_1793206800000/codex-stat-board-calm.png") center bottom / 100% 50% no-repeat !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(7)) {
  width: 100% !important;
  height: 168px !important;
  min-height: 168px !important;
  aspect-ratio: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 0 !important;
  padding: 9px 18px !important;
  background:
    url("assets/generated/codex_detail_inner_v6_1793206800000/codex-stat-board-calm.png") center top / 100% 33.333% no-repeat,
    url("assets/generated/codex_detail_inner_v6_1793206800000/codex-stat-board-calm.png") center / 100% 33.334% no-repeat,
    url("assets/generated/codex_detail_inner_v6_1793206800000/codex-stat-board-calm.png") center bottom / 100% 33.333% no-repeat !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid > .codex-detail-stat {
  min-width: 0 !important;
  min-height: 0 !important;
  place-content: center !important;
  gap: 3px !important;
  padding: 0 5px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid > .codex-detail-stat small {
  font-size: 7px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid > .codex-detail-stat strong {
  max-width: 100% !important;
  overflow: visible !important;
  font-size: 11.5px !important;
  line-height: 1.12 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* The ability and relation rows are quiet information surfaces, not reward
   plaques. */
#menuCodexPanel [data-codex-detail] .codex-detail-ability,
#menuCodexPanel [data-codex-detail] .codex-detail-relations > div,
#menuCodexPanel [data-codex-detail] .codex-detail-relations > div.recipe,
#menuCodexPanel [data-codex-detail] .codex-detail-unlock {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/codex_detail_inner_v6_1793206800000/codex-info-panel-calm.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-ability {
  min-height: 84px !important;
  padding: 15px 10% !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-relations > div,
#menuCodexPanel [data-codex-detail] .codex-detail-relations > div.recipe {
  min-height: 76px !important;
  padding: 13px 10% !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-relations > div:not(.recipe) {
  padding-left: calc(10% + 4px) !important;
  padding-right: calc(10% - 4px) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-unlock {
  min-height: 54px !important;
  padding: 10px 9% !important;
}

/* Effect traits use the taller board so attack-affinity values can occupy two
   real lines rather than spilling into the frame below. */
#menuCodexPanel [data-codex-detail] .codex-detail-traits {
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  aspect-ratio: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
  padding: 10px 18px !important;
  border: 0 !important;
  background: transparent url("assets/generated/codex_detail_inner_v6_1793206800000/codex-stat-board-calm.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits > span {
  min-height: 0 !important;
  place-content: center !important;
  gap: 3px !important;
  padding: 0 5px !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits small {
  font-size: 7px !important;
  line-height: 1 !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits b {
  max-width: 100% !important;
  overflow: visible !important;
  font-size: 7.4px !important;
  line-height: 1.22 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* Hidden recipes have their own deeper, low-ornament surface. */
#menuCodexPanel [data-codex-detail] .item-secret-recipe-hint {
  min-height: 100px !important;
  padding: 17px 10% 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/codex_detail_inner_v6_1793206800000/codex-recipe-panel-calm.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuCodexPanel [data-codex-detail] .item-secret-recipe-hint > small {
  text-align: center !important;
}

#menuCodexPanel [data-codex-detail] .secret-recipe-hint-track {
  width: min(180px, 100%) !important;
  justify-self: center !important;
}

@media (max-width: 370px), (max-height: 700px) {
  #menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(3)):not(:has(> .codex-detail-stat:nth-child(4))) {
    height: 58px !important;
    min-height: 58px !important;
    padding-inline: 16px !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-traits {
    height: 66px !important;
    min-height: 66px !important;
    padding-inline: 16px !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-ability {
    min-height: 86px !important;
    padding-inline: 9.5% !important;
  }

  #menuCodexPanel [data-codex-detail] .item-secret-recipe-hint {
    min-height: 102px !important;
    padding-inline: 9.5% !important;
  }
}


/* SOURCE: ui/styles/menus/codex-detail-alignment-v7.css */
/* Codex detail V7: align live copy to the painted wells, not to an extra
   inset box. The raster already owns the three-column safe areas. */

/* The close bitmap was drawn for the complete round cap. Keep its native
   painted fit instead of shrinking it and exposing a second rim. */
#menuCodexPanel [data-codex-detail] .codex-detail-close {
  top: -18px !important;
  right: -36px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}

/* The three painted wells already span the full bitmap. Removing the second
   16-18px inset puts the first and third copy back over their own centres.
   These selectors deliberately match V6 specificity so the fix really wins. */
#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(3)):not(:has(> .codex-detail-stat:nth-child(4))),
#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(4)):not(:has(> .codex-detail-stat:nth-child(7))),
#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(7)) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid > .codex-detail-stat,
#menuCodexPanel [data-codex-detail] .codex-detail-traits > span {
  justify-items: center !important;
  text-align: center !important;
}

/* The bitmap's right well is optically about two pixels left of a perfectly
   equal third at mobile size. Match the painted wells individually. */
#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid > .codex-detail-stat:nth-child(1) {
  transform: translate(3px, 1px) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid > .codex-detail-stat:nth-child(2) {
  transform: translate(2px, 1px) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-stat-grid > .codex-detail-stat:nth-child(3) {
  transform: translate(-2px, 1px) !important;
}

/* The three effect copy groups read about two pixels low inside the taller
   wells. Lift the visible groups while keeping the board itself fixed. */
#menuCodexPanel [data-codex-detail] .codex-detail-traits > span:nth-child(1) {
  transform: translate(3px, 0) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits > span:nth-child(2) {
  transform: translate(2px, -2px) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits > span:nth-child(3) {
  transform: translate(-1px, 0) !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits .codex-affinity-value {
  display: grid !important;
  grid-template-rows: repeat(2, auto) !important;
  justify-items: center !important;
  gap: 1px !important;
  white-space: nowrap !important;
}

#menuCodexPanel [data-codex-detail] .codex-detail-traits .codex-affinity-value > span {
  display: block !important;
  white-space: nowrap !important;
}

/* Screenshot pixels place the two inscription lines about 10px to the right
   of the painted plaque centre. Shift only the live copy; keep the plaque and
   close cap fixed. */
#menuCodexPanel [data-codex-detail] .codex-detail-titlebar > span,
#menuCodexPanel [data-codex-detail] .codex-detail-titlebar > strong {
  transform: translateX(-10px) !important;
}

/* The set copy is intentionally left aligned, so it needs more breathing room
   from the painted gold bevel than geometrically centred panels do. */
#menuCodexPanel [data-codex-detail] .codex-detail-relations > div:not(.recipe) {
  padding-left: calc(10% + 18px) !important;
  padding-right: calc(10% - 18px) !important;
}

/* The recipe track's visible glyphs are lighter and shorter on the unknown
   side; a small optical shift centres the actual icon/plus/question cluster. */
#menuCodexPanel [data-codex-detail] .secret-recipe-hint-track {
  transform: translateX(11px) !important;
}

@media (max-width: 370px), (max-height: 700px) {
  #menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(3)):not(:has(> .codex-detail-stat:nth-child(4))),
  #menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(4)):not(:has(> .codex-detail-stat:nth-child(7))),
  #menuCodexPanel [data-codex-detail] .codex-detail-stat-grid:has(> .codex-detail-stat:nth-child(7)),
  #menuCodexPanel [data-codex-detail] .codex-detail-traits {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #menuCodexPanel [data-codex-detail] .codex-detail-relations > div:not(.recipe) {
    padding-left: calc(10% + 17px) !important;
    padding-right: calc(10% - 17px) !important;
  }

  #menuCodexPanel [data-codex-detail] .secret-recipe-hint-track {
    transform: translateX(10px) !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v3.css */
/* Companion screen V3: one-piece resources/tabs, equal summon actions, and a
   separate ticket shop. Every visible control uses finished raster artwork. */

body #menuCompanionPanel .companion-currency-bar {
  top: 12.4% !important;
  right: 7.6% !important;
  left: 7.6% !important;
  height: 6.4% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 7px 14px 6px !important;
  box-sizing: border-box !important;
  background: transparent url("assets/generated/companion_screen_rebuild_v3_web_1793023200111/resource-tray-v3.webp") center 46% / 100% auto no-repeat !important;
}

body #menuCompanionPanel .companion-currency-bar > span {
  height: 100% !important;
  grid-template-columns: 21px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  column-gap: 2px !important;
  padding: 3px 5px 3px 4px !important;
}

body #menuCompanionPanel .companion-currency-bar img {
  width: 20px !important;
  height: 20px !important;
}

body #menuCompanionPanel .companion-currency-bar em {
  align-self: end !important;
  font-size: clamp(6.8px, 1.85vw, 7.4px) !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-currency-bar b {
  align-self: start !important;
  padding-top: 2px !important;
  font-size: clamp(10.5px, 3vw, 12px) !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-menu-tabs {
  top: 19.85% !important;
  right: 7.6% !important;
  left: 7.6% !important;
  height: 5.25% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 2px 5px 3px !important;
  box-sizing: border-box !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/tab-tray-wide.png") center / 100% 100% no-repeat !important;
}

body #menuCompanionPanel .companion-menu-tabs button,
body #menuCompanionPanel .companion-menu-tabs button:not(.active),
body #menuCompanionPanel .companion-menu-tabs button.active {
  position: relative !important;
  isolation: isolate !important;
  padding: 1px 4px 0 !important;
  overflow: visible !important;
  outline: 0 !important;
  background: none !important;
  color: #9fb3be !important;
  font-size: clamp(10px, 2.8vw, 11px) !important;
  text-shadow: 0 2px 2px #000 !important;
}

body #menuCompanionPanel .companion-menu-tabs button.active {
  background: transparent url("assets/generated/companion_screen_rebuild_v3_web_1793023200111/tab-active-v3.webp") center / 100% 100% no-repeat !important;
  color: #fff0a3 !important;
  text-shadow: 0 2px 2px #000, 0 0 6px rgba(80, 185, 240, .45) !important;
}

body #menuCompanionPanel .companion-tab-view {
  top: 26.3% !important;
}

body #menuCompanionPanel .companion-summon-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 6px !important;
}

body #menuCompanionPanel .companion-summon-card,
body #menuCompanionPanel .companion-summon-card.premium {
  min-height: 320px !important;
  height: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 26px 15px 18px !important;
}

body #menuCompanionPanel .companion-summon-card > div,
body #menuCompanionPanel .companion-summon-card.premium > div {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  margin-top: auto !important;
}

body #menuCompanionPanel .companion-summon-card button,
body #menuCompanionPanel .companion-summon-card.common button,
body #menuCompanionPanel .companion-summon-card.premium button {
  width: 100% !important;
  height: 39px !important;
  min-height: 39px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-content: center !important;
  place-items: center !important;
  gap: 1px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 3px 8px 4px !important;
  overflow: visible !important;
  border-style: solid !important;
  border-width: 9px 16px !important;
  border-color: transparent !important;
  border-image-source: url("assets/generated/companion_summon_controls_v4/summon-common-button.png") !important;
  border-image-slice: 70 240 70 240 fill !important;
  border-image-width: 9px 16px !important;
  border-image-repeat: stretch !important;
  background: none !important;
  box-shadow: none !important;
  filter: brightness(1.06) saturate(1.02) drop-shadow(0 2px 2px rgba(0, 0, 0, .66)) !important;
}

body #menuCompanionPanel .companion-summon-card.premium button {
  border-image-source: url("assets/generated/growth_companion_controls_v2_1792936800200/premium-button-v2.png") !important;
  border-image-slice: 112 355 112 355 fill !important;
  filter: brightness(1.02) saturate(.96) drop-shadow(0 2px 2px rgba(0, 0, 0, .66)) !important;
}

body #menuCompanionPanel .companion-summon-card button > b,
body #menuCompanionPanel .companion-summon-card.common button > b,
body #menuCompanionPanel .companion-summon-card.premium button > b {
  font-size: 10px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-summon-card button > small,
body #menuCompanionPanel .companion-summon-card.common button > small,
body #menuCompanionPanel .companion-summon-card.premium button > small {
  font-size: 6.8px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-ticket-shop {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 76px !important;
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 66px !important;
  align-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  margin: 6px 0 0 !important;
  padding: 5px 16px 5px 14px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent url("assets/generated/companion_screen_rebuild_v3_web_1793023200111/ticket-shop-panel-v3.webp") center / 100% auto no-repeat !important;
  color: #eaf6fb !important;
  text-align: left !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55)) !important;
}

body #menuCompanionPanel .companion-ticket-shop > img {
  width: 42px !important;
  height: 42px !important;
  place-self: center !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .62)) !important;
}

body #menuCompanionPanel .companion-ticket-shop > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  padding-top: 2px !important;
}

body #menuCompanionPanel .companion-ticket-shop > span > b {
  color: #fff0a8 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-ticket-shop > span > small {
  overflow: hidden !important;
  color: #a9c2ce !important;
  font-size: 7.2px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-ticket-shop > em {
  color: #d8eef8 !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-ticket-shop:hover,
body #menuCompanionPanel .companion-ticket-shop:focus-visible {
  filter: brightness(1.1) saturate(1.04) drop-shadow(0 0 5px rgba(64, 176, 232, .34)) !important;
}

body #menuCompanionPanel .companion-ticket-shop:active {
  transform: translateY(1px) !important;
  filter: brightness(.94) saturate(.92) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body #menuCompanionPanel .companion-currency-bar {
    right: 6.8% !important;
    left: 6.8% !important;
    padding-inline: 12px !important;
  }

  body #menuCompanionPanel .companion-currency-bar > span {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    padding-inline: 3px !important;
  }

  body #menuCompanionPanel .companion-currency-bar img {
    width: 18px !important;
    height: 18px !important;
  }

  body #menuCompanionPanel .companion-menu-tabs {
    right: 6.8% !important;
    left: 6.8% !important;
  }

  body #menuCompanionPanel .companion-summon-card,
  body #menuCompanionPanel .companion-summon-card.premium {
    min-height: 300px !important;
    height: 300px !important;
    padding: 24px 12px 16px !important;
  }

  body #menuCompanionPanel .companion-summon-card button,
  body #menuCompanionPanel .companion-summon-card.common button,
  body #menuCompanionPanel .companion-summon-card.premium button {
    height: 36px !important;
    min-height: 36px !important;
    border-width: 8px 14px !important;
    border-image-width: 8px 14px !important;
  }

  body #menuCompanionPanel .companion-ticket-shop {
    height: 70px !important;
    min-height: 70px !important;
    grid-template-columns: 52px minmax(0, 1fr) 58px !important;
    gap: 4px !important;
    padding-inline: 12px !important;
  }

  body #menuCompanionPanel .companion-ticket-shop > img {
    width: 38px !important;
    height: 38px !important;
  }

  body #menuCompanionPanel .companion-ticket-shop > span > b { font-size: 10px !important; }
  body #menuCompanionPanel .companion-ticket-shop > span > small { font-size: 6.6px !important; }
  body #menuCompanionPanel .companion-ticket-shop > em { font-size: 8px !important; }

  body #menuCompanionPanel .companion-summon-notice {
    margin-top: 24px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v4.css */
/* Companion screen V4: clear the baked-in controls, use a four-tab menu,
   split common-ticket/shard payments, and keep summon odds in a dialog. */

body #menuCompanionPanel.active {
  background: #020711 url("assets/generated/companion_screen_rebuild_v4_1793026800100/companion-menu-plate-v4-cleared.png") center / 100% 100% no-repeat !important;
}

body #menuCompanionPanel .companion-currency-bar {
  top: 11.8% !important;
  right: 6.7% !important;
  left: 6.7% !important;
  height: 6.65% !important;
  padding: 7px 16px 6px !important;
}

body #menuCompanionPanel .companion-currency-bar > span {
  grid-template-columns: 21px minmax(0, 1fr) !important;
  padding: 3px 5px 3px 4px !important;
}

body #menuCompanionPanel .companion-menu-tabs {
  top: 19.05% !important;
  right: 6.8% !important;
  left: 6.8% !important;
  height: 5.35% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  padding: 2px 7px 3px !important;
}

body #menuCompanionPanel .companion-menu-tabs button,
body #menuCompanionPanel .companion-menu-tabs button:not(.active),
body #menuCompanionPanel .companion-menu-tabs button.active {
  min-width: 0 !important;
  padding-inline: 2px !important;
  font-size: clamp(8.2px, 2.35vw, 9.4px) !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-tab-view {
  top: 25.65% !important;
  right: 7.8% !important;
  bottom: 9.5% !important;
  left: 7.8% !important;
  padding: 8px 6px 10px !important;
}

body #menuCompanionPanel .companion-summon-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body #menuCompanionPanel .companion-summon-card,
body #menuCompanionPanel .companion-summon-card.premium {
  position: relative !important;
  min-height: 338px !important;
  height: 338px !important;
  padding: 25px 14px 17px !important;
  overflow: hidden !important;
}

body #menuCompanionPanel .companion-summon-art,
body #menuCompanionPanel .companion-summon-art.premium-star {
  width: 116px !important;
  height: 88px !important;
  flex-basis: 88px !important;
  margin-bottom: 0 !important;
}

body #menuCompanionPanel .companion-summon-card > strong {
  min-height: 17px !important;
  font-size: 12.5px !important;
}

body #menuCompanionPanel .companion-summon-card > p,
body #menuCompanionPanel .companion-summon-card > small,
body #menuCompanionPanel .companion-ticket-shop {
  display: none !important;
}

body #menuCompanionPanel .companion-summon-card > .companion-payment-groups {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  margin: 9px 0 22px !important;
}

body #menuCompanionPanel .companion-summon-card > .companion-payment-groups.premium-payment {
  margin-top: 38px !important;
}

body #menuCompanionPanel .companion-payment-group {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

body #menuCompanionPanel .companion-payment-group > span {
  min-height: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #bed5df !important;
  font-size: 7.3px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
}

body #menuCompanionPanel .companion-payment-group > span > img {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 2px #000) !important;
}

body #menuCompanionPanel .companion-payment-group > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

body #menuCompanionPanel .companion-payment-group button,
body #menuCompanionPanel .companion-summon-card.common .companion-payment-group button,
body #menuCompanionPanel .companion-summon-card.premium .companion-payment-group button {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 2px 3px 3px !important;
  border-width: 8px 11px !important;
  border-image-width: 8px 11px !important;
}

body #menuCompanionPanel .companion-payment-group button > b {
  font-size: 9px !important;
}

body #menuCompanionPanel .companion-payment-group button > small {
  font-size: 5.7px !important;
  letter-spacing: -.04em !important;
}

body #menuCompanionPanel .companion-payment-group button:disabled {
  opacity: .45 !important;
  filter: grayscale(.55) brightness(.72) !important;
}

body #menuCompanionPanel .companion-summon-card .companion-odds-link,
body #menuCompanionPanel .companion-summon-card.common .companion-odds-link,
body #menuCompanionPanel .companion-summon-card.premium .companion-odds-link {
  position: absolute !important;
  right: 15px !important;
  bottom: 14px !important;
  width: 43px !important;
  height: 20px !important;
  min-height: 20px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 0 1px !important;
  border: 5px solid transparent !important;
  border-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") 42 100 42 100 fill / 5px 10px stretch !important;
  background: none !important;
  color: #adc8d5 !important;
  font-size: 7px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: none !important;
  filter: brightness(.95) !important;
}

body #menuCompanionPanel .companion-summon-card .companion-odds-link:hover,
body #menuCompanionPanel .companion-summon-card .companion-odds-link:focus-visible {
  color: #fff0a4 !important;
  filter: brightness(1.12) !important;
}

body #menuCompanionPanel .companion-summon-notice {
  min-height: 30px !important;
  margin: 31px 4.5% 5px !important;
}

body #menuCompanionPanel .companion-store-view {
  padding: 10px 9px 14px !important;
}

body #menuCompanionPanel .companion-store-heading {
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) 48px !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 18px 8px 14px !important;
  box-sizing: border-box !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
}

body #menuCompanionPanel .companion-store-heading > img {
  width: 44px !important;
  height: 44px !important;
  place-self: center !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 3px #000) !important;
}

body #menuCompanionPanel .companion-store-heading > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

body #menuCompanionPanel .companion-store-heading strong {
  color: #fff0a7 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-store-heading small {
  color: #a9c1ce !important;
  font-size: 7px !important;
  line-height: 1.2 !important;
}

body #menuCompanionPanel .companion-store-heading > b {
  color: #d8edfa !important;
  font-size: 10px !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
}

body #menuCompanionPanel .companion-store-list {
  display: grid !important;
  gap: 6px !important;
  margin-top: 7px !important;
}

body #menuCompanionPanel .companion-store-product {
  width: 100% !important;
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 76px !important;
  align-items: center !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  padding: 6px 13px 6px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  color: #e7f3f8 !important;
  text-align: left !important;
  box-shadow: none !important;
  filter: brightness(.96) !important;
}

body #menuCompanionPanel .companion-store-product.best {
  filter: brightness(1.06) saturate(1.05) !important;
}

body #menuCompanionPanel .companion-store-product > img {
  width: 39px !important;
  height: 39px !important;
  place-self: center !important;
  object-fit: contain !important;
}

body #menuCompanionPanel .companion-store-product > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

body #menuCompanionPanel .companion-store-product > span > b {
  color: #fff0aa !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-store-product > span > small {
  color: #a9c2ce !important;
  font-size: 6.8px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-store-product > em {
  min-height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 7px !important;
  background: url("assets/generated/store_price_button_v1_1793023200200/store-price-button-v1.png") center / 100% 100% no-repeat !important;
  color: #fff0a7 !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-store-product:hover,
body #menuCompanionPanel .companion-store-product:focus-visible {
  filter: brightness(1.12) saturate(1.05) !important;
}

body #menuCompanionPanel .companion-store-product.pending,
body #menuCompanionPanel .companion-store-product:disabled {
  opacity: .55 !important;
}

body #menuCompanionPanel .companion-store-notice {
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  margin: 8px 9px 4px !important;
  padding: 5px 15px !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/tab-tray-wide.png") center / 100% 100% no-repeat !important;
  color: #a9c0cd !important;
  font-size: 7.4px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-odds-layer[hidden] {
  display: none !important;
}

body #menuCompanionPanel .companion-odds-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: rgba(0, 3, 10, .82) !important;
}

body #menuCompanionPanel .companion-odds-dialog {
  position: relative !important;
  width: min(292px, calc(100vw - 50px)) !important;
  min-height: 390px !important;
  display: grid !important;
  grid-template-rows: 82px auto 1fr auto !important;
  justify-items: stretch !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  padding: 38px 35px 34px !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .8)) !important;
}

body #menuCompanionPanel .companion-odds-dialog > img {
  width: 100px !important;
  height: 82px !important;
  place-self: center !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 5px #000) !important;
}

body #menuCompanionPanel .companion-odds-dialog > strong {
  color: #fff0a7 !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000 !important;
}

body #menuCompanionPanel .companion-odds-close {
  position: absolute !important;
  top: 22px !important;
  right: 23px !important;
  width: 29px !important;
  height: 29px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  background: url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
}

body #menuCompanionPanel .companion-odds-list {
  display: grid !important;
  gap: 4px !important;
}

body #menuCompanionPanel .companion-odds-list > span {
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  padding: 2px 16px !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
}

body #menuCompanionPanel .companion-odds-list b {
  color: #d7e7ee !important;
  font-size: 9px !important;
}

body #menuCompanionPanel .companion-odds-list em {
  color: #fff0a6 !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body #menuCompanionPanel .companion-odds-list .rarity-legendary b,
body #menuCompanionPanel .companion-odds-list .rarity-legendary em { color: #ffd36f !important; }
body #menuCompanionPanel .companion-odds-list .rarity-mythic b,
body #menuCompanionPanel .companion-odds-list .rarity-mythic em { color: #ef9cff !important; }

body #menuCompanionPanel .companion-odds-dialog > p {
  margin: 0 !important;
  color: #9db8c6 !important;
  font-size: 7.5px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body #menuCompanionPanel .companion-currency-bar {
    right: 6.2% !important;
    left: 6.2% !important;
    padding-inline: 14px !important;
  }

  body #menuCompanionPanel .companion-menu-tabs {
    right: 6.2% !important;
    left: 6.2% !important;
    padding-inline: 6px !important;
  }

  body #menuCompanionPanel .companion-menu-tabs button,
  body #menuCompanionPanel .companion-menu-tabs button:not(.active),
  body #menuCompanionPanel .companion-menu-tabs button.active {
    font-size: 8px !important;
  }

  body #menuCompanionPanel .companion-summon-card,
  body #menuCompanionPanel .companion-summon-card.premium {
    min-height: 326px !important;
    height: 326px !important;
    padding: 23px 11px 15px !important;
  }

  body #menuCompanionPanel .companion-summon-art,
  body #menuCompanionPanel .companion-summon-art.premium-star {
    width: 104px !important;
    height: 80px !important;
    flex-basis: 80px !important;
  }

  body #menuCompanionPanel .companion-summon-card > .companion-payment-groups {
    gap: 5px !important;
    margin-top: 7px !important;
  }

  body #menuCompanionPanel .companion-summon-card > .companion-payment-groups.premium-payment {
    margin-top: 35px !important;
  }

  body #menuCompanionPanel .companion-payment-group button,
  body #menuCompanionPanel .companion-summon-card.common .companion-payment-group button,
  body #menuCompanionPanel .companion-summon-card.premium .companion-payment-group button {
    height: 34px !important;
    min-height: 34px !important;
    border-width: 7px 9px !important;
    border-image-width: 7px 9px !important;
  }

  body #menuCompanionPanel .companion-payment-group button > small {
    font-size: 5.2px !important;
  }

  body #menuCompanionPanel .companion-summon-card .companion-odds-link {
    right: 12px !important;
    bottom: 12px !important;
  }

  body #menuCompanionPanel .companion-store-heading {
    min-height: 68px !important;
    grid-template-columns: 48px minmax(0, 1fr) 44px !important;
    padding-inline: 12px !important;
  }

  body #menuCompanionPanel .companion-store-product {
    min-height: 60px !important;
    grid-template-columns: 43px minmax(0, 1fr) 68px !important;
    padding-inline: 10px !important;
  }
}


/* SOURCE: ui/styles/menus/menu-surface-unification-v1.css */
/* Final raster-backed pass for settings, mythic catalog, store and ranking. */
:root {
  --menu-surface-panel: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png");
  --menu-surface-row: url("assets/generated/bag_content_gothic_1790601600072/bag-waiting-card.png");
  --menu-surface-product: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png");
  --menu-surface-price: url("assets/generated/store_price_button_v1_1793023200200/store-price-button-v1.png");
  --menu-surface-trophy: url("assets/generated/lobby_shortcut_icons_transparent_1791039000000/ranking.png");
}

/* Optical centre of the painted settings back bay, not its DOM column. */
body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back] {
  padding: 1px 0 0 !important;
  transform: translate(7px, 1px) !important;
}
body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back]:active {
  transform: translate(7px, 2px) !important;
}

/* ------------------------- Settings common shell --------------------- */
/*
 * Settings used to keep settings-shell-compact-axis.png as a complete
 * page-sized frame, then place the newer shared header on top of its painted
 * header.  That produced two outer plates.  Settings now owns the same single
 * menu-content-panel.png shell as the other lobby destinations; only the four
 * settings sections remain as inner cards.
 */
.main-menu[data-panel="settings"] {
  padding: 0 !important;
}

.main-menu[data-panel="settings"] .menu-scene {
  width: min(100%, 430px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  background: #040914 !important;
  box-shadow: none !important;
}

.main-menu[data-panel="settings"] .menu-card {
  top: max(5px, env(safe-area-inset-top)) !important;
  right: 5px !important;
  bottom: auto !important;
  left: 5px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  transform: none !important;
}

body #menuSettingsPanel.menu-panel.active {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: min(830px, calc(100dvh - 10px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 10px) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: transparent var(--menu-surface-panel) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .62)) !important;
  transform: none !important;
}

body #menuSettingsPanel.menu-panel.active::before,
body #menuSettingsPanel.menu-panel.active::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head {
  position: absolute !important;
  z-index: 4 !important;
  top: 14px !important;
  right: 17px !important;
  bottom: auto !important;
  left: 17px !important;
  width: auto !important;
  max-width: none !important;
  height: 55px !important;
  min-height: 55px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) 70px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 5px 12px 6px !important;
  overflow: visible !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat !important;
  filter: none !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back] {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 1px 8px 0 !important;
  line-height: 29px !important;
  transform: translate(7px, 1px) !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > strong {
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  align-self: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  display: block !important;
  color: #fff0ad !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9) !important;
  transform: none !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head::after {
  content: "" !important;
  display: block !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 64px !important;
  height: 30px !important;
}

body #menuSettingsPanel .settings-gothic-group,
body #menuSettingsPanel .menu-game-home-box {
  position: absolute !important;
  z-index: 2 !important;
  right: 22px !important;
  left: 22px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 12px 16px 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--menu-surface-product) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuSettingsPanel .settings-account-group {
  top: 10.5% !important;
  height: 19% !important;
}

body #menuSettingsPanel .settings-guide-group {
  top: 30% !important;
  height: 20% !important;
}

body #menuSettingsPanel .settings-policy-group {
  top: 50.5% !important;
  height: 19% !important;
}

body #menuSettingsPanel .menu-game-home-box {
  top: 70% !important;
  height: 23% !important;
}

body #menuSettingsPanel .menu-account-box,
body #menuSettingsPanel .menu-cloud-box,
body #menuSettingsPanel .menu-tutorial-box,
body #menuSettingsPanel .menu-policy-box {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body #menuSettingsPanel.menu-panel.active {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
  }

  body #menuSettingsPanel.menu-panel > .menu-panel-head {
    height: 55px !important;
    min-height: 55px !important;
  }

  body #menuSettingsPanel .settings-gothic-group,
  body #menuSettingsPanel .menu-game-home-box {
    right: 19px !important;
    left: 19px !important;
    padding-inline: 14px !important;
  }
}

/* Settings is one continuous surface: one integrated header, then four live
   content regions separated by narrow painted rails instead of four framed
   cards. */
body #menuSettingsPanel.menu-panel.active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 55px 1.05fr 1.08fr 1fr 1.15fr !important;
  gap: 0 !important;
  padding: 14px 22px 24px !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 55px !important;
  min-height: 55px !important;
  grid-template-columns: 26.5% minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  margin: 0 !important;
  padding: 3px 4px 4px !important;
  background: transparent url("assets/generated/menu_integrated_header_1791811200200/integrated-header-final.png") center / 100% 100% no-repeat !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back] {
  grid-column: 1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 1px 3px 0 !important;
  background: none !important;
  filter: none !important;
  transform: translateY(1px) !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back]:active {
  transform: translateY(2px) !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > strong {
  grid-column: 2 !important;
  justify-self: stretch !important;
  padding: 1px 0 0 !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body #menuSettingsPanel .settings-gothic-group,
body #menuSettingsPanel .menu-game-home-box {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 14px 12px !important;
  background: none !important;
}

body #menuSettingsPanel :is(
  .settings-account-group,
  .settings-guide-group,
  .settings-policy-group
)::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  right: 0 !important;
  bottom: -9px !important;
  left: 0 !important;
  height: 18px !important;
  pointer-events: none !important;
  background: transparent url("assets/generated/unlock_showcase_item_v2_1792936800300/item-unlock-divider-alpha.png") center / 100% 100% no-repeat !important;
  opacity: .72 !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body #menuSettingsPanel.menu-panel.active {
    grid-template-rows: 55px 1.05fr 1.08fr 1fr 1.15fr !important;
    padding: 12px 19px 21px !important;
  }

  body #menuSettingsPanel .settings-gothic-group,
  body #menuSettingsPanel .menu-game-home-box {
    padding: 8px 12px 10px !important;
  }
}

/* ------------------------- Mythic equipment codex -------------------- */
#qaMythicCatalog.qa-rarity-showcase {
  padding: 10px !important;
  background: rgba(1, 5, 10, .88) !important;
}
#qaMythicCatalog .qa-rarity-frame {
  width: min(356px, calc(100vw - 18px)) !important;
  height: min(700px, calc(100dvh - 24px)) !important;
  min-height: 620px !important;
  display: grid !important;
  grid-template-rows: 58px minmax(0, 1fr) !important;
  gap: 3px !important;
  padding: 42px 31px 39px !important;
  overflow: hidden !important;
  background: transparent var(--menu-surface-panel) center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .82)) !important;
}
#qaMythicCatalog .qa-rarity-heading {
  align-self: center !important;
  gap: 3px !important;
  margin: 0 !important;
  transform: translateY(1px) !important;
}
#qaMythicCatalog .qa-rarity-heading small {
  color: #90dff5 !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
  text-shadow: 0 1px 2px #000 !important;
}
#qaMythicCatalog .qa-rarity-heading h2 {
  font-size: 19px !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}
#qaMythicCatalog .qa-rarity-grid {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 3px 0 5px !important;
  overflow: hidden !important;
}
#qaMythicCatalog .qa-rarity-card.item-tile.mythic-item {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 4px !important;
  padding: 8px 20px 8px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--menu-surface-product) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .48)) !important;
  overflow: hidden !important;
}
#qaMythicCatalog .qa-rarity-card.item-tile.mythic-item::before,
#qaMythicCatalog .qa-rarity-card.item-tile.mythic-item::after {
  content: none !important;
  display: none !important;
}
#qaMythicCatalog .qa-rarity-card .item-icon {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 51px !important;
  height: 51px !important;
  align-self: center !important;
  justify-self: center !important;
  filter: drop-shadow(0 0 6px rgba(121, 105, 255, .34)) drop-shadow(0 3px 3px rgba(0, 0, 0, .72)) !important;
}
#qaMythicCatalog .qa-rarity-code { display: none !important; }
#qaMythicCatalog .qa-rarity-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  width: 100% !important;
  padding: 0 0 3px !important;
  color: #fff0c0 !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px #000 !important;
}
#qaMythicCatalog .qa-rarity-color {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  width: 100% !important;
  padding: 3px 0 0 !important;
  color: #aeefff !important;
  font-size: 8.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(118, 115, 255, .48) !important;
}

/* ------------------------- Shared lobby subpage shell ---------------- */
.main-menu:is(
  [data-panel="growth"],
  [data-panel="recipes"],
  [data-panel="elements"],
  [data-panel="codex"],
  [data-panel="ranking"],
  [data-panel="store"],
  [data-panel="companions"]
) {
  padding: 0 !important;
}
.main-menu:is(
  [data-panel="growth"],
  [data-panel="recipes"],
  [data-panel="elements"],
  [data-panel="codex"],
  [data-panel="ranking"],
  [data-panel="store"],
  [data-panel="companions"]
) .menu-scene {
  width: min(100%, 430px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  background: #040914 !important;
}
.main-menu:is(
  [data-panel="growth"],
  [data-panel="recipes"],
  [data-panel="elements"],
  [data-panel="codex"],
  [data-panel="ranking"],
  [data-panel="store"],
  [data-panel="companions"]
) .menu-card {
  top: max(5px, env(safe-area-inset-top)) !important;
  right: 5px !important;
  bottom: auto !important;
  left: 5px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}
body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel
).menu-panel.active {
  box-sizing: border-box !important;
  width: 100% !important;
  height: min(830px, calc(100dvh - 10px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 10px) !important;
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 14px 17px 17px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: transparent var(--menu-surface-panel) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .62)) !important;
}
body #menuGrowthPanel.menu-panel.active {
  grid-template-rows: 55px minmax(0, 1fr) !important;
}
body #menuRecipePanel.menu-panel.active {
  grid-template-rows: 55px 44px minmax(0, 1fr) !important;
}
body #menuCodexPanel.menu-panel.active {
  grid-template-rows: 55px 44px minmax(0, 1fr) !important;
}
body #menuStorePanel.menu-panel.active,
body #menuRankingPanel.menu-panel.active {
  margin: 0 !important;
}
body #menuStorePanel.menu-panel.active {
  grid-template-rows: 55px 58px minmax(0, 1fr) 34px !important;
}
body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel
).menu-panel > .menu-panel-head {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 55px !important;
  min-height: 55px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) 70px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 5px 12px 6px !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat !important;
  filter: none !important;
}
body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel
).menu-panel > .menu-panel-head > .menu-back-button {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 1px 8px 0 !important;
  line-height: 29px !important;
  transform: translate(2px, 1px) !important;
}
body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuCompanionPanel
).menu-panel > .menu-panel-head > strong,
body #menuStorePanel.menu-panel > .menu-panel-head > .store-panel-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  color: #fff0ad !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9) !important;
}
body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel
).menu-panel > .menu-panel-head::after {
  content: "" !important;
  display: block !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 64px !important;
  height: 30px !important;
}
#menuGrowthPanel .menu-meta-box,
#menuRecipePanel .guide-tab-view.active,
#menuCodexPanel .codex-book {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#menuRecipePanel .guide-tabbar,
#menuCodexPanel .codex-tabbar {
  height: 44px !important;
  min-height: 44px !important;
}

/* The companion contents now sit inside the same shell instead of following
   absolute coordinates painted into the old sanctuary plate. */
body #menuCompanionPanel.menu-panel.active {
  grid-template-rows: 55px 58px 42px minmax(0, 1fr) !important;
}
body #menuCompanionPanel .companion-currency-bar {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
}
body #menuCompanionPanel .companion-menu-tabs {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
}
body #menuCompanionPanel .companion-tab-view {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 4 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 2px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body #menuCompanionPanel .companion-tab-view:not(.active) {
  display: none !important;
}
body #menuCompanionPanel .companion-tab-view.active {
  display: block !important;
}

/* ------------------------------- Store ------------------------------- */
#menuStorePanel .store-inventory {
  height: 58px !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
#menuStorePanel .store-inventory > div {
  height: 58px !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 31px minmax(0, 1fr) !important;
  grid-template-rows: 25px 22px !important;
  column-gap: 2px !important;
  padding: 6px 8px 5px 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--menu-surface-row) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .42)) !important;
}
#menuStorePanel .store-inventory img,
#menuStorePanel .store-inventory > div:nth-child(4) img {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 25px !important;
  height: 25px !important;
  align-self: center !important;
  justify-self: center !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 5px rgba(96, 207, 255, .42)) drop-shadow(0 2px 2px rgba(0, 0, 0, .78)) !important;
}
#menuStorePanel .store-inventory span {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  padding: 0 0 2px !important;
  color: #cfe9f3 !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
}
#menuStorePanel .store-inventory strong {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  padding: 2px 0 0 !important;
  color: #ffe28b !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
#menuStorePanel .store-product-list { gap: 8px !important; padding: 0 2px 11px !important; }
#menuStorePanel .store-product-group { gap: 6px !important; }
#menuStorePanel .store-product-group-head { min-height: 38px !important; padding: 5px 18px 6px !important; }
#menuStorePanel .store-product-group-head strong { font-size: 11.5px !important; }
#menuStorePanel .store-product-card {
  min-height: 91px !important;
  grid-template-columns: 56px minmax(0, 1fr) 86px !important;
  gap: 7px !important;
  padding: 10px 13px !important;
}
#menuStorePanel .store-buy-button {
  box-sizing: border-box !important;
  width: 86px !important;
  min-width: 86px !important;
  height: 47px !important;
  min-height: 47px !important;
  display: grid !important;
  place-content: center !important;
  gap: 3px !important;
  padding: 7px 11px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--menu-surface-price) center / 106% 106% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .58)) !important;
}
#menuStorePanel .store-buy-button b {
  color: #ffe9a1 !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
}
#menuStorePanel .store-buy-button small {
  color: #a9def0 !important;
  font-size: 7px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
}
#menuStorePanel .store-notice {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 9px 18px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat !important;
  color: #b9d5df !important;
  font-size: 8px !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* ------------------------------ Ranking ------------------------------ */
body #menuRankingPanel.menu-panel.active {
  grid-template-rows: 55px 35px 43px minmax(0, 1fr) !important;
}
#menuRankingPanel .ranking-scope-tabs {
  height: 35px !important;
  min-height: 35px !important;
  gap: 6px !important;
  padding: 0 8px !important;
}
#menuRankingPanel .ranking-scope-button { height: 35px !important; font-size: 9.5px !important; }
#menuRankingPanel .lobby-ranking-meta {
  height: 43px !important;
  min-height: 43px !important;
  justify-content: center !important;
  padding: 8px 19px 9px !important;
}
#menuRankingPanel .ranking-scope-summary { font-size: 8.5px !important; text-align: center !important; }
#menuRankingPanel .game-ranking-list {
  position: relative !important;
  isolation: isolate !important;
  gap: 8px !important;
  padding: 34px 19px 23px !important;
  background: transparent var(--menu-surface-panel) center / 100% 100% no-repeat !important;
}
#menuRankingPanel .game-ranking-list::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 50% !important;
  bottom: 15% !important;
  width: 116px !important;
  height: 116px !important;
  transform: translateX(-50%) !important;
  background: transparent var(--menu-surface-trophy) center / contain no-repeat !important;
  opacity: .075 !important;
  filter: saturate(.65) !important;
  pointer-events: none !important;
}
#menuRankingPanel .game-ranking-row,
#menuRankingPanel .menu-recipe-empty { position: relative !important; z-index: 1 !important; }
#menuRankingPanel .game-ranking-row {
  width: 100% !important;
  min-height: 74px !important;
  grid-template-columns: 38px minmax(0, 1fr) 96px !important;
  gap: 8px !important;
  padding: 9px 10px !important;
  border-width: 9px !important;
  border-image: var(--menu-surface-row) 28 fill / 9px / 0 stretch !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .42)) !important;
}
#menuRankingPanel .game-ranking-row.me {
  filter: drop-shadow(0 0 6px rgba(244, 211, 104, .24)) drop-shadow(0 3px 4px rgba(0, 0, 0, .42)) !important;
}
#menuRankingPanel .game-ranking-row > strong { width: 30px !important; height: 30px !important; font-size: 11px !important; }
#menuRankingPanel .game-ranking-player i { color: #f3ead4 !important; font-size: 11.5px !important; line-height: 1.1 !important; }
#menuRankingPanel .game-ranking-player small { margin-top: 5px !important; color: #91adba !important; font-size: 8px !important; line-height: 1 !important; }
#menuRankingPanel .game-ranking-stats { gap: 5px !important; }
#menuRankingPanel .game-ranking-stats em { color: #8be6ff !important; font-size: 10px !important; line-height: 1 !important; }
#menuRankingPanel .game-ranking-stats b { color: #f4d36d !important; font-size: 8.5px !important; line-height: 1 !important; }

@media (max-width: 370px), (max-height: 760px) {
  #qaMythicCatalog .qa-rarity-frame {
    width: min(342px, calc(100vw - 14px)) !important;
    height: min(674px, calc(100dvh - 18px)) !important;
    min-height: 610px !important;
    padding: 38px 29px 35px !important;
  }
  #qaMythicCatalog .qa-rarity-card.item-tile.mythic-item {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    padding-inline: 13px 18px !important;
  }
  #qaMythicCatalog .qa-rarity-card .item-icon { width: 46px !important; height: 46px !important; }
  #qaMythicCatalog .qa-rarity-name { font-size: 10.5px !important; }
  body #menuStorePanel.menu-panel.active,
  body #menuRankingPanel.menu-panel.active,
  body #menuGrowthPanel.menu-panel.active,
  body #menuRecipePanel.menu-panel.active,
  body #menuCodexPanel.menu-panel.active,
  body #menuCompanionPanel.menu-panel.active {
    gap: 5px !important;
    padding: 11px 13px 14px !important;
  }
  body #menuGrowthPanel.menu-panel.active { grid-template-rows: 50px minmax(0, 1fr) !important; }
  body #menuRecipePanel.menu-panel.active,
  body #menuCodexPanel.menu-panel.active { grid-template-rows: 50px 40px minmax(0, 1fr) !important; }
  body #menuStorePanel.menu-panel.active { grid-template-rows: 50px 54px minmax(0, 1fr) 31px !important; }
  body #menuRankingPanel.menu-panel.active { grid-template-rows: 50px 33px 40px minmax(0, 1fr) !important; }
  body #menuCompanionPanel.menu-panel.active { grid-template-rows: 50px 54px 38px minmax(0, 1fr) !important; }
  body :is(#menuGrowthPanel,#menuRecipePanel,#menuCodexPanel,#menuRankingPanel,#menuStorePanel,#menuCompanionPanel).menu-panel > .menu-panel-head {
    height: 50px !important;
    min-height: 50px !important;
    grid-template-columns: 66px minmax(0, 1fr) 66px !important;
    padding-inline: 9px !important;
  }
  body :is(#menuGrowthPanel,#menuRecipePanel,#menuCodexPanel,#menuRankingPanel,#menuStorePanel,#menuCompanionPanel).menu-panel > .menu-panel-head > .menu-back-button {
    width: 61px !important;
    min-width: 61px !important;
  }
  #menuRecipePanel .guide-tabbar,
  #menuCodexPanel .codex-tabbar { height: 40px !important; min-height: 40px !important; }
  body #menuCompanionPanel .companion-currency-bar { height: 54px !important; min-height: 54px !important; }
  body #menuCompanionPanel .companion-menu-tabs { height: 38px !important; min-height: 38px !important; }
  #menuStorePanel .store-inventory,
  #menuStorePanel .store-inventory > div { height: 54px !important; min-height: 54px !important; }
  #menuStorePanel .store-product-card {
    min-height: 86px !important;
    grid-template-columns: 50px minmax(0, 1fr) 80px !important;
    padding: 9px 11px !important;
  }
  #menuStorePanel .store-product-icon { width: 48px !important; height: 48px !important; }
  #menuStorePanel .store-buy-button { width: 80px !important; min-width: 80px !important; height: 43px !important; min-height: 43px !important; }
  #menuRankingPanel .ranking-scope-tabs,
  #menuRankingPanel .ranking-scope-button { height: 33px !important; min-height: 33px !important; }
  #menuRankingPanel .lobby-ranking-meta { height: 40px !important; min-height: 40px !important; }
  #menuRankingPanel .game-ranking-list { padding: 30px 17px 20px !important; }
  #menuRankingPanel .game-ranking-row {
    min-height: 69px !important;
    grid-template-columns: 34px minmax(0, 1fr) 88px !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  #menuRankingPanel .game-ranking-row > strong { width: 27px !important; height: 27px !important; font-size: 10px !important; }
  #menuRankingPanel .game-ranking-player i { font-size: 10.5px !important; }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v5.css */
/* Companion screen V5: independent closed tabs and one aligned summon action row. */

:root {
  --companion-tab-v5: url("assets/generated/companion_tab_buttons_v5_1793116800000/companion-tab-v5.webp");
}

body #menuCompanionPanel.menu-panel.active {
  grid-template-rows: 55px 58px 38px minmax(0, 1fr) !important;
}

body #menuCompanionPanel .companion-menu-tabs {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
}

body #menuCompanionPanel .companion-menu-tabs button,
body #menuCompanionPanel .companion-menu-tabs button:not(.active),
body #menuCompanionPanel .companion-menu-tabs button.active,
body #menuCompanionPanel .companion-menu-tabs button:active {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 2px 3px 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent var(--companion-tab-v5) center / 100% 100% no-repeat !important;
  color: #9fb7c4 !important;
  font-size: clamp(8.2px, 2.3vw, 9.4px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow: none !important;
  filter: brightness(.72) saturate(.76) drop-shadow(0 2px 2px rgba(0, 0, 0, .7)) !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-menu-tabs button.active {
  color: #fff1af !important;
  text-shadow: 0 2px 2px #000, 0 0 6px rgba(74, 198, 255, .72) !important;
  filter: brightness(1.18) saturate(1.18) drop-shadow(0 0 4px rgba(57, 171, 255, .45)) drop-shadow(0 2px 2px rgba(0, 0, 0, .78)) !important;
}

body #menuCompanionPanel .companion-menu-tabs button:focus-visible {
  color: #fff5c9 !important;
  filter: brightness(1.08) saturate(1.08) drop-shadow(0 0 4px rgba(83, 200, 255, .55)) !important;
}

body #menuCompanionPanel .companion-tab-view {
  padding: 2px 2px 10px !important;
}

body #menuCompanionPanel .companion-summon-cards {
  align-items: start !important;
  gap: 6px !important;
}

body #menuCompanionPanel .companion-summon-card,
body #menuCompanionPanel .companion-summon-card.premium {
  position: relative !important;
  min-width: 0 !important;
  min-height: 320px !important;
  height: 320px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 88px 18px auto minmax(0, 1fr) !important;
  align-content: start !important;
  justify-items: stretch !important;
  gap: 4px !important;
  padding: 24px 13px 16px !important;
  overflow: hidden !important;
}

body #menuCompanionPanel .companion-summon-art,
body #menuCompanionPanel .companion-summon-art.premium-star {
  grid-row: 1 !important;
  width: 114px !important;
  max-width: 100% !important;
  height: 88px !important;
  min-height: 0 !important;
  flex: none !important;
  place-self: center !important;
  margin: 0 !important;
  object-fit: contain !important;
}

body #menuCompanionPanel .companion-summon-card > strong {
  grid-row: 2 !important;
  min-height: 18px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-summon-card > .companion-summon-controls,
body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
  grid-row: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 31px 38px 10px !important;
  gap: 5px !important;
  margin: 6px 0 0 !important;
}

body #menuCompanionPanel .companion-payment-selector,
body #menuCompanionPanel .companion-summon-card > .companion-summon-controls .companion-payment-selector {
  width: 100% !important;
  min-width: 0 !important;
  height: 31px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3px !important;
  margin: 0 !important;
}

body #menuCompanionPanel .companion-payment-selector.premium-selector {
  grid-template-columns: minmax(0, 1fr) !important;
  padding-inline: 21% !important;
}

body #menuCompanionPanel .companion-payment-selector > button,
body #menuCompanionPanel .companion-payment-selector > span {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 31px !important;
  min-height: 31px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1px 4px 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center / 100% 100% no-repeat !important;
  color: #9db8c6 !important;
  font-size: 7px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  text-align: center !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: none !important;
  filter: brightness(.72) saturate(.8) !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-payment-selector > button.selected,
body #menuCompanionPanel .companion-payment-selector > span.selected {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png") !important;
  color: #fff0aa !important;
  filter: brightness(1.08) saturate(1.05) drop-shadow(0 0 3px rgba(61, 180, 255, .32)) !important;
}

body #menuCompanionPanel .companion-payment-selector > button:disabled {
  opacity: 1 !important;
}

body #menuCompanionPanel .companion-payment-selector img {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 1px #000) !important;
}

body #menuCompanionPanel .companion-summon-actions,
body #menuCompanionPanel .companion-summon-card > .companion-summon-controls .companion-summon-actions {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
}

body #menuCompanionPanel .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-content: center !important;
  place-items: center !important;
  gap: 1px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 2px 3px 3px !important;
  overflow: hidden !important;
  border-style: solid !important;
  border-width: 8px 10px !important;
  border-color: transparent !important;
  border-image-source: url("assets/generated/companion_summon_controls_v4/summon-common-button.png") !important;
  border-image-slice: 70 240 70 240 fill !important;
  border-image-width: 8px 10px !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: brightness(1.06) saturate(1.02) drop-shadow(0 2px 2px rgba(0, 0, 0, .66)) !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
  border-image-source: url("assets/generated/growth_companion_controls_v2_1792936800200/premium-button-v2.png") !important;
  border-image-slice: 112 355 112 355 fill !important;
  filter: brightness(1.02) saturate(.98) drop-shadow(0 2px 2px rgba(0, 0, 0, .66)) !important;
}

body #menuCompanionPanel .companion-summon-actions > button > b {
  font-size: 9px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-summon-actions > button > small {
  min-height: 0 !important;
  margin: 0 !important;
  font-size: 5.6px !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-summon-actions > button:disabled {
  opacity: .45 !important;
  filter: grayscale(.55) brightness(.72) !important;
}

body #menuCompanionPanel .companion-selected-payment {
  width: 100% !important;
  min-height: 10px !important;
  display: block !important;
  margin: 0 !important;
  color: #7f9cac !important;
  font-size: 6.2px !important;
  font-weight: 850 !important;
  line-height: 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-summon-card .companion-odds-link {
  right: 13px !important;
  bottom: 13px !important;
}

body #menuCompanionPanel .companion-summon-notice {
  margin-top: 14px !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel.menu-panel.active {
    grid-template-rows: 50px 54px 35px minmax(0, 1fr) !important;
  }

  body #menuCompanionPanel .companion-menu-tabs,
  body #menuCompanionPanel .companion-menu-tabs button,
  body #menuCompanionPanel .companion-menu-tabs button:not(.active),
  body #menuCompanionPanel .companion-menu-tabs button.active,
  body #menuCompanionPanel .companion-menu-tabs button:active {
    height: 35px !important;
    min-height: 35px !important;
  }

  body #menuCompanionPanel .companion-menu-tabs {
    gap: 2px !important;
  }

  body #menuCompanionPanel .companion-menu-tabs button,
  body #menuCompanionPanel .companion-menu-tabs button:not(.active),
  body #menuCompanionPanel .companion-menu-tabs button.active {
    padding-inline: 2px !important;
    font-size: 8px !important;
  }

  body #menuCompanionPanel .companion-summon-card,
  body #menuCompanionPanel .companion-summon-card.premium {
    min-height: 306px !important;
    height: 306px !important;
    grid-template-rows: 80px 17px auto minmax(0, 1fr) !important;
    padding: 22px 10px 14px !important;
  }

  body #menuCompanionPanel .companion-summon-art,
  body #menuCompanionPanel .companion-summon-art.premium-star {
    width: 104px !important;
    height: 80px !important;
  }

  body #menuCompanionPanel .companion-summon-card > .companion-summon-controls,
  body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
    grid-template-rows: 29px 36px 9px !important;
    gap: 4px !important;
    margin-top: 5px !important;
  }

  body #menuCompanionPanel .companion-payment-selector,
  body #menuCompanionPanel .companion-payment-selector > button,
  body #menuCompanionPanel .companion-payment-selector > span {
    height: 29px !important;
    min-height: 29px !important;
  }

  body #menuCompanionPanel .companion-payment-selector > button,
  body #menuCompanionPanel .companion-payment-selector > span {
    padding-inline: 2px !important;
    font-size: 6.4px !important;
  }

  body #menuCompanionPanel .companion-summon-actions,
  body #menuCompanionPanel .companion-summon-actions > button,
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
  body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
    height: 36px !important;
    min-height: 36px !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button > small {
    font-size: 5.15px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v6.css */
/* Companion screen V6: readable full-width summon actions and balanced controls. */

body #menuCompanionPanel .companion-menu-tabs button,
body #menuCompanionPanel .companion-menu-tabs button:not(.active) {
  color: #a3b5bd !important;
  filter: brightness(.72) saturate(.72) drop-shadow(0 2px 2px rgba(0, 0, 0, .76)) !important;
}

body #menuCompanionPanel .companion-menu-tabs button.active {
  color: #fff2ad !important;
  text-shadow: 0 2px 2px #000, 0 0 7px rgba(75, 208, 255, .82) !important;
  filter: brightness(1.3) saturate(1.28) drop-shadow(0 0 5px rgba(52, 184, 255, .55)) drop-shadow(0 2px 2px rgba(0, 0, 0, .8)) !important;
}

body #menuCompanionPanel .companion-summon-card > .companion-summon-controls,
body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
  grid-template-rows: 32px 81px !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

body #menuCompanionPanel .companion-payment-selector,
body #menuCompanionPanel .companion-summon-card > .companion-summon-controls .companion-payment-selector,
body #menuCompanionPanel .companion-payment-selector.premium-selector {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
}

body #menuCompanionPanel .companion-summon-card .companion-summon-controls .companion-payment-selector.premium-selector {
  grid-template-columns: minmax(0, 1fr) !important;
}

body #menuCompanionPanel .companion-summon-card .companion-summon-controls .companion-payment-selector > button,
body #menuCompanionPanel .companion-summon-card .companion-summon-controls .companion-payment-selector > span {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 1px 5px 0 !important;
  border: 0 !important;
  border-image: none !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center / 100% 100% no-repeat !important;
  font-size: 7.3px !important;
}

body #menuCompanionPanel .companion-summon-card .companion-summon-controls .companion-payment-selector > button:not(.selected) {
  color: #a9bac2 !important;
  filter: brightness(.78) saturate(.76) !important;
}

body #menuCompanionPanel .companion-summon-card .companion-summon-controls .companion-payment-selector > button.selected {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png") !important;
  color: #fff1aa !important;
  filter: brightness(1.2) saturate(1.14) drop-shadow(0 0 4px rgba(68, 192, 255, .42)) !important;
}

body #menuCompanionPanel .companion-summon-card .companion-summon-controls .companion-payment-selector.premium-selector > span.selected {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png") !important;
  color: #ffe9a0 !important;
  filter: brightness(1.08) saturate(1.03) drop-shadow(0 0 3px rgba(161, 90, 255, .34)) !important;
}

body #menuCompanionPanel .companion-payment-selector img {
  width: 14px !important;
  height: 14px !important;
  flex-basis: 14px !important;
}

body #menuCompanionPanel .companion-summon-actions,
body #menuCompanionPanel .companion-summon-card > .companion-summon-controls .companion-summon-actions {
  width: 100% !important;
  height: 81px !important;
  min-height: 81px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(2, 38px) !important;
  gap: 5px !important;
}

body #menuCompanionPanel .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 2px 12px 3px !important;
  border-width: 8px 14px !important;
  border-image-width: 8px 14px !important;
}

body #menuCompanionPanel .companion-summon-actions > button > b {
  font-size: 10px !important;
}

body #menuCompanionPanel .companion-summon-actions > button > small {
  font-size: 6.7px !important;
  letter-spacing: -.02em !important;
}

body #menuCompanionPanel .companion-selected-payment {
  display: none !important;
}

body #menuCompanionPanel .companion-summon-card .companion-odds-link {
  bottom: 12px !important;
}

body #menuCompanionPanel .companion-summon-notice {
  margin-top: 11px !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-summon-card > .companion-summon-controls,
  body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
    grid-template-rows: 30px 75px !important;
    gap: 5px !important;
    margin-top: 5px !important;
  }

  body #menuCompanionPanel .companion-payment-selector,
  body #menuCompanionPanel .companion-payment-selector.premium-selector,
  body #menuCompanionPanel .companion-summon-card .companion-summon-controls .companion-payment-selector > button,
  body #menuCompanionPanel .companion-summon-card .companion-summon-controls .companion-payment-selector > span {
    height: 30px !important;
    min-height: 30px !important;
  }

  body #menuCompanionPanel .companion-summon-card .companion-summon-controls .companion-payment-selector > button,
  body #menuCompanionPanel .companion-summon-card .companion-summon-controls .companion-payment-selector > span {
    padding-inline: 3px !important;
    font-size: 6.8px !important;
  }

  body #menuCompanionPanel .companion-summon-actions,
  body #menuCompanionPanel .companion-summon-card > .companion-summon-controls .companion-summon-actions {
    height: 75px !important;
    min-height: 75px !important;
    grid-template-rows: repeat(2, 35px) !important;
    gap: 5px !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button,
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
  body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
    height: 35px !important;
    min-height: 35px !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button > small {
    font-size: 6.1px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v7.css */
/* Companion screen V7: inset navigation, a clearer resource tray,
   and a single raster payment switch without a redundant premium label. */

:root {
  --companion-payment-tray-v7: url("assets/generated/ui_controls_purpose_1788505000000/tab-tray-wide.png");
  --companion-payment-selected-v7: url("assets/generated/companion_screen_rebuild_v3_web_1793023200111/tab-active-v3.webp");
}

body #menuCompanionPanel.menu-panel.active {
  grid-template-rows: 55px 60px 36px minmax(0, 1fr) !important;
}

/* Keep the four-value tray inside the painted inner metal line. */
body #menuCompanionPanel .companion-currency-bar {
  width: calc(100% - 12px) !important;
  height: 58px !important;
  min-height: 58px !important;
  justify-self: center !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 7px 15px 6px !important;
  box-sizing: border-box !important;
  background: transparent url("assets/generated/companion_screen_rebuild_v3_web_1793023200111/resource-tray-v3.webp") center 46% / 100% auto no-repeat !important;
  filter: brightness(1.04) saturate(1.02) drop-shadow(0 3px 3px rgba(0, 0, 0, .62)) !important;
}

body #menuCompanionPanel .companion-currency-bar > span {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 23px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  column-gap: 3px !important;
  box-sizing: border-box !important;
  padding: 5px 5px 4px !important;
  background: none !important;
}

body #menuCompanionPanel .companion-currency-bar > span:first-child {
  padding-left: 7px !important;
}

body #menuCompanionPanel .companion-currency-bar > span:last-child {
  padding-right: 7px !important;
}

body #menuCompanionPanel .companion-currency-bar img {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 23px !important;
  height: 23px !important;
  place-self: center !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 4px rgba(90, 198, 255, .32)) drop-shadow(0 2px 2px #000) !important;
}

body #menuCompanionPanel .companion-currency-bar em,
body #menuCompanionPanel .companion-currency-bar b {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-currency-bar em {
  align-self: end !important;
  color: #c9dde6 !important;
  font-size: 8.4px !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 2px 2px #000 !important;
}

body #menuCompanionPanel .companion-currency-bar b {
  align-self: start !important;
  padding-top: 3px !important;
  color: #fff0a4 !important;
  font-size: 12.4px !important;
  text-shadow: 0 2px 2px #000, 0 0 4px rgba(68, 176, 232, .24) !important;
}

/* The independent tabs stay intact, but no longer touch the panel's inner frame. */
body #menuCompanionPanel .companion-menu-tabs {
  width: calc(100% - 14px) !important;
  height: 36px !important;
  min-height: 36px !important;
  justify-self: center !important;
  align-items: center !important;
  gap: 2px !important;
  overflow: hidden !important;
}

body #menuCompanionPanel .companion-menu-tabs button,
body #menuCompanionPanel .companion-menu-tabs button:not(.active),
body #menuCompanionPanel .companion-menu-tabs button.active,
body #menuCompanionPanel .companion-menu-tabs button:active {
  height: 34px !important;
  min-height: 34px !important;
  align-self: center !important;
  padding: 2px 3px 0 !important;
  font-size: clamp(9px, 2.45vw, 10px) !important;
  letter-spacing: -.045em !important;
  background-size: 100% 100% !important;
}

/* Common summon uses one selection tray instead of two unrelated small buttons. */
body #menuCompanionPanel .companion-summon-card.common > .companion-summon-controls {
  grid-template-rows: 32px 81px !important;
  gap: 6px !important;
}

body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
  grid-template-rows: 81px !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  padding-top: 38px !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  padding: 3px 5px !important;
  overflow: hidden !important;
  background: transparent var(--companion-payment-tray-v7) center / 100% 100% no-repeat !important;
  filter: brightness(.95) drop-shadow(0 2px 2px rgba(0, 0, 0, .66)) !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button:not(.selected),
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
  width: 100% !important;
  height: 26px !important;
  min-height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1px 3px 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: #aebfc7 !important;
  font-size: 9.2px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: none !important;
  filter: brightness(.82) saturate(.78) !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
  background: transparent var(--companion-payment-selected-v7) center / 100% 100% no-repeat !important;
  color: #fff0aa !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(76, 197, 255, .55) !important;
  filter: brightness(1.18) saturate(1.12) !important;
}

body #menuCompanionPanel .companion-summon-actions > button > b {
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

body #menuCompanionPanel .companion-summon-actions > button > small {
  font-size: 8.4px !important;
  letter-spacing: -.01em !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel.menu-panel.active {
    grid-template-rows: 50px 56px 34px minmax(0, 1fr) !important;
  }

  body #menuCompanionPanel .companion-currency-bar {
    width: calc(100% - 10px) !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 6px 13px 5px !important;
  }

  body #menuCompanionPanel .companion-currency-bar > span {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    column-gap: 2px !important;
    padding: 5px 3px 4px !important;
  }

  body #menuCompanionPanel .companion-currency-bar img {
    width: 20px !important;
    height: 20px !important;
  }

  body #menuCompanionPanel .companion-currency-bar em {
    font-size: 7.8px !important;
  }

  body #menuCompanionPanel .companion-currency-bar b {
    padding-top: 2px !important;
    font-size: 11.2px !important;
  }

  body #menuCompanionPanel .companion-menu-tabs {
    width: calc(100% - 14px) !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  body #menuCompanionPanel .companion-menu-tabs button,
  body #menuCompanionPanel .companion-menu-tabs button:not(.active),
  body #menuCompanionPanel .companion-menu-tabs button.active,
  body #menuCompanionPanel .companion-menu-tabs button:active {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 8.8px !important;
  }

  body #menuCompanionPanel .companion-summon-card.common > .companion-summon-controls {
    grid-template-rows: 30px 75px !important;
    gap: 5px !important;
  }

  body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
    grid-template-rows: 75px !important;
    padding-top: 35px !important;
  }

  body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector {
    height: 30px !important;
    min-height: 30px !important;
    padding: 3px 4px !important;
  }

  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button,
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button:not(.selected),
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
    height: 24px !important;
    min-height: 24px !important;
    padding-inline: 2px !important;
    font-size: 8.6px !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button > b {
    font-size: 11.5px !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button > small {
    font-size: 7.9px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v8.css */
/* Companion screen V8: align interactive content to the painted inner frame. */

/* The four resource cells are painted as exact quarters of one raster plate.
   Keep the outer grid unpadded so the HTML quarters share those same centers. */
body #menuCompanionPanel .companion-currency-bar {
  width: calc(100% - 16px) !important;
  padding: 7px 0 6px !important;
}

body #menuCompanionPanel .companion-currency-bar > span,
body #menuCompanionPanel .companion-currency-bar > span:first-child,
body #menuCompanionPanel .companion-currency-bar > span:last-child {
  padding: 5px 7px 4px !important;
}

/* Pull the complete navigation row away from both painted side rails. */
body #menuCompanionPanel .companion-menu-tabs {
  width: calc(100% - 30px) !important;
}

/* The summon-card ornaments are wider than their content boxes. Give those
   ornaments their own safe margin inside the large background plate. */
body #menuCompanionPanel #companionSummonView {
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

body #menuCompanionPanel .companion-summon-cards {
  gap: 6px !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-currency-bar {
    width: calc(100% - 16px) !important;
    padding: 6px 0 5px !important;
  }

  body #menuCompanionPanel .companion-currency-bar > span,
  body #menuCompanionPanel .companion-currency-bar > span:first-child,
  body #menuCompanionPanel .companion-currency-bar > span:last-child {
    padding: 5px 5px 4px !important;
  }

  body #menuCompanionPanel .companion-menu-tabs {
    width: calc(100% - 30px) !important;
  }

  body #menuCompanionPanel #companionSummonView {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v9.css */
/* Companion screen V9: quiet resource ledger and optically aligned contents. */

body #menuCompanionPanel .companion-currency-bar {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  background: none !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .46)) !important;
}

/* Keep the authored four-cell silhouette, but let it sit behind the values
   instead of competing with every icon and label. */
body #menuCompanionPanel .companion-currency-bar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: transparent url("assets/generated/companion_screen_rebuild_v3_web_1793023200111/resource-tray-v3.webp") center 46% / 100% auto no-repeat !important;
  opacity: .54 !important;
  filter: brightness(.68) saturate(.58) contrast(.88) !important;
}

body #menuCompanionPanel .companion-currency-bar > span,
body #menuCompanionPanel .companion-currency-bar > span:first-child,
body #menuCompanionPanel .companion-currency-bar > span:last-child {
  position: relative !important;
  z-index: 1 !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-rows: 18px 18px !important;
  align-content: center !important;
  column-gap: 3px !important;
  padding: 5px 6px !important;
}

body #menuCompanionPanel .companion-currency-bar img {
  width: 24px !important;
  height: 24px !important;
  place-self: center !important;
  transform: translateY(1px) !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .88)) drop-shadow(0 0 3px rgba(76, 180, 255, .26)) !important;
}

body #menuCompanionPanel .companion-currency-bar em,
body #menuCompanionPanel .companion-currency-bar b {
  width: 100% !important;
  justify-self: stretch !important;
  text-align: left !important;
}

body #menuCompanionPanel .companion-currency-bar em {
  align-self: end !important;
  padding: 0 0 1px !important;
  color: #b7c9d2 !important;
  text-shadow: 0 2px 2px #000 !important;
}

body #menuCompanionPanel .companion-currency-bar b {
  align-self: start !important;
  padding: 2px 0 0 !important;
  color: #ffeaa0 !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-currency-bar::before {
    opacity: .5 !important;
  }

  body #menuCompanionPanel .companion-currency-bar > span,
  body #menuCompanionPanel .companion-currency-bar > span:first-child,
  body #menuCompanionPanel .companion-currency-bar > span:last-child {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    grid-template-rows: 17px 17px !important;
    column-gap: 2px !important;
    padding: 5px !important;
  }

  body #menuCompanionPanel .companion-currency-bar img {
    width: 22px !important;
    height: 22px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v10.css */
/* Companion screen V10: optical resource groups and two complete payment tabs. */

/* Center each icon/copy pair inside its own painted quarter. The source icons
   have different transparent silhouettes, so their final nudges are separate. */
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:first-child,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 5px 3px !important;
}

body #menuCompanionPanel .companion-currency-copy {
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  display: grid !important;
  grid-template-rows: 18px 18px !important;
  place-items: center !important;
  flex: 0 0 auto !important;
}

body #menuCompanionPanel .companion-currency-copy > em,
body #menuCompanionPanel .companion-currency-copy > b {
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  justify-self: center !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-currency-copy > em {
  padding: 0 0 1px !important;
}

body #menuCompanionPanel .companion-currency-copy > b {
  padding: 2px 0 0 !important;
}

body #menuCompanionPanel .companion-currency-item.currency-shards > img {
  transform: translate(2px, 3px) !important;
}

body #menuCompanionPanel .companion-currency-item.currency-common > img {
  transform: translate(-1px, 5px) !important;
}

body #menuCompanionPanel .companion-currency-item.currency-premium > img {
  transform: translate(0, 5px) !important;
}

body #menuCompanionPanel .companion-currency-item.currency-dust > img {
  transform: translate(3px, 5px) !important;
}

/* Replace the half-empty shared tray with two complete, equal raster tabs. */
body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector {
  height: 32px !important;
  min-height: 32px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button:not(.selected),
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  gap: 3px !important;
  padding: 1px 4px 0 !important;
  background: transparent url("assets/generated/companion_tab_buttons_v5_1793116800000/companion-tab-v5.webp") center / 100% 100% no-repeat !important;
  color: #aebfc7 !important;
  font-size: 8.8px !important;
  filter: brightness(.66) saturate(.72) !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
  color: #fff0a4 !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(69, 194, 255, .62) !important;
  filter: brightness(1.2) saturate(1.12) drop-shadow(0 0 3px rgba(60, 184, 255, .34)) !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector img {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}

body #menuCompanionPanel .companion-payment-selector > button[data-common-summon-payment="ticket"] img {
  transform: translateY(1px) !important;
}

body #menuCompanionPanel .companion-payment-selector > button[data-common-summon-payment="shard"] img {
  transform: translateX(1px) !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item,
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:first-child,
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:last-child {
    gap: 3px !important;
    padding: 5px 2px !important;
  }

  body #menuCompanionPanel .companion-currency-copy {
    height: 34px !important;
    grid-template-rows: 17px 17px !important;
  }

  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button,
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button:not(.selected),
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
    height: 30px !important;
    min-height: 30px !important;
    gap: 2px !important;
    padding-inline: 3px !important;
    font-size: 8.2px !important;
  }

  body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector img {
    width: 14px !important;
    height: 14px !important;
    flex-basis: 14px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v11.css */
/* Companion screen V11: painted-tray baselines and summon-art clearance. */

/* The V10 copy block sat against the lower metal rail. Lift each complete
   resource group slightly, then lift the two-line copy one extra pixel so the
   visible icon silhouette and the label/value center share the same axis. */
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:first-child,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:last-child {
  transform: translateY(-2px) !important;
}

body #menuCompanionPanel .companion-currency-copy {
  transform: translateY(-3px) !important;
}

/* Keep both authored summon illustrations at their established size. The
   taller first grid row moves the illustration, title and controls together,
   clearing the card's painted crown instead of overlaying it. */
body #menuCompanionPanel .companion-summon-card,
body #menuCompanionPanel .companion-summon-card.premium {
  grid-template-rows: 110px 18px auto minmax(0, 1fr) !important;
}

body #menuCompanionPanel .companion-summon-art,
body #menuCompanionPanel .companion-summon-art.premium-star {
  transform: translateY(6px) !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-summon-card,
  body #menuCompanionPanel .companion-summon-card.premium {
    grid-template-rows: 102px 17px auto minmax(0, 1fr) !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v12.css */
/* Companion screen V12: readable summon actions and integrated odds guidance. */

/* Match the visible silhouettes rather than the transparent image canvases. */
body #menuCompanionPanel .companion-currency-item.currency-common > img {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  transform: translate(-1px, 4px) !important;
  filter: brightness(1.22) saturate(1.04) drop-shadow(0 1px 2px rgba(0, 0, 0, .88)) drop-shadow(0 0 3px rgba(76, 180, 255, .3)) !important;
}

body #menuCompanionPanel .companion-currency-item.currency-premium > img {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  transform: translate(0, 5px) !important;
  filter: brightness(1.13) saturate(1.08) drop-shadow(0 1px 2px rgba(0, 0, 0, .88)) drop-shadow(0 0 4px rgba(125, 76, 255, .36)) !important;
}

body #menuCompanionPanel .companion-currency-item.currency-dust > img {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  transform: translate(3px, 4px) !important;
  filter: brightness(1.08) saturate(1.04) drop-shadow(0 1px 2px rgba(0, 0, 0, .88)) drop-shadow(0 0 3px rgba(76, 180, 255, .3)) !important;
}

/* The common illustration has a taller visible tip than the abyss artwork. */
body #menuCompanionPanel .companion-summon-card.common > .companion-summon-art {
  transform: translateY(17px) !important;
}

body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-art.premium-star {
  transform: translateY(14px) !important;
}

body #menuCompanionPanel .companion-summon-card,
body #menuCompanionPanel .companion-summon-card.premium {
  grid-template-rows: 94px 18px auto minmax(0, 1fr) !important;
}

/* Give the primary actions enough painted area for readable title and cost. */
body #menuCompanionPanel .companion-summon-card.common > .companion-summon-controls {
  grid-template-rows: 32px 89px !important;
}

body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
  grid-template-rows: 89px !important;
  padding-top: 34px !important;
}

body #menuCompanionPanel .companion-summon-actions,
body #menuCompanionPanel .companion-summon-card > .companion-summon-controls .companion-summon-actions {
  height: 89px !important;
  min-height: 89px !important;
  grid-template-rows: repeat(2, 42px) !important;
  gap: 5px !important;
}

body #menuCompanionPanel .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
  height: 42px !important;
  min-height: 42px !important;
  padding: 2px 12px 3px !important;
}

body #menuCompanionPanel .companion-summon-actions > button > b {
  font-size: 13px !important;
}

body #menuCompanionPanel .companion-summon-actions > button > small {
  min-height: 0 !important;
  font-size: 9.3px !important;
  letter-spacing: 0 !important;
}

/* Probability is supporting information, so present it as an in-card text
   affordance instead of a third miniature action button. */
body #menuCompanionPanel .companion-summon-card .companion-odds-link,
body #menuCompanionPanel .companion-summon-card.common .companion-odds-link,
body #menuCompanionPanel .companion-summon-card.premium .companion-odds-link {
  position: absolute !important;
  right: 15px !important;
  bottom: 12px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 19px !important;
  min-height: 19px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 2px 1px !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: #9db9c8 !important;
  font-size: 8.6px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-summon-card .companion-odds-link::before {
  content: "◆" !important;
  color: #b99855 !important;
  font-size: 6px !important;
  text-shadow: 0 0 3px rgba(255, 214, 111, .3) !important;
}

body #menuCompanionPanel .companion-summon-card .companion-odds-link:hover,
body #menuCompanionPanel .companion-summon-card .companion-odds-link:focus-visible {
  color: #fff0a4 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-odds-row {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 24px !important;
  min-height: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: -2px 0 0 !important;
}

body #menuCompanionPanel .companion-odds-row > .companion-odds-link {
  width: 100% !important;
  height: 24px !important;
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: #a9c2cf !important;
  font-size: 9.2px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-odds-row > .companion-odds-link::before {
  content: "◆" !important;
  color: #b99855 !important;
  font-size: 6px !important;
  text-shadow: 0 0 3px rgba(255, 214, 111, .3) !important;
}

body #menuCompanionPanel .companion-odds-row > .companion-odds-link:hover,
body #menuCompanionPanel .companion-odds-row > .companion-odds-link:focus-visible {
  color: #fff0a4 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

body #menuCompanionPanel .companion-summon-notice {
  min-height: 18px !important;
  margin: 10px 0 0 !important;
  color: #a9c0cc !important;
  font-size: 9px !important;
  line-height: 18px !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-summon-card,
  body #menuCompanionPanel .companion-summon-card.premium {
    grid-template-rows: 88px 17px auto minmax(0, 1fr) !important;
  }

  body #menuCompanionPanel .companion-currency-item.currency-common > img,
  body #menuCompanionPanel .companion-currency-item.currency-premium > img {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
  }

  body #menuCompanionPanel .companion-currency-item.currency-dust > img {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }

  body #menuCompanionPanel .companion-summon-card.common > .companion-summon-controls {
    grid-template-rows: 32px 85px !important;
    gap: 5px !important;
  }

  body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
    grid-template-rows: 85px !important;
    padding-top: 30px !important;
  }

  body #menuCompanionPanel .companion-summon-actions,
  body #menuCompanionPanel .companion-summon-card > .companion-summon-controls .companion-summon-actions {
    height: 85px !important;
    min-height: 85px !important;
    grid-template-rows: repeat(2, 40px) !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button,
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
  body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
    height: 40px !important;
    min-height: 40px !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button > b {
    font-size: 12.2px !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button > small {
    font-size: 8.7px !important;
  }

  body #menuCompanionPanel .companion-summon-card .companion-odds-link,
  body #menuCompanionPanel .companion-summon-card.common .companion-odds-link,
  body #menuCompanionPanel .companion-summon-card.premium .companion-odds-link {
    right: 13px !important;
    bottom: 11px !important;
    font-size: 8.2px !important;
  }

  body #menuCompanionPanel .companion-odds-row,
  body #menuCompanionPanel .companion-odds-row > .companion-odds-link {
    height: 22px !important;
    min-height: 22px !important;
  }

  body #menuCompanionPanel .companion-odds-row > .companion-odds-link {
    font-size: 8.6px !important;
  }

}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v13.css */
/* Companion screen V13: quieter summon actions. */

body #menuCompanionPanel .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
  position: relative !important;
  isolation: isolate !important;
  width: calc(100% - 6px) !important;
  justify-self: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-image: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-summon-actions > button::before,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button::before,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button::before {
  content: "" !important;
  position: absolute !important;
  inset: 2px 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center / 100% 100% no-repeat !important;
  opacity: .82 !important;
  filter: brightness(.7) saturate(.58) contrast(.94) !important;
}

body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button::before {
  opacity: .78 !important;
  filter: hue-rotate(42deg) brightness(.67) saturate(.62) contrast(.95) !important;
}

body #menuCompanionPanel .companion-summon-actions > button > b,
body #menuCompanionPanel .companion-summon-actions > button > small {
  position: relative !important;
  z-index: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
}

body #menuCompanionPanel .companion-summon-actions > button > b {
  color: #efe4b7 !important;
}

body #menuCompanionPanel .companion-summon-actions > button > small {
  color: #aebfc8 !important;
}

body #menuCompanionPanel .companion-summon-actions > button:hover::before,
body #menuCompanionPanel .companion-summon-actions > button:focus-visible::before {
  opacity: .94 !important;
  filter: brightness(.82) saturate(.7) contrast(.96) !important;
}

body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button:hover::before,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button:focus-visible::before {
  opacity: .9 !important;
  filter: hue-rotate(42deg) brightness(.78) saturate(.74) contrast(.96) !important;
}

body #menuCompanionPanel .companion-summon-actions > button:active {
  transform: translateY(1px) !important;
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v14.css */
/* Companion screen V14: card-safe payment and action geometry. */

/* Both payment choices live inside the painted inner rail, not on top of it. */
body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector {
  width: calc(100% - 18px) !important;
  justify-self: center !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button:not(.selected),
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
  min-width: 0 !important;
  gap: 2px !important;
  padding-inline: 3px !important;
  font-size: 8.3px !important;
}

/* The ticket is optically centred in its source. The shard is visibly lower
   and slightly right inside its transparent canvas, so it needs its own nudge. */
body #menuCompanionPanel .companion-payment-selector > button[data-common-summon-payment="ticket"] img {
  width: 14px !important;
  height: 14px !important;
  flex-basis: 14px !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-payment-selector > button[data-common-summon-payment="shard"] img {
  width: 15px !important;
  height: 15px !important;
  flex-basis: 15px !important;
  transform: translate(-1px, -1px) !important;
}

/* Lift the complete control groups away from the card's lower gem and wings. */
body #menuCompanionPanel .companion-summon-card.common > .companion-summon-controls,
body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
  transform: translateY(-13px) !important;
}

body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
  padding-top: 38px !important;
}

/* Common and abyss summons now share one painted safe width and row rhythm. */
body #menuCompanionPanel .companion-summon-actions,
body #menuCompanionPanel .companion-summon-card > .companion-summon-controls .companion-summon-actions {
  height: 82px !important;
  min-height: 82px !important;
  grid-template-rows: repeat(2, 39px) !important;
  gap: 4px !important;
}

body #menuCompanionPanel .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
  width: calc(100% - 22px) !important;
  height: 39px !important;
  min-height: 39px !important;
  justify-self: center !important;
  padding: 2px 9px 3px !important;
}

/* Keep the subdued raster plate, but let more of each card's own colour show
   through so the control reads as part of the card instead of a pasted bar. */
body #menuCompanionPanel .companion-summon-actions > button::before,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button::before,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button::before {
  inset: 2px 0 3px !important;
  opacity: .75 !important;
  filter: brightness(.76) saturate(.68) contrast(.96) !important;
}

body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button::before {
  opacity: .72 !important;
  filter: hue-rotate(42deg) brightness(.73) saturate(.72) contrast(.96) !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector {
    width: calc(100% - 12px) !important;
  }

  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button,
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button:not(.selected),
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
    font-size: 7.8px !important;
    padding-inline: 2px !important;
  }

  body #menuCompanionPanel .companion-payment-selector > button[data-common-summon-payment="ticket"] img {
    width: 13px !important;
    height: 13px !important;
    flex-basis: 13px !important;
  }

  body #menuCompanionPanel .companion-payment-selector > button[data-common-summon-payment="shard"] img {
    width: 14px !important;
    height: 14px !important;
    flex-basis: 14px !important;
  }

  body #menuCompanionPanel .companion-summon-card.common > .companion-summon-controls,
  body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
    transform: translateY(-12px) !important;
  }

  body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
    padding-top: 37px !important;
  }

  body #menuCompanionPanel .companion-summon-actions,
  body #menuCompanionPanel .companion-summon-card > .companion-summon-controls .companion-summon-actions {
    height: 78px !important;
    min-height: 78px !important;
    grid-template-rows: repeat(2, 37px) !important;
    gap: 4px !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button,
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
  body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
    width: calc(100% - 18px) !important;
    height: 37px !important;
    min-height: 37px !important;
    padding-inline: 7px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v15.css */
/* Companion screen V15: final quiet raster summon controls and inset store rows. */

/* Keep the two payment choices independent, but use the common summon plate
   instead of a generic purple control. */
body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector {
  width: calc(100% - 20px) !important;
  height: 31px !important;
  min-height: 31px !important;
  gap: 4px !important;
  justify-self: center !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button:not(.selected),
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
  position: relative !important;
  isolation: isolate !important;
  height: 31px !important;
  min-height: 31px !important;
  gap: 3px !important;
  padding: 1px 4px 0 !important;
  overflow: visible !important;
  background: none !important;
  color: #aebfc7 !important;
  font-size: 8.5px !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px -2px 3px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: transparent url("assets/generated/companion_summon_controls_v4/summon-common-button.png") center / 100% 100% no-repeat !important;
  opacity: .42 !important;
  filter: brightness(.60) saturate(.58) contrast(.96) !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
  color: #fff0aa !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(72, 192, 255, .46) !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected::before {
  opacity: .78 !important;
  filter: brightness(.87) saturate(.80) contrast(.98) !important;
}

/* The 1/10 controls share one width and one quiet black-metal rhythm. */
body #menuCompanionPanel .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
  width: calc(100% - 20px) !important;
  padding: 2px 9px 3px !important;
}

body #menuCompanionPanel .companion-summon-actions > button::before,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button::before {
  inset: 4px -1px 3px !important;
  background-image: url("assets/generated/companion_summon_controls_v4/summon-common-button.png") !important;
  opacity: .58 !important;
  filter: brightness(.64) saturate(.62) contrast(.96) !important;
}

body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button::before {
  inset: 4px -1px 3px !important;
  background-image: url("assets/generated/companion_summon_controls_v4/summon-premium-button.png") !important;
  opacity: .56 !important;
  filter: brightness(.62) saturate(.58) contrast(.97) !important;
}

body #menuCompanionPanel .companion-summon-actions > button > b {
  color: #eee2b5 !important;
  font-size: 11.4px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-summon-actions > button > small {
  color: #b3c4ca !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-summon-actions > button:hover::before,
body #menuCompanionPanel .companion-summon-actions > button:focus-visible::before {
  opacity: .68 !important;
  filter: brightness(.73) saturate(.68) contrast(.98) !important;
}

body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button:hover::before,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button:focus-visible::before {
  opacity: .65 !important;
  filter: brightness(.70) saturate(.66) contrast(.98) !important;
}

/* The ticket shop uses the same inset black-metal lane as the summon cards. */
body #menuCompanionPanel .companion-store-heading,
body #menuCompanionPanel .companion-store-product {
  width: calc(100% - 8px) !important;
  justify-self: center !important;
  filter: brightness(.90) saturate(.84) !important;
}

body #menuCompanionPanel .companion-store-product.best {
  filter: brightness(.98) saturate(.90) !important;
}

body #menuCompanionPanel .companion-store-product > em {
  filter: brightness(.88) saturate(.78) !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector {
    width: calc(100% - 14px) !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button,
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button:not(.selected),
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
    height: 30px !important;
    min-height: 30px !important;
    padding-inline: 3px !important;
    font-size: 8px !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button,
  body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button,
  body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button {
    width: calc(100% - 16px) !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button > b {
    font-size: 10.8px !important;
  }

  body #menuCompanionPanel .companion-summon-actions > button > small {
    font-size: 7.5px !important;
  }

  body #menuCompanionPanel .companion-store-heading,
  body #menuCompanionPanel .companion-store-product {
    width: calc(100% - 6px) !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v17.css */
/* Companion screen V17: restore the V15 summon cards and retain the corrected
   resource ledger. Ticket purchases live only in the main store. */

/* Each remaining destination owns one equal painted tab cell. */
body #menuCompanionPanel .companion-menu-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

body #menuCompanionPanel .companion-menu-tabs > button,
body #menuCompanionPanel .companion-menu-tabs > button:not(.active),
body #menuCompanionPanel .companion-menu-tabs > button.active {
  min-width: 0 !important;
  padding-inline: 8px !important;
}

/* Resource ledger: each painted quarter owns one icon column and one two-line
   text column. This resets the older per-icon translations that caused overlap. */
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:first-child,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:last-child {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  grid-template-rows: 14px 14px !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 3px !important;
  padding: 5px 4px !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-currency-copy {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  width: 100% !important;
  height: 28px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: 14px 14px !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: start !important;
  padding: 0 !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-currency-copy > em,
body #menuCompanionPanel .companion-currency-copy > b {
  width: 100% !important;
  min-width: 0 !important;
  align-self: center !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-currency-copy > em {
  font-size: 7.8px !important;
  letter-spacing: -.02em !important;
}

body #menuCompanionPanel .companion-currency-copy > b {
  font-size: 11px !important;
}

body #menuCompanionPanel .companion-currency-item > img,
body #menuCompanionPanel .companion-currency-item.currency-shards > img,
body #menuCompanionPanel .companion-currency-item.currency-common > img,
body #menuCompanionPanel .companion-currency-item.currency-premium > img,
body #menuCompanionPanel .companion-currency-item.currency-dust > img {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  place-self: center !important;
  flex: none !important;
  margin: 0 !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-currency-item.currency-shards > img {
  width: 15px !important;
  height: 15px !important;
}

body #menuCompanionPanel .companion-currency-item.currency-common > img,
body #menuCompanionPanel .companion-currency-item.currency-premium > img {
  width: 17px !important;
  height: 17px !important;
}

body #menuCompanionPanel .companion-currency-item.currency-dust > img {
  width: 16px !important;
  height: 16px !important;
}

/* Ticket shop: the outer companion frame stays unchanged. The heading and
   every product become separate inset cards with safe space on both sides. */
body #menuCompanionPanel .companion-store-view {
  padding: 10px 8px 14px !important;
  overflow: hidden !important;
}

body #menuCompanionPanel .companion-store-heading,
body #menuCompanionPanel .companion-store-product {
  width: calc(100% - 24px) !important;
  max-width: calc(100% - 24px) !important;
  justify-self: center !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: brightness(.88) saturate(.72) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)) !important;
}

body #menuCompanionPanel .companion-store-heading {
  min-height: 64px !important;
  height: 64px !important;
  grid-template-columns: 46px minmax(0, 1fr) 42px !important;
  gap: 6px !important;
  padding: 8px 15px 8px 13px !important;
}

body #menuCompanionPanel .companion-store-heading > img {
  width: 38px !important;
  height: 38px !important;
  place-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-store-heading > span {
  align-self: center !important;
  gap: 4px !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-store-heading strong {
  font-size: 11.5px !important;
}

body #menuCompanionPanel .companion-store-heading small {
  font-size: 6.8px !important;
}

body #menuCompanionPanel .companion-store-heading > b {
  align-self: center !important;
  font-size: 9.5px !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-store-list {
  width: 100% !important;
  display: grid !important;
  justify-items: center !important;
  gap: 6px !important;
  margin-top: 0 !important;
}

body #menuCompanionPanel .companion-store-product {
  min-height: 57px !important;
  height: 57px !important;
  grid-template-columns: 41px minmax(0, 1fr) 69px !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 13px 7px 11px !important;
  color: #e7f3f8 !important;
  text-align: left !important;
}

body #menuCompanionPanel .companion-store-product.best {
  filter: brightness(.98) saturate(.84) drop-shadow(0 2px 2px rgba(0, 0, 0, .54)) !important;
}

body #menuCompanionPanel .companion-store-product > img {
  width: 34px !important;
  height: 34px !important;
  place-self: center !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-store-product > span {
  min-width: 0 !important;
  align-self: center !important;
  gap: 3px !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-store-product > span > b {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 9.2px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-store-product > span > b > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

body #menuCompanionPanel .companion-store-product > span > b > i {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 !important;
  background: none !important;
  color: #aeb9bd !important;
  font-size: 6.5px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-store-product > span > b > i::before {
  content: "◆" !important;
  color: #78c8e8 !important;
  font-size: 4.6px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-store-product.best > span > b > i {
  color: #ffe58b !important;
}

body #menuCompanionPanel .companion-store-product.best > span > b > i::before {
  color: #eabf5c !important;
}

body #menuCompanionPanel .companion-store-product > span > small {
  font-size: 6.5px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-store-product > em {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 0 5px !important;
  align-self: center !important;
  color: #fff0a7 !important;
  font-size: 10.2px !important;
  font-weight: 950 !important;
  text-shadow: 0 2px 2px #000, 0 0 4px rgba(255, 217, 117, .2) !important;
  transform: none !important;
  filter: brightness(.96) saturate(.82) !important;
}

body #menuCompanionPanel .companion-store-product:hover,
body #menuCompanionPanel .companion-store-product:focus-visible {
  filter: brightness(1.02) saturate(.88) drop-shadow(0 2px 2px rgba(0, 0, 0, .54)) !important;
}

body #menuCompanionPanel .companion-purchase-layer[hidden] {
  display: none !important;
}

body #menuCompanionPanel .companion-purchase-layer {
  position: absolute !important;
  z-index: 95 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  background: rgba(1, 5, 12, .88) !important;
  backdrop-filter: blur(2px) !important;
}

body #menuCompanionPanel .companion-purchase-dialog {
  position: relative !important;
  width: min(292px, calc(100vw - 48px)) !important;
  min-height: 374px !important;
  display: grid !important;
  grid-template-rows: 18px 92px auto auto 56px auto 46px !important;
  align-content: center !important;
  gap: 7px !important;
  padding: 38px 34px 34px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .82)) !important;
}

body #menuCompanionPanel .companion-purchase-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 32px !important;
  height: 32px !important;
  overflow: hidden !important;
  text-indent: -999px !important;
  border: 0 !important;
  background: transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center / contain no-repeat !important;
  filter: brightness(.9) !important;
}

body #menuCompanionPanel .companion-purchase-dialog > small {
  align-self: end !important;
  color: #86b9d0 !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-purchase-dialog > img {
  width: 88px !important;
  height: 88px !important;
  place-self: center !important;
  object-fit: contain !important;
  filter: brightness(1.08) saturate(1.06) drop-shadow(0 4px 5px #000) !important;
}

body #menuCompanionPanel .companion-purchase-dialog > strong {
  color: #fff0a7 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000 !important;
}

body #menuCompanionPanel .companion-purchase-dialog > p {
  margin: 0 !important;
  color: #a9c2ce !important;
  font-size: 8px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-purchase-price {
  min-height: 56px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 17px !important;
  box-sizing: border-box !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
}

body #menuCompanionPanel .companion-purchase-price > span {
  color: #a9c2ce !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}

body #menuCompanionPanel .companion-purchase-price > b {
  color: #fff0a7 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(255, 216, 101, .25) !important;
}

body #menuCompanionPanel .companion-purchase-note {
  align-self: center !important;
}

body #menuCompanionPanel .companion-purchase-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 8px !important;
}

body #menuCompanionPanel .companion-purchase-actions > button {
  min-width: 0 !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 10px 1px !important;
  border: 0 !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-quiet.png") center / 100% 34px no-repeat !important;
  color: #d9d4c7 !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000, 0 0 4px rgba(216, 183, 112, .16) !important;
  filter: brightness(.84) saturate(.58) drop-shadow(0 2px 2px rgba(0, 0, 0, .58)) !important;
}

body #menuCompanionPanel .companion-purchase-actions > button[data-confirm-companion-purchase] {
  color: #fff0ad !important;
  font-size: 10.5px !important;
  filter: brightness(.96) saturate(.7) drop-shadow(0 2px 2px rgba(0, 0, 0, .62)) !important;
}

body #menuCompanionPanel .companion-purchase-actions > button:focus,
body #menuCompanionPanel .companion-purchase-actions > button:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

body #menuCompanionPanel .companion-purchase-actions > button:focus-visible {
  filter: brightness(1.03) saturate(.72) drop-shadow(0 0 4px rgba(221, 182, 91, .24)) !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item,
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:first-child,
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:last-child {
    grid-template-columns: 15px minmax(0, 1fr) !important;
    column-gap: 2px !important;
    padding-inline: 3px !important;
  }

  body #menuCompanionPanel .companion-currency-copy > em { font-size: 7.3px !important; }
  body #menuCompanionPanel .companion-currency-copy > b { font-size: 10.5px !important; }
  body #menuCompanionPanel .companion-currency-item.currency-shards > img { width: 14px !important; height: 14px !important; }
  body #menuCompanionPanel .companion-currency-item.currency-common > img,
  body #menuCompanionPanel .companion-currency-item.currency-premium > img { width: 16px !important; height: 16px !important; }
  body #menuCompanionPanel .companion-currency-item.currency-dust > img { width: 15px !important; height: 15px !important; }

  body #menuCompanionPanel .companion-store-view {
    padding-inline: 7px !important;
  }

  body #menuCompanionPanel .companion-store-heading,
  body #menuCompanionPanel .companion-store-product {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
  }

  body #menuCompanionPanel .companion-store-heading {
    min-height: 62px !important;
    height: 62px !important;
    grid-template-columns: 42px minmax(0, 1fr) 38px !important;
    padding-inline: 11px !important;
  }

  body #menuCompanionPanel .companion-store-heading > img {
    width: 35px !important;
    height: 35px !important;
  }

  body #menuCompanionPanel .companion-store-product {
    min-height: 55px !important;
    height: 55px !important;
    grid-template-columns: 38px minmax(0, 1fr) 63px !important;
    padding: 6px 11px 6px 10px !important;
  }

  body #menuCompanionPanel .companion-store-product > img {
    width: 32px !important;
    height: 32px !important;
  }

  body #menuCompanionPanel .companion-store-product > span > b { gap: 3px !important; font-size: 8.7px !important; }
  body #menuCompanionPanel .companion-store-product > span > b > i { font-size: 6px !important; }
  body #menuCompanionPanel .companion-store-product > span > small { font-size: 6.2px !important; }
  body #menuCompanionPanel .companion-store-product > em { font-size: 9.3px !important; }

  body #menuCompanionPanel .companion-purchase-dialog {
    width: min(286px, calc(100vw - 42px)) !important;
    min-height: 360px !important;
    grid-template-rows: 17px 84px auto auto 52px auto 44px !important;
    padding: 36px 31px 31px !important;
  }

  body #menuCompanionPanel .companion-purchase-dialog > img {
    width: 80px !important;
    height: 80px !important;
  }

  body #menuCompanionPanel .companion-purchase-price {
    min-height: 52px !important;
    padding-inline: 15px !important;
  }

  body #menuCompanionPanel .companion-purchase-price > b { font-size: 15px !important; }
  body #menuCompanionPanel .companion-purchase-actions > button { height: 40px !important; }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v18.css */
/* Companion screen V18: remove the false divider between payment choices and
   restore optical breathing room in each resource ledger cell. */

/* These are two text-and-icon choices, not two pieces of one split plate.
   The old overlapping ::before plates produced a bright vertical seam. */
body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector {
  gap: 8px !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button:not(.selected),
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected {
  isolation: auto !important;
  overflow: hidden !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button::before,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button::after,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected::before,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-controls .companion-payment-selector > button.selected::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Give every painted quarter a real icon-to-copy gutter. */
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:first-child,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:last-child {
  grid-template-columns: 17px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  padding-inline: 3px !important;
}

/* The stardust silhouette is weighted to the right inside its transparent
   canvas, so it needs its own painted-centre correction. */
body #menuCompanionPanel .companion-currency-item.currency-dust > img {
  transform: translateX(-3px) !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-summon-card.common .companion-payment-selector {
    gap: 7px !important;
  }

  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item,
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:first-child,
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:last-child {
    grid-template-columns: 15px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding-inline: 3px !important;
  }

  body #menuCompanionPanel .companion-currency-item.currency-dust > img {
    transform: translateX(-2px) !important;
  }
}


/* SOURCE: ui/styles/menus/menu-header-shell-fit-v2.css */
/*
 * Shared lobby header fitted directly into menu-content-panel.png.
 * The outer shell already paints the top jewel and corner rails, so a second
 * full-width header raster only doubles those ornaments.  Keep the shell as
 * the title background and retain one compact, native-ratio back control.
 */

body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel,
  #menuSettingsPanel
).menu-panel > .menu-panel-head {
  position: static !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 55px !important;
  min-height: 55px !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) 78px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 7px 8px 3px !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel,
  #menuSettingsPanel
).menu-panel > .menu-panel-head > .menu-back-button {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  box-sizing: border-box !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/button-compact-neutral.png") center / 72px 25px no-repeat !important;
  color: #e9f7ff !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(59, 181, 255, .62) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .68)) !important;
  transform: none !important;
}

body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel,
  #menuSettingsPanel
).menu-panel > .menu-panel-head > .menu-back-button:active {
  color: #fff0ad !important;
  filter: brightness(.86) drop-shadow(0 1px 1px rgba(0, 0, 0, .72)) !important;
  transform: translateY(1px) !important;
}

body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuCompanionPanel,
  #menuSettingsPanel
).menu-panel > .menu-panel-head > strong,
body #menuStorePanel.menu-panel > .menu-panel-head > .store-panel-title {
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: none !important;
  color: #fff0ad !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000, 0 0 6px rgba(255, 199, 54, .38) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body #menuStorePanel.menu-panel > .menu-panel-head > .store-panel-title > strong {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: inherit !important;
}

body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel,
  #menuSettingsPanel
).menu-panel > .menu-panel-head::before {
  content: none !important;
  display: none !important;
}

body :is(
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel,
  #menuSettingsPanel
).menu-panel > .menu-panel-head::after {
  content: "" !important;
  display: block !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 76px !important;
  height: 34px !important;
  justify-self: end !important;
  background: none !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body :is(
    #menuGrowthPanel,
    #menuRecipePanel,
    #menuCodexPanel,
    #menuRankingPanel,
    #menuStorePanel,
    #menuCompanionPanel,
    #menuSettingsPanel
  ).menu-panel > .menu-panel-head {
    height: 50px !important;
    min-height: 50px !important;
    grid-template-columns: 72px minmax(0, 1fr) 72px !important;
    padding: 6px 7px 2px !important;
  }

  body :is(
    #menuGrowthPanel,
    #menuRecipePanel,
    #menuCodexPanel,
    #menuRankingPanel,
    #menuStorePanel,
    #menuCompanionPanel,
    #menuSettingsPanel
  ).menu-panel > .menu-panel-head > .menu-back-button {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 32px !important;
    min-height: 32px !important;
    background-size: 66px 23px !important;
    font-size: 11px !important;
  }

  body :is(
    #menuGrowthPanel,
    #menuRecipePanel,
    #menuCodexPanel,
    #menuRankingPanel,
    #menuCompanionPanel,
    #menuSettingsPanel
  ).menu-panel > .menu-panel-head > strong,
  body #menuStorePanel.menu-panel > .menu-panel-head > .store-panel-title {
    font-size: 18px !important;
  }

  body :is(
    #menuGrowthPanel,
    #menuRecipePanel,
    #menuCodexPanel,
    #menuRankingPanel,
    #menuStorePanel,
    #menuCompanionPanel,
    #menuSettingsPanel
  ).menu-panel > .menu-panel-head::after {
    width: 70px !important;
    height: 32px !important;
  }
}

/* V6 authored navigation: every lobby back control shares the same
   left-pointing raster, while title and control move together into the
   painted dark face below the shell's top jewel. */
body :is(
  #menuStoryArchivePanel,
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel,
  #menuAttendancePanel,
  #menuLoginPanel,
  #menuSettingsPanel,
  #menuCreditsPanel
).menu-panel > .menu-panel-head > .menu-back-button {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 1px 0 0 10px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent url("assets/generated/menu_nav_codex_tabs_v6_1793383200000/back-control-arrow-v6-alpha.png") center / 84px 28px no-repeat !important;
  font-size: 11.5px !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)) !important;
  transform: translateY(5px) !important;
}

body :is(
  #menuStoryArchivePanel,
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel,
  #menuAttendancePanel,
  #menuLoginPanel,
  #menuSettingsPanel,
  #menuCreditsPanel
).menu-panel > .menu-panel-head > .menu-back-button:active {
  transform: translateY(6px) !important;
}

body :is(
  #menuStoryArchivePanel,
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuCompanionPanel,
  #menuAttendancePanel,
  #menuLoginPanel,
  #menuSettingsPanel,
  #menuCreditsPanel
).menu-panel > .menu-panel-head > strong,
body #menuStorePanel.menu-panel > .menu-panel-head > .store-panel-title {
  transform: translateY(5px) !important;
}

/* Codex V6: one two-well raster owns the tabs.  The right-selected state is
   the exact mirrored artwork, so corner and divider proportions never move. */
body #menuCodexPanel.menu-panel.active {
  grid-template-rows: 55px 54px minmax(0, 1fr) !important;
  gap: 5px !important;
}

#menuCodexPanel .codex-tabbar {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .68)) !important;
}

#menuCodexPanel .codex-tabbar::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  background: transparent url("assets/generated/menu_nav_codex_tabs_v6_1793383200000/codex-tabs-left-active-v6-alpha.png") center / 100% 100% no-repeat !important;
  transform: none !important;
  pointer-events: none !important;
}

#menuCodexPanel .codex-tabbar:has(.codex-tab:last-child.open)::before {
  transform: scaleX(-1) !important;
}

#menuCodexPanel .codex-tab,
#menuCodexPanel .codex-tab.open {
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 3px 18px 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

#menuCodexPanel .codex-tab:first-child {
  padding-inline: 17px 25px !important;
}

#menuCodexPanel .codex-tab:last-child {
  padding-inline: 25px 17px !important;
}

#menuCodexPanel .codex-tab::before,
#menuCodexPanel .codex-tab::after,
#menuCodexPanel .codex-tab > img,
#menuCodexPanel .codex-tab > span > small {
  content: none !important;
  display: none !important;
}

#menuCodexPanel .codex-tab > span {
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
}

#menuCodexPanel .codex-tab > span > b {
  display: block !important;
  overflow: visible !important;
  color: #b8cad6 !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
}

#menuCodexPanel .codex-tab.open > span > b {
  color: #fff0ad !important;
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(255, 201, 64, .42) !important;
}

#menuCodexPanel .codex-tab > strong {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #78b7d4 !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
}

#menuCodexPanel .codex-tab.open > strong {
  color: #9ce9ff !important;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(65, 190, 255, .48) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body :is(
    #menuStoryArchivePanel,
    #menuGrowthPanel,
    #menuRecipePanel,
    #menuCodexPanel,
    #menuRankingPanel,
    #menuStorePanel,
    #menuCompanionPanel,
    #menuAttendancePanel,
    #menuLoginPanel,
    #menuSettingsPanel,
    #menuCreditsPanel
  ).menu-panel > .menu-panel-head > .menu-back-button {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding-left: 9px !important;
    background-size: 78px 26px !important;
    font-size: 11px !important;
    transform: translateY(5px) !important;
  }

  body :is(
    #menuStoryArchivePanel,
    #menuGrowthPanel,
    #menuRecipePanel,
    #menuCodexPanel,
    #menuRankingPanel,
    #menuStorePanel,
    #menuCompanionPanel,
    #menuAttendancePanel,
    #menuLoginPanel,
    #menuSettingsPanel,
    #menuCreditsPanel
  ).menu-panel > .menu-panel-head > .menu-back-button:active {
    transform: translateY(6px) !important;
  }

  body #menuCodexPanel.menu-panel.active {
    grid-template-rows: 50px 50px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #menuCodexPanel .codex-tabbar {
    height: 50px !important;
    min-height: 50px !important;
  }

  #menuCodexPanel .codex-tab,
  #menuCodexPanel .codex-tab.open {
    gap: 9px !important;
    padding-top: 3px !important;
  }

  #menuCodexPanel .codex-tab:first-child {
    padding-inline: 13px 21px !important;
  }

  #menuCodexPanel .codex-tab:last-child {
    padding-inline: 21px 13px !important;
  }

  #menuCodexPanel .codex-tab > span > b {
    font-size: 10.8px !important;
  }

  #menuCodexPanel .codex-tab > strong {
    font-size: 8.5px !important;
  }
}


/* SOURCE: ui/styles/menus/codex-ranking-surface-v10.css */
/*
 * Codex and ranking V10.
 * Content is fitted to the painted safe areas; authored surfaces own the
 * visual shape while CSS only places live text and interaction targets.
 */

/* ------------------------------- Codex ------------------------------- */

body #menuCodexPanel.menu-panel.active {
  grid-template-rows: 55px 49px minmax(0, 1fr) !important;
  gap: 5px !important;
}

#menuCodexPanel .codex-tabbar {
  width: calc(100% - 16px) !important;
  height: 49px !important;
  min-height: 49px !important;
  justify-self: center !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .58)) !important;
}

#menuCodexPanel .codex-tabbar::before {
  filter: brightness(.82) saturate(.74) contrast(1.1) !important;
}

#menuCodexPanel .codex-tab,
#menuCodexPanel .codex-tab.open {
  padding-top: 1px !important;
}

#menuCodexPanel .codex-tab.open > span > b,
#menuCodexPanel .codex-tab.open > strong {
  text-shadow: 0 1px 2px #000, 0 0 3px rgba(255, 211, 96, .3) !important;
}

#menuCodexPanel .codex-book {
  background-color: transparent !important;
}

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row,
#menuCodexPanel .codex-row.item,
#menuCodexPanel button.codex-row.item,
#menuCodexPanel .codex-row.boss,
#menuCodexPanel .codex-row.boss.found {
  background-image: url("assets/generated/codex_ranking_surface_v10_1793476800000/codex-record-row-integrated-v10.png") !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .42)) !important;
}

#menuCodexPanel .codex-row.item .codex-row-art > img {
  width: 29px !important;
  height: 29px !important;
  max-width: 29px !important;
  max-height: 29px !important;
  filter: drop-shadow(0 0 3px rgba(80, 194, 235, .18)) drop-shadow(0 2px 2px rgba(0, 0, 0, .62)) !important;
}

#menuCodexPanel .codex-row-grade {
  padding: 1px 0 0 !important;
  line-height: 1 !important;
  transform: translateX(-13px) translateY(1px) !important;
}

/* ------------------------------ Ranking ------------------------------ */

#menuRankingPanel.active {
  --ranking-period-height: 46px;
  grid-template-rows: 55px var(--ranking-period-height) 34px minmax(0, 1fr) !important;
  gap: 6px !important;
}

#menuRankingPanel .ranking-scope-tabs {
  width: calc(100% - 22px) !important;
  min-height: var(--ranking-period-height) !important;
  height: var(--ranking-period-height) !important;
  justify-self: center !important;
  gap: 5px !important;
}

#menuRankingPanel .ranking-scope-button {
  height: var(--ranking-period-height) !important;
  padding: 0 10px 1px !important;
  background-image: url("assets/generated/codex_ranking_surface_v10_1793476800000/ranking-period-neutral-v10.png") !important;
  color: #c7d8df !important;
  font-size: 10.5px !important;
  filter: brightness(.86) saturate(.78) contrast(1.08) drop-shadow(0 2px 2px rgba(0, 0, 0, .48)) !important;
}

#menuRankingPanel .ranking-scope-button.active {
  background-image: url("assets/generated/codex_ranking_surface_v10_1793476800000/ranking-period-active-v10.png") !important;
  color: #fff0ad !important;
  filter: brightness(.88) saturate(.8) contrast(1.12) drop-shadow(0 2px 2px rgba(0, 0, 0, .52)) !important;
  text-shadow: 0 1px 2px #000, 0 0 3px rgba(255, 214, 105, .3) !important;
}

#menuRankingPanel .game-ranking-list {
  gap: 6px !important;
  padding: 32px 30px 22px !important;
}

#menuRankingPanel .game-ranking-row {
  width: 100% !important;
  min-height: 64px !important;
  grid-template-columns: 30px minmax(0, 1fr) 84px !important;
  gap: 7px !important;
  padding: 7px 8px !important;
  border: 7px solid transparent !important;
  border-image: url("assets/generated/codex_ranking_surface_v10_1793476800000/ranking-record-row-integrated-v10.png") 28 fill / 7px / 0 stretch !important;
  background: transparent !important;
}

#menuRankingPanel .game-ranking-row > strong {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}

#menuRankingPanel .game-ranking-player i {
  font-size: 10.5px !important;
}

#menuRankingPanel .game-ranking-player small {
  margin-top: 4px !important;
  font-size: 7.6px !important;
}

#menuRankingPanel .game-ranking-stats em {
  font-size: 9px !important;
}

#menuRankingPanel .game-ranking-stats b {
  font-size: 8px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body #menuCodexPanel.menu-panel.active {
    grid-template-rows: 50px 46px minmax(0, 1fr) !important;
  }

  #menuCodexPanel .codex-tabbar {
    width: calc(100% - 14px) !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  #menuCodexPanel .codex-row.item .codex-row-art > img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }

  #menuCodexPanel .codex-row-grade {
    transform: translateX(-13px) translateY(1px) !important;
  }

  #menuRankingPanel.active {
    --ranking-period-height: 43px;
    grid-template-rows: 50px var(--ranking-period-height) 32px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #menuRankingPanel .ranking-scope-tabs {
    width: calc(100% - 18px) !important;
    gap: 4px !important;
  }

  #menuRankingPanel .ranking-scope-button {
    font-size: 10px !important;
  }

  #menuRankingPanel .game-ranking-list {
    padding: 29px 27px 20px !important;
  }

  #menuRankingPanel .game-ranking-row {
    min-height: 61px !important;
    grid-template-columns: 28px minmax(0, 1fr) 76px !important;
    gap: 6px !important;
    padding: 6px 7px !important;
  }
}


/* SOURCE: ui/styles/menus/settings-controls-v2.css */
/* Settings controls V2: authored raster controls over the continuous panel. */
:root {
  --settings-v2-return: url("assets/generated/settings_controls_v2_1793462400000/settings-return-button-v2-final.png");
  --settings-v2-action: url("assets/generated/settings_controls_v2_1793462400000/settings-action-button-v2-final.png");
  --settings-v2-danger: url("assets/generated/settings_controls_v2_1793462400000/settings-danger-button-v2-final.png");
  --settings-v2-danger-wide: url("assets/generated/settings_controls_v2_1793462400000/settings-danger-wide-button-v2-final.png");
  --settings-v2-title: url("assets/generated/menu_header_v5_1792949400000/title-plaque-v5-alpha.png");
}

/* Preserve the preferred composition: the title stays on the global centre
   axis, while the return control occupies its own smaller authored plate. */
body #menuSettingsPanel.menu-panel > .menu-panel-head {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent var(--settings-v2-title) center / 208px 48px no-repeat !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > strong {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 50% !important;
  width: 174px !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  transform: translate(-50%, -50%) !important;
  color: #f2de92 !important;
  font-size: clamp(20px, 5.1vw, 23px) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000, 0 0 7px rgba(198, 151, 55, .24) !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back] {
  position: absolute !important;
  z-index: 4 !important;
  top: 50% !important;
  left: 2px !important;
  width: 94px !important;
  min-width: 94px !important;
  height: 31px !important;
  min-height: 31px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 5px 1px 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--settings-v2-return) center / 100% 100% no-repeat !important;
  color: #e9dfb8 !important;
  font-family: inherit !important;
  font-size: clamp(10.5px, 2.9vw, 12px) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 3px #000, 0 0 4px rgba(20, 116, 167, .32) !important;
  box-shadow: none !important;
  filter: brightness(.94) contrast(1.08) saturate(.92) !important;
  transform: translateY(-50%) !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back]:hover,
body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back]:focus-visible {
  color: #fff1bd !important;
  outline: 0 !important;
  filter: brightness(1.08) contrast(1.08) saturate(1.02) !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back]:active {
  transform: translateY(calc(-50% + 1px)) scale(.985) !important;
  filter: brightness(.78) contrast(1.08) saturate(.88) !important;
}

/* Every neutral settings action now uses one authored forged-iron family. */
body #menuSettingsPanel :is(
  .menu-small-button,
  .menu-small-button.ghost,
  .menu-policy-links a,
  .menu-policy-links button
) {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: var(--settings-v2-action) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  color: #dce7e9 !important;
  box-shadow: none !important;
  filter: brightness(.94) contrast(1.08) saturate(.9) !important;
}

body #menuSettingsPanel :is(
  .menu-small-button,
  .menu-small-button.ghost
) {
  height: clamp(29px, 7.5vw, 33px) !important;
  padding: 0 8px 1px !important;
  font-size: clamp(9.6px, 2.5vw, 10.8px) !important;
}

body #menuSettingsPanel :is(
  .menu-policy-links a,
  .menu-policy-links button
) {
  height: clamp(27px, 6.9vw, 30px) !important;
  padding: 0 5px 1px !important;
  font-size: clamp(8.7px, 2.23vw, 9.6px) !important;
}

body #menuSettingsPanel .menu-policy-links #deleteAccountButton {
  background-image: var(--settings-v2-danger) !important;
  color: #edc6b3 !important;
  filter: brightness(.98) contrast(1.1) saturate(.92) !important;
}

body #menuSettingsPanel .menu-game-home-button {
  width: 90% !important;
  height: clamp(37px, 9.4vw, 41px) !important;
  padding: 0 18px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--settings-v2-danger-wide) center / 100% 100% no-repeat !important;
  color: #efc7b3 !important;
  font-size: clamp(10.3px, 2.8vw, 12px) !important;
  box-shadow: none !important;
  filter: brightness(.96) contrast(1.08) saturate(.92) !important;
}

body #menuSettingsPanel :is(
  .menu-small-button,
  .menu-policy-links a,
  .menu-policy-links button,
  .menu-game-home-button
):not(:disabled):hover,
body #menuSettingsPanel :is(
  .menu-small-button,
  .menu-policy-links a,
  .menu-policy-links button,
  .menu-game-home-button
):not(:disabled):focus-visible {
  color: #fff0ba !important;
  outline: 0 !important;
  filter: brightness(1.08) contrast(1.08) saturate(1.02) !important;
}

body #menuSettingsPanel :is(
  .menu-small-button,
  .menu-policy-links a,
  .menu-policy-links button,
  .menu-game-home-button
):not(:disabled):active {
  transform: translateY(1px) scale(.985) !important;
  filter: brightness(.78) contrast(1.08) saturate(.88) !important;
}

body #menuSettingsPanel :is(
  .menu-small-button,
  .menu-policy-links button
):disabled {
  opacity: .62 !important;
  filter: brightness(.62) contrast(1.08) saturate(.56) !important;
}

@media (max-width: 370px) {
  body #menuSettingsPanel.menu-panel > .menu-panel-head {
    background-size: 196px 46px !important;
  }

  body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back] {
    left: 0 !important;
    width: 88px !important;
    min-width: 88px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding-left: 8px !important;
  }
}


/* SOURCE: ui/styles/menus/settings-account-delete-confirm-v1.css */
/* Settings account deletion: one explicit confirmation on authored game plates. */

.account-delete-confirm-panel {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  place-items: center;
  box-sizing: border-box;
  padding: 12px;
  background: rgba(0, 4, 10, .78);
  backdrop-filter: blur(2px);
}

.account-delete-confirm-panel.active {
  display: grid;
}

.account-delete-confirm-card {
  width: min(334px, calc(100vw - 28px));
  height: 160px;
  display: grid;
  grid-template-rows: 116px 38px;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eaf2f4;
  text-align: center;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .76));
}

.account-delete-confirm-message {
  width: 100%;
  height: 116px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 11px;
  box-sizing: border-box;
  padding: 17px 34px 13px;
  background: transparent url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-transparent.png") center / 100% 100% no-repeat;
}

.account-delete-confirm-message h2,
.account-delete-confirm-message p {
  margin: 0;
}

.account-delete-confirm-message h2 {
  color: #f1dc96;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.05;
  text-shadow: 0 2px 3px #000;
}

.account-delete-confirm-message p {
  color: #bfd0d5;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.3;
  word-break: keep-all;
  text-shadow: 0 1px 2px #000;
}

.account-delete-confirm-actions {
  width: calc(100% - 16px);
  height: 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  justify-self: center;
}

.account-delete-confirm-actions button {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 18px 1px;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/generated/settings_controls_v2_1793462400000/settings-action-button-v2-final.png") center / 100% 100% no-repeat;
  color: #dbe7e9;
  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  text-shadow: 0 2px 2px #000;
  box-shadow: none;
  outline: 0;
  filter: brightness(.95) contrast(1.08) saturate(.9);
}

#accountDeleteConfirmAcceptButton {
  background-image: url("assets/generated/settings_controls_v2_1793462400000/settings-danger-button-v2-final.png");
  color: #efc3b2;
  filter: brightness(1.02) contrast(1.1) saturate(.95);
}

.account-delete-confirm-actions button:focus-visible {
  color: #fff0b8;
  filter: brightness(1.08) contrast(1.1) saturate(1.02);
}

.account-delete-confirm-actions button:active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.78) contrast(1.08) saturate(.9);
}

.account-delete-confirm-actions button:disabled {
  opacity: .4;
  filter: grayscale(.6) brightness(.7);
  transform: none;
}

@media (max-width: 370px) {
  .account-delete-confirm-card {
    width: min(322px, calc(100vw - 24px));
  }
}


/* SOURCE: ui/styles/menus/codex-ranking-surface-v11.css */
/*
 * V11 removes the remaining cut-out rectangles: the Codex outer frame gets
 * true transparent exterior corners, inner records use calm gem-free rails,
 * and Ranking's two large surfaces sit inside the shared shell safe area.
 */

/* ------------------------------- Codex ------------------------------- */

#menuCodexPanel .codex-tabbar {
  z-index: 2 !important;
}

#menuCodexPanel .codex-book {
  position: relative !important;
  z-index: 1 !important;
  height: calc(100% + 9px) !important;
  margin-top: -9px !important;
  padding: 42px 30px 71px !important;
  background: transparent url("assets/generated/codex_ranking_surface_v11_1793478600000/codex-catalog-panel-v11-alpha.png") center / 100% 100% no-repeat !important;
}

#menuCodexPanel .codex-boss-list,
#menuCodexPanel .codex-item-list {
  gap: 4px !important;
}

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row,
#menuCodexPanel .codex-row.item,
#menuCodexPanel button.codex-row.item,
#menuCodexPanel .codex-row.boss,
#menuCodexPanel .codex-row.boss.found {
  min-height: 61px !important;
  border: 6px solid transparent !important;
  border-image: url("assets/generated/codex_ranking_surface_v10_1793476800000/ranking-record-row-integrated-v10.png") 28 fill / 6px / 0 stretch !important;
  background: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)) !important;
}

#menuCodexPanel .codex-row.item .codex-row-art > img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}

/* ------------------------------ Ranking ------------------------------ */

#menuRankingPanel .lobby-ranking-meta,
#menuRankingPanel .game-ranking-list {
  width: calc(100% - 28px) !important;
  justify-self: center !important;
}

#menuRankingPanel .game-ranking-list {
  padding: 30px 24px 22px !important;
}

#menuRankingPanel .game-ranking-row {
  grid-template-columns: 28px minmax(0, 1fr) 78px !important;
  gap: 6px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuCodexPanel .codex-book {
    height: calc(100% + 8px) !important;
    margin-top: -8px !important;
    padding: 39px 27px 82px !important;
  }

  #menuCodexPanel .codex-boss-list,
  #menuCodexPanel .codex-item-list {
    gap: 3px !important;
  }

  #menuCodexPanel .codex-row,
  #menuCodexPanel button.codex-row,
  #menuCodexPanel .codex-row.item,
  #menuCodexPanel button.codex-row.item,
  #menuCodexPanel .codex-row.boss,
  #menuCodexPanel .codex-row.boss.found {
    min-height: 58px !important;
  }

  #menuCodexPanel .codex-row.item .codex-row-art > img {
    width: 27px !important;
    height: 27px !important;
    max-width: 27px !important;
    max-height: 27px !important;
  }

  #menuRankingPanel .lobby-ranking-meta,
  #menuRankingPanel .game-ranking-list {
    width: calc(100% - 26px) !important;
  }

  #menuRankingPanel .game-ranking-list {
    padding: 28px 20px 20px !important;
  }

  #menuRankingPanel .game-ranking-row {
    grid-template-columns: 26px minmax(0, 1fr) 72px !important;
    gap: 5px !important;
  }
}


/* SOURCE: ui/styles/menus/codex-ranking-surface-v12.css */
/*
 * V12 keeps the deliberately quiet V11 Codex records, but gives the first
 * record breathing room below the outer crest and puts every row payload on
 * one vertical centerline. No new ornament is introduced here.
 */

#menuCodexPanel .codex-book {
  padding: 49px 30px 64px !important;
}

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row,
#menuCodexPanel .codex-row.item,
#menuCodexPanel button.codex-row.item,
#menuCodexPanel .codex-row.boss,
#menuCodexPanel .codex-row.boss.found {
  height: 61px !important;
  min-height: 61px !important;
  max-height: 61px !important;
  align-items: center !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#menuCodexPanel .codex-row-art {
  align-self: center !important;
  place-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

#menuCodexPanel .codex-row-art > img,
#menuCodexPanel .codex-row.boss.found .codex-row-art > img {
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
  object-position: center !important;
  transform: none !important;
}

#menuCodexPanel .codex-row > div,
#menuCodexPanel .codex-boss-copy {
  align-self: center !important;
  align-content: center !important;
  gap: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

#menuCodexPanel .codex-row > div > strong,
#menuCodexPanel .codex-row > div > span,
#menuCodexPanel .codex-boss-copy > strong,
#menuCodexPanel .codex-boss-copy > span {
  margin: 0 !important;
}

#menuCodexPanel .codex-row-grade {
  align-self: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: translateX(-13px) !important;
}

@media (max-width: 370px), (max-height: 760px) {

  #menuCodexPanel .codex-row,
  #menuCodexPanel button.codex-row,
  #menuCodexPanel .codex-row.item,
  #menuCodexPanel button.codex-row.item,
  #menuCodexPanel .codex-row.boss,
  #menuCodexPanel .codex-row.boss.found {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }
}


/* SOURCE: ui/styles/combat/combat-number-polish-v2.css */
/* Combat number V2: healing uses the same number-only silhouette and motion as
   incoming HP loss, with a green identity instead of the legacy CSS pill. */
#fightStage .player-damage-float.heal {
  right: auto !important;
  left: clamp(43px, 12vw, 55px) !important;
  top: 32px !important;
  z-index: 31 !important;
  min-width: 72px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #7dffa9 !important;
  font-size: 20px !important;
  font-style: italic !important;
  font-weight: 1000 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.05 !important;
  text-align: center !important;
  -webkit-text-stroke: 0.7px rgba(4, 67, 29, 0.96) !important;
  text-shadow:
    0 3px 0 #073d1f,
    0 0 5px #e5ffec,
    0 0 13px rgba(54, 255, 126, 0.95),
    0 5px 9px rgba(0, 0, 0, 0.75) !important;
  transform: rotate(5deg) !important;
}

#fightStage .player-damage-float.heal::before {
  content: none !important;
  display: none !important;
}

#fightStage .player-damage-float.heal.show {
  animation: playerHealHeroRise 900ms cubic-bezier(0.18, 0.72, 0.2, 1) both !important;
}

body.qa-float-freeze #fightStage .player-damage-float.heal.show {
  opacity: 1 !important;
  animation: none !important;
}

@keyframes playerHealHeroRise {
  0% { opacity: 0; transform: translateY(14px) rotate(8deg) scale(0.55); }
  18%, 70% { opacity: 1; transform: translateY(0) rotate(5deg) scale(1.08); }
  100% { opacity: 0; transform: translateY(-24px) rotate(3deg) scale(0.98); }
}


/* SOURCE: ui/styles/menus/settings-header-v4.css */
/* Settings header V4: use the outer painted shell itself as the header. */
body #menuSettingsPanel.menu-panel > .menu-panel-head {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 55px !important;
  min-height: 55px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head::before,
body #menuSettingsPanel.menu-panel > .menu-panel-head::after {
  content: none !important;
  display: none !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > strong {
  position: absolute !important;
  z-index: 2 !important;
  top: calc(50% + 13px) !important;
  left: 50% !important;
  width: auto !important;
  min-width: 76px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  color: #eadb9e !important;
  font-size: clamp(19px, 5vw, 21px) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000, 0 0 5px rgba(173, 134, 50, .2) !important;
  transform: translate(-50%, -50%) !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back] {
  position: absolute !important;
  z-index: 3 !important;
  top: calc(50% + 13px) !important;
  left: 4px !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 1px 0 0 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #c7d1cb !important;
  font-family: inherit !important;
  font-size: clamp(9.8px, 2.6vw, 10.8px) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(137, 166, 164, .78) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  text-shadow: 0 1px 3px #000 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translateY(-50%) !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back]::before {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border: 0 !important;
  border-bottom: 1px solid #55b5d8 !important;
  border-left: 1px solid #55b5d8 !important;
  box-shadow: -1px 1px 4px rgba(50, 177, 224, .26) !important;
  transform: rotate(45deg) !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back]:hover,
body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back]:focus-visible {
  color: #f1dfaa !important;
  text-decoration-color: rgba(216, 191, 117, .88) !important;
  outline: 0 !important;
}

body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back]:active {
  color: #b8a979 !important;
  transform: translateY(calc(-50% + 1px)) !important;
}

@media (max-width: 370px) {
  body #menuSettingsPanel.menu-panel > .menu-panel-head > strong {
    font-size: 19px !important;
  }

  body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back] {
    left: 2px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding-left: 5px !important;
    font-size: 9.8px !important;
  }
}


/* SOURCE: ui/styles/menus/settings-header-v5.css */
/* Settings header V5: give the return control four more painted pixels. */
body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back] {
  left: 8px !important;
}

@media (max-width: 370px) {
  body #menuSettingsPanel.menu-panel > .menu-panel-head > [data-menu-back] {
    left: 6px !important;
  }
}


/* SOURCE: ui/styles/combat/combat-status-polish-v2.css */
/* Combat status V2: fighter-head illustrations are removed. They were larger
   than the combatants, crossed the painted stage edge and read as random art.
   Control state and remaining time stay visible in the dedicated status badge. */
#fightStage .fighter .status-fx-img {
  display: none !important;
}


/* SOURCE: ui/styles/menus/codex-ranking-surface-v16.css */
/* V16 keeps V15's clean shared surface and strengthens only row rails. */

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row,
#menuCodexPanel .codex-row.item,
#menuCodexPanel button.codex-row.item,
#menuCodexPanel .codex-row.boss,
#menuCodexPanel .codex-row.boss.found {
  border-image-source: url("assets/generated/codex_ranking_surface_v16_1793494800000/codex-record-row-v16-strong-continuous-rail-alpha.png") !important;
}

@media (max-width: 370px), (max-height: 760px) {
}


/* SOURCE: ui/styles/combat/combat-status-polish-v3.css */
/* Combat status V3: status belongs to a combatant, so the readable label sits
   directly above that combatant's name instead of occupying the center skill. */
#fightStage .combat-unit-status {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  bottom: 20px;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 94px;
  height: 18px;
  margin: 0 0 -1px;
  padding: 0 9px 1px;
  overflow: hidden;
  background: url("assets/generated/reward_modal_suite_1790109000000/combat-status-badge.png") center / 100% 100% no-repeat;
  color: #eee7ff;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -0.15px;
  white-space: nowrap;
  text-align: center;
  text-overflow: clip;
  text-shadow: 0 1px 2px #08030f, 0 0 5px rgba(174, 124, 255, 0.56);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.62));
  transform: translateX(-50%);
  pointer-events: none;
}

#fightStage .combat-unit-status[data-kind="shield"],
#fightStage .combat-unit-status[data-kind="regen"] {
  color: #c8f3ff;
  text-shadow: 0 1px 2px #02070c, 0 0 5px rgba(69, 188, 255, 0.5);
}

#fightStage .combat-unit-status[data-kind="damage-over-time"] {
  color: #ffd3bc;
  text-shadow: 0 1px 2px #100401, 0 0 5px rgba(255, 102, 66, 0.5);
}

@media (max-width: 370px) {
}


/* SOURCE: ui/styles/menus/codex-ranking-surface-v17.css */
/* V17: deterministic uninterrupted Codex record rails. */

#menuCodexPanel .codex-book {
  padding: 49px 30px 64px !important;
  background: none !important;
}

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row,
#menuCodexPanel .codex-row.item,
#menuCodexPanel button.codex-row.item,
#menuCodexPanel .codex-row.boss,
#menuCodexPanel .codex-row.boss.found {
  border: 1px solid rgba(112, 90, 47, .88) !important;
  border-image: none !important;
  border-radius: 2px !important;
  background: rgba(3, 10, 19, .58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .5),
    0 1px 2px rgba(0, 0, 0, .58) !important;
  filter: none !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuCodexPanel .codex-book {
    padding: 46px 27px 75px !important;
  }
}


/* SOURCE: ui/styles/menus/menu-header-settings-style-v6.css */
/*
 * Shared menu header V6.
 * Match the restrained Settings return treatment: the outer game shell owns
 * the background, while navigation is only a small cyan arrow and underlined
 * label.  Absolute centring keeps every title on the true screen centre.
 */

body #mainMenu .menu-panel > .menu-panel-head {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 8 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 55px !important;
  min-height: 55px !important;
  display: block !important;
  align-self: start !important;
  justify-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body #mainMenu .menu-panel > .menu-panel-head::before,
body #mainMenu .menu-panel > .menu-panel-head::after {
  content: none !important;
  display: none !important;
}

body #mainMenu .menu-panel > .menu-panel-head > strong,
body #mainMenu .menu-panel > .menu-panel-head > .store-panel-title {
  position: absolute !important;
  inset: auto !important;
  z-index: 2 !important;
  top: calc(50% + 13px) !important;
  left: 50% !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 76px !important;
  max-width: calc(100% - 160px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
  color: #eadb9e !important;
  font-size: clamp(18px, 4.8vw, 20px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000, 0 0 5px rgba(173, 134, 50, .2) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translate(-50%, -50%) !important;
  white-space: nowrap !important;
}

body #menuStorePanel.menu-panel > .menu-panel-head > .store-panel-title > strong {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: inherit !important;
  transform: none !important;
}

body #mainMenu .menu-panel > .menu-panel-head > [data-menu-back] {
  position: absolute !important;
  inset: auto !important;
  z-index: 3 !important;
  top: calc(50% + 13px) !important;
  left: 8px !important;
  box-sizing: border-box !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 1px 0 0 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #c7d1cb !important;
  font-family: inherit !important;
  font-size: clamp(9.8px, 2.6vw, 10.8px) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(137, 166, 164, .78) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  text-shadow: 0 1px 3px #000 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

body #mainMenu .menu-panel > .menu-panel-head > [data-menu-back]::before {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border: 0 !important;
  border-bottom: 1px solid #55b5d8 !important;
  border-left: 1px solid #55b5d8 !important;
  box-shadow: -1px 1px 4px rgba(50, 177, 224, .26) !important;
  transform: rotate(45deg) !important;
}

body #mainMenu .menu-panel > .menu-panel-head > [data-menu-back]:hover,
body #mainMenu .menu-panel > .menu-panel-head > [data-menu-back]:focus-visible {
  color: #f1dfaa !important;
  text-decoration-color: rgba(216, 191, 117, .88) !important;
  outline: 0 !important;
}

body #mainMenu .menu-panel > .menu-panel-head > [data-menu-back]:active {
  color: #b8a979 !important;
  filter: none !important;
  transform: translateY(calc(-50% + 1px)) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body #mainMenu .menu-panel > .menu-panel-head {
    height: 50px !important;
    min-height: 50px !important;
  }

  body #mainMenu .menu-panel > .menu-panel-head > strong,
  body #mainMenu .menu-panel > .menu-panel-head > .store-panel-title {
    top: calc(50% + 11px) !important;
    max-width: calc(100% - 150px) !important;
    font-size: 18px !important;
  }

  body #mainMenu .menu-panel > .menu-panel-head > [data-menu-back] {
    top: calc(50% + 11px) !important;
    left: 6px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding-left: 5px !important;
    font-size: 9.8px !important;
  }
}


/* SOURCE: ui/styles/menus/ingame-settings-icon-v2.css */
/* In-game settings V2: match the lobby control's painted-fill ratio. The
   source has broad transparent padding, so the image box may exceed the 34px
   socket while the visible gear remains inside it. */
body .phone-shell > .topbar #topSettingsButton.top-menu-button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  overflow: visible !important;
}

body .phone-shell > .topbar #topSettingsButton.top-menu-button > img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  filter: hue-rotate(-48deg) saturate(.74) brightness(.91) contrast(1.04)
    drop-shadow(0 1px 2px rgba(0, 0, 0, .72)) !important;
}

body .phone-shell > .topbar #topSettingsButton.top-menu-button:hover > img,
body .phone-shell > .topbar #topSettingsButton.top-menu-button:focus-visible > img {
  filter: hue-rotate(-48deg) saturate(.88) brightness(1.02) contrast(1.04)
    drop-shadow(0 1px 3px rgba(0, 0, 0, .76)) !important;
}

body .phone-shell > .topbar #topSettingsButton.top-menu-button:active > img {
  transform: translate(-50%, -50%) scale(.95) !important;
  filter: hue-rotate(-48deg) saturate(.66) brightness(.76) contrast(1.08) !important;
}

@media (max-width: 370px) {
  body .phone-shell > .topbar #topSettingsButton.top-menu-button > img {
    width: 39px !important;
    max-width: 39px !important;
    height: 39px !important;
    max-height: 39px !important;
  }
}


/* SOURCE: ui/styles/menus/store-surface-calm-v2.css */
/* Store surface V2: one compact resource rail and a continuous product ledger.
   The common menu frame remains the only large ornament. */

body #menuStorePanel.menu-panel.active {
  grid-template-rows: 55px 46px minmax(0, 1fr) 30px !important;
  gap: 4px !important;
}

#menuStorePanel .store-inventory {
  box-sizing: border-box !important;
  width: calc(100% - 14px) !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 7px !important;
  padding: 0 5px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/top_hud_gothic_1790256000220/resource-strip.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .46)) !important;
}

#menuStorePanel .store-inventory > div {
  position: relative !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  grid-template-columns: 24px max-content !important;
  grid-template-rows: 18px 17px !important;
  align-content: center !important;
  justify-content: center !important;
  column-gap: 3px !important;
  padding: 5px 1px 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#menuStorePanel .store-inventory > div::before,
#menuStorePanel .store-inventory > div::after {
  content: none !important;
  display: none !important;
}

#menuStorePanel .store-inventory img,
#menuStorePanel .store-inventory > div:nth-child(4) img {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: saturate(1.08) brightness(1.16) drop-shadow(0 1px 2px rgba(0, 0, 0, .76)) !important;
}

#menuStorePanel .store-inventory span {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-self: center !important;
  min-width: 0 !important;
  padding: 0 0 1px !important;
  overflow: visible !important;
  color: #b9d3df !important;
  font-size: 7.4px !important;
  font-weight: 800 !important;
  letter-spacing: -.055em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#menuStorePanel .store-inventory strong {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  justify-self: center !important;
  min-width: 0 !important;
  padding: 2px 0 0 !important;
  color: #f5dfa0 !important;
  font-size: 11.3px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px #000 !important;
}

#menuStorePanel .store-product-list {
  box-sizing: border-box !important;
  gap: 7px !important;
  padding: 0 10px 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  scrollbar-gutter: stable !important;
}

#menuStorePanel .store-product-group {
  align-self: start !important;
  height: auto !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(5, 12, 19, .72), rgba(8, 17, 27, .9) 50%, rgba(5, 12, 19, .72)) !important;
  box-shadow: inset 0 0 0 1px rgba(105, 129, 139, .18) !important;
}

#menuStorePanel .store-product-group-head {
  position: static !important;
  box-sizing: border-box !important;
  min-height: 31px !important;
  height: 31px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 4px 14px 3px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(179, 140, 73, .48) !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/panel-header-ultrawide.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuStorePanel .store-product-group-head strong {
  flex: 0 0 auto !important;
  color: #f1d889 !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
}

#menuStorePanel .store-product-group-head small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #8da9b5 !important;
  font-size: 6.8px !important;
  line-height: 1 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuStorePanel .store-product-group-grid {
  gap: 3px !important;
  grid-auto-rows: max-content !important;
  padding: 3px 2px !important;
}

#menuStorePanel .store-product-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 82px !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 8px 9px 8px 12px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: #05080d url("assets/generated/store_product_readable_v5_1793678400000/store-product-row-readable-v5.png") center / 100% 122% no-repeat !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .38) !important;
  clip-path: polygon(1.8% 0, 98.2% 0, 100% 12%, 100% 88%, 98.2% 100%, 1.8% 100%, 0 88%, 0 12%) !important;
  filter: none !important;
}

#menuStorePanel .store-product-card[data-store-tone] {
  min-height: 76px !important;
}

#menuStorePanel .store-product-card:last-child {
  border-bottom-color: transparent !important;
}

#menuStorePanel .store-product-card[data-store-tone="summon-best"] {
  background: #05080d url("assets/generated/store_product_readable_v5_1793678400000/store-product-row-readable-v5.png") center / 100% 122% no-repeat !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .38) !important;
  filter: none !important;
}

#menuStorePanel .store-product-card:hover,
#menuStorePanel .store-product-card:focus-visible {
  background: #090d14 url("assets/generated/store_product_readable_v5_1793678400000/store-product-row-readable-v5.png") center / 100% 122% no-repeat !important;
  box-shadow: 0 0 7px rgba(183, 143, 69, .14), 0 2px 5px rgba(0, 0, 0, .45) !important;
  filter: brightness(1.035) !important;
}

#menuStorePanel .store-product-icon {
  position: static !important;
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: saturate(.96) brightness(1.04) drop-shadow(0 2px 3px rgba(0, 0, 0, .7)) !important;
}

#menuStorePanel .store-product-card[data-store-tone="summon"] .store-product-icon,
#menuStorePanel .store-product-card[data-store-tone="summon-best"] .store-product-icon {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  transform: none !important;
}

#menuStorePanel .store-product-card[data-store-product="ticket_bundle_4900"] .store-product-icon {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  transform: translateX(-2px) !important;
  filter: saturate(1) brightness(1.12) drop-shadow(0 2px 3px rgba(0, 0, 0, .72)) !important;
}

#menuStorePanel .store-product-copy,
#menuStorePanel .store-product-title,
#menuStorePanel .store-product-heading {
  min-width: 0 !important;
}

#menuStorePanel .store-product-heading {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#menuStorePanel .store-product-badge {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #8fc7d7 !important;
  font-size: 6.8px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
}

#menuStorePanel .store-product-badge::before {
  content: "◆" !important;
  color: #5ca8c5 !important;
  font-size: 4.4px !important;
  line-height: 1 !important;
}

#menuStorePanel .store-product-card[data-store-tone="summon-best"] .store-product-badge {
  color: #f1d481 !important;
}

#menuStorePanel .store-product-card[data-store-tone="summon-best"] .store-product-badge::before {
  color: #c69c43 !important;
}

#menuStorePanel .store-product-card[data-store-tone="starter"] .store-product-badge,
#menuStorePanel .store-product-card[data-store-tone="milestone"] .store-product-badge,
#menuStorePanel .store-product-card[data-store-tone="best"] .store-product-badge {
  color: #f1d481 !important;
}

#menuStorePanel .store-product-card[data-store-tone="starter"] .store-product-badge::before,
#menuStorePanel .store-product-card[data-store-tone="milestone"] .store-product-badge::before,
#menuStorePanel .store-product-card[data-store-tone="best"] .store-product-badge::before {
  color: #c69c43 !important;
}

#menuStorePanel .store-product-title strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #fff0c7 !important;
  font-size: 11.4px !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuStorePanel .store-product-title small {
  display: block !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  color: #bdc7ca !important;
  font-size: 8px !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuStorePanel .store-product-contents {
  display: none !important;
}

#menuStorePanel .store-product-contents span {
  padding: 2px 4px !important;
  font-size: 6.9px !important;
  line-height: 1 !important;
}

#menuStorePanel .store-product-contents img {
  width: 11px !important;
  height: 11px !important;
}

#menuStorePanel .store-buy-button {
  box-sizing: border-box !important;
  width: 82px !important;
  min-width: 82px !important;
  height: 40px !important;
  min-height: 40px !important;
  display: grid !important;
  place-content: center !important;
  gap: 0 !important;
  padding: 0 5px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0b0c0f url("assets/generated/store_product_readable_v5_1793678400000/store-buy-button-readable-v5.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) !important;
  transform: translateX(4px) !important;
  clip-path: polygon(8% 0, 92% 0, 100% 18%, 100% 82%, 92% 100%, 8% 100%, 0 82%, 0 18%) !important;
}

#menuStorePanel .store-product-card:hover .store-buy-button,
#menuStorePanel .store-product-card:focus-visible .store-buy-button {
  filter: brightness(1.08) saturate(1.03) drop-shadow(0 2px 5px rgba(182, 132, 43, .24)) !important;
}

#menuStorePanel .store-buy-button b {
  color: #fff2bf !important;
  width: 100% !important;
  overflow: hidden !important;
  font-size: 10.8px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000, 0 0 3px rgba(255, 214, 126, .16) !important;
}

#menuStorePanel .store-buy-button small {
  display: none !important;
}

#menuStorePanel .store-notice {
  box-sizing: border-box !important;
  min-height: 30px !important;
  height: 30px !important;
  margin: 0 7px !important;
  padding: 8px 14px 7px !important;
  font-size: 7.5px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body #menuStorePanel.menu-panel.active {
    grid-template-rows: 50px 43px minmax(0, 1fr) 28px !important;
  }

  #menuStorePanel .store-inventory,
  #menuStorePanel .store-inventory > div {
    height: 43px !important;
    min-height: 43px !important;
  }

  #menuStorePanel .store-inventory {
    width: calc(100% - 10px) !important;
    margin-inline: 5px !important;
    padding-inline: 3px !important;
  }

  #menuStorePanel .store-inventory > div {
    grid-template-columns: 22px max-content !important;
    grid-template-rows: 17px 16px !important;
    justify-content: center !important;
    column-gap: 3px !important;
    padding: 5px 1px 4px !important;
  }

  #menuStorePanel .store-inventory img,
  #menuStorePanel .store-inventory > div:nth-child(4) img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }

  #menuStorePanel .store-inventory span {
    font-size: 6.8px !important;
  }

  #menuStorePanel .store-inventory strong { font-size: 10.6px !important; }
  #menuStorePanel .store-product-list { padding-inline: 8px !important; }
  #menuStorePanel .store-product-card {
    min-height: 72px !important;
    grid-template-columns: 40px minmax(0, 1fr) 74px !important;
    gap: 5px !important;
    padding: 7px 8px 7px 10px !important;
  }
  #menuStorePanel .store-product-card[data-store-tone] {
    min-height: 72px !important;
  }
  #menuStorePanel .store-product-icon {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }
  #menuStorePanel .store-product-card[data-store-tone="summon"] .store-product-icon,
  #menuStorePanel .store-product-card[data-store-tone="summon-best"] .store-product-icon {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }
  #menuStorePanel .store-product-card[data-store-product="ticket_bundle_4900"] .store-product-icon {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
  #menuStorePanel .store-product-title strong { font-size: 10.6px !important; }
  #menuStorePanel .store-product-heading { gap: 4px !important; }
  #menuStorePanel .store-product-badge { gap: 2px !important; font-size: 6.2px !important; }
  #menuStorePanel .store-product-badge::before { font-size: 4px !important; }
  #menuStorePanel .store-product-title small { font-size: 7.6px !important; }
  #menuStorePanel .store-buy-button {
    width: 74px !important;
    min-width: 74px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  #menuStorePanel .store-buy-button b { font-size: 9.8px !important; }
  #menuStorePanel .store-notice {
    height: 28px !important;
    min-height: 28px !important;
    margin-inline: 5px !important;
    padding-block: 7px 6px !important;
  }
}

/* V11: optical centering of the visible icon+copy silhouette inside each
   painted cell. The pair stays intact; outer cells move inward, not outward. */
#menuStorePanel .store-inventory > .store-resource-cell:nth-child(1) {
  --store-resource-optical-x: 3px;
}

#menuStorePanel .store-inventory > .store-resource-cell:nth-child(2) {
  --store-resource-optical-x: 2px;
}

#menuStorePanel .store-inventory > .store-resource-cell:nth-child(3) {
  --store-resource-optical-x: 0px;
}

#menuStorePanel .store-inventory > .store-resource-cell:nth-child(4) {
  --store-resource-optical-x: -2px;
}

#menuStorePanel .store-inventory > .store-resource-cell > img,
#menuStorePanel .store-inventory > .store-resource-cell > .store-resource-copy {
  transform: translateX(var(--store-resource-optical-x, 0px)) !important;
}

/* V10: four independent, identical side-by-side cells. Each cell owns the same
   fixed icon slot and fixed copy slot; no label-width or nth-child movement. */
#menuStorePanel .store-inventory > .store-resource-cell {
  display: grid !important;
  grid-template-columns: 22px 34px !important;
  grid-template-rows: 18px 17px !important;
  align-content: center !important;
  justify-content: center !important;
  column-gap: 2px !important;
  row-gap: 0 !important;
  padding: 0 !important;
}

#menuStorePanel .store-inventory > .store-resource-cell > img {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  place-self: center !important;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  transform: translateX(var(--store-resource-optical-x, 0px)) !important;
}

#menuStorePanel .store-inventory .store-resource-copy {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  width: 34px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 100% !important;
  grid-template-rows: 18px 17px !important;
  align-items: stretch !important;
  justify-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

#menuStorePanel .store-inventory .store-resource-copy > span,
#menuStorePanel .store-inventory .store-resource-copy > strong {
  position: static !important;
  grid-column: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  justify-self: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#menuStorePanel .store-inventory .store-resource-copy > span {
  grid-row: 1 !important;
  align-self: end !important;
  padding-bottom: 1px !important;
}

#menuStorePanel .store-inventory .store-resource-copy > strong {
  grid-row: 2 !important;
  align-self: start !important;
  padding-top: 2px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuStorePanel .store-inventory > .store-resource-cell {
    grid-template-columns: 22px 34px !important;
    grid-template-rows: 17px 16px !important;
  }

  #menuStorePanel .store-inventory .store-resource-copy {
    grid-template-rows: 17px 16px !important;
  }
}


/* SOURCE: ui/styles/menus/codex-ranking-surface-v18.css */
/*
 * V18 restores restrained, game-native forged corners without returning to
 * the busy catalogue panel.  The raster remains a proper nine-slice while
 * independent one-pixel rails guarantee an uninterrupted centre span.
 */

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row,
#menuCodexPanel .codex-row.item,
#menuCodexPanel button.codex-row.item,
#menuCodexPanel .codex-row.boss,
#menuCodexPanel .codex-row.boss.found {
  border: 6px solid transparent !important;
  border-image: url("assets/generated/codex_ranking_surface_v16_1793494800000/codex-record-row-v16-strong-continuous-rail-alpha.png") 28 fill / 6px / 0 stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .42)) !important;
}

#menuCodexPanel .codex-row::before,
#menuCodexPanel .codex-row::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  right: 7px !important;
  left: 7px !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    rgba(63, 49, 28, .35),
    rgba(133, 107, 62, .9) 18%,
    rgba(151, 121, 67, .94) 50%,
    rgba(133, 107, 62, .9) 82%,
    rgba(63, 49, 28, .35)
  ) !important;
  pointer-events: none !important;
}

#menuCodexPanel .codex-row::before {
  top: -5px !important;
}

#menuCodexPanel .codex-row::after {
  bottom: -5px !important;
}


/* SOURCE: ui/styles/menus/menu-header-settings-style-v7.css */
/* V7 gives the clean Settings-style title one short authored rune rail. */

body #mainMenu .menu-panel > .menu-panel-head > strong::after,
body #mainMenu .menu-panel > .menu-panel-head > .store-panel-title::after {
  content: "" !important;
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 50% !important;
  width: 92px !important;
  height: 9px !important;
  display: block !important;
  background: transparent url("assets/generated/unlock_showcase_item_v2_1792936800300/item-unlock-divider-alpha.png") center / 140px 35px no-repeat !important;
  opacity: .72 !important;
  filter: drop-shadow(0 0 2px rgba(68, 169, 211, .2)) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}


/* SOURCE: ui/styles/menus/codex-ranking-surface-v19.css */
/*
 * V19 adds one calm catalogue surface below the two Codex tabs.  It encloses
 * the V18 forged records without reviving the former side gems and crests.
 */

#menuCodexPanel .codex-book {
  box-sizing: border-box !important;
  width: calc(100% - 10px) !important;
  height: 100% !important;
  justify-self: center !important;
  margin: 0 !important;
  padding: 40px 27px 64px !important;
  background:
    #030811
    url("assets/generated/codex_catalog_surface_v19_1793595600000/codex-catalog-surface-v19-calm.png")
    center / 112.9% 107.6% no-repeat !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .52)) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuCodexPanel .codex-book {
    width: calc(100% - 10px) !important;
    padding: 38px 24px 75px !important;
  }
}


/* SOURCE: ui/styles/menus/codex-ranking-surface-v20.css */
/*
 * V20 keeps the single enclosing Codex surface, but refits it to the cool
 * black-blue record rows.  The baked asset has no bright top highlight.
 */

#menuCodexPanel .codex-book {
  box-sizing: border-box !important;
  width: calc(100% - 10px) !important;
  height: 100% !important;
  justify-self: center !important;
  margin: 0 !important;
  padding: 40px 23px 64px !important;
  background:
    #030811
    url("assets/generated/codex_catalog_surface_v20_1793599200000/codex-catalog-surface-v20-cool.png")
    center calc(50% - 6px) / 112.9% 107.6% no-repeat !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .52)) !important;
}

/* Use the same cool iron range as the enclosing rail, with only a faint
 * desaturated bronze note at the centre of each record line. */
#menuCodexPanel .codex-row::before,
#menuCodexPanel .codex-row::after {
  background: linear-gradient(
    90deg,
    rgba(42, 57, 66, .38),
    rgba(79, 94, 99, .78) 18%,
    rgba(116, 108, 86, .72) 50%,
    rgba(79, 94, 99, .78) 82%,
    rgba(42, 57, 66, .38)
  ) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuCodexPanel .codex-book {
    width: calc(100% - 10px) !important;
    padding: 38px 20px 75px !important;
  }
}


/* SOURCE: ui/styles/rewards/reward-result-confirm-v3.css */
/* The text node is optically high inside the painted lower button recess. */
.unlock-showcase.reward-result .unlock-confirm-button {
  transform: translateY(3px) !important;
  line-height: 1 !important;
}


/* SOURCE: ui/styles/menus/codex-ranking-surface-v21.css */
/*
 * V21 removes the forced crop that made the inner catalogue surface feel
 * larger than its host.  This full-bleed raster is rendered 1:1 in the box.
 */

#menuCodexPanel .codex-book {
  box-sizing: border-box !important;
  width: calc(100% - 18px) !important;
  height: 100% !important;
  justify-self: center !important;
  margin: 0 !important;
  padding: 39px 21px 62px !important;
  background:
    #020813
    url("assets/generated/codex_catalog_surface_v21_1793602800000/codex-catalog-surface-v21-fitted.png")
    center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .46)) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuCodexPanel .codex-book {
    width: calc(100% - 18px) !important;
    padding: 37px 18px 73px !important;
  }
}


/* SOURCE: ui/styles/menus/codex-ranking-surface-v22.css */
/*
 * V22 refits the live record payload to the visible centre of each V18 row.
 * The raster card size is unchanged; only icon/copy/grade placement changes.
 */

#menuCodexPanel .codex-row,
#menuCodexPanel button.codex-row,
#menuCodexPanel .codex-row.item,
#menuCodexPanel button.codex-row.item,
#menuCodexPanel .codex-row.boss,
#menuCodexPanel .codex-row.boss.found,
#menuCodexPanel .codex-row.locked,
#menuCodexPanel .codex-row.boss.locked {
  grid-template-columns: 64px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  column-gap: 0 !important;
  padding: 5px 4px !important;
}

#menuCodexPanel .codex-row-art {
  width: 42px !important;
  height: 42px !important;
  place-self: center !important;
  margin: 0 !important;
}

#menuCodexPanel .codex-row.item .codex-row-art > img {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
}

#menuCodexPanel .codex-row.boss .codex-row-art > img,
#menuCodexPanel .codex-row.boss.found .codex-row-art > img {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
}

#menuCodexPanel .codex-row.locked .codex-row-art > img,
#menuCodexPanel .codex-row.boss.locked .codex-row-art > img {
  width: 27px !important;
  height: 27px !important;
  max-width: 27px !important;
  max-height: 27px !important;
}

#menuCodexPanel .codex-row > div,
#menuCodexPanel .codex-boss-copy {
  box-sizing: border-box !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 1px 5px 0 0 !important;
  transform: none !important;
}

#menuCodexPanel .codex-row > div > strong,
#menuCodexPanel .codex-boss-copy > strong {
  width: 100% !important;
  margin: 0 !important;
  font-size: 12.2px !important;
  line-height: 1.08 !important;
}

#menuCodexPanel .codex-row > div > span,
#menuCodexPanel .codex-boss-copy > span {
  width: 100% !important;
  margin: 0 !important;
  font-size: 8.4px !important;
  line-height: 1.2 !important;
}

#menuCodexPanel .codex-row-grade {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  transform: none !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuCodexPanel .codex-row,
  #menuCodexPanel button.codex-row,
  #menuCodexPanel .codex-row.item,
  #menuCodexPanel button.codex-row.item,
  #menuCodexPanel .codex-row.boss,
  #menuCodexPanel .codex-row.boss.found,
  #menuCodexPanel .codex-row.locked,
  #menuCodexPanel .codex-row.boss.locked {
    grid-template-columns: 62px minmax(0, 1fr) 42px !important;
    padding: 4px 3px !important;
  }

  #menuCodexPanel .codex-row.item .codex-row-art > img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  #menuCodexPanel .codex-row.boss .codex-row-art > img,
  #menuCodexPanel .codex-row.boss.found .codex-row-art > img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }

  #menuCodexPanel .codex-row > div > strong,
  #menuCodexPanel .codex-boss-copy > strong {
    font-size: 11.6px !important;
  }

  #menuCodexPanel .codex-row > div > span,
  #menuCodexPanel .codex-boss-copy > span {
    font-size: 7.9px !important;
  }

  #menuCodexPanel .codex-row-grade {
    font-size: 9.2px !important;
  }
}


/* SOURCE: ui/styles/rewards/boss-discovery-showcase-v1.css */
/* Boss encounter record: fit the existing painted frame instead of layering CSS cards over it. */
.unlock-showcase.boss-discovery .unlock-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(350px, calc(100vw - 18px)) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 350 / 306 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/reward_attendance_v2_1790106000000/stage-reward-panel.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.78)) !important;
}

.unlock-showcase.boss-discovery .unlock-card::before,
.unlock-showcase.boss-discovery .unlock-card::after,
.unlock-showcase.boss-discovery .unlock-portal,
.unlock-showcase.boss-discovery .unlock-chest,
.unlock-showcase.boss-discovery .unlock-showcase-divider-art {
  content: none !important;
  display: none !important;
}

.unlock-showcase.boss-discovery .unlock-card > .label {
  position: absolute !important;
  left: 22% !important;
  right: 22% !important;
  top: 4.8% !important;
  z-index: 2 !important;
  height: 10.8% !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  color: #f3d67e !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #02060a, 0 0 7px rgba(245, 201, 89, 0.18) !important;
}

.unlock-showcase.boss-discovery .unlock-icon {
  position: absolute !important;
  left: 50% !important;
  top: 29.7% !important;
  z-index: 2 !important;
  width: 108px !important;
  height: 108px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: translate(-50%, -50%) !important;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.62)) !important;
}

.unlock-showcase.boss-discovery .unlock-card > strong {
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  top: 47.6% !important;
  z-index: 2 !important;
  height: 10.4% !important;
  display: grid !important;
  place-items: center !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #fff0b5 !important;
  font-size: 19px !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 2px 2px #000 !important;
}

.unlock-showcase.boss-discovery .unlock-card > p {
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  top: 58.2% !important;
  z-index: 2 !important;
  width: auto !important;
  height: 8.5% !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: none !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 7px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #bceaff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.34 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  text-shadow: 0 2px 2px #000 !important;
}

.unlock-showcase.boss-discovery .unlock-confirm-button {
  position: absolute !important;
  left: 50% !important;
  bottom: 11.6% !important;
  z-index: 3 !important;
  width: 166px !important;
  height: 38px !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v1_1793610000000/boss-discovery-confirm-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.68)) !important;
  color: #fff4c8 !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(89, 210, 255, 0.22) !important;
  transform: translateX(-50%) !important;
}

.unlock-showcase.boss-discovery .unlock-confirm-button:active {
  padding-top: 2px !important;
  filter: brightness(0.88) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.66)) !important;
}

@media (max-height: 700px) {
  .unlock-showcase.boss-discovery .unlock-card {
    width: min(326px, calc(100vw - 18px)) !important;
  }
}


/* SOURCE: ui/styles/rewards/boss-discovery-showcase-v2.css */
/* Boss discovery V2: hide the rectangular combat boards behind the modal and
   use the same restrained black-steel/gold/sapphire language for confirmation. */
.unlock-showcase.boss-discovery {
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(2, 4, 10, .86), rgba(2, 5, 12, .93)),
    url("assets/generated/main-menu-abyss.png") center / cover no-repeat !important;
}

.unlock-showcase.boss-discovery .unlock-card {
  z-index: 1 !important;
}

.unlock-showcase.boss-discovery .unlock-confirm-button {
  bottom: 5.7% !important;
  width: 188px !important;
  height: 46px !important;
  padding: 0 0 2px !important;
  background-image: url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") !important;
  background-size: 100% 100% !important;
  color: #fff0b5 !important;
  font-size: 13px !important;
  text-shadow: 0 2px 2px #000 !important;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .72)) !important;
}

.unlock-showcase.boss-discovery .unlock-confirm-button:hover,
.unlock-showcase.boss-discovery .unlock-confirm-button:focus-visible {
  outline: 0 !important;
  filter: brightness(1.08) drop-shadow(0 7px 10px rgba(0, 0, 0, .74)) !important;
}

.unlock-showcase.boss-discovery .unlock-confirm-button:active {
  padding-top: 1px !important;
  filter: brightness(.9) drop-shadow(0 4px 6px rgba(0, 0, 0, .7)) !important;
}

@media (max-width: 370px) {
  .unlock-showcase.boss-discovery .unlock-confirm-button {
    width: 180px !important;
    height: 44px !important;
    font-size: 12.5px !important;
  }
}


/* SOURCE: ui/styles/shared/login-entry-v1.css */
/* Authored entrance controls for the sign-in gate. */
body #menuLoginPanel .login-choice {
  box-sizing: border-box;
  width: min(342px, calc(100vw - 34px));
  margin-inline: auto;
  gap: 8px;
}

body #menuLoginPanel .login-choice > #googleLoginButton,
body #menuLoginPanel .login-choice > #appleLoginButton,
body #menuLoginPanel .login-choice > #guestLoginButton {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/generated/login_entry_buttons_v1_1793680200000/login-provider-button.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  color: #edf7ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.96), 0 0 7px rgba(55, 194, 236, 0.18) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.48)) !important;
  transform: none;
}

body #menuLoginPanel .login-choice > :is(#googleLoginButton, #appleLoginButton, #guestLoginButton):is(:hover, :focus-visible) {
  outline: 0 !important;
  filter: brightness(1.12) saturate(1.06) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.56)) !important;
}

body #menuLoginPanel .login-choice > :is(#googleLoginButton, #appleLoginButton, #guestLoginButton):active {
  transform: translateY(1px);
  filter: brightness(0.94) saturate(0.92) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)) !important;
}

body #menuLoginPanel .login-choice > :is(#googleLoginButton, #appleLoginButton, #guestLoginButton):disabled {
  opacity: 0.68;
  filter: grayscale(0.24) brightness(0.82) !important;
}

body #menuLoginPanel .login-provider-feedback {
  min-height: 14px;
  margin: -1px 20px 0;
  color: #afc7d2;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

body #menuLoginPanel .login-provider-feedback:empty {
  display: none;
}

body #menuLoginPanel .login-provider-feedback[data-tone="cancelled"] {
  color: #d8cfb2;
}

body #menuLoginPanel .login-provider-feedback[data-tone="success"] {
  color: #bce6d7;
}

body #menuLoginPanel .login-provider-feedback[data-tone="error"] {
  color: #ffb9ad;
}

@media (max-width: 370px) {
  body #menuLoginPanel .login-choice {
    width: min(326px, calc(100vw - 30px));
    gap: 7px;
  }

  body #menuLoginPanel .login-choice > #googleLoginButton,
  body #menuLoginPanel .login-choice > #appleLoginButton,
  body #menuLoginPanel .login-choice > #guestLoginButton {
    height: 49px !important;
    min-height: 49px !important;
    padding-inline: 34px !important;
    font-size: 11.5px !important;
  }

  body #menuLoginPanel .login-provider-feedback {
    margin-inline: 18px;
    font-size: 8.5px;
  }
}


/* SOURCE: ui/styles/shared/login-entry-v2.css */
/* The entrance plates intentionally extend beyond the narrow menu-card rail.
   Centre that wider authored group in the viewport instead of clipping its
   right end at the menu panel's 276/306px content box. */
body #menuLoginPanel.menu-panel.active {
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

body #menuLoginPanel .login-choice {
  justify-self: center !important;
  margin-inline: 0 !important;
}


/* SOURCE: ui/styles/shared/login-name-entry-panel-v3.css */
/* Authored guest-name plate and entrance-matched start control. */
body #menuLoginPanel .guest-name-panel {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  aspect-ratio: 1834 / 858 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/generated/login_name_entry_panel_v1_1795782000000/guest-name-entry-panel-v1.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.5)) !important;
}

body #menuLoginPanel .guest-name-panel[hidden] {
  display: none !important;
}

body #menuLoginPanel .guest-name-panel > label {
  position: absolute !important;
  z-index: 2;
  top: 18.2% !important;
  left: 14.2% !important;
  margin: 0 !important;
  color: #ffe9a3 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.98) !important;
}

body #menuLoginPanel .guest-name-panel > input {
  position: absolute !important;
  z-index: 2;
  top: 34.3% !important;
  left: 14.3% !important;
  box-sizing: border-box !important;
  width: 71.4% !important;
  height: 17.8% !important;
  margin: 0 !important;
  padding: 0 8px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f7fbff !important;
  caret-color: #7ee5ff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.94) !important;
}

body #menuLoginPanel .guest-name-panel > input::placeholder {
  color: rgba(199, 211, 220, 0.58) !important;
  opacity: 1 !important;
}

body #menuLoginPanel .guest-name-panel > input:focus {
  border: 0 !important;
  outline: 0 !important;
  background: rgba(22, 41, 53, 0.16) !important;
  box-shadow: none !important;
}

body #menuLoginPanel #guestNameStartButton {
  position: absolute !important;
  z-index: 2;
  top: 57.1% !important;
  left: 6.4% !important;
  box-sizing: border-box !important;
  width: 87.2% !important;
  height: 29.6% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 30px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/generated/login_entry_buttons_v1_1793680200000/login-guest-button.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  color: #fff0ae !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.98), 0 0 7px rgba(255, 212, 96, 0.2) !important;
  filter: brightness(1.02) saturate(0.98) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)) !important;
  transform: none !important;
}

body #menuLoginPanel #guestNameStartButton:is(:hover, :focus-visible) {
  filter: brightness(1.12) saturate(1.05) drop-shadow(0 4px 7px rgba(0, 0, 0, 0.56)) !important;
}

body #menuLoginPanel #guestNameStartButton:active {
  transform: translateY(1px) !important;
  filter: brightness(0.9) saturate(0.9) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.48)) !important;
}

body #menuLoginPanel #guestNameHint {
  position: absolute !important;
  z-index: 2;
  left: 8.1% !important;
  right: 8.1% !important;
  bottom: 4.8% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #ffe29a !important;
  font-size: 9.2px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.98) !important;
}

@media (max-width: 370px) {
  body #menuLoginPanel .guest-name-panel > label {
    font-size: 9.5px !important;
  }

  body #menuLoginPanel .guest-name-panel > input {
    padding-inline: 7px !important;
    font-size: 12.5px !important;
  }

  body #menuLoginPanel #guestNameStartButton {
    font-size: 12.5px !important;
  }

  body #menuLoginPanel #guestNameHint {
    font-size: 8.7px !important;
  }
}


/* SOURCE: ui/styles/shared/login-name-entry-flow-v4.css */
/* Provider selection and nickname entry are separate, unambiguous steps. */
body #menuLoginPanel #appleLoginButton[hidden] {
  display: none !important;
}

body #menuLoginPanel.naming .login-choice > #googleLoginButton,
body #menuLoginPanel.naming .login-choice > #appleLoginButton,
body #menuLoginPanel.naming .login-choice > #guestLoginButton {
  display: none !important;
}

body #menuLoginPanel.naming .login-choice {
  gap: 6px !important;
}

body #menuLoginPanel:not(.naming) .guest-name-panel {
  display: none !important;
}


/* SOURCE: ui/styles/inventory/fusion-result-unified-v1.css */
/* Regular three-material fusion result: one calm sapphire visual language.
   This intentionally does not touch secret/mythic results. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) .fusion-absorb {
  background-image: url("assets/generated/fusion_result_blue_suite_v1_1793683800000/fusion-image-bay-blue.png") !important;
  -webkit-mask-image: url("assets/generated/fusion_result_blue_suite_v1_1793683800000/fusion-image-bay-blue.png") !important;
  mask-image: url("assets/generated/fusion_result_blue_suite_v1_1793683800000/fusion-image-bay-blue.png") !important;
}

/* Map the live text to three equal painted recesses. There are no per-label
   optical translations: every label/value pair owns the same 84px cell. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
  grid-template-columns: minmax(0, 1fr) repeat(3, 84px) minmax(0, 1fr) !important;
  column-gap: 0 !important;
  padding-inline: 10px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count]::before {
  width: 270px !important;
  height: 44px !important;
  top: 2px !important;
  background-image: url("assets/generated/fusion_result_blue_suite_v1_1793683800000/three-stat-plate-blue.png") !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 4px 4px 5px !important;
  grid-template-rows: 11px 16px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core > strong {
  font-size: 10.7px !important;
  line-height: 16px !important;
  letter-spacing: -.08px !important;
}

/* Promotion/power copy now uses the same blue-black metal as the name bay,
   image bay, and primary confirmation control. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power {
  background-image: url("assets/generated/fusion_result_blue_suite_v1_1793683800000/fusion-feature-plate-blue.png") !important;
  padding-inline: 38px !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
    grid-template-columns: minmax(0, 1fr) repeat(3, 80px) minmax(0, 1fr) !important;
    padding-inline: 8px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count]::before {
    width: 258px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-optical-v2.css */
/* Regular three-material results only.
   The authored three-cell plate is not divided into three equal 84/80px
   recesses. Its painted divider centres are approximately 791px and 1361px
   in the 2160px source, which makes the visible text centres much closer
   together. Keep the live copy on those painted centres. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
  grid-template-columns: minmax(0, 1fr) repeat(3, 71px) minmax(0, 1fr) !important;
}

/* The copy block in the deep promotion tray looked high even though its box
   was mathematically centred. Register the visible glyphs to the tray well. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power > strong {
  transform: translateY(4px) !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
    grid-template-columns: minmax(0, 1fr) repeat(3, 68px) minmax(0, 1fr) !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-optical-v3.css */
/* Give the centre copy real breathing room by widening the authored plate,
   not by shrinking the Korean value. The grid spacing follows the enlarged
   raster's painted divider interval, so all three text centres stay registered
   to their visible recesses. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
  grid-template-columns: minmax(0, 1fr) repeat(3, 81px) minmax(0, 1fr) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count]::before {
  width: 306px !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
    grid-template-columns: minmax(0, 1fr) repeat(3, 78px) minmax(0, 1fr) !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count]::before {
    width: 294px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-recess-v4.css */
/* Regular three-material fusion result only.
   Reuse the calm recessed bays already authored for the equipment detail UI.
   Secret recipes, mythic results, and one-item rarity promotions stay intact. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) .fusion-absorb {
  min-height: 126px !important;
  padding: 16px 24px !important;
  background: transparent url("assets/generated/fusion_result_recess_v4_1793701800000/fusion-recess-deep.png") center / 100% 100% no-repeat !important;
  -webkit-mask: none !important;
  mask: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) .fusion-result {
  min-height: 92px !important;
  padding: 12px 30px !important;
  background: transparent url("assets/generated/fusion_result_recess_v4_1793701800000/fusion-recess-wide.png") center / 100% 100% no-repeat !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) .fusion-result > div {
  padding-inline: 14px !important;
  transform: translateY(1px) !important;
}

/* One restrained recess holds the three core values. Equal live columns are
   centred inside the painted safe area; there are no decorative dividers to
   push the middle copy inward. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
  position: relative !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px 0 !important;
  padding: 4px 16px 6px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count]::before {
  left: 8px !important;
  top: 0 !important;
  width: calc(100% - 16px) !important;
  height: 50px !important;
  transform: none !important;
  background-image: url("assets/generated/fusion_result_recess_v4_1793701800000/fusion-recess-wide.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core {
  position: relative !important;
  z-index: 1 !important;
  grid-column: auto !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 7px 5px 6px !important;
  grid-template-rows: 11px 17px !important;
  align-content: center !important;
  background: transparent !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="0"] {
  grid-column: 1 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="1"] {
  grid-column: 2 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="2"] {
  grid-column: 3 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core > strong {
  width: 100% !important;
  place-self: center !important;
  text-align: center !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core > strong {
  font-size: 10.6px !important;
  line-height: 17px !important;
  letter-spacing: -.08px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power {
  z-index: 1 !important;
  height: 80px !important;
  min-height: 80px !important;
  padding: 16px 34px 14px !important;
  background: transparent url("assets/generated/fusion_result_recess_v4_1793701800000/fusion-recess-deep.png") center / 100% 100% no-repeat !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power > strong {
  transform: translateY(1px) !important;
}

/* This is the same authored confirm control used by the boss-discovery popup. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionCloseButton {
  width: 188px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 0 2px !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / 100% 100% no-repeat !important;
  color: #fff0b5 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .68)) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionCloseButton:hover,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionCloseButton:focus-visible {
  outline: 0 !important;
  filter: brightness(1.08) drop-shadow(0 7px 9px rgba(0, 0, 0, .7)) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionCloseButton:active {
  padding-top: 1px !important;
  filter: brightness(.9) drop-shadow(0 4px 6px rgba(0, 0, 0, .66)) !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding-inline: 13px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core > strong {
    font-size: 10.2px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionCloseButton {
    width: 180px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 12.5px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-recess-v5.css */
/* V5 keeps the V4 layout and shared boss-discovery confirm button, but swaps
   the cropped detail-screen fragments for complete standalone recess assets. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) .fusion-absorb {
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) .fusion-result {
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count]::before {
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature.fusion-stat-ascent-power {
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") !important;
}


/* SOURCE: ui/styles/inventory/fusion-result-optical-v6.css */
/* Optical correction for the complete V5 recesses.
   Register visible Korean glyph mass to the painted black wells, not to the
   mathematical CSS boxes. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) .fusion-result > div {
  transform: translateY(-2px) !important;
}

/* The three equal column axes are already correct. Because the centre phrase
   is much wider than the right value, the combined ink mass reads left-heavy;
   move all three text stacks together without changing their spacing. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core > strong {
  transform: translate(4px, -2px) !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core > small,
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core > strong {
    transform: translate(3px, -2px) !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-backdrop-v7.css */
/* The outer frame PNG is already genuinely transparent. The flat black strip
   above its crest came from the generic fusion modal's dim/blur backdrop
   showing through that alpha, so remove that backdrop for regular results. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* SOURCE: ui/styles/inventory/fusion-result-backdrop-v8.css */
/* Keep the V7 colourless backdrop, but restore depth separation by blurring
   only the game scene behind the regular fusion result. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) {
  background: transparent !important;
  -webkit-backdrop-filter: blur(6px) saturate(.82) !important;
  backdrop-filter: blur(6px) saturate(.82) !important;
}


/* SOURCE: ui/styles/inventory/fusion-secret-result-v4.css */
/* Non-mythic two-material hidden recipes: register every live label to one
   complete painted region. Do not rebuild the four-cell rail from slices. */
#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(356px, calc(100vw - 18px)) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 356 / 428 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/reward_attendance_v2_1790106000000/stage-reward-panel.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionTitle {
  position: absolute !important;
  left: 12% !important;
  right: 12% !important;
  top: 3.75% !important;
  z-index: 4 !important;
  width: auto !important;
  height: 8% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1px 6px 0 !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse at center, rgba(3, 9, 17, 0.94) 0 48%, rgba(3, 9, 17, 0.7) 62%, transparent 79%) !important;
  color: #ffe6a0 !important;
  font-size: 19px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 2px 2px #000 !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-absorb {
  position: absolute !important;
  left: 9.55% !important;
  right: 9.55% !important;
  top: 16.8% !important;
  z-index: 2 !important;
  width: auto !important;
  height: 26.2% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-result {
  position: absolute !important;
  left: 9.55% !important;
  right: 9.55% !important;
  top: 44.6% !important;
  z-index: 3 !important;
  width: auto !important;
  height: 17.3% !important;
  min-height: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_secret_result_v4_1793700000000/secret-name-plate-calm-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-result > .fusion-result-icon {
  display: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-result > div {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 13px 23px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  box-sizing: border-box !important;
  padding: 5px 30px 0 !important;
  text-align: center !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultMeta,
#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultName {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultMeta {
  color: #82d5ec !important;
  font-size: 8.8px !important;
  line-height: 13px !important;
  text-shadow: 0 2px 2px #000 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultName {
  color: #f8e7ae !important;
  font-size: 17px !important;
  line-height: 23px !important;
  text-shadow: 0 2px 2px #000 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] {
  position: absolute !important;
  left: 9.55% !important;
  right: 9.55% !important;
  top: 63.6% !important;
  z-index: 3 !important;
  width: auto !important;
  height: 12.2% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-auto-flow: column !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  isolation: isolate !important;
  background: none !important;
  overflow: visible !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px 8px !important;
  z-index: 0 !important;
  background: transparent url("assets/generated/top_hud_gothic_1790256000220/resource-strip.png") center / 100% 100% no-repeat !important;
  pointer-events: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] > .fusion-stat-core {
  --fusion-stat-optical-x: 0px !important;
  position: relative !important;
  z-index: 1 !important;
  grid-column: auto !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 16px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1px 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] > .fusion-stat-core > small,
#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] > .fusion-stat-core > strong {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  place-self: center !important;
  overflow: hidden !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] > .fusion-stat-core > small {
  color: #83d8ee !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] > .fusion-stat-core > strong {
  color: #f8e8b0 !important;
  font-size: 10px !important;
  line-height: 16px !important;
  letter-spacing: -0.15px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionCloseButton {
  position: absolute !important;
  left: 50% !important;
  bottom: 9.8% !important;
  z-index: 4 !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionTitle {
    font-size: 18px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-result > div {
    padding-inline: 27px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] > .fusion-stat-core > strong {
    font-size: 9.6px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-secret-stat-cells-v5.css */
/* Four-core hidden fusion results: every column receives the exact same
   self-contained painted cell. There are no first/last end-cap variants. */
#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] {
  grid-template-columns: repeat(4, 67px) !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 6px !important;
  overflow: hidden !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"]::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] > .fusion-stat-core,
#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] > .fusion-stat-core:first-child,
#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] > .fusion-stat-core:last-child {
  --fusion-stat-optical-x: 0px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 1px 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_secret_stat_cell_v5_1793703600000/secret-stat-cell-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] {
    grid-template-columns: repeat(4, 65px) !important;
    gap: 2px !important;
    padding-inline: 5px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="0"] > .fusion-stat-core {
    padding-inline: 3px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-secret-name-plate-v6.css */
/* Hidden two-material fusion name plate: a wider sibling of the repeated
   stat cells, centered with clear space from the popup's side rails. */
#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-result {
  left: 50% !important;
  right: auto !important;
  top: 45.4% !important;
  width: 250px !important;
  height: 63px !important;
  background: transparent url("assets/generated/fusion_secret_name_plate_v6_1793707200000/secret-name-plate-stat-style.png") center / 100% 100% no-repeat !important;
  transform: translateX(-50%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-result > div {
  grid-template-rows: 13px 23px !important;
  align-content: center !important;
  row-gap: 1px !important;
  padding: 2px 24px 0 !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-result {
    width: 246px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-result > div {
    padding-inline: 22px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-secret-frame-alpha-v7.css */
/* Preserve the authored fusion popup exactly; only replace its opaque black
   exterior canvas with the pixel-identical alpha-cut version. */
#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) .fusion-card {
  background-image: url("assets/generated/fusion_secret_frame_alpha_v7_1793710800000/fusion-secret-frame-alpha.png") !important;
}


/* SOURCE: ui/styles/inventory/fusion-secret-title-align-v8.css */
/* Optical title correction after the exterior canvas cut: keep the header
   inside the painted upper recess, three pixels lower than V4. */
#fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two:not(.mythic-item) #fusionTitle {
  top: 4.45% !important;
}


/* SOURCE: ui/styles/inventory/fusion-result-secret-language-v9.css */
/* Ordinary fusion and one-item grade ascent now share the restrained inner
   card language of the hidden-recipe result. Each stat owns its own painted
   cell and grid coordinate; no row-wide optical translation is used. */

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item),
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) {
  background: transparent !important;
  -webkit-backdrop-filter: blur(6px) saturate(.82) !important;
  backdrop-filter: blur(6px) saturate(.82) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) .fusion-card,
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) .fusion-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(356px, calc(100vw - 18px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 16px) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_secret_frame_alpha_v7_1793710800000/fusion-secret-frame-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) .fusion-card {
  aspect-ratio: 356 / 534 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) .fusion-card {
  aspect-ratio: 356 / 468 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item):not([data-result-core-count="1"]):not([data-result-core-count="2"]):not([data-result-core-count="3"]) .fusion-card {
  aspect-ratio: 356 / 620 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionTitle {
  position: absolute !important;
  left: 12% !important;
  right: 12% !important;
  top: 4.45% !important;
  z-index: 5 !important;
  width: auto !important;
  height: 8% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1px 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse at center, rgba(3, 9, 17, .94) 0 48%, rgba(3, 9, 17, .7) 62%, transparent 79%) !important;
  color: #ffe6a0 !important;
  font-size: 19px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 2px 2px #000 !important;
  transform: none !important;
}

/* The top bay shows only the finished item, matching the settled hidden
   recipe screen. Source cards and the CSS energy orb no longer compete with
   the result icon. */
#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) .fusion-absorb {
  position: absolute !important;
  left: 9.55% !important;
  right: 9.55% !important;
  top: 14.6% !important;
  z-index: 2 !important;
  width: auto !important;
  height: 24.5% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) .fusion-material,
#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) .fusion-core {
  display: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) .fusion-result-pop {
  position: relative !important;
  inset: auto !important;
  z-index: 3 !important;
  width: 94px !important;
  height: 103px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  display: grid !important;
  grid-template-rows: 78px 17px !important;
  place-items: center !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) .fusion-result-pop img {
  position: static !important;
  width: 78px !important;
  height: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  object-fit: contain !important;
  object-position: center !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .9)) !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) .fusion-result-pop span {
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #aee8ff !important;
  font-size: 10px !important;
  line-height: 17px !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  transform: none !important;
}

/* Dark, authored name plate shared with the hidden recipe. */
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) .fusion-result,
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) .fusion-result {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  z-index: 3 !important;
  width: 270px !important;
  height: 68px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_secret_name_plate_v6_1793707200000/secret-name-plate-stat-style.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) .fusion-result {
  top: 39.2% !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) .fusion-result {
  top: 42.6% !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) .fusion-result > .fusion-result-icon,
#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionResultText {
  display: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) .fusion-result > div {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 2px 24px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 13px 23px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  text-align: center !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionResultMeta,
#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionResultName {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionResultMeta {
  color: #82d5ec !important;
  font-size: 8.8px !important;
  line-height: 13px !important;
  text-shadow: 0 2px 2px #000 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionResultName {
  color: #f8e7ae !important;
  font-size: 17px !important;
  line-height: 23px !important;
  text-shadow: 0 2px 2px #000 !important;
}

/* Standard fusion: four independent cards followed by two independently
   painted feature cards. */
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] {
  position: absolute !important;
  left: 9.55% !important;
  right: 9.55% !important;
  top: 54.2% !important;
  z-index: 3 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 67px) !important;
  grid-template-rows: 44px 52px 58px !important;
  grid-auto-flow: row !important;
  justify-content: center !important;
  align-content: start !important;
  gap: 2px !important;
  background: none !important;
  overflow: visible !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats::before,
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats::before {
  content: none !important;
  display: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-core,
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats > .fusion-stat-core {
  --fusion-stat-optical-x: 0px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1px 4px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 16px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_secret_stat_cell_v5_1793703600000/secret-stat-cell-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="0"],
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="0"] {
  grid-column: 1 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="1"],
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="1"] {
  grid-column: 2 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="2"],
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="2"] {
  grid-column: 3 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-core[data-core-index="3"] {
  grid-column: 4 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionResultStats > .fusion-stat-core > small,
#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionResultStats > .fusion-stat-core > strong {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  place-self: center !important;
  overflow: hidden !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionResultStats > .fusion-stat-core > small {
  color: #83d8ee !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionResultStats > .fusion-stat-core > strong {
  color: #f8e8b0 !important;
  font-size: 10px !important;
  line-height: 16px !important;
  letter-spacing: -.15px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: 276px !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_secret_name_plate_v6_1793707200000/secret-name-plate-stat-style.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature[data-feature-index="0"] {
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 8px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature[data-feature-index="1"] {
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 28px !important;
  place-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature > small,
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature > strong {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature > small {
  color: #83d8ee !important;
  font-size: 8.4px !important;
  line-height: 11px !important;
  text-align: center !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature > strong {
  max-height: none !important;
  color: #f8e8b0 !important;
  font-size: 10px !important;
  line-height: 14px !important;
  text-align: center !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature[data-feature-index="0"] > strong {
  text-align: center !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature[data-feature-index="1"] > strong {
  display: grid !important;
  grid-template-rows: repeat(2, 14px) !important;
  align-content: center !important;
  justify-items: center !important;
}

#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature[data-feature-index="1"] > strong > .fusion-feature-line {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  font: inherit !important;
  line-height: 14px !important;
  text-align: center !important;
}

/* Retire the legacy promotion-tray sizing with selectors that explicitly
   bind each feature to its own V9 row and full-width painted card. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] > .fusion-stat-feature[data-feature-index="0"],
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] > .fusion-stat-feature[data-feature-index="1"] {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: 276px !important;
  min-width: 276px !important;
  max-width: 276px !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  background: transparent url("assets/generated/fusion_secret_name_plate_v6_1793707200000/secret-name-plate-stat-style.png") center / 100% 100% no-repeat !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] > .fusion-stat-feature[data-feature-index="0"] {
  grid-row: 2 !important;
  padding: 5px 18px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 8px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] > .fusion-stat-feature[data-feature-index="1"] {
  grid-row: 3 !important;
  padding: 5px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 28px !important;
  place-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
}

/* Grade ascent: three separately painted cards, each with its own column and
   centered label/value stack. */
#fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] {
  position: absolute !important;
  left: 50% !important;
  top: 59.2% !important;
  z-index: 3 !important;
  width: 252px !important;
  height: 52px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 82px) !important;
  grid-template-rows: 52px !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 3px !important;
  background: none !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

/* These selectors deliberately name each upgrade cell. Older three-stat
   plate rules carried a more specific shared-row selector, so a generic V9
   declaration could still leave the first cell in column two. */
#fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count="0"] > .fusion-stat-core[data-core-index] {
  --fusion-stat-optical-x: 0px !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 2px 5px 1px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 16px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  background: transparent url("assets/generated/fusion_secret_stat_cell_v5_1793703600000/secret-stat-cell-alpha.png") center / 100% 100% no-repeat !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count="0"] > .fusion-stat-core[data-core-index="0"] {
  grid-column: 1 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count="0"] > .fusion-stat-core[data-core-index="1"] {
  grid-column: 2 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count="0"] > .fusion-stat-core[data-core-index="2"] {
  grid-column: 3 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count="0"] > .fusion-stat-core[data-core-index] > small,
#fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count="0"] > .fusion-stat-core[data-core-index] > strong {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  place-self: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
}

/* Dense promotions keep the same one-card-per-stat rule. The outer frame
   grows to its tall authored proportion and the cards form real 3-column
   rows instead of being clipped behind a one-row strip. */
#fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item):not([data-result-core-count="1"]):not([data-result-core-count="2"]):not([data-result-core-count="3"]) #fusionResultStats[data-core-count][data-feature-count] {
  position: absolute !important;
  left: 50% !important;
  top: 54% !important;
  z-index: 3 !important;
  width: 252px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 82px) !important;
  grid-template-rows: none !important;
  grid-auto-rows: 52px !important;
  grid-auto-flow: row !important;
  justify-content: center !important;
  align-content: start !important;
  gap: 3px !important;
  background: none !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item):not([data-result-core-count="1"]):not([data-result-core-count="2"]):not([data-result-core-count="3"]) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index] {
  --fusion-stat-optical-x: 0px !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 2px 5px 1px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 16px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  background: transparent url("assets/generated/fusion_secret_stat_cell_v5_1793703600000/secret-stat-cell-alpha.png") center / 100% 100% no-repeat !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item):not([data-result-core-count="1"]):not([data-result-core-count="2"]):not([data-result-core-count="3"]) #fusionCloseButton {
  bottom: 2% !important;
}

/* The current regular-fusion confirm artwork is now the single control for
   ordinary fusion, grade ascent, and hidden recipes. */
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionCloseButton {
  position: absolute !important;
  left: 50% !important;
  bottom: 4.5% !important;
  z-index: 6 !important;
  box-sizing: border-box !important;
  width: 188px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / 100% 100% no-repeat !important;
  color: #fff0b5 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .68)) !important;
  transform: translateX(-50%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionCloseButton:hover,
#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionCloseButton:focus-visible {
  outline: 0 !important;
  filter: brightness(1.08) drop-shadow(0 7px 9px rgba(0, 0, 0, .7)) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionCloseButton:active {
  padding-top: 1px !important;
  filter: brightness(.9) drop-shadow(0 4px 6px rgba(0, 0, 0, .66)) !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result:is([data-fusion-kind="standard"],[data-fusion-kind="upgrade"]):not(.mythic-item) #fusionTitle {
    font-size: 18px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] {
    grid-template-columns: repeat(4, 65px) !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats > .fusion-stat-feature {
    width: 268px !important;
    padding-inline: 16px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] > .fusion-stat-feature[data-feature-index] {
    width: 268px !important;
    min-width: 268px !important;
    max-width: 268px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result[data-fusion-kind="upgrade"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] {
    width: 246px !important;
    grid-template-columns: repeat(3, 80px) !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.rarity-upgrade[data-fusion-kind="upgrade"]:not(.mythic-item):not([data-result-core-count="1"]):not([data-result-core-count="2"]):not([data-result-core-count="3"]) #fusionResultStats[data-core-count][data-feature-count] {
    width: 246px !important;
    grid-template-columns: repeat(3, 80px) !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result:not(.mythic-item) #fusionCloseButton {
    width: 180px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 12.5px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-card-spacing-v10.css */
/* Give every ordinary-fusion plate its own painted breathing room. V9's 2px
   row gaps let adjacent bevels merge into one noisy rail; these gaps are part
   of the layout and do not move any card's text as a shared group. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] {
  top: 55.2% !important;
  grid-template-rows: 44px 52px 58px !important;
  gap: 7px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] > .fusion-stat-core[data-core-index] {
  padding: 2px 4px 1px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionCloseButton {
  bottom: 1.5% !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] {
    top: 55.1% !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-stat-strip-v11.css */
/* Ordinary fusion uses one authored four-cell strip. Repeating the wide
   600x400 card four times compressed its top/bottom rails into a false
   horizontal seam. Text remains four independent grid items. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] {
  left: 50% !important;
  right: auto !important;
  top: 55.75% !important;
  width: 276px !important;
  grid-template-columns: repeat(4, 69px) !important;
  grid-template-rows: 44px 52px 58px !important;
  column-gap: 0 !important;
  row-gap: 3px !important;
  transform: translateX(-50%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  z-index: 0 !important;
  width: 276px !important;
  height: 44px !important;
  background: transparent url("assets/generated/fusion_stat_strip_alpha_1791206400006/resource-strip-alpha.png") center / 100% 100% no-repeat !important;
  pointer-events: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] > .fusion-stat-core[data-core-index] {
  width: 69px !important;
  min-width: 69px !important;
  height: 44px !important;
  padding: 2px 5px 1px !important;
  background: none !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] {
    top: 55.65% !important;
    width: 268px !important;
    grid-template-columns: repeat(4, 67px) !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"]::before {
    width: 268px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] > .fusion-stat-core[data-core-index] {
    width: 67px !important;
    min-width: 67px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-stat-registration-v12.css */
/* Register each four-stat text stack to the actual painted recess center.
   The authored strip's dividers are not mathematically equal quarters because
   its two end caps have different visual mass. Each index owns its offset. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"] > .fusion-stat-core[data-core-index="0"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"] > .fusion-stat-core[data-core-index="0"] > strong {
  transform: translateX(3.4px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"] > .fusion-stat-core[data-core-index="1"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"] > .fusion-stat-core[data-core-index="1"] > strong {
  transform: translateX(1.4px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"] > .fusion-stat-core[data-core-index="2"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"] > .fusion-stat-core[data-core-index="2"] > strong {
  transform: translateX(-1.8px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"] > .fusion-stat-core[data-core-index="3"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"] > .fusion-stat-core[data-core-index="3"] > strong {
  transform: translateX(-3.8px) !important;
}

/* Sparse ordinary results use complete one-, two-, or three-cell artwork and
   sit in the center. No empty legacy quarter or repeated cropped card remains. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"]) {
  left: 50% !important;
  right: auto !important;
  top: 55.75% !important;
  width: 276px !important;
  padding: 0 !important;
  grid-template-rows: 44px 52px 58px !important;
  column-gap: 0 !important;
  row-gap: 3px !important;
  background: none !important;
  transform: translateX(-50%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"])[data-feature-count="0"] {
  grid-template-rows: 44px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"])[data-feature-count="1"] {
  grid-template-rows: 44px 52px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"])[data-feature-count="2"] {
  grid-template-rows: 44px 52px 58px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="1"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="1"]::before {
  content: none !important;
  display: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="1"] > .fusion-stat-core[data-core-index="0"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 190px !important;
  min-width: 190px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 1px 20px 0 !important;
  background: transparent url("assets/generated/fusion_single_stat_plate_wide_1791552000006/single-stat-plate-wide.png") center / 100% 100% no-repeat !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"] {
  grid-template-columns: 28px 110px 110px 28px !important;
  isolation: isolate !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 2px !important;
  z-index: 0 !important;
  width: 220px !important;
  height: 40px !important;
  background: transparent url("assets/generated/fusion_multi_stat_plates_1791465600018/two-stat-plate.png") center / 100% 100% no-repeat !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"] {
  grid-template-columns: 12px repeat(3, 84px) 12px !important;
  isolation: isolate !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 2px !important;
  z-index: 0 !important;
  width: 252px !important;
  height: 40px !important;
  background: transparent url("assets/generated/fusion_multi_stat_plates_1791465600018/three-stat-plate.png") center / 100% 100% no-repeat !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="2"],[data-core-count="3"]) > .fusion-stat-core[data-core-index] {
  position: relative !important;
  z-index: 1 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 1px 7px 0 !important;
  background: none !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"] > .fusion-stat-core[data-core-index="0"],
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"] > .fusion-stat-core[data-core-index="0"] {
  grid-column: 2 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"] > .fusion-stat-core[data-core-index="1"],
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"] > .fusion-stat-core[data-core-index="1"] {
  grid-column: 3 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"] > .fusion-stat-core[data-core-index="2"] {
  grid-column: 4 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"] > .fusion-stat-core[data-core-index="0"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"] > .fusion-stat-core[data-core-index="0"] > strong {
  transform: translateX(5px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"] > .fusion-stat-core[data-core-index="1"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"] > .fusion-stat-core[data-core-index="1"] > strong {
  transform: translateX(-5px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-count="1"][data-result-feature-count="0"]:not(.mythic-item) #fusionCloseButton,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-count="2"][data-result-feature-count="0"]:not(.mythic-item) #fusionCloseButton,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-count="3"][data-result-feature-count="0"]:not(.mythic-item) #fusionCloseButton {
  bottom: 11% !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-count="1"][data-result-feature-count="0"]:not(.mythic-item) .fusion-card,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-count="2"][data-result-feature-count="0"]:not(.mythic-item) .fusion-card,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-count="3"][data-result-feature-count="0"]:not(.mythic-item) .fusion-card {
  aspect-ratio: 356 / 468 !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"]) {
    top: 55.65% !important;
    width: 268px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-fixed-geometry-v13.css */
/* Ordinary fusion result geometry V13.
   Each live stack owns its own painted recess. No shared translate is used. */

/* A lone value should read as a compact badge, not as a nearly two-cell bar. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="1"][data-feature-count] > .fusion-stat-core[data-core-index="0"] {
  width: 156px !important;
  min-width: 156px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="1"][data-feature-count] > .fusion-stat-core[data-core-index="0"] > small {
  transform: translateY(4px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="1"][data-feature-count] > .fusion-stat-core[data-core-index="0"] > strong {
  transform: translateY(1px) !important;
}

/* The two painted wells have different optical centres. Preserve their
   independent horizontal registration and lower both text stacks into the
   black safe area instead of touching the upper metal rail. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="0"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="0"] > strong {
  transform: translate(5px, 3px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="1"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="1"] > strong {
  transform: translate(-5px, 3px) !important;
}

/* V5's higher-specificity calm recess was still winning over V12 here, so the
   three-cell authored plate never reached the painted screen. Register the
   complete divided plate and every child cell explicitly. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
  width: 276px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  grid-template-columns: 12px repeat(3, 84px) 12px !important;
  grid-template-rows: 44px !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count]::before {
  content: "" !important;
  display: block !important;
  left: 50% !important;
  top: 0 !important;
  width: 252px !important;
  height: 44px !important;
  transform: translateX(-50%) !important;
  background: transparent url("assets/generated/fusion_multi_stat_plates_1791465600018/three-stat-plate.png") center / 100% 100% no-repeat !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index] {
  grid-row: 1 !important;
  align-self: center !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 1px 7px 0 !important;
  background: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="0"] {
  grid-column: 2 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="1"] {
  grid-column: 3 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="2"] {
  grid-column: 4 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="0"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="0"] > strong {
  transform: translate(0, 3px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="1"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="1"] > strong {
  transform: translate(0, 3px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="2"] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="2"] > strong {
  transform: translate(0, 3px) !important;
}

/* The long four-stat result keeps its taller outer frame, but its item image,
   identity recess, and numeric row now land on the same screen axes as the
   one-, two-, and three-stat results. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count="4"]:not(.mythic-item) .fusion-absorb {
  top: 18.9% !important;
  bottom: auto !important;
  height: 126px !important;
  min-height: 126px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count="4"]:not(.mythic-item) .fusion-result {
  top: 40.55% !important;
  bottom: auto !important;
  height: 92px !important;
  min-height: 92px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count="2"] {
  top: 55.05% !important;
}


/* SOURCE: ui/styles/inventory/fusion-result-common-stat-bay-v14.css */
/* Ordinary fusion result stat bay V14.
   Every 1-4 core-stat result now uses the same calm, unpartitioned recess that
   previously appeared behind the three-stat result. Only the number of equal
   text columns changes; no sliced cells, divider jewels, or per-count plates. */

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count] {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  width: 276px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  grid-template-rows: 50px 52px 58px !important;
  column-gap: 0 !important;
  row-gap: 3px !important;
  background: none !important;
  isolation: isolate !important;
  transform: translateX(-50%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="1"][data-feature-count] {
  grid-template-columns: 8px minmax(0, 1fr) 8px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"][data-feature-count] {
  grid-template-columns: 8px repeat(2, minmax(0, 1fr)) 8px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"][data-feature-count] {
  grid-template-columns: 8px repeat(3, minmax(0, 1fr)) 8px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count] {
  grid-template-columns: 8px repeat(4, minmax(0, 1fr)) 8px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="1"][data-feature-count] > .fusion-stat-core[data-core-index="0"],
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count] > .fusion-stat-core[data-core-index="0"] {
  grid-column: 2 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count] > .fusion-stat-core[data-core-index="1"] {
  grid-column: 3 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="3"],[data-core-count="4"])[data-feature-count] > .fusion-stat-core[data-core-index="2"] {
  grid-column: 4 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count] > .fusion-stat-core[data-core-index="3"] {
  grid-column: 5 !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 auto auto 8px !important;
  z-index: 0 !important;
  width: calc(100% - 16px) !important;
  height: 50px !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  transform: none !important;
  pointer-events: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count] > .fusion-stat-core[data-core-index] {
  position: relative !important;
  z-index: 1 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 7px 5px 6px !important;
  grid-template-rows: 11px 17px !important;
  align-content: center !important;
  background: none !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count] > .fusion-stat-core[data-core-index] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count] > .fusion-stat-core[data-core-index] > strong {
  width: 100% !important;
  place-self: center !important;
  text-align: center !important;
  transform: translateY(1px) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"])[data-feature-count] > .fusion-stat-core[data-core-index] > strong {
  font-size: 10.6px !important;
  line-height: 17px !important;
  letter-spacing: -.08px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count] > .fusion-stat-core[data-core-index] {
  padding-inline: 3px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="4"][data-feature-count] > .fusion-stat-core[data-core-index] > small {
  font-size: 8px !important;
  letter-spacing: -.15px !important;
  white-space: nowrap !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count] {
    width: 268px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"])[data-feature-count] > .fusion-stat-core[data-core-index] > strong {
    font-size: 10.2px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-stack-geometry-v15.css */
/* Ordinary fusion stack geometry V15.
   All ordinary items share one upper stack. Information may extend the frame
   downward, but it never recentres the title/image/name bays. Core stats use
   one calm unpartitioned recess per row: 1-4 / 5-8 / 9-10. */

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) {
  --fusion-frame-height: 468;
  --fusion-frame-offset: 0px;
  --fusion-confirm-bottom: 8px;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="1"],[data-result-core-count="2"],[data-result-core-count="3"],[data-result-core-count="4"])[data-result-feature-count="0"]:not(.mythic-item) {
  --fusion-confirm-bottom: 51px;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="1"],[data-result-core-count="2"],[data-result-core-count="3"],[data-result-core-count="4"])[data-result-feature-count="2"]:not(.mythic-item) {
  --fusion-frame-height: 534;
  --fusion-frame-offset: 33px;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="5"],[data-result-core-count="6"],[data-result-core-count="7"],[data-result-core-count="8"])[data-result-feature-count="1"]:not(.mythic-item) {
  --fusion-frame-height: 523;
  --fusion-frame-offset: 27.5px;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="5"],[data-result-core-count="6"],[data-result-core-count="7"],[data-result-core-count="8"])[data-result-feature-count="2"]:not(.mythic-item) {
  --fusion-frame-height: 584;
  --fusion-frame-offset: 58px;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="9"],[data-result-core-count="10"])[data-result-feature-count="0"]:not(.mythic-item) {
  --fusion-frame-height: 521;
  --fusion-frame-offset: 26.5px;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="9"],[data-result-core-count="10"])[data-result-feature-count="1"]:not(.mythic-item) {
  --fusion-frame-height: 576;
  --fusion-frame-offset: 54px;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="9"],[data-result-core-count="10"])[data-result-feature-count="2"]:not(.mythic-item) {
  --fusion-frame-height: 637;
  --fusion-frame-offset: 84.5px;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) .fusion-card {
  aspect-ratio: 356 / var(--fusion-frame-height) !important;
  top: var(--fusion-frame-offset) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) #fusionCloseButton {
  bottom: var(--fusion-confirm-bottom) !important;
}

/* Identical upper title, item, identity, and stat origins. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) #fusionTitle {
  top: 20.8125px !important;
  width: auto !important;
  height: 37.4375px !important;
  min-height: 37.4375px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) .fusion-absorb {
  top: 68.3125px !important;
  width: auto !important;
  height: 126px !important;
  min-height: 126px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) .fusion-result-pop {
  width: 94px !important;
  height: 103px !important;
  min-height: 103px !important;
  grid-template-rows: 78px 17px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) .fusion-result-pop img {
  width: 78px !important;
  height: 78px !important;
  object-position: center !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) .fusion-result {
  top: 183.453px !important;
  width: 270px !important;
  height: 92px !important;
  min-height: 92px !important;
}

/* Twelve equal units let the final 1/2/3/4 values of each row use the whole
   painted safe area without empty legacy quarter-cells. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] {
  --fusion-feature-row-one: 2;
  --fusion-feature-row-two: 3;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 260.906px !important;
  width: 276px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 8px repeat(12, minmax(0, 1fr)) 8px !important;
  column-gap: 0 !important;
  row-gap: 3px !important;
  background: none !important;
  isolation: isolate !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"])[data-feature-count] {
  --fusion-feature-row-one: 3;
  --fusion-feature-row-two: 4;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="9"],[data-core-count="10"])[data-feature-count] {
  --fusion-feature-row-one: 4;
  --fusion-feature-row-two: 5;
}

/* One core row. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count="0"] { grid-template-rows: 50px !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count="1"] { grid-template-rows: 50px 52px !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="1"],[data-core-count="2"],[data-core-count="3"],[data-core-count="4"])[data-feature-count="2"] { grid-template-rows: 50px 52px 58px !important; }

/* Two core rows. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"])[data-feature-count="0"] { grid-template-rows: 50px 50px !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"])[data-feature-count="1"] { grid-template-rows: 50px 50px 52px !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"])[data-feature-count="2"] { grid-template-rows: 50px 50px 52px 58px !important; }

/* Three core rows. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="9"],[data-core-count="10"])[data-feature-count="0"] { grid-template-rows: 50px 50px 50px !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="9"],[data-core-count="10"])[data-feature-count="1"] { grid-template-rows: 50px 50px 50px 52px !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="9"],[data-core-count="10"])[data-feature-count="2"] { grid-template-rows: 50px 50px 50px 52px 58px !important; }

/* One complete background per live core row. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 50px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0 !important;
  background-size: calc(100% - 16px) 50px !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  pointer-events: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"])[data-feature-count]::before {
  height: 103px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0, center 53px !important;
  background-size: calc(100% - 16px) 50px, calc(100% - 16px) 50px !important;
  background-repeat: no-repeat, no-repeat !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="9"],[data-core-count="10"])[data-feature-count]::before {
  height: 156px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0, center 53px, center 106px !important;
  background-size: calc(100% - 16px) 50px, calc(100% - 16px) 50px, calc(100% - 16px) 50px !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

/* Every text stack owns one grid area inside its painted row. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index] {
  position: relative !important;
  z-index: 1 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 7px 4px 6px !important;
  grid-template-rows: 11px 17px !important;
  align-content: center !important;
  background: none !important;
  overflow: hidden !important;
  transform: none !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index] > small,
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index] > strong {
  width: 100% !important;
  place-self: center !important;
  text-align: center !important;
  transform: translateY(1px) !important;
}

/* First row: 1, 2, 3, or 4 equal areas. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="1"] > .fusion-stat-core[data-core-index="0"] { grid-column: 2 / span 12 !important; grid-row: 1 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"] > .fusion-stat-core[data-core-index="0"] { grid-column: 2 / span 6 !important; grid-row: 1 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="2"] > .fusion-stat-core[data-core-index="1"] { grid-column: 8 / span 6 !important; grid-row: 1 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"] > .fusion-stat-core[data-core-index="0"] { grid-column: 2 / span 4 !important; grid-row: 1 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"] > .fusion-stat-core[data-core-index="1"] { grid-column: 6 / span 4 !important; grid-row: 1 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="3"] > .fusion-stat-core[data-core-index="2"] { grid-column: 10 / span 4 !important; grid-row: 1 !important; }

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="4"],[data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"],[data-core-count="9"],[data-core-count="10"]) > .fusion-stat-core[data-core-index="0"] { grid-column: 2 / span 3 !important; grid-row: 1 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="4"],[data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"],[data-core-count="9"],[data-core-count="10"]) > .fusion-stat-core[data-core-index="1"] { grid-column: 5 / span 3 !important; grid-row: 1 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="4"],[data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"],[data-core-count="9"],[data-core-count="10"]) > .fusion-stat-core[data-core-index="2"] { grid-column: 8 / span 3 !important; grid-row: 1 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="4"],[data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"],[data-core-count="9"],[data-core-count="10"]) > .fusion-stat-core[data-core-index="3"] { grid-column: 11 / span 3 !important; grid-row: 1 !important; }

/* Second row: distribute the remaining 1-4 values across the full bay. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="5"] > .fusion-stat-core[data-core-index="4"] { grid-column: 2 / span 12 !important; grid-row: 2 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="6"] > .fusion-stat-core[data-core-index="4"] { grid-column: 2 / span 6 !important; grid-row: 2 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="6"] > .fusion-stat-core[data-core-index="5"] { grid-column: 8 / span 6 !important; grid-row: 2 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="7"] > .fusion-stat-core[data-core-index="4"] { grid-column: 2 / span 4 !important; grid-row: 2 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="7"] > .fusion-stat-core[data-core-index="5"] { grid-column: 6 / span 4 !important; grid-row: 2 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="7"] > .fusion-stat-core[data-core-index="6"] { grid-column: 10 / span 4 !important; grid-row: 2 !important; }

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="8"],[data-core-count="9"],[data-core-count="10"]) > .fusion-stat-core[data-core-index="4"] { grid-column: 2 / span 3 !important; grid-row: 2 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="8"],[data-core-count="9"],[data-core-count="10"]) > .fusion-stat-core[data-core-index="5"] { grid-column: 5 / span 3 !important; grid-row: 2 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="8"],[data-core-count="9"],[data-core-count="10"]) > .fusion-stat-core[data-core-index="6"] { grid-column: 8 / span 3 !important; grid-row: 2 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats:is([data-core-count="8"],[data-core-count="9"],[data-core-count="10"]) > .fusion-stat-core[data-core-index="7"] { grid-column: 11 / span 3 !important; grid-row: 2 !important; }

/* Third row: catalog maximum is ten core values. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="9"] > .fusion-stat-core[data-core-index="8"] { grid-column: 2 / span 12 !important; grid-row: 3 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="10"] > .fusion-stat-core[data-core-index="8"] { grid-column: 2 / span 6 !important; grid-row: 3 !important; }
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count="10"] > .fusion-stat-core[data-core-index="9"] { grid-column: 8 / span 6 !important; grid-row: 3 !important; }

/* Feature rows always begin after the final core row. */
#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature[data-feature-index="0"] {
  grid-column: 1 / -1 !important;
  grid-row: var(--fusion-feature-row-one) !important;
  justify-self: center !important;
  width: 276px !important;
  min-width: 276px !important;
  height: 52px !important;
}

#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature[data-feature-index="1"] {
  grid-column: 1 / -1 !important;
  grid-row: var(--fusion-feature-row-two) !important;
  justify-self: center !important;
  width: 276px !important;
  min-width: 276px !important;
  height: 58px !important;
}

@media (max-width: 370px) {
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="1"],[data-result-core-count="2"],[data-result-core-count="3"],[data-result-core-count="4"])[data-result-feature-count="2"]:not(.mythic-item) { --fusion-frame-offset: 31.7px; }
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="5"],[data-result-core-count="6"],[data-result-core-count="7"],[data-result-core-count="8"])[data-result-feature-count="1"]:not(.mythic-item) { --fusion-frame-offset: 26.4px; }
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="5"],[data-result-core-count="6"],[data-result-core-count="7"],[data-result-core-count="8"])[data-result-feature-count="2"]:not(.mythic-item) { --fusion-frame-offset: 55.7px; }
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="9"],[data-result-core-count="10"])[data-result-feature-count="0"]:not(.mythic-item) { --fusion-frame-offset: 25.6px; }
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="9"],[data-result-core-count="10"])[data-result-feature-count="1"]:not(.mythic-item) { --fusion-frame-offset: 52px; }
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:is([data-result-core-count="9"],[data-result-core-count="10"])[data-result-feature-count="2"]:not(.mythic-item) { --fusion-frame-offset: 81.2px; }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) #fusionTitle {
    top: 20px !important;
    height: 35.9531px !important;
    min-height: 35.9531px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) .fusion-absorb { top: 65.6406px !important; }
  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) .fusion-result { top: 176.234px !important; }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] {
    top: 250.188px !important;
    width: 268px !important;
  }

  #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature[data-feature-index] {
    width: 268px !important;
    min-width: 268px !important;
  }
}

/* Final registration layer. Older files contain important index rules, so the
   variables below feed one higher-specificity owner for every live cell. */
#fusionResultStats[data-core-count="1"][data-feature-count] > .fusion-stat-core[data-core-index="0"] { --fusion-core-column: 2; --fusion-core-span: 12; --fusion-core-row: 1; }
#fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="0"] { --fusion-core-column: 2; --fusion-core-span: 6; --fusion-core-row: 1; }
#fusionResultStats[data-core-count="2"][data-feature-count] > .fusion-stat-core[data-core-index="1"] { --fusion-core-column: 8; --fusion-core-span: 6; --fusion-core-row: 1; }
#fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="0"] { --fusion-core-column: 2; --fusion-core-span: 4; --fusion-core-row: 1; }
#fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="1"] { --fusion-core-column: 6; --fusion-core-span: 4; --fusion-core-row: 1; }
#fusionResultStats[data-core-count="3"][data-feature-count] > .fusion-stat-core[data-core-index="2"] { --fusion-core-column: 10; --fusion-core-span: 4; --fusion-core-row: 1; }

#fusionResultStats:is([data-core-count="4"],[data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"],[data-core-count="9"],[data-core-count="10"])[data-feature-count] > .fusion-stat-core[data-core-index="0"] { --fusion-core-column: 2; --fusion-core-span: 3; --fusion-core-row: 1; }
#fusionResultStats:is([data-core-count="4"],[data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"],[data-core-count="9"],[data-core-count="10"])[data-feature-count] > .fusion-stat-core[data-core-index="1"] { --fusion-core-column: 5; --fusion-core-span: 3; --fusion-core-row: 1; }
#fusionResultStats:is([data-core-count="4"],[data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"],[data-core-count="9"],[data-core-count="10"])[data-feature-count] > .fusion-stat-core[data-core-index="2"] { --fusion-core-column: 8; --fusion-core-span: 3; --fusion-core-row: 1; }
#fusionResultStats:is([data-core-count="4"],[data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"],[data-core-count="9"],[data-core-count="10"])[data-feature-count] > .fusion-stat-core[data-core-index="3"] { --fusion-core-column: 11; --fusion-core-span: 3; --fusion-core-row: 1; }

#fusionResultStats[data-core-count="5"][data-feature-count] > .fusion-stat-core[data-core-index="4"] { --fusion-core-column: 2; --fusion-core-span: 12; --fusion-core-row: 2; }
#fusionResultStats[data-core-count="6"][data-feature-count] > .fusion-stat-core[data-core-index="4"] { --fusion-core-column: 2; --fusion-core-span: 6; --fusion-core-row: 2; }
#fusionResultStats[data-core-count="6"][data-feature-count] > .fusion-stat-core[data-core-index="5"] { --fusion-core-column: 8; --fusion-core-span: 6; --fusion-core-row: 2; }
#fusionResultStats[data-core-count="7"][data-feature-count] > .fusion-stat-core[data-core-index="4"] { --fusion-core-column: 2; --fusion-core-span: 4; --fusion-core-row: 2; }
#fusionResultStats[data-core-count="7"][data-feature-count] > .fusion-stat-core[data-core-index="5"] { --fusion-core-column: 6; --fusion-core-span: 4; --fusion-core-row: 2; }
#fusionResultStats[data-core-count="7"][data-feature-count] > .fusion-stat-core[data-core-index="6"] { --fusion-core-column: 10; --fusion-core-span: 4; --fusion-core-row: 2; }

#fusionResultStats:is([data-core-count="8"],[data-core-count="9"],[data-core-count="10"])[data-feature-count] > .fusion-stat-core[data-core-index="4"] { --fusion-core-column: 2; --fusion-core-span: 3; --fusion-core-row: 2; }
#fusionResultStats:is([data-core-count="8"],[data-core-count="9"],[data-core-count="10"])[data-feature-count] > .fusion-stat-core[data-core-index="5"] { --fusion-core-column: 5; --fusion-core-span: 3; --fusion-core-row: 2; }
#fusionResultStats:is([data-core-count="8"],[data-core-count="9"],[data-core-count="10"])[data-feature-count] > .fusion-stat-core[data-core-index="6"] { --fusion-core-column: 8; --fusion-core-span: 3; --fusion-core-row: 2; }
#fusionResultStats:is([data-core-count="8"],[data-core-count="9"],[data-core-count="10"])[data-feature-count] > .fusion-stat-core[data-core-index="7"] { --fusion-core-column: 11; --fusion-core-span: 3; --fusion-core-row: 2; }

#fusionResultStats[data-core-count="9"][data-feature-count] > .fusion-stat-core[data-core-index="8"] { --fusion-core-column: 2; --fusion-core-span: 12; --fusion-core-row: 3; }
#fusionResultStats[data-core-count="10"][data-feature-count] > .fusion-stat-core[data-core-index="8"] { --fusion-core-column: 2; --fusion-core-span: 6; --fusion-core-row: 3; }
#fusionResultStats[data-core-count="10"][data-feature-count] > .fusion-stat-core[data-core-index="9"] { --fusion-core-column: 8; --fusion-core-span: 6; --fusion-core-row: 3; }

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-core[data-core-index] {
  grid-column: var(--fusion-core-column) / span var(--fusion-core-span) !important;
  grid-row: var(--fusion-core-row) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats:is([data-core-count="5"],[data-core-count="6"],[data-core-count="7"],[data-core-count="8"])[data-feature-count] {
  --fusion-feature-row-one: 3 !important;
  --fusion-feature-row-two: 4 !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats:is([data-core-count="9"],[data-core-count="10"])[data-feature-count] {
  --fusion-feature-row-one: 4 !important;
  --fusion-feature-row-two: 5 !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature[data-feature-index="0"] {
  grid-column: 1 / -1 !important;
  grid-row: var(--fusion-feature-row-one) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-count][data-feature-count] > .fusion-stat-feature[data-feature-index="1"] {
  grid-column: 1 / -1 !important;
  grid-row: var(--fusion-feature-row-two) !important;
}


/* SOURCE: ui/styles/inventory/fusion-result-stack-separation-v16.css */
/* Ordinary fusion stack separation V16.
   The item, identity, core rows, and feature rows are independent painted
   bays. Runtime packing assigns every core chip its own 12-column area and
   gives long semantic fields two logical units. */

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) {
  --fusion-frame-height: 468;
  --fusion-frame-offset: 0px;
  --fusion-confirm-bottom: 2px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="1"][data-result-feature-count="0"]:not(.mythic-item) {
  --fusion-confirm-bottom: 51px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="1"][data-result-feature-count="2"]:not(.mythic-item) {
  --fusion-frame-height: 534;
  --fusion-frame-offset: 33px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="2"][data-result-feature-count="1"]:not(.mythic-item) {
  --fusion-frame-height: 523;
  --fusion-frame-offset: 27.5px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="2"][data-result-feature-count="2"]:not(.mythic-item) {
  --fusion-frame-height: 584;
  --fusion-frame-offset: 58px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="3"][data-result-feature-count="0"]:not(.mythic-item) {
  --fusion-frame-height: 521;
  --fusion-frame-offset: 26.5px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="3"][data-result-feature-count="1"]:not(.mythic-item) {
  --fusion-frame-height: 576;
  --fusion-frame-offset: 54px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="3"][data-result-feature-count="2"]:not(.mythic-item) {
  --fusion-frame-height: 637;
  --fusion-frame-offset: 84.5px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="4"][data-result-feature-count="0"]:not(.mythic-item) {
  --fusion-frame-height: 576;
  --fusion-frame-offset: 54px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="4"][data-result-feature-count="1"]:not(.mythic-item) {
  --fusion-frame-height: 637;
  --fusion-frame-offset: 84.5px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="4"][data-result-feature-count="2"]:not(.mythic-item) {
  --fusion-frame-height: 698;
  --fusion-frame-offset: 115px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="5"][data-result-feature-count="0"]:not(.mythic-item) {
  --fusion-frame-height: 637;
  --fusion-frame-offset: 84.5px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="5"][data-result-feature-count="1"]:not(.mythic-item) {
  --fusion-frame-height: 698;
  --fusion-frame-offset: 115px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="5"][data-result-feature-count="2"]:not(.mythic-item) {
  --fusion-frame-height: 759;
  --fusion-frame-offset: 145.5px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-card {
  aspect-ratio: 356 / var(--fusion-frame-height) !important;
  top: var(--fusion-frame-offset) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionCloseButton {
  bottom: var(--fusion-confirm-bottom) !important;
}

/* There is no painted overlap between these three upper bays. */
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-result {
  top: 201px !important;
  width: 270px !important;
  height: 72px !important;
  min-height: 72px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] {
  top: 280px !important;
  grid-template-columns: 8px repeat(60, minmax(0, 1fr)) 8px !important;
  row-gap: 6px !important;
}

/* Row count, not raw stat count, owns the vertical grid geometry. */
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="1"][data-feature-count="0"] { grid-template-rows: 50px !important; }
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="1"][data-feature-count="1"] { grid-template-rows: 50px 52px !important; }
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="1"][data-feature-count="2"] { grid-template-rows: 50px 52px 58px !important; }

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="2"][data-feature-count="0"] { grid-template-rows: 50px 50px !important; }
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="2"][data-feature-count="1"] { grid-template-rows: 50px 50px 52px !important; }
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="2"][data-feature-count="2"] { grid-template-rows: 50px 50px 52px 58px !important; }

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="3"][data-feature-count="0"] { grid-template-rows: 50px 50px 50px !important; }
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="3"][data-feature-count="1"] { grid-template-rows: 50px 50px 50px 52px !important; }
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="3"][data-feature-count="2"] { grid-template-rows: 50px 50px 50px 52px 58px !important; }

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="4"][data-feature-count="0"] { grid-template-rows: 50px 50px 50px 50px !important; }
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="4"][data-feature-count="1"] { grid-template-rows: 50px 50px 50px 50px 52px !important; }
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="4"][data-feature-count="2"] { grid-template-rows: 50px 50px 50px 50px 52px 58px !important; }

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="5"][data-feature-count="0"] { grid-template-rows: 50px 50px 50px 50px 50px !important; }
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="5"][data-feature-count="1"] { grid-template-rows: 50px 50px 50px 50px 50px 52px !important; }
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="5"][data-feature-count="2"] { grid-template-rows: 50px 50px 50px 50px 50px 52px 58px !important; }

/* A single uninterrupted recess is painted behind every actual core row. */
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count]::before {
  height: 50px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0 !important;
  background-size: calc(100% - 16px) 50px !important;
  background-repeat: no-repeat !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="2"][data-feature-count]::before {
  height: 106px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0, center 56px !important;
  background-size: calc(100% - 16px) 50px, calc(100% - 16px) 50px !important;
  background-repeat: no-repeat, no-repeat !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="3"][data-feature-count]::before {
  height: 162px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0, center 56px, center 112px !important;
  background-size: calc(100% - 16px) 50px, calc(100% - 16px) 50px, calc(100% - 16px) 50px !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="4"][data-feature-count]::before {
  height: 218px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0, center 56px, center 112px, center 168px !important;
  background-size: calc(100% - 16px) 50px, calc(100% - 16px) 50px, calc(100% - 16px) 50px, calc(100% - 16px) 50px !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count="5"][data-feature-count]::before {
  height: 274px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0, center 56px, center 112px, center 168px, center 224px !important;
  background-size: calc(100% - 16px) 50px, calc(100% - 16px) 50px, calc(100% - 16px) 50px, calc(100% - 16px) 50px, calc(100% - 16px) 50px !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-core[data-core-index] {
  grid-column: var(--fusion-core-column) / span var(--fusion-core-span) !important;
  grid-row: var(--fusion-core-row) !important;
  padding-inline: 5px !important;
}

/* A three-item Sage Necklace fusion is the narrowest five-column case. Its
   three-digit critical-damage value needs the full painted cell rather than
   losing the percent sign against the right divider. Keep the other four
   independently registered cells unchanged. */
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-core[data-stat-label="치명 피해"] {
  padding-inline: 1px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-core[data-stat-label="치명 피해"] > strong {
  font-size: 10px !important;
  letter-spacing: -.025em !important;
}

/* The last painted cell has an ornate right end-cap. Keep the same +1px
   vertical registration as its four neighbours, but use the text's intrinsic
   width so the final percent glyph is not clipped by a full-width child box. */
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-core[data-stat-label="치명 피해"] > :is(small, strong) {
  width: max-content !important;
  max-width: calc(100% - 8px) !important;
  overflow: visible !important;
  transform: translate(-3px, 1px) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-wide {
  padding-inline: 7px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-wide > strong {
  max-width: 100% !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  font-size: 9.2px !important;
  line-height: 12px !important;
}

@media (max-width: 370px) {
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="1"][data-result-feature-count="2"]:not(.mythic-item) { --fusion-frame-offset: 31.7px; }
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="2"][data-result-feature-count="1"]:not(.mythic-item) { --fusion-frame-offset: 26.4px; }
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="2"][data-result-feature-count="2"]:not(.mythic-item) { --fusion-frame-offset: 55.7px; }
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="3"][data-result-feature-count="0"]:not(.mythic-item) { --fusion-frame-offset: 25.6px; }
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="3"][data-result-feature-count="1"]:not(.mythic-item) { --fusion-frame-offset: 52px; }
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="3"][data-result-feature-count="2"]:not(.mythic-item) { --fusion-frame-offset: 81.2px; }
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="4"][data-result-feature-count="0"]:not(.mythic-item) { --fusion-frame-offset: 52px; }
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="4"][data-result-feature-count="1"]:not(.mythic-item) { --fusion-frame-offset: 81.2px; }
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="4"][data-result-feature-count="2"]:not(.mythic-item) { --fusion-frame-offset: 110.4px; }

  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-result {
    top: 198px !important;
    height: 72px !important;
    min-height: 72px !important;
  }

  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] {
    top: 277px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-width-unification-v17.css */
/* Ordinary fusion result width unification V17.
   The 270px identity plate is the painted horizontal reference for every
   independent bay above and below it. */

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-absorb {
  left: 50% !important;
  right: auto !important;
  width: 270px !important;
  transform: translateX(-50%) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] {
  width: 270px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count]::before {
  background-size: 100% 50px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-feature[data-feature-index] {
  width: 270px !important;
  min-width: 270px !important;
}


/* SOURCE: ui/styles/inventory/fusion-secret-standard-stack-v18.css */
/* Non-mythic hidden fusion results V18.
   Hidden recipes now use the same authored frame, bay sizes, fixed axes, and
   stat registration as ordinary completed fusion results. Only the copy and
   result data distinguish a hidden recipe. */

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) {
  --secret-frame-height: 468;
  --secret-frame-offset: 0px;
  --secret-confirm-bottom: 2px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count="1"][data-result-feature-count="0"]:not(.mythic-item) {
  --secret-confirm-bottom: 51px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count="3"][data-result-feature-count="0"]:not(.mythic-item) {
  --secret-frame-height: 521;
  --secret-frame-offset: 26.5px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-card {
  position: relative !important;
  top: var(--secret-frame-offset) !important;
  width: min(356px, calc(100vw - 18px)) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 356 / var(--secret-frame-height) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_secret_frame_alpha_v7_1793710800000/fusion-secret-frame-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionTitle {
  position: absolute !important;
  left: 12% !important;
  right: 12% !important;
  top: 20.8125px !important;
  z-index: 4 !important;
  width: auto !important;
  height: 37.4375px !important;
  min-height: 37.4375px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1px 6px 0 !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse at center, rgba(3, 9, 17, 0.94) 0 48%, rgba(3, 9, 17, 0.7) 62%, transparent 79%) !important;
  color: #ffe6a0 !important;
  font-size: 19px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 2px 2px #000 !important;
  transform: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-absorb {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 68.3125px !important;
  z-index: 2 !important;
  width: 270px !important;
  height: 126px !important;
  min-height: 126px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  place-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 16px 24px !important;
  overflow: visible !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") center / 100% 100% no-repeat !important;
  transform: translateX(-50%) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-complete[data-fusion-kind="secret"]:not(.mythic-item) .fusion-result-pop {
  position: relative !important;
  inset: auto !important;
  width: 94px !important;
  height: 103px !important;
  min-height: 103px !important;
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  grid-template-columns: 94px !important;
  grid-template-rows: 78px 17px !important;
  align-content: center !important;
  justify-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  overflow: visible !important;
  transform: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-complete[data-fusion-kind="secret"]:not(.mythic-item) .fusion-absorb > .fusion-material,
html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-complete[data-fusion-kind="secret"]:not(.mythic-item) .fusion-absorb > .fusion-core {
  display: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-complete[data-fusion-kind="secret"]:not(.mythic-item) .fusion-result-pop img {
  width: 78px !important;
  height: 78px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-complete[data-fusion-kind="secret"]:not(.mythic-item) .fusion-result-pop span {
  position: static !important;
  width: 100% !important;
  height: 17px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff0e8 !important;
  font-size: 9px !important;
  line-height: 17px !important;
  text-align: center !important;
  transform: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-result {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 201px !important;
  z-index: 3 !important;
  width: 270px !important;
  height: 72px !important;
  min-height: 72px !important;
  display: block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 12px 30px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-result > .fusion-result-icon {
  display: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-result > div {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 13px 23px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 2px 14px 0 !important;
  text-align: center !important;
  transform: translateY(-2px) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionResultMeta,
html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionResultName {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultMeta {
  color: #82d5ec !important;
  font-size: 8.8px !important;
  line-height: 13px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultName {
  color: #f8e7ae !important;
  font-size: 17px !important;
  line-height: 23px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 280px !important;
  z-index: 3 !important;
  width: 270px !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 8px repeat(60, minmax(0, 1fr)) 8px !important;
  grid-auto-flow: row !important;
  column-gap: 0 !important;
  row-gap: 6px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  isolation: isolate !important;
  background: none !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count="1"][data-feature-count="0"] {
  grid-template-rows: 50px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count="2"][data-feature-count="0"] {
  grid-template-rows: 50px 50px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count="3"][data-feature-count="0"] {
  grid-template-rows: 50px 50px 50px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 50px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0 !important;
  background-size: 100% 50px !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  pointer-events: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count="2"][data-feature-count]::before {
  height: 106px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0, center 56px !important;
  background-size: 100% 50px, 100% 50px !important;
  background-repeat: no-repeat, no-repeat !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count="3"][data-feature-count]::before {
  height: 162px !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png"), url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center 0, center 56px, center 112px !important;
  background-size: 100% 50px, 100% 50px, 100% 50px !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-core[data-core-index] {
  position: relative !important;
  z-index: 1 !important;
  grid-column: var(--fusion-core-column) / span var(--fusion-core-span) !important;
  grid-row: var(--fusion-core-row) !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 17px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 7px 5px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-core > small,
html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-core > strong {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  place-self: center !important;
  overflow: hidden !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  transform: translateY(1px) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-core > small {
  color: #83d8ee !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-core > strong {
  color: #f8e8b0 !important;
  font-size: 10.2px !important;
  line-height: 17px !important;
  letter-spacing: -0.15px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-wide {
  padding-inline: 7px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] > .fusion-stat-wide > strong {
  max-width: 100% !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  font-size: 9.2px !important;
  line-height: 12px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionCloseButton {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: var(--secret-confirm-bottom) !important;
  z-index: 4 !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 370px) {
  html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count="3"][data-result-feature-count="0"]:not(.mythic-item) {
    --secret-frame-offset: 25.6px;
  }

  html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionTitle {
    top: 20px !important;
    height: 35.9531px !important;
    min-height: 35.9531px !important;
    font-size: 18px !important;
  }

  html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-absorb {
    top: 65.6406px !important;
  }

  html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) .fusion-result {
    top: 198px !important;
  }

  html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion[data-fusion-kind="secret"][data-result-core-row-count][data-result-feature-count]:not(.mythic-item) #fusionResultStats[data-core-row-count][data-feature-count] {
    top: 277px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-three-merge-motion-v19.css */
/* Restore the three-source forge motion after the completed-result layout
   intentionally hid every source card. This is scoped to ordinary,
   non-mythic three-item fusion only; upgrade and secret-result layouts keep
   their independent motion rules. */

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-absorb {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 4px !important;
  padding: 14px 22px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-absorb > .fusion-material {
  position: relative !important;
  z-index: 4 !important;
  width: 68px !important;
  height: 76px !important;
  min-height: 76px !important;
  display: grid !important;
  grid-template-rows: 42px minmax(12px, auto) 12px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 3px 1px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform-origin: center !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-material > img {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .9)) drop-shadow(0 0 5px rgba(88, 205, 255, .42)) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-material > span {
  width: 100% !important;
  max-height: 20px !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #f6e7bd !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 10px !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-material > small {
  color: #aee8ff !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  line-height: 12px !important;
  text-shadow: 0 2px 2px #000, 0 0 5px rgba(92, 210, 255, .65) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three.active[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-material > span,
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three.active[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-material > small {
  animation: fusionStandardMaterialCopyV19 1350ms ease-out both !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three.active[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .material-0 {
  animation: fusionStandardGatherLeftV19 1350ms cubic-bezier(.34, .05, .24, 1) both !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three.active[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .material-1 {
  animation: fusionStandardGatherCenterV19 1350ms cubic-bezier(.34, .05, .24, 1) both !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three.active[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .material-2 {
  animation: fusionStandardGatherRightV19 1350ms cubic-bezier(.34, .05, .24, 1) both !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-absorb > .fusion-core {
  display: block !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three.active[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-core {
  animation: fusionStandardCoreV19 1350ms ease-out both !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-result-pop {
  position: absolute !important;
  inset: auto auto auto auto !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 5 !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three.active[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-result-pop {
  animation: fusionStandardResultRevealV19 1350ms ease-out both !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three.active[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-result-pop > img,
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three.active[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-result-pop > span {
  animation: fusionStandardResultContentV19 1350ms ease-out both !important;
}

@keyframes fusionStandardGatherLeftV19 {
  0%, 34% { opacity: 1; transform: translateX(0) scale(1); }
  70% { opacity: 1; transform: translateX(calc(100% + 8px)) scale(.68); }
  84%, 100% { opacity: 0; transform: translateX(calc(100% + 8px)) scale(.06); }
}

@keyframes fusionStandardGatherCenterV19 {
  0%, 34% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(.68); }
  84%, 100% { opacity: 0; transform: scale(.06); }
}

@keyframes fusionStandardGatherRightV19 {
  0%, 34% { opacity: 1; transform: translateX(0) scale(1); }
  70% { opacity: 1; transform: translateX(calc(-100% - 8px)) scale(.68); }
  84%, 100% { opacity: 0; transform: translateX(calc(-100% - 8px)) scale(.06); }
}

@keyframes fusionStandardMaterialCopyV19 {
  0%, 34% { opacity: 1; }
  54%, 100% { opacity: 0; }
}

@keyframes fusionStandardCoreV19 {
  0%, 34% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  54% { opacity: .78; transform: translate(-50%, -50%) scale(.72); }
  74% { opacity: 1; transform: translate(-50%, -50%) scale(1.28); }
  90%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

@keyframes fusionStandardResultRevealV19 {
  0%, 78% { clip-path: circle(0 at 50% 50%); }
  90% { clip-path: circle(68% at 50% 50%); }
  100% { clip-path: circle(100% at 50% 50%); }
}

@keyframes fusionStandardResultContentV19 {
  0%, 78% { opacity: 0; }
  90%, 100% { opacity: 1; }
}

@media (max-width: 370px) {
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-absorb {
    padding-inline: 20px !important;
  }

  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) .fusion-absorb > .fusion-material {
    width: 66px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-secret-material-alignment-v20.css */
/* Two-material hidden recipes must begin on one horizontal optical baseline.
   The old auto-placement inherited different implicit tracks for material-0
   and material-2, which could make unlike silhouettes read as a diagonal pair.
   Keep the existing painted bay and gather motion; register each source in its
   own explicit 72px track so both travel only horizontally toward the centre. */
html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two .fusion-absorb {
  grid-template-columns: 72px 72px !important;
  grid-template-rows: 76px !important;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: 30px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two .fusion-material {
  grid-row: 1 !important;
  width: 72px !important;
  height: 76px !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-self: center !important;
  align-content: center !important;
  transform-origin: center center !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two .fusion-material.material-0 {
  grid-column: 1 !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two .fusion-material.material-2 {
  grid-column: 2 !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two .fusion-material > img {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-self: center !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Visual-only QA fixture: expose the real starting tracks without waiting for
   the gather animation. Production never sets this data attribute. */
html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two[data-qa-fusion-phase="start"] .fusion-material {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.secret-fusion.fusion-two[data-qa-fusion-phase="start"] :is(.fusion-core, .fusion-result-pop) {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}


/* SOURCE: ui/styles/inventory/fusion-three-feature-stack-v20.css */
/* Ordinary three-item fusion can carry three independent feature rows after
   enhancement: large-item trait, intrinsic upper effect, and ascent power.
   V16 registered only zero to two feature rows, leaving the third row below
   the frame and behind the confirm button. */

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-row-count="1"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) {
  --fusion-frame-height: 630;
  --fusion-frame-offset: 0px;
  --fusion-confirm-bottom: 12px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-row-count="2"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) {
  --fusion-frame-height: 686;
  --fusion-frame-offset: 0px;
  --fusion-confirm-bottom: 12px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-row-count="3"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) {
  --fusion-frame-height: 742;
  --fusion-frame-offset: 0px;
  --fusion-confirm-bottom: 12px;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) .fusion-card {
  top: 0 !important;
  aspect-ratio: 356 / var(--fusion-frame-height) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionCloseButton {
  bottom: var(--fusion-confirm-bottom) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-row-count="1"][data-feature-count="3"] {
  grid-template-rows: 50px 52px 58px 80px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-row-count="2"][data-feature-count="3"] {
  grid-template-rows: 50px 50px 52px 58px 80px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-row-count="3"][data-feature-count="3"] {
  grid-template-rows: 50px 50px 50px 52px 58px 80px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-row-count="1"][data-feature-count="3"] > .fusion-stat-feature[data-feature-index="2"] {
  grid-row: 4 !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-row-count="2"][data-feature-count="3"] > .fusion-stat-feature[data-feature-index="2"] {
  grid-row: 5 !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-row-count="3"][data-feature-count="3"] > .fusion-stat-feature[data-feature-index="2"] {
  grid-row: 6 !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-feature-count="3"] > .fusion-stat-feature[data-feature-index="2"] {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: 270px !important;
  min-width: 270px !important;
  height: 80px !important;
  min-height: 80px !important;
}

/* The affinity copy is optically high inside the painted 50px recess even
   though its mathematical box is centered. Move only this label/value pair. */
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats > .fusion-stat-core.fusion-stat-affinity > small,
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats > .fusion-stat-core.fusion-stat-affinity > strong {
  transform: translateY(3px) !important;
}

@media (max-width: 370px) {
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-row-count][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-feature-count="3"] > .fusion-stat-feature[data-feature-index="2"] {
    width: 268px !important;
    min-width: 268px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-three-feature-unity-v21.css */
/* Three-feature ordinary fusion results use one visual and geometric rule.
   The previous stack mixed two flat strips with one deep promotion recess,
   making the ascent power look detached and optically high. */

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-row-count="1"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) {
  --fusion-frame-height: 632;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-row-count="2"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) {
  --fusion-frame-height: 688;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-row-count="3"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) {
  --fusion-frame-height: 744;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-count][data-result-core-row-count][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionTitle {
  top: 26px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-row-count="1"][data-feature-count="3"] {
  grid-template-rows: 50px 64px 64px 64px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-row-count="2"][data-feature-count="3"] {
  grid-template-rows: 50px 50px 64px 64px 64px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-core-row-count="3"][data-feature-count="3"] {
  grid-template-rows: 50px 50px 50px 64px 64px 64px !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-feature-count="3"] > .fusion-stat-feature[data-feature-index] {
  box-sizing: border-box !important;
  width: 270px !important;
  min-width: 270px !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 9px 28px 8px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 11px 28px !important;
  place-content: center !important;
  place-items: center !important;
  row-gap: 2px !important;
  column-gap: 0 !important;
  border: 0 !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-feature-count="3"] > .fusion-stat-feature[data-feature-index] > small,
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-feature-count="3"] > .fusion-stat-feature[data-feature-index] > strong {
  width: 100% !important;
  margin: 0 !important;
  place-self: center !important;
  text-align: center !important;
  justify-items: center !important;
  transform: translateY(2px) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-feature-count="3"] > .fusion-stat-feature[data-feature-index] > strong {
  display: grid !important;
  align-content: center !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-feature-count="3"] > .fusion-stat-feature[data-feature-index] > strong > .fusion-feature-line {
  width: 100% !important;
  text-align: center !important;
}

@media (max-width: 370px) {
  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-core-count][data-result-core-row-count][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionTitle {
    top: 25px !important;
  }

  html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three[data-fusion-kind="standard"][data-result-feature-count="3"]:not(.secret-fusion):not(.mythic-item) #fusionResultStats[data-feature-count="3"] > .fusion-stat-feature[data-feature-index] {
    width: 268px !important;
    min-width: 268px !important;
    padding-inline: 26px !important;
  }
}


/* SOURCE: ui/styles/inventory/fusion-result-rarity-aura-v22.css */
/* Result-grade identity for three-item fusion and hidden recipes.
   Keep the accepted black / aged-gold / blue-black painted frame intact and
   tint only its light, title, metadata and crystal-adjacent glow. */
#fusionPanel.fusion-panel[data-result-rarity] {
  --fusion-grade-light: #79ddff;
  --fusion-grade-soft: rgba(53, 200, 255, .3);
  --fusion-grade-faint: rgba(53, 200, 255, .12);
  --fusion-grade-second: var(--fusion-grade-light);
}

#fusionPanel.fusion-panel[data-result-rarity="F"] {
  --fusion-grade-light: #d2a07a;
  --fusion-grade-soft: rgba(168, 121, 86, .34);
  --fusion-grade-faint: rgba(168, 121, 86, .13);
}

#fusionPanel.fusion-panel[data-result-rarity="D"] {
  --fusion-grade-light: #f0b36d;
  --fusion-grade-soft: rgba(217, 139, 70, .36);
  --fusion-grade-faint: rgba(217, 139, 70, .14);
}

#fusionPanel.fusion-panel[data-result-rarity="C"] {
  --fusion-grade-light: #8dffb0;
  --fusion-grade-soft: rgba(74, 222, 128, .34);
  --fusion-grade-faint: rgba(74, 222, 128, .13);
}

#fusionPanel.fusion-panel[data-result-rarity="B"] {
  --fusion-grade-light: #79ddff;
  --fusion-grade-soft: rgba(53, 200, 255, .36);
  --fusion-grade-faint: rgba(53, 200, 255, .14);
}

#fusionPanel.fusion-panel[data-result-rarity="A"] {
  --fusion-grade-light: #d0b5ff;
  --fusion-grade-soft: rgba(165, 104, 237, .4);
  --fusion-grade-faint: rgba(165, 104, 237, .15);
}

#fusionPanel.fusion-panel[data-result-rarity="S"] {
  --fusion-grade-light: #ffe58b;
  --fusion-grade-soft: rgba(255, 220, 115, .4);
  --fusion-grade-faint: rgba(255, 220, 115, .15);
}

#fusionPanel.fusion-panel[data-result-rarity="SS"] {
  --fusion-grade-light: #ffc0d0;
  --fusion-grade-soft: rgba(255, 159, 184, .42);
  --fusion-grade-faint: rgba(255, 159, 184, .16);
}

#fusionPanel.fusion-panel[data-result-rarity="SSS"] {
  --fusion-grade-light: #fffdf0;
  --fusion-grade-second: #42f5ff;
  --fusion-grade-soft: rgba(66, 245, 255, .44);
  --fusion-grade-faint: rgba(255, 220, 115, .16);
}

#fusionPanel.fusion-panel[data-result-grade="mythic"] {
  --fusion-grade-light: #ffc4ed;
  --fusion-grade-second: #ffdc73;
  --fusion-grade-soft: rgba(240, 95, 156, .48);
  --fusion-grade-faint: rgba(255, 212, 104, .16);
}

#fusionPanel.fusion-panel.structured-fusion-result:is(.fusion-three, .secret-fusion)[data-result-rarity] {
  background:
    radial-gradient(ellipse at 50% 48%, var(--fusion-grade-faint) 0, transparent 56%),
    transparent !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is(.fusion-three, .secret-fusion)[data-result-rarity] .fusion-card {
  isolation: isolate !important;
}

#fusionPanel.fusion-panel.structured-fusion-result:is(.fusion-three, .secret-fusion)[data-result-rarity] .fusion-card::after {
  content: "";
  position: absolute;
  inset: 2.8% 3.2%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 7% 10%, var(--fusion-grade-soft) 0 1%, transparent 10%),
    radial-gradient(circle at 93% 10%, var(--fusion-grade-soft) 0 1%, transparent 10%),
    radial-gradient(circle at 5% 78%, var(--fusion-grade-soft) 0 1%, transparent 12%),
    radial-gradient(circle at 95% 78%, var(--fusion-grade-soft) 0 1%, transparent 12%),
    radial-gradient(ellipse at 50% 4%, var(--fusion-grade-faint) 0, transparent 32%),
    radial-gradient(ellipse at 50% 96%, var(--fusion-grade-faint) 0, transparent 31%);
  box-shadow:
    inset 0 0 24px var(--fusion-grade-faint),
    0 0 20px var(--fusion-grade-faint);
  opacity: .94;
}

html body #fusionPanel.fusion-panel.structured-fusion-result:is(.fusion-three, .secret-fusion)[data-result-rarity] #fusionTitle {
  color: var(--fusion-grade-light) !important;
  text-shadow:
    0 2px 2px #000,
    0 0 8px var(--fusion-grade-soft) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result:is(.fusion-three, .secret-fusion)[data-result-rarity] #fusionResultMeta,
html body #fusionPanel.fusion-panel.structured-fusion-result:is(.fusion-three, .secret-fusion)[data-result-rarity] #fusionResultStats > span > small {
  color: var(--fusion-grade-light) !important;
  text-shadow: 0 1px 2px #000, 0 0 5px var(--fusion-grade-soft) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result:is(.fusion-three, .secret-fusion)[data-result-rarity="SSS"] #fusionTitle,
html body #fusionPanel.fusion-panel.structured-fusion-result:is(.fusion-three, .secret-fusion)[data-result-grade="mythic"] #fusionTitle {
  text-shadow:
    0 2px 2px #000,
    0 0 6px var(--fusion-grade-second),
    0 0 12px var(--fusion-grade-soft) !important;
}


/* SOURCE: ui/styles/rewards/board-passive-alignment-v2.css */
/* Board-clear reward optical alignment v2 1793689200001.
   Every icon sits on the true center of its painted circular well. The
   automatic-reward copy is lifted away from the lower separator. */
.board-passive-choice-card > .board-clear-supply-preview > img {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  place-self: center !important;
  object-fit: contain !important;
  transform: translate(5px, 0) !important;
}

.board-passive-choice-card > .board-clear-supply-preview > span {
  transform: translate(12px, -4px) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(1) > img,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(2) > img,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(3) > img {
  place-self: center !important;
  transform: translate(2px, 0) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-board-passive-choice="windFeather"] > img,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-board-passive-choice="moonPrism"] > img {
  transform: translate(2px, 0) scale(1.08) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-board-passive-choice="bloodMoonSeal"] > img {
  transform: translate(2px, 0) scale(.94) !important;
}


/* SOURCE: ui/styles/inventory/item-detail-alignment-v8.css */
/* Item detail painted-bay alignment v8 1793692800001.
   The clean blue raster has lower safe centres than the retired gold panel.
   Register the live copy to the visible inner recesses, not the old rails. */
.item-info-panel.long-item-title .item-info-card .item-info-head > div {
  top: 9.2% !important;
  height: 8.8% !important;
  padding: 0 0 1px !important;
  gap: 0 !important;
}

.item-info-panel.long-item-title .item-info-card .item-info-head .label {
  font-size: 8.3px !important;
  line-height: 9px !important;
}

.item-info-panel.long-item-title .item-info-card .item-info-head strong {
  max-height: 33px !important;
  font-size: 14.6px !important;
  line-height: 16px !important;
}

.item-info-panel .item-info-card .item-info-stats > span:nth-child(1) {
  top: 25.1% !important;
  height: 5.85% !important;
}

.item-info-panel .item-info-card .item-info-stats > span:nth-child(2) {
  top: 34.65% !important;
  height: 8.35% !important;
}

.item-info-panel .item-info-card .item-info-stats > span:nth-child(3) {
  top: 47.25% !important;
  height: 10.25% !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"] small,
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"] small,
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"] strong,
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"] strong {
  transform: none !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row,
.item-info-panel .item-info-card .item-info-relations .item-relation-row.recipe.unknown,
.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row:first-child {
  top: 61.25% !important;
  height: 11.35% !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row:last-child {
  top: 76.45% !important;
  height: 11.15% !important;
}


/* SOURCE: ui/styles/rewards/board-passive-alignment-v3.css */
/* Board-clear reward icon fit v3 1793692800002.
   The DOM boxes were centred, but the painted artwork still read too small
   inside the 39px circular wells. Enlarge the artwork without moving the rows. */
.board-passive-choice-card > .board-clear-supply-preview > img {
  width: 43px !important;
  height: 43px !important;
  max-width: 43px !important;
  max-height: 43px !important;
  transform: translate(5px, 0) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(1) > img,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(2) > img,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(3) > img {
  width: 43px !important;
  height: 43px !important;
  max-width: 43px !important;
  max-height: 43px !important;
  transform: translate(2px, 0) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-board-passive-choice="windFeather"] > img,
.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-board-passive-choice="moonPrism"] > img {
  transform: translate(2px, 0) scale(1.04) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice[data-board-passive-choice="bloodMoonSeal"] > img {
  transform: translate(2px, 0) scale(.96) !important;
}


/* SOURCE: ui/styles/rewards/board-passive-alignment-v4.css */
/* Board-clear per-cell optical fit v4 1793696400001.
   Each visible reward well owns an independent size and X/Y registration.
   Do not merge these selectors: the source paintings have different padding. */
.board-passive-choice-card > .board-clear-supply-preview > img {
  width: 47px !important;
  height: 47px !important;
  max-width: 47px !important;
  max-height: 47px !important;
  transform: translate(5px, 1px) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(1) > img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  transform: translate(2px, 1px) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(2) > img {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  transform: translate(2px, 1px) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(3) > img {
  width: 47px !important;
  height: 47px !important;
  max-width: 47px !important;
  max-height: 47px !important;
  transform: translate(2px, 1px) !important;
}

/* These catalog paintings carry non-uniform transparent gutters. */
.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(1)[data-board-passive-choice="riftPebble"] > img {
  transform: translate(2px, 1px) scale(1.02) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(2)[data-board-passive-choice="fateLoom"] > img {
  transform: translate(2px, 1px) scale(1.01) !important;
}

.board-passive-choice-card .board-passive-choice-list .board-passive-choice:nth-child(3)[data-board-passive-choice="starFurnace"] > img {
  transform: translate(2px, 1px) scale(1.01) !important;
}


/* SOURCE: ui/styles/inventory/item-detail-button-alignment-v10.css */
/* Item-detail button per-bay registration v10 1793698200001.
   Each transparent hit target and label is registered to its own painted bay.
   Keep these rules independent; the authored wells are not one shared grid. */
.item-info-panel .item-info-card .item-info-actions {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.item-info-panel .item-info-card .item-info-actions #itemPlaceButton {
  position: absolute !important;
  left: 11.55% !important;
  top: 89.55% !important;
  width: 23.65% !important;
  height: 6.75% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  pointer-events: auto !important;
}

.item-info-panel .item-info-card .item-info-actions #itemPlaceButton > strong {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 14px !important;
  transform: translate(1.5px, -1px) !important;
}

.item-info-panel .item-info-card .item-info-actions #itemRemoveButton {
  position: absolute !important;
  left: 37.85% !important;
  top: 89.5% !important;
  width: 24.25% !important;
  height: 6.85% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  pointer-events: auto !important;
}

.item-info-panel .item-info-card .item-info-actions #itemRemoveButton > strong {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 14px !important;
  transform: translate(0, -1px) !important;
}

.item-info-panel .item-info-card .item-info-actions #itemSellButton {
  position: absolute !important;
  left: 64.75% !important;
  top: 89.55% !important;
  width: 23.7% !important;
  height: 6.75% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  pointer-events: auto !important;
}

.item-info-panel .item-info-card .item-info-actions #itemSellButton > strong {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 14px !important;
  transform: translate(-1.5px, -1px) !important;
}


/* SOURCE: ui/styles/companions/companion-roster-detail-v1.css */
/* Companion roster V1: clear growth badges and a full artwork inspection dialog. */

body #menuCompanionPanel .menu-panel-head > strong::after {
  content: none !important;
  display: none !important;
}

body #menuCompanionPanel .companion-collection-card {
  width: 100% !important;
  min-height: 86px !important;
  grid-template-columns: 64px minmax(0, 1fr) 62px !important;
  gap: 7px !important;
  padding: 9px 26px 9px 14px !important;
  appearance: none !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

body #menuCompanionPanel .companion-collection-card > b {
  width: 54px !important;
  min-width: 54px !important;
  min-height: 24px !important;
  justify-self: center !important;
  box-sizing: border-box !important;
  padding: 3px 5px !important;
  color: #b9e6f4 !important;
  font-size: 8px !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
}

body #menuCompanionPanel .companion-collection-card:focus-visible {
  outline: 1px solid rgba(116, 213, 255, .86) !important;
  outline-offset: -5px !important;
  filter: brightness(1.13) drop-shadow(0 0 7px rgba(77, 185, 233, .38)) !important;
}

body #menuCompanionPanel .companion-detail-layer[hidden] {
  display: none !important;
}

body #menuCompanionPanel .companion-detail-layer {
  position: absolute !important;
  z-index: 80 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  overflow: hidden !important;
  background: rgba(2, 6, 14, .91) !important;
  backdrop-filter: blur(2px) !important;
}

body #menuCompanionPanel .companion-detail-dialog {
  position: relative !important;
  width: min(326px, calc(100vw - 34px)) !important;
  min-height: 662px !important;
  max-height: calc(100vh - 28px) !important;
  display: grid !important;
  grid-template-rows: 220px auto auto auto auto auto 42px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  padding: 34px 28px 28px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #06111f url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") center / 100% 100% no-repeat !important;
  color: #e8f4fa !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .72) !important;
  outline: 0 !important;
}

body #menuCompanionPanel .companion-detail-close {
  position: absolute !important;
  z-index: 3 !important;
  top: 20px !important;
  right: 20px !important;
  width: 58px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 7px 2px !important;
  border: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/button-small-neutral.png") center / 100% 100% no-repeat !important;
  color: #dff2fb !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9) !important;
}

body #menuCompanionPanel .companion-detail-art {
  position: relative !important;
  width: 178px !important;
  height: 220px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 28px 20px 22px !important;
  background: transparent url("assets/generated/companion_ui_v6/companion-card-common.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .48)) !important;
}

body #menuCompanionPanel .companion-detail-dialog:is([data-rarity="hero"], [data-rarity="legendary"], [data-rarity="mythic"]) .companion-detail-art {
  background-image: url("assets/generated/companion_ui_v6/companion-card-premium.png") !important;
}

body #menuCompanionPanel .companion-detail-art > img {
  width: 146px !important;
  height: 146px !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .52)) !important;
}

body #menuCompanionPanel .companion-detail-rarity {
  color: #75d3ee !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

body #menuCompanionPanel .companion-detail-name {
  max-width: 250px !important;
  min-height: 24px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff0ad !important;
  font-size: 19px !important;
  font-weight: 1000 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9) !important;
}

body #menuCompanionPanel .companion-detail-state {
  min-width: 104px !important;
  min-height: 24px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 1px 16px 2px !important;
  background: transparent url("assets/generated/companion_ui_v6/companion-tab-active.png") center / 100% 100% no-repeat !important;
  color: #dff6ff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}

body #menuCompanionPanel .companion-detail-effects {
  width: 100% !important;
  display: grid !important;
  gap: 5px !important;
}

body #menuCompanionPanel .companion-detail-effects > span {
  min-height: 56px !important;
  display: grid !important;
  place-content: center !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  padding: 7px 18px 8px !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/tutorial-panel.png") center / 100% 100% no-repeat !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-detail-effects small {
  color: #77cde8 !important;
  font-size: 8px !important;
  font-weight: 900 !important;
}

body #menuCompanionPanel .companion-detail-effects b {
  color: #f3f7f5 !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
}

body #menuCompanionPanel .companion-detail-growth {
  margin: 0 !important;
  color: #e9d990 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-detail-return {
  width: 176px !important;
  height: 42px !important;
  min-height: 42px !important;
  align-self: end !important;
  padding: 1px 12px 3px !important;
  border: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/button-wide-primary.png") center / 100% 100% no-repeat !important;
  color: #fff0ad !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .92) !important;
}

body #menuCompanionPanel :is(.companion-detail-close, .companion-detail-return):focus-visible {
  outline: 1px solid rgba(112, 216, 255, .8) !important;
  outline-offset: -4px !important;
  filter: brightness(1.13) drop-shadow(0 0 6px rgba(70, 190, 238, .45)) !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-collection-card {
    grid-template-columns: 58px minmax(0, 1fr) 58px !important;
    padding: 8px 22px 8px 11px !important;
  }

  body #menuCompanionPanel .companion-collection-card > b {
    width: 50px !important;
    min-width: 50px !important;
    font-size: 7.6px !important;
  }

  body #menuCompanionPanel .companion-detail-layer {
    padding: 8px !important;
  }

  body #menuCompanionPanel .companion-detail-dialog {
    width: min(314px, calc(100vw - 28px)) !important;
    min-height: 0 !important;
    height: min(720px, calc(100vh - 18px)) !important;
    grid-template-rows: 198px auto auto auto auto auto 39px !important;
    gap: 5px !important;
    padding: 31px 25px 24px !important;
  }

  body #menuCompanionPanel .companion-detail-close {
    top: 18px !important;
    right: 17px !important;
    width: 54px !important;
    height: 28px !important;
    min-height: 28px !important;
  }

  body #menuCompanionPanel .companion-detail-art {
    width: 162px !important;
    height: 198px !important;
    padding: 24px 18px 20px !important;
  }

  body #menuCompanionPanel .companion-detail-art > img {
    width: 134px !important;
    height: 134px !important;
  }

  body #menuCompanionPanel .companion-detail-name {
    font-size: 17px !important;
  }

  body #menuCompanionPanel .companion-detail-effects > span {
    min-height: 51px !important;
    padding-block: 6px 7px !important;
  }

  body #menuCompanionPanel .companion-detail-effects b {
    font-size: 9.8px !important;
  }

  body #menuCompanionPanel .companion-detail-return {
    width: 166px !important;
    height: 39px !important;
    min-height: 39px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-roster-detail-v2.css */
/* Companion roster V2: four independent resource axes and native detail controls. */

/* Each painted quarter owns two fixed axes. Label width can no longer move
   either the icon or the copy block. The small per-quarter shifts are optical
   corrections against the visible tray, not a shared flex group. */
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:first-child,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:last-child {
  --currency-shift-x: 0px;
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-shards {
  --currency-shift-x: 1.5px !important;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-common {
  --currency-shift-x: 0px !important;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-premium {
  --currency-shift-x: -1px !important;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-dust {
  --currency-shift-x: -2.5px !important;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item > img {
  position: absolute !important;
  left: calc(30% + var(--currency-shift-x)) !important;
  top: 51% !important;
  width: 25px !important;
  height: 25px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  object-position: center !important;
}

body #menuCompanionPanel .companion-currency-item.currency-shards > img {
  width: 24px !important;
  height: 24px !important;
}

body #menuCompanionPanel .companion-currency-item.currency-common > img,
body #menuCompanionPanel .companion-currency-item.currency-premium > img {
  width: 27px !important;
  height: 27px !important;
}

body #menuCompanionPanel .companion-currency-copy {
  position: absolute !important;
  left: calc(68% + var(--currency-shift-x)) !important;
  top: 48% !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  grid-template-rows: 17px 17px !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
}

body #menuCompanionPanel .companion-currency-copy > em,
body #menuCompanionPanel .companion-currency-copy > b {
  width: 42px !important;
  min-width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: center !important;
  text-align: center !important;
}

/* The state is supporting text, not another miniature tab. */
body #menuCompanionPanel .companion-detail-state {
  width: auto !important;
  min-width: 0 !important;
  height: 18px !important;
  min-height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 !important;
  background: none !important;
  color: #a9d9e8 !important;
  font-size: 9px !important;
  line-height: 18px !important;
  letter-spacing: .02em !important;
  text-shadow: 0 1px 2px #000 !important;
}

body #menuCompanionPanel .companion-detail-state::before,
body #menuCompanionPanel .companion-detail-state::after {
  content: "◆" !important;
  color: #826dc8 !important;
  font-size: 5px !important;
  text-shadow: 0 0 4px rgba(111, 90, 224, .46) !important;
}

/* Text now sits below the upper jewel inside each authored plate. */
body #menuCompanionPanel .companion-detail-effects {
  gap: 7px !important;
}

body #menuCompanionPanel .companion-detail-effects > span {
  min-height: 64px !important;
  grid-template-rows: 13px auto !important;
  place-content: center !important;
  gap: 4px !important;
  padding: 10px 18px 7px !important;
}

body #menuCompanionPanel .companion-detail-effects small,
body #menuCompanionPanel .companion-detail-effects b {
  position: relative !important;
  z-index: 1 !important;
  transform: translateY(4px) !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-detail-effects small {
  line-height: 13px !important;
}

body #menuCompanionPanel .companion-detail-effects b {
  line-height: 1.3 !important;
}

/* Use the same circular close control as the in-game loot windows. */
body #menuCompanionPanel .companion-detail-close {
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center / 100% 100% no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
  filter: brightness(.9) saturate(.86) drop-shadow(0 3px 4px rgba(0, 0, 0, .5)) !important;
}

/* A quiet forged plate replaces the stretched wing-shaped action. */
body #menuCompanionPanel .companion-detail-return {
  width: 172px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px 2px !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / 100% 100% no-repeat !important;
  color: #efe3b4 !important;
  font-size: 10px !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .94) !important;
  filter: brightness(.86) saturate(.74) drop-shadow(0 4px 5px rgba(0, 0, 0, .48)) !important;
}

body #menuCompanionPanel .companion-detail-dialog {
  grid-template-rows: 220px auto auto 18px 135px auto 44px !important;
  gap: 6px !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item > img {
    width: 23px !important;
    height: 23px !important;
  }

  body #menuCompanionPanel .companion-currency-item.currency-shards > img {
    width: 22px !important;
    height: 22px !important;
  }

  body #menuCompanionPanel .companion-currency-item.currency-common > img,
  body #menuCompanionPanel .companion-currency-item.currency-premium > img {
    width: 25px !important;
    height: 25px !important;
  }

  body #menuCompanionPanel .companion-currency-copy,
  body #menuCompanionPanel .companion-currency-copy > em,
  body #menuCompanionPanel .companion-currency-copy > b {
    width: 39px !important;
    min-width: 39px !important;
  }

  body #menuCompanionPanel .companion-detail-dialog {
    grid-template-rows: 198px auto auto 18px 125px auto 42px !important;
  }

  body #menuCompanionPanel .companion-detail-effects > span {
    min-height: 59px !important;
    padding: 9px 16px 6px !important;
  }

  body #menuCompanionPanel .companion-detail-close {
    top: 12px !important;
    right: 12px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  body #menuCompanionPanel .companion-detail-return {
    width: 164px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}


/* SOURCE: ui/styles/menus/story-action-buttons-v1.css */
/* Story navigation: one current game-native button plate, three equal cells. */
#menuStoryPanel .story-actions {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  width: min(430px, calc(100vw - 24px)) !important;
  gap: 6px !important;
}

#menuStoryPanel .story-actions.story-return-final {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#menuStoryPanel .story-actions > button[hidden] {
  display: none !important;
}

#menuStoryPanel .story-actions > button,
#menuStoryPanel .story-actions > button.primary {
  appearance: none !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  /* Optical center of the painted inset, not the transparent image bounds. */
  padding: 2px 7px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / 100% 100% no-repeat !important;
  color: #f6e7b3 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.94), 0 0 5px rgba(55, 183, 255, 0.24) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.52)) !important;
  transform: none !important;
}

#menuStoryPanel .story-actions > button:not(:disabled):hover,
#menuStoryPanel .story-actions > button:not(:disabled):focus-visible {
  color: #fff3c5 !important;
  outline: 0 !important;
  filter: brightness(1.1) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.58)) !important;
}

#menuStoryPanel .story-actions > button:not(:disabled):active {
  transform: translateY(1px) scale(0.985) !important;
  filter: brightness(0.9) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)) !important;
}

#menuStoryPanel .story-actions > button:disabled {
  opacity: 0.46 !important;
  filter: grayscale(0.42) brightness(0.78) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4)) !important;
}

@media (max-width: 370px) {
  #menuStoryPanel .story-actions {
    gap: 4px !important;
  }

  #menuStoryPanel .story-actions > button,
  #menuStoryPanel .story-actions > button.primary {
    height: 38px !important;
    min-height: 38px !important;
    padding-inline: 5px !important;
    font-size: 10.5px !important;
  }
}


/* SOURCE: ui/styles/companions/item-companion-inner-bays-v1.css */
/* Item and companion inner-bay registration v1 1793721600000.
   Every visible value owns its own optical centre. Odd counts no longer leave
   a whole summary group leaning into one side of the painted recess. */

/* Keep the four item-detail sections registered independently. */
.item-info-panel .item-info-card #itemInfoStats > span {
  display: block !important;
  padding: 0 !important;
}

.item-info-panel .item-info-card #itemInfoStats > span > small {
  position: absolute !important;
  left: 0 !important;
  top: 4% !important;
  width: 100% !important;
  height: 12px !important;
  margin: 0 !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  line-height: 12px !important;
}

.item-info-panel .item-info-card #itemInfoStats > span > strong {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 22% !important;
  bottom: auto !important;
  width: 100% !important;
  height: 73% !important;
  display: block !important;
  transform: none !important;
  overflow: visible !important;
}

.item-info-panel .item-info-card #itemInfoStats > span > strong > .item-summary-part {
  position: absolute !important;
  left: var(--slot-x, 50%) !important;
  top: var(--slot-y, 50%) !important;
  width: var(--slot-w, 46%) !important;
  max-width: var(--slot-w, 46%) !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Core ability bay: each value uses one half, centred on the painted well. */
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"] > small {
  top: 1% !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"] > strong {
  top: 36% !important;
  bottom: auto !important;
  height: 62% !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"][data-part-count="1"] .item-summary-part:nth-child(1) {
  --slot-x: 50%; --slot-y: 54%; --slot-w: 88%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"][data-part-count="2"] .item-summary-part:nth-child(1) {
  --slot-x: 25%; --slot-y: 54%; --slot-w: 42%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"][data-part-count="2"] .item-summary-part:nth-child(2) {
  --slot-x: 75%; --slot-y: 54%; --slot-w: 42%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"][data-part-count="3"] .item-summary-part:nth-child(1) {
  --slot-x: 17%; --slot-y: 54%; --slot-w: 30%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"][data-part-count="3"] .item-summary-part:nth-child(2) {
  --slot-x: 50%; --slot-y: 54%; --slot-w: 30%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"][data-part-count="3"] .item-summary-part:nth-child(3) {
  --slot-x: 83%; --slot-y: 54%; --slot-w: 30%;
}

/* Combat bonus bay: two columns and independent rows. With five values the
   final value owns the lower centre instead of hanging below the left column. */
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"] > small {
  top: 3% !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"] > strong {
  top: 27% !important;
  bottom: auto !important;
  height: 68% !important;
  font-size: 10.8px !important;
  line-height: 11px !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"] .item-summary-part {
  --slot-w: 46%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="1"] .item-summary-part:nth-child(1) {
  --slot-x: 50%; --slot-y: 50%; --slot-w: 92%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="2"] .item-summary-part:nth-child(1),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="3"] .item-summary-part:nth-child(1),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="4"] .item-summary-part:nth-child(1),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="5"] .item-summary-part:nth-child(1),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="6"] .item-summary-part:nth-child(1) {
  --slot-x: 26%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="2"] .item-summary-part:nth-child(2),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="3"] .item-summary-part:nth-child(2),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="4"] .item-summary-part:nth-child(2),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="5"] .item-summary-part:nth-child(2),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="6"] .item-summary-part:nth-child(2) {
  --slot-x: 74%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="2"] .item-summary-part:nth-child(-n+2) {
  --slot-y: 50%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="3"] .item-summary-part:nth-child(-n+2),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="4"] .item-summary-part:nth-child(-n+2) {
  --slot-y: 27%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="3"] .item-summary-part:nth-child(3) {
  --slot-x: 50%; --slot-y: 73%; --slot-w: 92%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="4"] .item-summary-part:nth-child(3) {
  --slot-x: 26%; --slot-y: 73%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="4"] .item-summary-part:nth-child(4) {
  --slot-x: 74%; --slot-y: 73%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="5"] .item-summary-part:nth-child(1),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="5"] .item-summary-part:nth-child(2),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="6"] .item-summary-part:nth-child(1),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="6"] .item-summary-part:nth-child(2) {
  --slot-y: 18%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="5"] .item-summary-part:nth-child(3),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="6"] .item-summary-part:nth-child(3) {
  --slot-x: 26%; --slot-y: 50%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="5"] .item-summary-part:nth-child(4),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="6"] .item-summary-part:nth-child(4) {
  --slot-x: 74%; --slot-y: 50%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="5"] .item-summary-part:nth-child(5) {
  --slot-x: 50%; --slot-y: 82%; --slot-w: 92%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="6"] .item-summary-part:nth-child(5) {
  --slot-x: 26%; --slot-y: 82%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"][data-part-count="6"] .item-summary-part:nth-child(6) {
  --slot-x: 74%; --slot-y: 82%;
}

/* Equipment effects: each effect owns one explicit bay. Six effects use a
   stable three-by-two arrangement; smaller sets remain optically balanced. */
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"] > small {
  top: 3% !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"] > strong {
  top: 24% !important;
  bottom: auto !important;
  height: 70% !important;
  font-size: 10.5px !important;
  line-height: 11px !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="1"] .item-summary-part:nth-child(1) {
  --slot-x: 50%; --slot-y: 50%; --slot-w: 94%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="2"] .item-summary-part:nth-child(1) {
  --slot-x: 26%; --slot-y: 50%; --slot-w: 46%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="2"] .item-summary-part:nth-child(2) {
  --slot-x: 74%; --slot-y: 50%; --slot-w: 46%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="3"] .item-summary-part:nth-child(1),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="6"] .item-summary-part:nth-child(1) {
  --slot-x: 17%; --slot-y: 30%; --slot-w: 31%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="3"] .item-summary-part:nth-child(2),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="6"] .item-summary-part:nth-child(2) {
  --slot-x: 50%; --slot-y: 30%; --slot-w: 31%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="3"] .item-summary-part:nth-child(3),
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="6"] .item-summary-part:nth-child(3) {
  --slot-x: 83%; --slot-y: 30%; --slot-w: 31%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="3"] .item-summary-part:nth-child(-n+3) {
  --slot-y: 50%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="4"] .item-summary-part:nth-child(1) {
  --slot-x: 26%; --slot-y: 30%; --slot-w: 46%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="4"] .item-summary-part:nth-child(2) {
  --slot-x: 74%; --slot-y: 30%; --slot-w: 46%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="4"] .item-summary-part:nth-child(3) {
  --slot-x: 26%; --slot-y: 70%; --slot-w: 46%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="4"] .item-summary-part:nth-child(4) {
  --slot-x: 74%; --slot-y: 70%; --slot-w: 46%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="5"] .item-summary-part:nth-child(1) {
  --slot-x: 17%; --slot-y: 30%; --slot-w: 31%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="5"] .item-summary-part:nth-child(2) {
  --slot-x: 50%; --slot-y: 30%; --slot-w: 31%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="5"] .item-summary-part:nth-child(3) {
  --slot-x: 83%; --slot-y: 30%; --slot-w: 31%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="5"] .item-summary-part:nth-child(4) {
  --slot-x: 33%; --slot-y: 70%; --slot-w: 46%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="5"] .item-summary-part:nth-child(5) {
  --slot-x: 67%; --slot-y: 70%; --slot-w: 46%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="6"] .item-summary-part:nth-child(4) {
  --slot-x: 17%; --slot-y: 70%; --slot-w: 31%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="6"] .item-summary-part:nth-child(5) {
  --slot-x: 50%; --slot-y: 70%; --slot-w: 31%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="6"] .item-summary-part:nth-child(6) {
  --slot-x: 83%; --slot-y: 70%; --slot-w: 31%;
}

/* A live adjacent-effect stack can reach seven values even though most
   catalog-only items stop at six. Give all seven their own two-column/four-row
   optical centres instead of letting the unregistered seventh layout collapse
   every value onto the default middle point. */
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] > strong {
  font-size: 9.9px !important;
  line-height: 10px !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] .item-summary-part {
  --slot-w: 46%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] .item-summary-part:nth-child(1) {
  --slot-x: 26%; --slot-y: 11%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] .item-summary-part:nth-child(2) {
  --slot-x: 74%; --slot-y: 11%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] .item-summary-part:nth-child(3) {
  --slot-x: 26%; --slot-y: 36%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] .item-summary-part:nth-child(4) {
  --slot-x: 74%; --slot-y: 36%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] .item-summary-part:nth-child(5) {
  --slot-x: 26%; --slot-y: 61%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] .item-summary-part:nth-child(6) {
  --slot-x: 74%; --slot-y: 61%;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] .item-summary-part:nth-child(7) {
  --slot-x: 50%; --slot-y: 86%; --slot-w: 92%;
}

/* Companion abilities now reuse the same complete black-steel recess made
   from the live item-detail art, instead of the purple tutorial plate. */
body #menuCompanionPanel .companion-detail-effects > span {
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .48)) !important;
}

body #menuCompanionPanel .companion-detail-effects small,
body #menuCompanionPanel .companion-detail-effects b {
  transform: translateY(1px) !important;
}

@media (max-width: 375px), (max-height: 820px) {
  .item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"] > strong {
    font-size: 10.4px !important;
  }

  .item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"] > strong {
    font-size: 10.1px !important;
  }
}


/* SOURCE: ui/styles/shared/run-prep-recess-v2.css */
/* Expedition prep V2: reuse the authored recess and confirm-control language
   from the regular three-material fusion result. */
#runPrepPanel .run-prep-head {
  top: 6.15% !important;
  height: 8.1% !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
}

#runPrepPanel .run-prep-kicker { display: none !important; }

#runPrepPanel .run-prep-head > strong {
  margin: 0 !important;
  transform: translateY(-1px) !important;
  font-size: clamp(23px, 6.25vw, 26px) !important;
  line-height: 1 !important;
  text-align: center !important;
}

#runPrepPanel .run-prep-options.inventory-options,
#runPrepPanel .run-prep-options.shard-options {
  inset-inline: 4.8% !important;
  gap: 5.2% !important;
}

#runPrepPanel .run-prep-options .run-prep-option {
  padding: 0 7.1% !important;
  grid-template-columns: clamp(24px, 6.6vw, 28px) minmax(0, 1fr) clamp(47px, 12.6vw, 53px) !important;
  gap: clamp(5px, 1.45vw, 7px) !important;
  background-color: transparent !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .58)) !important;
}

#runPrepPanel .run-prep-options .run-prep-option.selected,
#runPrepPanel .run-prep-options .run-prep-option:has(input:checked) {
  filter: brightness(1.09) saturate(1.06) drop-shadow(0 3px 5px rgba(0, 0, 0, .64)) !important;
}

#runPrepPanel .run-prep-actions {
  top: 87.75% !important;
  left: 8.7% !important;
  right: 8.7% !important;
  height: 7.2% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3.4% !important;
}

#runPrepPanel .run-prep-actions .mini-button,
#runPrepPanel .run-prep-actions .mini-button.accent {
  padding: 0 0 2px !important;
  background-color: transparent !important;
  background-image: url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  color: #fff0b5 !important;
  font-size: clamp(12.5px, 3.55vw, 15px) !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .68)) !important;
}

#runPrepPanel .run-prep-actions .mini-button:hover,
#runPrepPanel .run-prep-actions .mini-button:focus-visible,
#runPrepPanel .run-prep-actions .mini-button.accent:hover,
#runPrepPanel .run-prep-actions .mini-button.accent:focus-visible {
  outline: 0 !important;
  filter: brightness(1.08) drop-shadow(0 6px 8px rgba(0, 0, 0, .7)) !important;
}

#runPrepPanel .run-prep-actions .mini-button:active,
#runPrepPanel .run-prep-actions .mini-button.accent:active {
  padding-top: 1px !important;
  background-color: transparent !important;
  clip-path: none !important;
  transform: translateY(1px) scale(.99) !important;
  filter: brightness(.9) drop-shadow(0 3px 5px rgba(0, 0, 0, .66)) !important;
}

@media (max-width: 370px) {
  #runPrepPanel .run-prep-options .run-prep-option { padding-inline: 6.6% !important; }
  #runPrepPanel .run-prep-actions { left: 8.1% !important; right: 8.1% !important; }
}


/* SOURCE: ui/styles/shared/run-prep-frame-v3.css */
/* V3 replaces the baked section/card/ledger/button stack with a quieter
   authored frame. The option cards and action buttons remain independent
   raster overlays from V2. */
#runPrepPanel .run-prep-card {
  background-image: url("assets/generated/run_prep_frame_v3_1793728800000/run-prep-frame-v3-alpha.png") !important;
}

#runPrepPanel .run-prep-head {
  top: 7.2% !important;
  height: 8.4% !important;
}

#runPrepPanel .run-prep-head > strong {
  transform: translateY(3px) !important;
}

#runPrepPanel .run-prep-section {
  left: 8.8% !important;
  right: 8.8% !important;
  height: 24% !important;
}

#runPrepPanel .run-prep-section.inventory-section {
  top: 18.1% !important;
}

#runPrepPanel .run-prep-section.shard-section {
  top: 42.25% !important;
}

#runPrepPanel .run-prep-section-head {
  left: 5.2% !important;
  right: 5.2% !important;
  height: 18.5% !important;
  padding-inline: 8.5% !important;
  background: none !important;
}

#runPrepPanel .inventory-section .run-prep-section-head strong,
#runPrepPanel .inventory-section .run-prep-section-head span,
#runPrepPanel .shard-section .run-prep-section-head strong,
#runPrepPanel .shard-section .run-prep-section-head span {
  transform: none !important;
}

#runPrepPanel .run-prep-options.inventory-options,
#runPrepPanel .run-prep-options.shard-options {
  inset: 20.4% 4.2% 4.8% !important;
  gap: 5.2% !important;
}

#runPrepPanel .run-prep-shard-ledger {
  top: 70.8% !important;
  left: 15.2% !important;
  right: 15.2% !important;
  height: 12.4% !important;
  grid-template-rows: 38% 62% !important;
  background: none !important;
}

#runPrepPanel .run-prep-shard-ledger > .run-prep-ledger-title {
  transform: translateY(5px) !important;
}

#runPrepPanel .run-prep-shard-ledger > div {
  transform: translateY(2px) !important;
  background: none !important;
}

#runPrepPanel .run-prep-actions {
  top: 87.15% !important;
}

@media (max-width: 370px) {
  #runPrepPanel .run-prep-head {
    top: 7.05% !important;
  }

  #runPrepPanel .run-prep-shard-ledger {
    top: 70.55% !important;
  }
}


/* SOURCE: ui/styles/shared/run-prep-frame-v4.css */
/* V4 keeps the clean V3 outer cutout, masks the enlarged authored V4 bays
   into that silhouette, and restores one independent ledger plate. */
#runPrepPanel .run-prep-card {
  isolation: isolate !important;
  background-image: url("assets/generated/run_prep_frame_v3_1793728800000/run-prep-frame-v3-alpha.png") !important;
}

#runPrepPanel .run-prep-card::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: url("assets/generated/run_prep_frame_v4_1793743200000/run-prep-frame-v4-rgb.png") center / 100% 100% no-repeat !important;
  -webkit-mask: url("assets/generated/run_prep_frame_v3_1793728800000/run-prep-frame-v3-alpha.png") center / 100% 100% no-repeat !important;
  mask: url("assets/generated/run_prep_frame_v3_1793728800000/run-prep-frame-v3-alpha.png") center / 100% 100% no-repeat !important;
}

#runPrepPanel .run-prep-head,
#runPrepPanel .run-prep-sections,
#runPrepPanel .run-prep-shard-ledger,
#runPrepPanel .run-prep-actions {
  z-index: 2 !important;
}

#runPrepPanel .run-prep-section {
  left: 7.7% !important;
  right: 7.7% !important;
  height: 26.45% !important;
}

#runPrepPanel .run-prep-section.inventory-section {
  top: 18.05% !important;
}

#runPrepPanel .run-prep-section.shard-section {
  top: 46.85% !important;
}

#runPrepPanel .run-prep-section-head {
  left: 4.9% !important;
  right: 4.9% !important;
  height: 18.2% !important;
}

#runPrepPanel .run-prep-options.inventory-options,
#runPrepPanel .run-prep-options.shard-options {
  inset: 20.2% 5% 5.8% !important;
  gap: 6.2% !important;
}

#runPrepPanel .run-prep-shard-ledger {
  top: 75.15% !important;
  left: 12.6% !important;
  right: 12.6% !important;
  height: 10.75% !important;
  padding: 0 5.5% !important;
  grid-template-rows: 39% 61% !important;
  background-color: transparent !important;
  background-image: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .58)) !important;
}

#runPrepPanel .run-prep-shard-ledger > div {
  transform: translateY(-1px) !important;
}

#runPrepPanel .run-prep-actions {
  top: 87.35% !important;
}

@media (max-width: 370px) {
  #runPrepPanel .run-prep-section {
    left: 7.45% !important;
    right: 7.45% !important;
  }

  #runPrepPanel .run-prep-shard-ledger {
    left: 12.1% !important;
    right: 12.1% !important;
  }
}


/* SOURCE: ui/styles/shared/run-prep-ledger-v5.css */
/* Final ledger-only adjustment: preserve the V4 artwork and increase the
   independent shard plate without moving any other prep content. */
#runPrepPanel .run-prep-shard-ledger {
  top: 74.55% !important;
  left: 9.5% !important;
  right: 9.5% !important;
  height: 11.55% !important;
  padding-inline: 6.2% !important;
  grid-template-rows: 39% 61% !important;
}

#runPrepPanel .run-prep-shard-ledger > .run-prep-ledger-title {
  transform: translateY(3px) !important;
}

#runPrepPanel .run-prep-shard-ledger > div {
  transform: translateY(-7px) !important;
}

#runPrepPanel .inventory-section .run-prep-section-head strong,
#runPrepPanel .inventory-section .run-prep-section-head span,
#runPrepPanel .shard-section .run-prep-section-head strong,
#runPrepPanel .shard-section .run-prep-section-head span {
  transform: translateY(7px) !important;
}

@media (max-width: 370px) {
  #runPrepPanel .run-prep-shard-ledger {
    top: 74.4% !important;
    left: 9% !important;
    right: 9% !important;
    height: 11.7% !important;
  }

  #runPrepPanel .run-prep-shard-ledger > div {
    transform: translateY(-6px) !important;
  }

  #runPrepPanel .inventory-section .run-prep-section-head strong,
  #runPrepPanel .inventory-section .run-prep-section-head span,
  #runPrepPanel .shard-section .run-prep-section-head strong,
  #runPrepPanel .shard-section .run-prep-section-head span {
    transform: translateY(6px) !important;
  }
}


/* SOURCE: ui/styles/shared/run-prep-card-room-v7.css */
/* V7: the authored recess already has enough vertical artwork. Stop squeezing
   it into short rows and give two-line expedition copy a real inner margin. */
#runPrepPanel .run-prep-options.inventory-options,
#runPrepPanel .run-prep-options.shard-options {
  inset: 18.5% 3.2% 3.5% !important;
  gap: 3.6% !important;
}

#runPrepPanel .run-prep-options .run-prep-option {
  padding-inline: 6.6% !important;
  grid-template-columns:
    clamp(24px, 6.6vw, 28px)
    minmax(0, 1fr)
    clamp(45px, 12vw, 50px) !important;
  gap: clamp(5px, 1.35vw, 6px) !important;
}

@media (max-width: 370px) {
  #runPrepPanel .run-prep-options.inventory-options,
  #runPrepPanel .run-prep-options.shard-options {
    inset: 18.3% 3% 3.2% !important;
    gap: 3.4% !important;
  }

  #runPrepPanel .run-prep-options .run-prep-option {
    padding-inline: 6.1% !important;
  }
}


/* SOURCE: ui/styles/combat/run-prep-combat-controls-v8.css */
/* Run-prep press state and combat tab control unification 1793941200000.
   Keep one authored raster button per control: the pressed state changes the
   lighting of that same bitmap instead of moving it away from a painted copy. */

#runPrepPanel .run-prep-actions #runPrepCancelButton,
#runPrepPanel .run-prep-actions #runPrepStartButton {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 0 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none !important;
  transition: filter 55ms linear, color 55ms linear, text-shadow 55ms linear !important;
  -webkit-tap-highlight-color: transparent !important;
}

#runPrepPanel .run-prep-actions #runPrepCancelButton:active:not(:disabled),
#runPrepPanel .run-prep-actions #runPrepStartButton:active:not(:disabled),
#runPrepPanel.qa-cancel-pressed .run-prep-actions #runPrepCancelButton,
#runPrepPanel.qa-start-pressed .run-prep-actions #runPrepStartButton {
  padding-top: 2px !important;
  padding-bottom: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  filter: brightness(.66) saturate(.76) contrast(1.12) drop-shadow(0 2px 3px rgba(0, 0, 0, .72)) !important;
  transform: none !important;
  color: #e8d49a !important;
  text-shadow: 0 1px 1px #000, 0 0 3px rgba(255, 210, 96, .18) !important;
}

#runPrepPanel .run-prep-actions #runPrepCancelButton:disabled,
#runPrepPanel .run-prep-actions #runPrepStartButton:disabled {
  filter: grayscale(.45) brightness(.58) !important;
}

/* Match the in-game loot/bag tabs to the established item-detail
   place/remove button family. Each tab owns its complete bitmap. */
.phone-shell > .combat-panel + .tabs {
  background: transparent !important;
  filter: none !important;
}

.phone-shell > .combat-panel + .tabs .tab-button,
.phone-shell > .combat-panel + .tabs .tab-button.active {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 0 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.phone-shell > .combat-panel + .tabs .tab-button {
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-neutral.png") !important;
  color: #d6e5ee !important;
  filter: brightness(.86) saturate(.82) !important;
  text-shadow: 0 2px 2px #000 !important;
}

.phone-shell > .combat-panel + .tabs .tab-button.active {
  padding-top: 2px !important;
  padding-bottom: 0 !important;
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-primary.png") !important;
  color: #fff0ad !important;
  filter: brightness(.82) saturate(.94) contrast(1.08) !important;
  text-shadow: 0 1px 1px #000, 0 0 4px rgba(255, 215, 103, .22) !important;
}

.phone-shell > .combat-panel + .tabs .tab-button:active:not(.active) {
  padding-top: 2px !important;
  padding-bottom: 0 !important;
  filter: brightness(.68) saturate(.76) contrast(1.08) !important;
}

@media (max-width: 370px) {
  .phone-shell > .combat-panel + .tabs .tab-button,
  .phone-shell > .combat-panel + .tabs .tab-button.active {
    height: 34px !important;
    font-size: 10.5px !important;
  }
}


/* SOURCE: ui/styles/combat/affinity-single-combat-tabs-v9.css */
/* Single affinity guide and black-metal combat tabs 1793944800000. */

/* The attack/defense split was duplicate information. Keep stale cached
   markup hidden as a safety net; current app.js no longer creates it. */
#guideElementView .element-mode-tabs {
  display: none !important;
}

#guideElementView .element-affinity-guide {
  box-sizing: border-box !important;
  min-height: 47px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  gap: 3px !important;
  margin: 0 12px !important;
  padding: 6px 12px 7px !important;
  border: 0 !important;
  background: transparent url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-tab-button.png") center / 100% 100% no-repeat !important;
  text-align: center !important;
}

#guideElementView .element-affinity-guide > strong {
  color: #fff0ad !important;
  font-size: 9.5px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .94) !important;
}

#guideElementView .element-affinity-guide > span {
  color: #b9c6cc !important;
  font-size: 7.5px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

/* Reuse the exact black-scale button used by the former attack/defense tabs. */
.phone-shell > .combat-panel + .tabs {
  min-height: 50px !important;
  height: 50px !important;
  padding: 6px 8px !important;
  gap: 8px !important;
  background: transparent !important;
  filter: none !important;
}

.phone-shell > .combat-panel + .tabs .tab-button,
.phone-shell > .combat-panel + .tabs .tab-button.active {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 12px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-tab-button.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #b9c2c6 !important;
  font-size: 10.5px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .94) !important;
  filter: brightness(.82) saturate(.72) !important;
  transform: none !important;
}

.phone-shell > .combat-panel + .tabs .tab-button.active {
  color: #fff0ad !important;
  filter: brightness(1.07) saturate(.9) drop-shadow(0 0 4px rgba(107, 186, 208, .16)) !important;
}

.phone-shell > .combat-panel + .tabs .tab-button:active {
  transform: translateY(1px) !important;
  filter: brightness(1.12) !important;
}

@media (max-width: 370px) {
  #guideElementView .element-affinity-guide {
    margin-inline: 10px !important;
    padding-inline: 10px !important;
  }

  .phone-shell > .combat-panel + .tabs {
    gap: 6px !important;
    padding-inline: 7px !important;
  }

  .phone-shell > .combat-panel + .tabs .tab-button,
  .phone-shell > .combat-panel + .tabs .tab-button.active {
    padding-inline: 8px !important;
    font-size: 10px !important;
  }
}


/* SOURCE: ui/styles/combat/combat-menu-control-fit-v10.css */
/* V10: compact combat skill action, lobby-parity settings icon, clean menu titles. */

/* The inactive slot is 70x18. Equipped skills grow only enough to stay actionable. */
body .phone-shell > .combat-panel .stage-controls #skillButton:not(.skill-absent):not(.control-status) {
  box-sizing: border-box !important;
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;
  margin: 0 !important;
  padding: 0 7px 1px !important;
  overflow: hidden !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
}

/* Match the lobby's authored square settings control without painted overflow. */
body .phone-shell > .topbar #topSettingsButton.top-menu-button {
  box-sizing: border-box !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: none !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .58)) !important;
}

body .phone-shell > .topbar #topSettingsButton.top-menu-button > img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  filter: none !important;
}

body .phone-shell > .topbar #topSettingsButton.top-menu-button:hover > img,
body .phone-shell > .topbar #topSettingsButton.top-menu-button:focus-visible > img {
  filter: brightness(1.08) saturate(1.04) !important;
}

body .phone-shell > .topbar #topSettingsButton.top-menu-button:active > img {
  transform: translate(-50%, -50%) scale(.95) !important;
  filter: brightness(.8) saturate(.86) !important;
}

/* Remove the cropped nine-pixel divider that reads as a broken title image. */
body #mainMenu .menu-panel > .menu-panel-head > strong::after,
body #mainMenu .menu-panel > .menu-panel-head > .store-panel-title::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  filter: none !important;
}

@media (max-width: 370px) {
  body .phone-shell > .combat-panel .stage-controls #skillButton:not(.skill-absent):not(.control-status) {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding-inline: 6px !important;
    font-size: 8.2px !important;
  }
}


/* SOURCE: ui/styles/combat/combat-skill-button-center-v11.css */
/* V11: keep the authored button height; compact only its width. */

body .phone-shell > .combat-panel .stage-controls #skillButton:not(.skill-absent):not(.control-status) {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  margin: 0 !important;
  padding: 0 5px !important;
  overflow: hidden !important;
  font-size: 9.25px !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

@media (max-width: 370px) {
  body .phone-shell > .combat-panel .stage-controls #skillButton:not(.skill-absent):not(.control-status) {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
  }
}


/* SOURCE: ui/styles/combat/combat-skill-settings-clean-v12.css */
/* V12: optical text centering and backing-free settings gears. */

/* Korean glyphs sit optically low in an exact grid center. Keep the 27px
   authored button and move only its content box upward by one painted pixel. */
body .phone-shell > .combat-panel .stage-controls #skillButton:not(.skill-absent):not(.control-status) {
  padding: 0 5px 2px !important;
}

/* The click target stays 34px, while the transparent source canvas is larger
   so its retained silver gear paints at the same readable size as before. */
body .phone-shell > .topbar #topSettingsButton.top-menu-button {
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body .phone-shell > .topbar #topSettingsButton.top-menu-button:focus,
body .phone-shell > .topbar #topSettingsButton.top-menu-button:focus-visible,
body .menu-lobby-panel .lobby-settings-button:focus,
body .menu-lobby-panel .lobby-settings-button:focus-visible {
  outline: 0 !important;
}

body .phone-shell > .topbar #topSettingsButton.top-menu-button > img {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

body .menu-lobby-panel .lobby-settings-button {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body #menuSettingsPanel .menu-panel-head::after {
  background: transparent url("assets/generated/combat_settings_gear_v12_1793955600000/settings-gear-transparent-v12.png") center / 48px 48px no-repeat !important;
}

@media (max-width: 370px) {
  body .phone-shell > .combat-panel .stage-controls #skillButton:not(.skill-absent):not(.control-status) {
    padding: 0 4px 2px !important;
  }
}


/* SOURCE: ui/styles/inventory/item-detail-section-title-v2.css */
/* Item-detail section-title optical registration v2 1793725200000.
   The four headings are registered against the top edge of their own painted
   recess. Values and panel geometry intentionally remain untouched. */

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"],
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"],
.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"] {
  overflow: visible !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="primary"] > small {
  transform: translateY(3px) !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="secondary"] > small {
  transform: translateY(1px) !important;
}

.item-info-panel .item-info-card #itemInfoStats > span[data-layout="effect"] > small {
  transform: translateY(-2px) !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="1"] .item-relation-row.linked-set > div > small {
  position: relative !important;
  z-index: 1 !important;
  transform: translateY(-9px) !important;
}

.item-info-panel .item-info-card .item-info-relations .item-relation-row.linked-set,
.item-info-panel .item-info-card .item-info-relations .item-relation-row.linked-set > div {
  overflow: visible !important;
}

/* Two relation rows use two shorter painted bays, so this heading owns a
   separate smaller correction instead of inheriting the one-row shift. */
.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row.linked-set > div > small {
  position: relative !important;
  z-index: 1 !important;
  transform: translateY(-16px) !important;
}


/* SOURCE: ui/styles/inventory/item-detail-section-title-v3.css */
/* The second relation layout has two complete painted bays. V2 lifted the
   lower blue title by 16px, placing it on the upper rail. Keep it inside its
   own lower bay with balanced room above the gold value. */
.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row.linked-set > div > small {
  position: relative !important;
  z-index: 1 !important;
  transform: translateY(-7px) !important;
}



/* SOURCE: ui/styles/inventory/recipe-affinity-refresh-v1.css */
/* Recipe and affinity menu refresh v1 1793750400000.
   Scope is intentionally limited to #menuRecipePanel. */
:root {
  --recipe-affinity-header-v1: url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-section-header.png");
  --recipe-affinity-tab-v1: url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-tab-button.png");
  --recipe-affinity-row-v1: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png");
  --recipe-affinity-row-deep-v1: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png");
}

#menuRecipePanel .guide-tabbar {
  box-sizing: border-box !important;
  width: calc(100% - 24px) !important;
  height: 44px !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 3px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuRecipePanel .guide-tabbar button,
#menuRecipePanel .guide-tabbar button.active {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 12px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--recipe-affinity-tab-v1) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #b9c2c6 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .94) !important;
  filter: brightness(.82) saturate(.72) !important;
  transform: none !important;
}

#menuRecipePanel .guide-tabbar button.active {
  color: #fff0ad !important;
  filter: brightness(1.07) saturate(.9) drop-shadow(0 0 4px rgba(107, 186, 208, .16)) !important;
}

#menuRecipePanel .guide-tabbar button:active {
  transform: translateY(1px) !important;
  filter: brightness(1.12) !important;
}

#menuRecipePanel #guideRecipeView.active {
  box-sizing: border-box !important;
  min-height: 0 !important;
  grid-template-rows: minmax(236px, .88fr) minmax(250px, 1.12fr) !important;
  gap: 8px !important;
  padding: 5px 5px 9px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 5%, rgba(24, 31, 33, .34), transparent 38%),
    linear-gradient(180deg, rgba(7, 10, 12, .95), rgba(3, 6, 8, .92)) !important;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .72) !important;
}

#menuRecipePanel .menu-unlock-list {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 4px !important;
}

#menuRecipePanel .unlock-overview {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
  gap: 5px !important;
}

#menuRecipePanel .menu-unlock-head,
#menuRecipePanel .menu-recipe-head {
  box-sizing: border-box !important;
  width: calc(100% - 14px) !important;
  height: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 0 20px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--recipe-affinity-header-v1) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: brightness(.9) saturate(.55) hue-rotate(18deg) drop-shadow(0 3px 4px rgba(0, 0, 0, .48)) !important;
}

#menuRecipePanel .menu-unlock-head span,
#menuRecipePanel .menu-unlock-head strong {
  margin: 0 !important;
  padding: 0 !important;
  color: #f2e5af !important;
  font-size: 9.4px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .9) !important;
  transform: none !important;
}

#menuRecipePanel .menu-recipe-head span,
#menuRecipePanel .menu-recipe-head strong {
  margin: 0 !important;
  padding: 0 !important;
  color: #f2e5af !important;
  font-size: 9.4px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .9) !important;
  transform: none !important;
}

#menuRecipePanel .menu-unlock-head strong,
#menuRecipePanel .menu-recipe-head strong {
  color: #a9d5dc !important;
  font-size: 8.5px !important;
}

#menuRecipePanel .menu-recipe-head::after {
  content: none !important;
  display: none !important;
}

#menuRecipePanel .menu-unlock-note,
#menuRecipePanel .menu-unlock-guide {
  display: none !important;
}

#menuRecipePanel .unlock-scroll {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 9px 5px 8px !important;
  overflow-x: hidden !important;
}

#menuRecipePanel .unlock-group {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 5px !important;
  padding-right: 3px !important;
}

#menuRecipePanel .unlock-row {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 3px !important;
}

#menuRecipePanel .unlock-pill,
#menuRecipePanel button.unlock-pill {
  box-sizing: border-box !important;
  width: calc(100% - 3px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 45px !important;
  justify-self: start !important;
  padding: 6px 12px 6px 10px !important;
  border: 0 !important;
  border-image: none !important;
  background: transparent var(--recipe-affinity-row-v1) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#menuRecipePanel .unlock-pill.rarity-S,
#menuRecipePanel .unlock-pill.rarity-SS,
#menuRecipePanel .unlock-pill.rarity-SSS,
#menuRecipePanel button.unlock-pill.rarity-S,
#menuRecipePanel button.unlock-pill.rarity-SS,
#menuRecipePanel button.unlock-pill.rarity-SSS,
#menuRecipePanel button.unlock-pill.rarity-SSS.discovered {
  border: 0 !important;
  border-image: none !important;
  background: transparent var(--recipe-affinity-row-v1) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #e7e4cf !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .96) !important;
}

#menuRecipePanel .unlock-pill.rarity-S *,
#menuRecipePanel .unlock-pill.rarity-SS *,
#menuRecipePanel .unlock-pill.rarity-SSS *,
#menuRecipePanel button.unlock-pill.rarity-S *,
#menuRecipePanel button.unlock-pill.rarity-SS *,
#menuRecipePanel button.unlock-pill.rarity-SSS * {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .96) !important;
}

#menuRecipePanel .unlock-pill.rarity-S .unlock-pill-copy b,
#menuRecipePanel .unlock-pill.rarity-SS .unlock-pill-copy b,
#menuRecipePanel .unlock-pill.rarity-SSS .unlock-pill-copy b {
  color: #e6e0c4 !important;
}

#menuRecipePanel .unlock-pill.rarity-S .unlock-pill-copy small,
#menuRecipePanel .unlock-pill.rarity-SS .unlock-pill-copy small,
#menuRecipePanel .unlock-pill.rarity-SSS .unlock-pill-copy small {
  color: #8fa3aa !important;
}

#menuRecipePanel .menu-recipe-box {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
  gap: 5px !important;
  padding: 0 4px 5px !important;
  border: 0 !important;
  border-image: none !important;
  background: transparent !important;
}

#menuRecipePanel .menu-recipe-body,
#menuRecipePanel .menu-recipe-list {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}

#menuRecipePanel .menu-recipe-list {
  padding: 0 10px 5px 8px !important;
  overflow-x: hidden !important;
}

#menuRecipePanel .menu-recipe-row {
  box-sizing: border-box !important;
  width: calc(100% - 3px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 78px !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  border: 0 !important;
  border-image: none !important;
  background: transparent var(--recipe-affinity-row-deep-v1) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#menuRecipePanel .menu-recipe-materials,
#menuRecipePanel .menu-recipe-result,
#menuRecipePanel .menu-recipe-result > span {
  min-width: 0 !important;
}

/* Keep the secondary affinity switch in the same restrained black-metal
   language as the primary recipe/affinity tabs. */
#menuRecipePanel #guideElementView .element-mode-tabs {
  box-sizing: border-box !important;
  width: calc(100% - 24px) !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#menuRecipePanel #guideElementView .element-mode-tab,
#menuRecipePanel #guideElementView .element-mode-tab.active {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 12px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--recipe-affinity-tab-v1) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #b9c2c6 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .94) !important;
  filter: brightness(.82) saturate(.72) !important;
  transform: none !important;
}

#menuRecipePanel #guideElementView .element-mode-tab.active {
  color: #fff0ad !important;
  filter: brightness(1.07) saturate(.9) drop-shadow(0 0 4px rgba(107, 186, 208, .16)) !important;
}

#menuRecipePanel #guideElementView .element-mode-tab:active {
  transform: translateY(1px) !important;
  filter: brightness(1.12) !important;
}

#menuRecipePanel #guideElementView .element-pair-strip > strong {
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
}

#menuRecipePanel #guideElementView .element-pair-strip > strong > span {
  display: block !important;
}

#menuRecipePanel #guideElementView .element-pair-strip > strong > small {
  display: block !important;
  color: #9aadb5 !important;
  font-size: 6.8px !important;
  font-weight: 850 !important;
  line-height: 9px !important;
  white-space: nowrap !important;
}

#menuRecipePanel #guideElementView .element-pair-strip > strong > small > b {
  color: #e0eaed !important;
  font-size: inherit !important;
}

/* Give the result copy enough painted width to show its full two-line note. */
#menuRecipePanel .menu-recipe-row {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
  gap: 6px !important;
  min-height: 82px !important;
  padding-inline: 12px !important;
}

#menuRecipePanel .menu-recipe-materials {
  grid-template-columns: minmax(0, 1fr) 9px minmax(0, 1fr) !important;
  gap: 2px !important;
}

#menuRecipePanel .menu-recipe-materials img,
#menuRecipePanel .menu-recipe-result > img {
  width: 32px !important;
  height: 32px !important;
}

#menuRecipePanel .menu-recipe-result {
  grid-template-columns: 12px 34px minmax(0, 1fr) !important;
  gap: 3px !important;
  align-items: center !important;
}

#menuRecipePanel .menu-recipe-result > span {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 2px !important;
  overflow: visible !important;
}

#menuRecipePanel .menu-recipe-result strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#menuRecipePanel .menu-recipe-result small {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  font-size: 6.8px !important;
  line-height: 9px !important;
}

#menuRecipePanel .menu-recipe-unknown,
#menuRecipePanel .menu-recipe-empty {
  box-sizing: border-box !important;
  width: calc(100% - 3px) !important;
  margin-right: 3px !important;
  background: rgba(5, 8, 10, .84) !important;
  color: #9caeb5 !important;
}

@media (max-width: 370px) {
  #menuRecipePanel .guide-tabbar {
    width: calc(100% - 20px) !important;
    gap: 6px !important;
  }

  #menuRecipePanel #guideElementView .element-mode-tabs {
    width: calc(100% - 20px) !important;
    gap: 6px !important;
  }

  #menuRecipePanel #guideRecipeView.active {
    grid-template-rows: minmax(222px, .86fr) minmax(236px, 1.14fr) !important;
    padding-inline: 3px !important;
  }

  #menuRecipePanel .menu-unlock-head,
  #menuRecipePanel .menu-recipe-head {
    width: calc(100% - 12px) !important;
    padding-inline: 17px !important;
  }

  #menuRecipePanel .unlock-scroll,
  #menuRecipePanel .menu-recipe-list {
    padding-left: 7px !important;
    padding-right: 8px !important;
  }

  #menuRecipePanel .menu-recipe-row {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
    gap: 4px !important;
    min-height: 84px !important;
    padding-inline: 10px !important;
  }
}


/* SOURCE: ui/styles/shared/affinity-surface-balance-v11.css */
/* Affinity surface integration and optical neutral centering v11 1793948400001. */

/* The duplicated overview plate is gone from current markup. Keep cached
   markup hidden so an older app shell cannot bring it back. */
#guideElementView .element-affinity-guide {
  display: none !important;
}

#guideElementView .menu-element-box {
  gap: 6px !important;
  padding: 5px 7px 9px !important;
}

/* Each affinity block now owns a real black-scale painted recess instead of
   a CSS card. Border-image keeps the authored rails and corners intact at the
   two different block heights. */
#menuRecipePanel #guideElementView .element-affinity-section {
  position: relative !important;
  box-sizing: border-box !important;
  width: calc(100% - 4px) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 10px solid transparent !important;
  border-image-source: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") !important;
  border-image-slice: 82 110 fill !important;
  border-image-width: 10px 12px !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .28) !important;
}

/* The section names sit on the same authored black-scale title plate as the
   rest of the guide rather than floating on a thin rule. */
#menuRecipePanel #guideElementView .element-affinity-section > header {
  box-sizing: border-box !important;
  width: calc(100% - 8px) !important;
  height: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: -2px auto 1px !important;
  padding: 0 18px 1px !important;
  border: 0 !important;
  background: transparent url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-section-header.png") center / 100% 100% no-repeat !important;
  filter: brightness(.88) saturate(.72) drop-shadow(0 3px 4px rgba(0, 0, 0, .42)) !important;
}

#menuRecipePanel #guideElementView .element-affinity-section > header > span {
  color: #f3e4a8 !important;
  font-size: 9.4px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .95) !important;
}

#menuRecipePanel #guideElementView .element-affinity-section > header > small {
  color: #94bac8 !important;
  font-size: 7px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .9) !important;
}

#menuRecipePanel #guideElementView .element-cycle-map {
  margin-top: 0 !important;
}

#menuRecipePanel #guideElementView .element-cycle-copy,
#menuRecipePanel #guideElementView .element-pair-strip {
  margin-right: 2px !important;
  margin-left: 2px !important;
}

@media (max-width: 370px) {
  #guideElementView .menu-element-box {
    padding-inline: 5px !important;
  }

  #menuRecipePanel #guideElementView .element-affinity-section {
    width: calc(100% - 2px) !important;
    border-width: 9px !important;
    border-image-width: 9px 10px !important;
  }

  #menuRecipePanel #guideElementView .element-affinity-section > header {
    width: calc(100% - 6px) !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-inline: 15px !important;
  }
}


/* SOURCE: ui/styles/shared/affinity-copy-readability-v12.css */
/* Affinity explanation copy readability v12 1793959200000. */

/* The painted recess stays the same; only its live text well grows enough for
   the larger two-line explanation at both supported narrow widths. */
#menuRecipePanel #guideElementView .element-cycle-copy {
  min-height: 61px !important;
  gap: 5px !important;
  padding: 7px 10px !important;
}

#menuRecipePanel #guideElementView .element-cycle-sequence {
  gap: 4px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

#menuRecipePanel #guideElementView .element-cycle-sequence > b {
  font-size: 12px !important;
}

#menuRecipePanel #guideElementView .element-cycle-sequence > i {
  font-size: 10px !important;
}

#menuRecipePanel #guideElementView .element-cycle-copy > small {
  font-size: 9px !important;
  line-height: 1.3 !important;
}

/* Light and dark keep independent side cells while every label receives the
   same optical size and vertical breathing room. */
#menuRecipePanel #guideElementView .element-pair-strip {
  min-height: 54px !important;
  grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  gap: 6px !important;
  padding: 6px 8px !important;
}

#menuRecipePanel #guideElementView .element-pair-strip > span {
  font-size: 13px !important;
  line-height: 1 !important;
}

#menuRecipePanel #guideElementView .element-pair-strip > strong {
  gap: 3px !important;
  padding: 5px 4px !important;
  font-size: 9.5px !important;
  line-height: 1.22 !important;
}

#menuRecipePanel #guideElementView .element-pair-strip > strong > small {
  font-size: 8.2px !important;
  line-height: 10px !important;
}

@media (max-width: 370px) {
  #menuRecipePanel #guideElementView .element-cycle-copy {
    min-height: 63px !important;
    padding-inline: 8px !important;
  }

  #menuRecipePanel #guideElementView .element-cycle-copy > small {
    font-size: 8.7px !important;
  }

  #menuRecipePanel #guideElementView .element-pair-strip {
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    padding-inline: 6px !important;
  }
}


/* SOURCE: ui/styles/menus/story-surface-frame-v2.css */
/* Story surfaces: share the authored lobby shell and keep artwork inside a
   separate ornamental recess.  Loaded last so legacy border-image rules do
   not leave a second, misaligned frame behind. */

.main-menu:is([data-panel="story"], [data-panel="storyArchive"]) {
  padding: 0 !important;
}

.main-menu:is([data-panel="story"], [data-panel="storyArchive"]) .menu-scene {
  width: min(100%, 430px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  background: #040914 !important;
}

.main-menu:is([data-panel="story"], [data-panel="storyArchive"]) .menu-card {
  top: max(5px, env(safe-area-inset-top)) !important;
  right: 5px !important;
  bottom: auto !important;
  left: 5px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

body :is(#menuStoryPanel, #menuStoryArchivePanel).menu-panel.active {
  box-sizing: border-box !important;
  width: 100% !important;
  height: min(830px, calc(100dvh - 10px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 10px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .62)) !important;
}

body #menuStoryArchivePanel.menu-panel.active {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-rows: 55px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 14px 17px 17px !important;
}

body #menuStoryArchivePanel.menu-panel > .menu-panel-head {
  position: relative !important;
  inset: auto !important;
  z-index: 8 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 55px !important;
  min-height: 55px !important;
  display: block !important;
  align-self: start !important;
  justify-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body #menuStoryArchivePanel.menu-panel > .menu-panel-head > strong {
  position: absolute !important;
  inset: auto !important;
  z-index: 2 !important;
  top: calc(50% + 13px) !important;
  left: 50% !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 160px) !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
  color: #eadb9e !important;
  font-size: clamp(18px, 4.8vw, 20px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000, 0 0 5px rgba(173, 134, 50, .2) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translate(-50%, -50%) !important;
  white-space: nowrap !important;
}

body #menuStoryArchivePanel.menu-panel > .menu-panel-head > .menu-back-button {
  position: absolute !important;
  inset: auto !important;
  z-index: 3 !important;
  top: calc(50% + 13px) !important;
  left: 8px !important;
  box-sizing: border-box !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 1px 0 0 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #c7d1cb !important;
  font-size: clamp(9.8px, 2.6vw, 10.8px) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(137, 166, 164, .78) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  text-shadow: 0 1px 3px #000 !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuStoryArchivePanel.menu-panel > .menu-panel-head::before,
body #menuStoryArchivePanel.menu-panel > .menu-panel-head::after {
  content: none !important;
  display: none !important;
}

body #menuStoryArchivePanel .story-archive-summary {
  display: none !important;
}

body #menuStoryArchivePanel .story-archive-list {
  padding: 9px 10px 15px !important;
}

body #menuStoryArchivePanel .story-archive-cover {
  box-sizing: border-box !important;
  width: 78px !important;
  height: 78px !important;
  padding: 9px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/bag_content_gothic_1790601600072/bag-slot-frame.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .58)) !important;
}

body #menuStoryArchivePanel .story-archive-cover > img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 3px !important;
  object-fit: cover !important;
  object-position: center !important;
}

body #menuStoryPanel.menu-panel.active {
  position: relative !important;
  inset: auto !important;
  z-index: 260 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 42px !important;
  align-content: stretch !important;
  justify-items: stretch !important;
  gap: 7px !important;
  padding: 24px 17px 17px !important;
}

body #menuStoryPanel .story-stage {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 12px 10px 16px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body #menuStoryPanel .story-art {
  box-sizing: border-box !important;
  width: 100% !important;
  height: clamp(220px, 38dvh, 292px) !important;
  margin: 0 0 13px !important;
  padding: 12px 13px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .56)) !important;
}

body #menuStoryPanel .story-art > .story-illustration {
  inset: 12px 13px !important;
  width: calc(100% - 26px) !important;
  height: calc(100% - 24px) !important;
  border-radius: 8px !important;
}

body #menuStoryPanel .story-step-label,
body #menuStoryPanel .story-stage > strong,
body #menuStoryPanel .story-stage > p {
  position: relative !important;
  z-index: 1 !important;
  margin-inline: 10px !important;
}

body #menuStoryPanel .story-actions {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  align-self: end !important;
}

/* Every lobby subpage back control keeps its authored arrow but moves into the
   painted safe area instead of touching the shell's left rail. */
body #mainMenu :is(
  #menuStoryArchivePanel,
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel,
  #menuAttendancePanel,
  #menuLoginPanel,
  #menuSettingsPanel,
  #menuCreditsPanel
).menu-panel > .menu-panel-head > .menu-back-button {
  transform: translate(6px, -6px) !important;
}

body #mainMenu :is(
  #menuStoryArchivePanel,
  #menuGrowthPanel,
  #menuRecipePanel,
  #menuCodexPanel,
  #menuRankingPanel,
  #menuStorePanel,
  #menuCompanionPanel,
  #menuAttendancePanel,
  #menuLoginPanel,
  #menuSettingsPanel,
  #menuCreditsPanel
).menu-panel > .menu-panel-head > .menu-back-button:active {
  transform: translate(6px, -5px) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body :is(#menuStoryPanel, #menuStoryArchivePanel).menu-panel.active {
    gap: 5px !important;
    padding: 11px 13px 14px !important;
  }

  body #menuStoryArchivePanel.menu-panel.active {
    grid-template-rows: 50px minmax(0, 1fr) !important;
  }

  body #menuStoryArchivePanel.menu-panel > .menu-panel-head {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
  }

  body #menuStoryArchivePanel.menu-panel > .menu-panel-head > strong {
    top: calc(50% + 11px) !important;
    font-size: 18px !important;
  }

  body #menuStoryArchivePanel.menu-panel > .menu-panel-head > .menu-back-button {
    top: calc(50% + 11px) !important;
    left: 6px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding-left: 7px !important;
    font-size: 10.5px !important;
  }

  body #menuStoryArchivePanel .story-archive-list {
    padding: 8px 8px 12px !important;
  }

  body #menuStoryArchivePanel .story-archive-card {
    min-height: 98px !important;
    grid-template-columns: 68px minmax(0, 1fr) 30px !important;
    gap: 7px !important;
    padding: 10px 13px !important;
  }

  body #menuStoryArchivePanel .story-archive-cover {
    width: 66px !important;
    height: 66px !important;
    padding: 8px !important;
  }

  body #menuStoryPanel.menu-panel.active {
    grid-template-rows: minmax(0, 1fr) 38px !important;
    padding-top: 18px !important;
  }

  body #menuStoryPanel .story-stage {
    padding: 10px 8px 13px !important;
  }

  body #menuStoryPanel .story-art {
    height: clamp(206px, 36dvh, 270px) !important;
    padding: 11px 12px !important;
  }

  body #menuStoryPanel .story-art > .story-illustration {
    inset: 11px 12px !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 22px) !important;
  }

  body #menuStoryPanel .story-actions {
    height: 38px !important;
    min-height: 38px !important;
  }
}


/* SOURCE: ui/styles/combat/enemy-info-close-socket-v7.css */
/* Enemy info close socket V7 1795555500005
   The frame raster no longer paints a second circular socket behind the real
   close control. Keep the established card geometry and close-button assets. */
.enemy-info-card {
  background: transparent url("assets/generated/enemy_info_frames_no_socket_v7_1795555500005/enemy-info-frame-clean-no-socket.png") center/100% 100% no-repeat !important;
}

.enemy-info-card[data-enemy-count="2"],
.enemy-info-card[data-enemy-count="3"] {
  background: transparent url("assets/generated/enemy_info_frames_no_socket_v7_1795555500005/enemy-info-frame-multi-portrait-no-socket.png") center/100% 100% no-repeat !important;
}


/* SOURCE: ui/styles/rewards/defeat-result-empty-center-v11.css */
/* Defeat result empty equipment V11 1795555500006
   Empty equipment has no icon column. The heading keeps its authored top row,
   while the value is centered against the entire painted equipment recess. */
.end-panel:is(.defeat, .victory) .result-best-item.empty {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 18px minmax(0, 1fr) !important;
  place-items: stretch !important;
}

.end-panel:is(.defeat, .victory) .result-best-item.empty > .result-best-heading {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.end-panel:is(.defeat, .victory) .result-best-item.empty > .result-best-copy {
  position: absolute !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-align: center !important;
}

.end-panel:is(.defeat, .victory) .result-best-item.empty > .result-best-copy > strong {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: center !important;
  align-self: center !important;
  text-align: center !important;
  transform: none !important;
}


/* SOURCE: ui/styles/inventory/result-bag-optical-alignment-v12.css */
/* Result and battle-bag optical alignment V12 1795555500008. */

/* Center the complete two-line empty-equipment message as one visual group. */
.end-panel:is(.defeat, .victory) .result-best-item.empty {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 18px auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 7px !important;
}

.end-panel:is(.defeat, .victory) .result-best-item.empty > .result-best-heading {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
}

.end-panel:is(.defeat, .victory) .result-best-item.empty > .result-best-copy {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-align: center !important;
}

.end-panel:is(.defeat, .victory) .result-best-item.empty > .result-best-copy > strong {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  place-self: center !important;
  text-align: center !important;
  transform: none !important;
}

/* Register labels to the painted bag bays, not to their old CSS dividers. */
#bagPanel .effect-summary-head > strong {
  transform: translateY(3px) !important;
}

#bagPanel .tray-head {
  transform: translateY(-8px) !important;
}


/* SOURCE: ui/styles/shared/home-entry-controls-v13.css */
/* Home entry controls aligned with the current black-metal menu language. */

#menuHomePanel {
  gap: 9px !important;
  padding-block: 2px !important;
}

#menuHomePanel .menu-button {
  box-sizing: border-box !important;
  width: min(246px, 100%) !important;
  height: 55px !important;
  min-height: 55px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 30px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/login_entry_buttons_v1_1793680200000/login-provider-button.png") center / 100% 100% no-repeat !important;
  color: #e5e4dc !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .96) !important;
  box-shadow: none !important;
  filter: brightness(.88) saturate(.82) drop-shadow(0 5px 7px rgba(0, 0, 0, .48)) !important;
  transform: none !important;
}

#menuHomePanel #menuStartButton {
  background-image: url("assets/generated/login_entry_buttons_v1_1793680200000/login-guest-button.png") !important;
  color: #ffe7a3 !important;
  filter: brightness(1.04) saturate(.98) drop-shadow(0 5px 8px rgba(0, 0, 0, .52)) drop-shadow(0 0 5px rgba(78, 187, 224, .13)) !important;
}

#menuHomePanel .menu-button:focus-visible {
  outline: 1px solid rgba(104, 208, 242, .82) !important;
  outline-offset: -8px !important;
}

#menuHomePanel .menu-button:active {
  transform: translateY(1px) !important;
  filter: brightness(.75) saturate(.72) drop-shadow(0 3px 5px rgba(0, 0, 0, .46)) !important;
}

#menuHomePanel #menuStartButton:active {
  filter: brightness(.9) saturate(.86) drop-shadow(0 3px 5px rgba(0, 0, 0, .5)) !important;
}

/* The lobby owns continuation. Its existing authored start plate remains, but
   a restored run receives a restrained warm highlight and explicit copy. */
#menuLobbyPanel .lobby-start-button.continue-run {
  filter: brightness(1.04) saturate(.96) drop-shadow(0 8px 11px rgba(0, 0, 0, .46)) drop-shadow(0 0 10px rgba(229, 185, 80, .2)) !important;
}

#menuLobbyPanel .lobby-start-button.continue-run strong {
  color: #ffe5a0 !important;
}

@media (max-width: 370px) {
  #menuHomePanel {
    gap: 8px !important;
  }

  #menuHomePanel .menu-button {
    width: min(232px, 100%) !important;
    height: 52px !important;
    min-height: 52px !important;
    font-size: 13.5px !important;
  }
}


/* SOURCE: ui/styles/menus/lobby-surface-cleanup-v1.css */
/* Lobby surface cleanup v1.
   Keep the authored outer shell and individual content plates, while removing
   the extra opaque slabs that read as unpainted black rectangles. */

/* Credits now owns the same complete page shell and safe area as Companion.
   Settings already uses this exact shell; the selector below makes that shared
   contract explicit without adding a second frame around either screen. */
.main-menu:is([data-panel="settings"], [data-panel="credits"]) {
  padding: 0 !important;
}

.main-menu:is([data-panel="settings"], [data-panel="credits"]) .menu-scene {
  width: min(100%, 430px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  background: #040914 !important;
}

.main-menu:is([data-panel="settings"], [data-panel="credits"]) .menu-card {
  top: max(5px, env(safe-area-inset-top)) !important;
  right: 5px !important;
  bottom: auto !important;
  left: 5px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

body #menuCreditsPanel.menu-panel.active {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: min(830px, calc(100dvh - 10px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 10px) !important;
  display: grid !important;
  grid-template-rows: 55px minmax(0, 1fr) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 14px 17px 17px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .62)) !important;
}

body #menuCreditsPanel.menu-panel > .menu-panel-head {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 55px !important;
  min-height: 55px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuCreditsPanel.menu-panel > .menu-panel-head > strong {
  position: absolute !important;
  inset: auto !important;
  top: calc(50% + 13px) !important;
  left: 50% !important;
  width: auto !important;
  max-width: calc(100% - 160px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #eadb9e !important;
  font-size: clamp(18px, 4.8vw, 20px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000, 0 0 5px rgba(173, 134, 50, .2) !important;
  transform: translate(-50%, -50%) !important;
  white-space: nowrap !important;
}

body #menuCreditsPanel.menu-panel > .menu-panel-head > .menu-back-button {
  position: absolute !important;
  inset: auto !important;
  top: calc(50% + 13px) !important;
  left: 8px !important;
  box-sizing: border-box !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 1px 0 0 7px !important;
  border: 0 !important;
  background: none !important;
  color: #c7d1cb !important;
  font-size: clamp(9.8px, 2.6vw, 10.8px) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(137, 166, 164, .78) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  text-shadow: 0 1px 3px #000 !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuCreditsPanel .credits-box {
  place-self: center stretch !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  gap: 8px !important;
  margin: 0 9px !important;
  padding: 0 !important;
  border: 0 !important;
  border-image: none !important;
  background: none !important;
  box-shadow: none !important;
}

body #menuCreditsPanel .credits-record {
  box-sizing: border-box !important;
  width: calc(100% - 14px) !important;
  height: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-self: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 20px 1px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-section-header.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .48)) !important;
}

body #menuCreditsPanel .credits-record > span {
  padding-right: 10px !important;
  border-right: 1px solid rgba(224, 186, 78, .38) !important;
}

body #menuCreditsPanel .credits-record > strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Growth resource plaque: one authored wide recess with a distinct emblem,
   resource name and large count. The redundant section-title strip is removed
   in app.js, so the upgrade cards start immediately below this plaque. */
#menuGrowthPanel .menu-meta-box {
  padding-top: 3px !important;
}

#menuGrowthPanel .growth-wallet {
  box-sizing: border-box !important;
  width: calc(100% - 12px) !important;
  height: 68px !important;
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 auto 7px !important;
  padding: 8px 21px 9px 17px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/tutorial-panel.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: brightness(.92) saturate(.82) drop-shadow(0 4px 5px rgba(0, 0, 0, .55)) !important;
}

#menuGrowthPanel .growth-wallet > img {
  box-sizing: border-box !important;
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  justify-self: center !important;
  align-self: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .72)) drop-shadow(0 0 4px rgba(66, 181, 255, .24)) !important;
  transform: translateY(5px) !important;
}

#menuGrowthPanel .growth-wallet > span {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  height: 34px !important;
  padding: 0 2px 0 8px !important;
  transform: translateY(6px) !important;
}

#menuGrowthPanel .growth-wallet small {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  color: #c8dbe2 !important;
  font-size: clamp(10.5px, 2.9vw, 12px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 2px 3px #000 !important;
}

#menuGrowthPanel .growth-wallet strong {
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  color: #a9efff !important;
  font-size: clamp(25px, 7vw, 29px) !important;
  font-weight: 950 !important;
  line-height: 34px !important;
  text-shadow: 0 2px 3px #000, 0 0 7px rgba(61, 201, 255, .28) !important;
}

#menuGrowthPanel .growth-wallet strong::after {
  content: var(--i18n-css-countUnit, "개") !important;
  margin: 0 !important;
  color: #83a4b2 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transform: translateY(2px) !important;
}

#menuGrowthPanel .meta-upgrade-list,
#menuGrowthPanel .meta-activation-list {
  margin-top: 0 !important;
  transform: translateX(7px) !important;
}

/* The outer guide view had its own opaque CSS slab on top of the authored
   menu shell. Keep each recipe/affinity row but make that extra surface clear. */
#menuRecipePanel #guideRecipeView,
#menuRecipePanel #guideRecipeView.active,
#menuRecipePanel #guideElementView,
#menuRecipePanel #guideElementView.active {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The catalog book image includes an opaque rectangular fill. The record rows
   already carry their own painted bays, so let those rows sit directly on the
   shared shell for both codex tabs. */
#menuCodexPanel .codex-book {
  box-sizing: border-box !important;
  padding: 7px 5px 13px !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-page {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body #menuCreditsPanel.menu-panel.active {
    grid-template-rows: 50px minmax(0, 1fr) !important;
    padding: 11px 13px 14px !important;
  }

  body #menuCreditsPanel.menu-panel > .menu-panel-head {
    height: 50px !important;
    min-height: 50px !important;
  }

  body #menuCreditsPanel.menu-panel > .menu-panel-head > strong,
  body #menuCreditsPanel.menu-panel > .menu-panel-head > .menu-back-button {
    top: calc(50% + 11px) !important;
  }

  body #menuCreditsPanel.menu-panel > .menu-panel-head > .menu-back-button {
    left: 6px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }

  body #menuCreditsPanel .credits-box {
    gap: 7px !important;
    margin-inline: 5px !important;
  }

  body #menuCreditsPanel .credits-record {
    width: calc(100% - 12px) !important;
    height: 40px !important;
    min-height: 40px !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-inline: 17px !important;
  }

  #menuGrowthPanel .growth-wallet {
    height: 63px !important;
    min-height: 63px !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    padding-inline: 15px 18px !important;
  }

  #menuGrowthPanel .growth-wallet > img {
    width: 32px !important;
    height: 32px !important;
  }

  #menuGrowthPanel .growth-wallet > span,
  #menuGrowthPanel .growth-wallet strong {
    height: 31px !important;
  }

  #menuGrowthPanel .growth-wallet strong {
    line-height: 31px !important;
  }

  #menuCodexPanel .codex-book {
    padding: 6px 4px 11px !important;
  }
}


/* SOURCE: ui/styles/menus/settings-button-backplate-v13.css */
/* V13: one authored settings socket shared by lobby and combat.
   The painted plate is deliberately larger than the separate gear. */
body .menu-lobby-panel .lobby-settings-button,
body .phone-shell > .topbar #topSettingsButton.top-menu-button {
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/settings_button_backplate_v13_1795555500009/settings-button-backplate-v13.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .66)) !important;
}

body .menu-lobby-panel .lobby-settings-button > img,
body .phone-shell > .topbar #topSettingsButton.top-menu-button > img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .78)) !important;
}

body .menu-lobby-panel .lobby-settings-button:hover > img,
body .menu-lobby-panel .lobby-settings-button:focus-visible > img,
body .phone-shell > .topbar #topSettingsButton.top-menu-button:hover > img,
body .phone-shell > .topbar #topSettingsButton.top-menu-button:focus-visible > img {
  filter: brightness(1.08) saturate(1.04) drop-shadow(0 1px 2px rgba(0, 0, 0, .8)) !important;
}

body .menu-lobby-panel .lobby-settings-button:active > img,
body .phone-shell > .topbar #topSettingsButton.top-menu-button:active > img {
  transform: translate(-50%, -50%) scale(.93) !important;
  filter: brightness(.8) saturate(.88) !important;
}

body .menu-lobby-panel .lobby-settings-button:focus,
body .menu-lobby-panel .lobby-settings-button:focus-visible,
body .phone-shell > .topbar #topSettingsButton.top-menu-button:focus,
body .phone-shell > .topbar #topSettingsButton.top-menu-button:focus-visible {
  outline: 0 !important;
}

@media (max-width: 370px) {
  body .menu-lobby-panel .lobby-settings-button,
  body .phone-shell > .topbar #topSettingsButton.top-menu-button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  body .menu-lobby-panel .lobby-settings-button > img,
  body .phone-shell > .topbar #topSettingsButton.top-menu-button > img {
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
  }
}


/* SOURCE: ui/styles/menus/lobby-new-run-control-v14.css */
/* Restored-run secondary action placed above the existing lobby CTA. */

#menuLobbyPanel .lobby-new-run-button {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: max(162px, calc(env(safe-area-inset-bottom) + 144px));
  box-sizing: border-box;
  width: 198px;
  height: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0 30px 1px;
  border: 0;
  background: transparent url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
  color: #fff0b8;
  font-size: 10.8px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .96), 0 0 5px rgba(51, 174, 232, .22);
  filter: brightness(1) saturate(1) drop-shadow(0 4px 6px rgba(0, 0, 0, .54));
  transform: translateX(-50%);
}

#menuLobbyPanel .lobby-new-run-button[hidden] {
  display: none !important;
}

#menuLobbyPanel .lobby-new-run-button:focus,
#menuLobbyPanel .lobby-new-run-button:focus-visible {
  outline: 0;
}

#menuLobbyPanel .lobby-new-run-button:is(:active, .qa-pressed) {
  transform: translate(-50%, 1px);
  filter: brightness(.88) saturate(1) drop-shadow(0 2px 4px rgba(0, 0, 0, .48));
}

.lobby-new-run-confirm-panel {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  place-items: center;
  box-sizing: border-box;
  padding: 9px;
  background: rgba(0, 4, 10, .76);
  backdrop-filter: blur(2px);
}

.lobby-new-run-confirm-panel.active {
  display: grid;
}

.lobby-new-run-confirm-card {
  position: relative;
  box-sizing: border-box;
  width: min(326px, calc(100vw - 28px));
  height: 102px;
  display: grid;
  grid-template-rows: 58px 40px;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eaf6fb;
  text-align: center;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .78));
}

.lobby-new-run-confirm-card h2 {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 32px 2px;
  box-sizing: border-box;
  background: transparent url("assets/generated/lobby_prep_refresh_1788102000000/prep-hint.png") center / 100% 100% no-repeat;
  color: #fff0ae;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.1;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .86);
}

.lobby-new-run-confirm-actions {
  position: relative;
  z-index: 2;
  width: calc(100% - 10px);
  height: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  justify-self: center;
  margin-top: -1px;
}

.lobby-new-run-confirm-actions button {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 22px 1px;
  border: 0;
  background: transparent url("assets/generated/lobby_prep_refresh_1788102000000/lobby-start.png") center / 100% 100% no-repeat;
  color: #cbdbe2;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 2px #000;
  outline: 0;
  box-shadow: none;
  filter: brightness(.58) saturate(.58) drop-shadow(0 4px 5px rgba(0, 0, 0, .54));
}

#lobbyNewRunConfirmAcceptButton {
  color: #fff0b3;
  filter: brightness(.84) saturate(.8) drop-shadow(0 4px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 4px rgba(42, 157, 218, .2));
}

.lobby-new-run-confirm-actions button:focus-visible {
  color: #fff0bd;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(70, 190, 238, .42);
}

.lobby-new-run-confirm-actions button:active {
  transform: translateY(1px) scale(.985);
  color: #fff3c8;
  filter: brightness(.82);
}

/* When the five-king ledger is visible, the secondary action owns the small
   gap directly above that ledger instead of painting over it. */
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-new-run-button {
  bottom: max(326px, calc(env(safe-area-inset-bottom) + 308px));
}

@media (max-width: 370px), (max-height: 760px) {
  #menuLobbyPanel .lobby-new-run-button {
    bottom: max(153px, calc(env(safe-area-inset-bottom) + 137px));
    width: 190px;
    height: 34px;
    min-height: 34px;
    font-size: 10.2px;
  }

  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-new-run-button {
    bottom: max(318px, calc(env(safe-area-inset-bottom) + 302px));
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v19.css */
/* Companion screen V19: fixed icon rail and fixed copy start for all four
   resource cells. This loads after the roster-detail overrides. */

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:first-child,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:last-child {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  transform: none !important;
}

/* Every source canvas owns the same left-hand slot. The copy no longer moves
   according to label width, so the visible icon-to-text gutter stays equal. */
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item > img,
body #menuCompanionPanel .companion-currency-item.currency-shards > img,
body #menuCompanionPanel .companion-currency-item.currency-common > img,
body #menuCompanionPanel .companion-currency-item.currency-premium > img,
body #menuCompanionPanel .companion-currency-item.currency-dust > img {
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Stardust is visibly weighted to the right inside its transparent canvas. */
body #menuCompanionPanel .companion-currency-item.currency-dust > img {
  left: 2px !important;
}

body #menuCompanionPanel .companion-currency-copy {
  position: absolute !important;
  left: 40px !important;
  right: 0 !important;
  top: 50% !important;
  width: auto !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 14px 14px !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
}

body #menuCompanionPanel .companion-currency-copy > em,
body #menuCompanionPanel .companion-currency-copy > b {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: start !important;
  text-align: left !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  grid-column: 1 !important;
}

body #menuCompanionPanel .companion-currency-copy > em {
  align-self: end !important;
  padding-bottom: 1px !important;
}

body #menuCompanionPanel .companion-currency-copy > b {
  align-self: start !important;
  padding-top: 1px !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item > img,
  body #menuCompanionPanel .companion-currency-item.currency-shards > img,
  body #menuCompanionPanel .companion-currency-item.currency-common > img,
  body #menuCompanionPanel .companion-currency-item.currency-premium > img,
  body #menuCompanionPanel .companion-currency-item.currency-dust > img {
    left: 7px !important;
    width: 23px !important;
    height: 23px !important;
  }

  body #menuCompanionPanel .companion-currency-item.currency-dust > img {
    left: 1px !important;
  }

  body #menuCompanionPanel .companion-currency-copy {
    left: 38px !important;
    right: 0 !important;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v20.css */
/* Companion screen V20: tune every resource cell independently. */

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-shards {
  --resource-icon-left: 12px;
  --resource-copy-left: 43px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-common {
  --resource-icon-left: 11px;
  --resource-copy-left: 42px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-premium {
  --resource-icon-left: 9px;
  --resource-copy-left: 41px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-dust {
  --resource-icon-left: 6px;
  --resource-copy-left: 39px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item > img,
body #menuCompanionPanel .companion-currency-item.currency-shards > img,
body #menuCompanionPanel .companion-currency-item.currency-common > img,
body #menuCompanionPanel .companion-currency-item.currency-premium > img,
body #menuCompanionPanel .companion-currency-item.currency-dust > img {
  left: var(--resource-icon-left) !important;
}

body #menuCompanionPanel .companion-currency-item > .companion-currency-copy {
  left: var(--resource-copy-left) !important;
  right: 0 !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-shards {
    --resource-icon-left: 11px;
    --resource-copy-left: 40px;
  }

  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-common {
    --resource-icon-left: 11px;
    --resource-copy-left: 41px;
  }

  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-premium {
    --resource-icon-left: 9px;
    --resource-copy-left: 40px;
  }

  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-dust {
    --resource-icon-left: 5px;
    --resource-copy-left: 37px;
  }
}


/* SOURCE: ui/styles/companions/companion-screen-rebuild-v21.css */
/* Companion screen V21: optical icon centers, tuned per painted resource cell. */

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-shards {
  --resource-icon-left: 16px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-common {
  --resource-icon-left: 12px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-premium {
  --resource-icon-left: 9px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-dust {
  --resource-icon-left: 1px;
  --resource-copy-left: 30px;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-shards {
    --resource-icon-left: 15px;
  }

  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-common {
    --resource-icon-left: 12px;
  }

  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-premium {
    --resource-icon-left: 9px;
  }

  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-dust {
    --resource-icon-left: 0px;
    --resource-copy-left: 28px;
  }
}


/* SOURCE: ui/styles/companions/companion-system-v1.css */
/* Companion system V1: dust growth, mythic pity progress, and a restrained support slot. */

body #menuCompanionPanel .companion-menu-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body #menuCompanionPanel .companion-summon-card,
body #menuCompanionPanel .companion-summon-card.common,
body #menuCompanionPanel .companion-summon-card.premium {
  height: 320px !important;
  min-height: 320px !important;
}

body #menuCompanionPanel .companion-summon-card.premium {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 94px 18px 34px minmax(0, 1fr) !important;
  row-gap: 4px !important;
}

body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-art {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body #menuCompanionPanel .companion-summon-card.premium > strong {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-height: 18px !important;
}

/* Keep the pity readout isolated from the legacy summon-button border/row rules. */
body #menuCompanionPanel .companion-summon-card.premium > .companion-mythic-pity-status {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: calc(100% - 12px) !important;
  height: 24px !important;
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
  justify-self: center !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: none !important;
  color: #d9e9ef !important;
  text-shadow: 0 1px 2px #000 !important;
  transform: translateY(-4px) !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-summon-card.premium > .companion-mythic-pity-status::before,
body #menuCompanionPanel .companion-summon-card.premium > .companion-mythic-pity-status::after {
  content: none !important;
}

body #menuCompanionPanel .companion-summon-card.premium > .companion-mythic-pity-status > span {
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  color: #c6c9c4 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-summon-card.premium > .companion-mythic-pity-status > b {
  min-width: 0 !important;
  color: #f1e5b6 !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  letter-spacing: -.2px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-summon-card.premium > .companion-summon-controls {
  grid-column: 1 !important;
  grid-row: 4 !important;
  padding-top: 0 !important;
}

/* These source images reserve much of their height for outside ornament.
   Register each painted face to the existing button slot, not its PNG bounds. */
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button[data-count="1"]::before,
body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button[data-count="10"]::before {
  inset: -2px -1px !important;
  background-size: 100% 130% !important;
  background-position: center 53% !important;
}

body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button[data-count="1"]::before,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button[data-count="10"]::before {
  inset: -2px -1px !important;
  background-size: 100% 130% !important;
  background-position: center 53% !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button > b,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button > b {
  font-size: 12px !important;
  line-height: 13px !important;
}

body #menuCompanionPanel .companion-summon-card.common .companion-summon-actions > button > small,
body #menuCompanionPanel .companion-summon-card.premium .companion-summon-actions > button > small {
  font-size: 9.5px !important;
  line-height: 11px !important;
}

body #menuCompanionPanel #companionTargetDialog {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 8px !important;
}

body #menuCompanionPanel .companion-target-dialog {
  position: relative !important;
  width: min(350px, 100%) !important;
  max-height: calc(100vh - 30px) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  padding: 42px 25px 31px !important;
  overflow: hidden !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .82)) !important;
}

body #menuCompanionPanel .companion-target-dialog > strong {
  color: #f2e4a9 !important;
  font-size: 16px !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000 !important;
}

body #menuCompanionPanel .companion-target-dialog > p {
  margin: 0 !important;
  color: #d0d5d4 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-target-dialog > p > span {
  color: #bdad7e !important;
  font-size: 10px !important;
}

body #menuCompanionPanel .companion-target-dialog > .companion-odds-close {
  outline: none !important;
}

body #menuCompanionPanel .companion-target-dialog > .companion-odds-close:focus-visible {
  filter: brightness(1.2) drop-shadow(0 0 3px #c4b377) !important;
}

body #menuCompanionPanel .companion-target-list {
  min-height: 0 !important;
  display: grid !important;
  gap: 6px !important;
  overflow-y: auto !important;
  padding: 1px 0 5px !important;
}

body #menuCompanionPanel .companion-target-card {
  width: 100% !important;
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: 43px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 1px 7px !important;
  box-sizing: border-box !important;
  padding: 9px 13px 9px 10px !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  color: #dcecf1 !important;
}

body #menuCompanionPanel .companion-target-card.selected {
  filter: brightness(1.15) drop-shadow(0 0 2px rgba(199, 172, 105, .42)) !important;
}

body #menuCompanionPanel .companion-target-card:focus-visible {
  filter: brightness(1.25) drop-shadow(0 0 3px #b29b63) !important;
}

body #menuCompanionPanel .companion-target-card:active {
  filter: brightness(.8) !important;
}

body #menuCompanionPanel .companion-target-card > img {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 43px !important;
  height: 43px !important;
  object-fit: contain !important;
}

body #menuCompanionPanel .companion-target-card > span {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  text-align: left !important;
}

body #menuCompanionPanel .companion-target-card strong {
  color: #f3e6b4 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

body #menuCompanionPanel .companion-target-card small {
  color: #c6cdcb !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

body #menuCompanionPanel .companion-target-card > b {
  grid-column: 1 !important;
  grid-row: 2 !important;
  color: #d8c99f !important;
  font-size: 10px !important;
  line-height: 12px !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-party-view.active {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

body #menuCompanionPanel .companion-party-note {
  min-height: 44px !important;
  margin: 5px 13px !important;
  padding: 7px 15px !important;
  font-size: 9.5px !important;
  line-height: 14px !important;
  white-space: pre-line !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
}

body #menuCompanionPanel .companion-party-slot {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 0 13px !important;
  background: none !important;
}

body #menuCompanionPanel .companion-party-position {
  position: relative !important;
  min-height: 86px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 62px !important;
  align-items: center !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  padding: 10px 20px 10px 14px !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") center / 100% 100% no-repeat !important;
}

body #menuCompanionPanel .companion-party-position.support {
  filter: none !important;
}

body #menuCompanionPanel .companion-party-position > img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)) !important;
}

body #menuCompanionPanel .companion-party-position > img.companion-party-empty-icon {
  opacity: .34 !important;
  filter: grayscale(.55) brightness(.7) !important;
}

body #menuCompanionPanel .companion-party-position > span {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 1px !important;
  text-align: left !important;
}

body #menuCompanionPanel .companion-party-position.empty > span {
  grid-column: 2 / -1 !important;
}

body #menuCompanionPanel .companion-party-position small {
  color: #76c9e2 !important;
  font-size: 8.5px !important;
  line-height: 12px !important;
}

body #menuCompanionPanel .companion-party-position strong {
  overflow: visible !important;
  color: #eee3b7 !important;
  font-size: 11.5px !important;
  line-height: 15px !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-party-position-stars {
  display: block !important;
  color: #d8c587 !important;
  font-size: 9px !important;
  line-height: 11px !important;
  letter-spacing: 1px !important;
}

body #menuCompanionPanel .companion-party-position em {
  color: #9eb5c0 !important;
  font-size: 9px !important;
  font-style: normal !important;
  line-height: 12px !important;
  overflow-wrap: anywhere !important;
}

body #menuCompanionPanel .companion-party-position > button,
body #menuCompanionPanel .companion-party-card-actions > button {
  position: relative !important;
  isolation: isolate !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #e0d6bd !important;
  font-weight: 900 !important;
  line-height: 14px !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer !important;
}

body #menuCompanionPanel .companion-party-position > button::before,
body #menuCompanionPanel .companion-party-position > button::after,
body #menuCompanionPanel .companion-party-card-actions > button::before,
body #menuCompanionPanel .companion-party-card-actions > button::after {
  content: none !important;
}

/* A plain forged face from the accepted growth control, without gems or rails.
   Keep material filtering on the image layer so labels retain their contrast. */
body #menuCompanionPanel .companion-party-position > button::before,
body #menuCompanionPanel .companion-party-card-actions > button::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: transparent url("assets/generated/companion_growth_button_v8_1796000400000/companion-growth-forged-v8.png") center / 100% 100% no-repeat !important;
  filter: brightness(.82) saturate(.2) !important;
}

body #menuCompanionPanel .companion-party-position > button {
  width: 62px !important;
  height: 32px !important;
  padding: 1px 8px 0 !important;
  font-size: 10.5px !important;
}

body #menuCompanionPanel .companion-party-list {
  padding: 0 13px 18px !important;
  overflow: visible !important;
}

body #menuCompanionPanel .companion-party-card {
  min-height: 94px !important;
  grid-template-columns: 44px minmax(0, 1fr) 62px !important;
  column-gap: 5px !important;
  padding: 12px 20px 12px 14px !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

body #menuCompanionPanel .companion-party-card.active {
  filter: none !important;
}

body #menuCompanionPanel .companion-party-card > img {
  width: 44px !important;
  height: 50px !important;
}

body #menuCompanionPanel .companion-party-card strong {
  font-size: 11.5px !important;
  line-height: 15px !important;
}

body #menuCompanionPanel .companion-party-card small {
  font-size: 9px !important;
  line-height: 12px !important;
}

body #menuCompanionPanel .companion-party-card em {
  overflow: visible !important;
  font-size: 9.5px !important;
  line-height: 13px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body #menuCompanionPanel .companion-party-card-actions {
  display: grid !important;
  grid-template-rows: repeat(2, 32px) !important;
  gap: 4px !important;
}

body #menuCompanionPanel .companion-party-card-actions > button {
  width: 62px !important;
  height: 32px !important;
  padding: 1px 8px 0 !important;
  font-size: 10.5px !important;
}

body #menuCompanionPanel .companion-party-card-actions > button[aria-pressed="true"] {
  color: #f1dfa5 !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-party-card-actions > button[aria-pressed="true"]::before {
  filter: brightness(1.12) saturate(.85) !important;
}

body #menuCompanionPanel .companion-party-card-actions > button:disabled {
  color: #787c73 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  cursor: default !important;
}

body #menuCompanionPanel .companion-party-card-actions > button:disabled::before {
  filter: brightness(.48) saturate(0) !important;
}

body #menuCompanionPanel .companion-party-position > button:not(:disabled):focus-visible,
body #menuCompanionPanel .companion-party-card-actions > button:not(:disabled):focus-visible {
  filter: drop-shadow(0 0 2px #d1bb83) !important;
}

body #menuCompanionPanel .companion-party-position > button:not(:disabled):active,
body #menuCompanionPanel .companion-party-card-actions > button:not(:disabled):active {
  transform: translateY(1px) !important;
}

body #menuCompanionPanel .companion-party-position > button:not(:disabled):active::before,
body #menuCompanionPanel .companion-party-card-actions > button:not(:disabled):active::before {
  filter: brightness(.62) saturate(.25) !important;
}

/* A separate native detail button covers only the companion face, never the
   equip/support controls. Existing painted cells keep their own positions. */
body #menuCompanionPanel .companion-party-position > button.companion-party-detail-trigger,
body #menuCompanionPanel .companion-party-card > button.companion-party-detail-trigger {
  position: absolute !important;
  inset: 6px 87px 6px 8px !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 8px !important;
  background: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer !important;
}

body #menuCompanionPanel .companion-party-position > button.companion-party-detail-trigger::before,
body #menuCompanionPanel .companion-party-position > button.companion-party-detail-trigger::after,
body #menuCompanionPanel .companion-party-card > button.companion-party-detail-trigger::before,
body #menuCompanionPanel .companion-party-card > button.companion-party-detail-trigger::after {
  content: none !important;
}

body #menuCompanionPanel .companion-party-position > button.companion-party-detail-trigger:focus-visible,
body #menuCompanionPanel .companion-party-card > button.companion-party-detail-trigger:focus-visible {
  outline: 1px solid #8c8061 !important;
  outline-offset: -3px !important;
}

body #menuCompanionPanel #companionPartyView > .companion-collection-summary {
  min-height: 0 !important;
  margin: 0 13px 8px !important;
  padding: 4px 8px !important;
  background: none !important;
  border: 0 !important;
  color: #a9b9bd !important;
  font-size: 9.5px !important;
  line-height: 14px !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-collection-card.support-active > b {
  color: #b9c9ff !important;
}

body #menuCompanionPanel .companion-detail-dialog {
  grid-template-rows: 220px auto auto 18px 135px auto 72px 42px !important;
  gap: 5px !important;
}

body #menuCompanionPanel .companion-detail-rarity {
  position: relative !important;
  z-index: 2 !important;
  min-height: 13px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

body #menuCompanionPanel .companion-detail-effects > span:nth-child(1) {
  grid-template-rows: max-content max-content !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 3px !important;
  padding: 0 18px !important;
}

body #menuCompanionPanel .companion-detail-effects > span:nth-child(2) {
  grid-template-rows: max-content max-content !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 3px !important;
  padding: 0 18px !important;
}

body #menuCompanionPanel .companion-detail-effects > span:nth-child(1) small,
body #menuCompanionPanel .companion-detail-effects > span:nth-child(1) b {
  transform: translateY(-1px) !important;
}

body #menuCompanionPanel .companion-detail-effects > span:nth-child(2) small,
body #menuCompanionPanel .companion-detail-effects > span:nth-child(2) b {
  transform: translateY(-1px) !important;
}

body #menuCompanionPanel .companion-detail-growth {
  position: relative !important;
  z-index: 2 !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-detail-dust-growth {
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 96px 68px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 3px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 1px !important;
  border: 0 !important;
  background: none !important;
  color: #e8dfbd !important;
  text-shadow: 0 1px 2px #000 !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-detail-dust-owned {
  width: 100% !important;
  height: 48px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: 17px 22px !important;
  align-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  column-gap: 4px !important;
  padding: 4px 7px 5px !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  text-align: left !important;
}

body #menuCompanionPanel .companion-detail-dust-cost {
  width: 100% !important;
  height: 48px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: 17px 22px !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  box-sizing: border-box !important;
  padding: 4px 5px 5px !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-detail-dust-growth img {
  grid-row: 1 / 3 !important;
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}

body #menuCompanionPanel .companion-detail-dust-growth small {
  color: #c9c3ad !important;
  font-size: 10.4px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
}

body #menuCompanionPanel .companion-detail-dust-owned small {
  font-size: 9.2px !important;
  letter-spacing: -.3px !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-detail-dust-growth b {
  color: #f2e4b0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-detail-dust-growth em {
  color: inherit !important;
  font-style: normal !important;
}

body #menuCompanionPanel .companion-detail-dust-cost small {
  color: #c9c3ad !important;
  font-size: 9.2px !important;
  letter-spacing: -.3px !important;
  white-space: nowrap !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-detail-dust-owned b,
body #menuCompanionPanel .companion-detail-dust-cost b {
  color: #f2e4b0 !important;
  font-size: 13.5px !important;
}

body #menuCompanionPanel .companion-detail-dust-action {
  width: 100% !important;
  height: 48px !important;
  min-width: 0 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 0 9px 1px !important;
  border: 0 !important;
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
  background: transparent url("assets/generated/companion_growth_button_v8_1796000400000/companion-growth-forged-v8.png") center / 100% 112% no-repeat !important;
  text-align: center !important;
  text-shadow: 0 1px 2px #000 !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)) !important;
  transition: filter 100ms ease, transform 80ms ease !important;
  cursor: pointer !important;
}

body #menuCompanionPanel .companion-detail-dust-action b {
  color: #f5e8bd !important;
  font-size: 12.6px !important;
  font-weight: 900 !important;
  letter-spacing: -.15px !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-detail-dust-action:not(:disabled):hover {
  filter: brightness(1.16) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) !important;
}

body #menuCompanionPanel .companion-detail-dust-action:not(:disabled):focus-visible {
  filter: brightness(1.16) drop-shadow(0 0 3px rgba(225, 185, 110, .85)) !important;
}

body #menuCompanionPanel .companion-detail-dust-action:not(:disabled):active {
  transform: translateY(1px) !important;
  filter: brightness(.82) drop-shadow(0 1px 1px rgba(0, 0, 0, .55)) !important;
}

body #menuCompanionPanel .companion-detail-dust-action:disabled {
  opacity: .8 !important;
  filter: grayscale(.28) brightness(.82) !important;
  cursor: default !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-card,
  body #menuCompanionPanel .companion-summon-card.common,
  body #menuCompanionPanel .companion-summon-card.premium {
    height: 306px !important;
    min-height: 306px !important;
  }

  body #menuCompanionPanel .companion-summon-card.premium > .companion-mythic-pity-status {
    padding-inline: 5px !important;
  }

  body #menuCompanionPanel .companion-party-position {
    min-height: 86px !important;
    grid-template-columns: 38px minmax(0, 1fr) 60px !important;
    padding: 10px 18px 10px 12px !important;
  }

  body #menuCompanionPanel .companion-party-position > img {
    width: 38px !important;
    height: 42px !important;
  }

  body #menuCompanionPanel .companion-party-position > button {
    width: 60px !important;
  }

  body #menuCompanionPanel .companion-party-card {
    grid-template-columns: 38px minmax(0, 1fr) 60px !important;
    padding: 12px 18px 12px 12px !important;
  }

  body #menuCompanionPanel .companion-party-card > img {
    width: 38px !important;
  }

  body #menuCompanionPanel .companion-party-card-actions > button {
    width: 60px !important;
  }

  body #menuCompanionPanel .companion-party-position > button.companion-party-detail-trigger,
  body #menuCompanionPanel .companion-party-card > button.companion-party-detail-trigger {
    right: 83px !important;
  }

  body #menuCompanionPanel .companion-party-note {
    min-height: 44px !important;
    padding: 7px 12px !important;
  }

  body #menuCompanionPanel .companion-detail-dialog {
    grid-template-rows: 198px auto auto 18px 125px auto 68px 39px !important;
  }

  body #menuCompanionPanel .companion-detail-effects > span:nth-child(1) {
    padding: 0 16px !important;
  }

  body #menuCompanionPanel .companion-detail-effects > span:nth-child(2) {
    padding: 0 16px !important;
  }

  body #menuCompanionPanel .companion-detail-dust-growth {
    height: 68px !important;
    min-height: 68px !important;
    grid-template-columns: 92px 66px minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 0 1px !important;
  }

  body #menuCompanionPanel .companion-detail-dust-growth small {
    font-size: 9.6px !important;
  }

  body #menuCompanionPanel .companion-detail-dust-owned small {
    font-size: 9px !important;
  }

  body #menuCompanionPanel .companion-detail-dust-growth b {
    font-size: 13.5px !important;
  }

  body #menuCompanionPanel .companion-detail-dust-cost small {
    font-size: 9px !important;
  }

  body #menuCompanionPanel .companion-detail-dust-cost b {
    font-size: 13.5px !important;
  }

  body #menuCompanionPanel .companion-detail-dust-action b {
    font-size: 12.4px !important;
  }
}

/* The common card switches its header rows at this width, not by height. */
@media (max-width: 375px) {
  body #menuCompanionPanel .companion-summon-card.premium {
    grid-template-rows: 88px 17px 33px minmax(0, 1fr) !important;
  }
}


/* SOURCE: ui/styles/companions/companion-detail-controls-v16.css */
/* Detail controls only. Preserve the companion art, ability wells and roster. */
body #menuCompanionPanel .companion-detail-dialog {
  height: 768px !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 28px) !important;
  grid-template-rows: 220px auto auto 18px 135px auto 104px 44px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)) !important;
}

/* Keep the existing tiny diamonds stable across cached CSS encodings. */
body #menuCompanionPanel .companion-detail-state::before,
body #menuCompanionPanel .companion-detail-state::after {
  content: "\25C6" !important;
}

/* The artwork stays 36px; only the hit area grows to 44px. */
body #menuCompanionPanel button.companion-detail-close {
  top: 10px !important;
  right: 10px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 50% !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  overflow: visible !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer !important;
}

body #menuCompanionPanel button.companion-detail-close::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: brightness(.94) saturate(.8) drop-shadow(0 2px 2px #000) !important;
  transform: none !important;
  transition: transform 80ms ease, filter 80ms ease !important;
  pointer-events: none !important;
}

body #menuCompanionPanel button.companion-detail-close::after,
body #menuCompanionPanel button.companion-detail-dust-action::after {
  content: none !important;
}

body #menuCompanionPanel button.companion-detail-close:focus-visible::before {
  filter: brightness(1.12) saturate(.7) drop-shadow(0 0 2px #cbb887) !important;
}

body #menuCompanionPanel button.companion-detail-close:active::before {
  transform: translateY(1px) scale(.86) !important;
  filter: brightness(.65) saturate(.65) !important;
}

/* Two information wells above one wide action, not three competing buttons. */
body #menuCompanionPanel .companion-detail-dust-growth {
  height: 104px !important;
  min-height: 104px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: 48px 48px !important;
  align-content: start !important;
  align-items: start !important;
  gap: 8px !important;
  padding: 0 !important;
}

body #menuCompanionPanel .companion-detail-dust-owned,
body #menuCompanionPanel .companion-detail-dust-cost {
  position: relative !important;
  display: block !important;
  height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body #menuCompanionPanel .companion-detail-dust-owned > img {
  position: absolute !important;
  left: 9px !important;
  top: 10px !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}

body #menuCompanionPanel .companion-detail-dust-owned > small,
body #menuCompanionPanel .companion-detail-dust-owned > b {
  position: absolute !important;
  left: 38px !important;
  right: 7px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-detail-dust-cost > small,
body #menuCompanionPanel .companion-detail-dust-cost > b {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-detail-dust-owned > small,
body #menuCompanionPanel .companion-detail-dust-cost > small {
  top: 7px !important;
  height: 14px !important;
  font-size: 10.5px !important;
  line-height: 14px !important;
  color: #c9c3af !important;
}

body #menuCompanionPanel .companion-detail-dust-owned > b,
body #menuCompanionPanel .companion-detail-dust-cost > b {
  top: 23px !important;
  height: 18px !important;
  font-size: 15px !important;
  line-height: 18px !important;
}

body #menuCompanionPanel button.companion-detail-dust-action {
  position: relative !important;
  isolation: isolate;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-image: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

body #menuCompanionPanel button.companion-detail-dust-action::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-quiet.png") center / 100% 100% no-repeat !important;
  filter: brightness(.96) saturate(.45) !important;
  transition: transform 80ms ease, filter 80ms ease !important;
  pointer-events: none !important;
}

body #menuCompanionPanel button.companion-detail-dust-action > b {
  font-size: 13.5px !important;
  line-height: 18px !important;
  transform: translateY(1px) !important;
}

body #menuCompanionPanel button.companion-detail-dust-action:not(:disabled):hover::before,
body #menuCompanionPanel button.companion-detail-dust-action:not(:disabled):focus-visible::before {
  filter: brightness(1.15) saturate(.6) drop-shadow(0 0 2px #8b7953) !important;
}

body #menuCompanionPanel button.companion-detail-dust-action:not(:disabled):active::before {
  transform: translateY(1px) scale(.985) !important;
  filter: brightness(.7) saturate(.35) !important;
}

body #menuCompanionPanel button.companion-detail-dust-action:disabled::before {
  filter: brightness(.6) saturate(.12) !important;
}

body #menuCompanionPanel button.companion-detail-dust-action:disabled > b {
  color: #c3b9a6 !important;
}

/* Optical centering of the unowned label inside this painted button only. */
body #menuCompanionPanel button.companion-detail-dust-action[data-unowned="true"] > b {
  transform: translateY(-1px) !important;
}

body #menuCompanionPanel button.companion-detail-return {
  display: grid !important;
  place-items: center !important;
  padding: 0 12px 1px !important;
  font-size: 11.5px !important;
  border: 0 !important;
  border-image: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform 80ms ease, filter 80ms ease !important;
}

body #menuCompanionPanel button.companion-detail-return:focus-visible {
  filter: brightness(1.12) saturate(.5) drop-shadow(0 0 2px #a69062) !important;
}

body #menuCompanionPanel button.companion-detail-return:active {
  transform: translateY(1px) scale(.98) !important;
  filter: brightness(.65) saturate(.5) !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-detail-dialog {
    height: 744px !important;
    grid-template-rows: 198px auto auto 18px 125px auto 104px 42px !important;
  }

  body #menuCompanionPanel button.companion-detail-close {
    top: 7px !important;
    right: 7px !important;
  }

  body #menuCompanionPanel button.companion-detail-close::before {
    inset: 5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #menuCompanionPanel button.companion-detail-close::before,
  body #menuCompanionPanel button.companion-detail-dust-action::before,
  body #menuCompanionPanel button.companion-detail-return {
    transition: none !important;
  }
}


/* SOURCE: ui/styles/companions/companion-roster-hierarchy-v17.css */
/* Roster hierarchy only: keep the accepted detail and lower roster cells. */
body #menuCompanionPanel .companion-menu-tabs {
  height: 40px !important;
  min-height: 40px !important;
  gap: 6px !important;
  overflow: visible !important;
}

body #menuCompanionPanel .companion-menu-tabs > button,
body #menuCompanionPanel .companion-menu-tabs > button:not(.active),
body #menuCompanionPanel .companion-menu-tabs > button.active,
body #menuCompanionPanel .companion-menu-tabs > button:active {
  position: relative !important;
  isolation: isolate !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 1px 12px 0 !important;
  border: 0 !important;
  border-image: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  color: #a9a79c !important;
  font-size: 11.5px !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px #000 !important;
  -webkit-tap-highlight-color: transparent;
}

body #menuCompanionPanel .companion-menu-tabs > button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border: 0 !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-quiet.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: brightness(.68) saturate(.15) !important;
  transform: none !important;
  transition: filter 90ms ease, transform 90ms ease !important;
  pointer-events: none !important;
}

body #menuCompanionPanel .companion-menu-tabs > button::after {
  content: none !important;
}

body #menuCompanionPanel .companion-menu-tabs > button.active {
  color: #f2e4b6 !important;
}

body #menuCompanionPanel .companion-menu-tabs > button.active::before {
  filter: brightness(1.3) saturate(.5) sepia(.15) !important;
}

body #menuCompanionPanel .companion-menu-tabs > button:focus-visible::before {
  filter: brightness(1.25) saturate(.4) drop-shadow(0 0 2px #9b875f) !important;
}

body #menuCompanionPanel .companion-menu-tabs > button:active::before {
  transform: translateY(1px) scale(.985) !important;
  filter: brightness(.7) saturate(.25) !important;
}

/* A distinct forged plaque for each equipped role, with its own header. */
body #menuCompanionPanel .companion-party-slot {
  gap: 8px !important;
}

body #menuCompanionPanel .companion-party-position {
  isolation: isolate !important;
  min-height: 128px !important;
  padding: 34px 36px 18px 32px !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-party-position::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: transparent url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-quiet.png") center / 100% 100% no-repeat !important;
  filter: brightness(1.07) saturate(.3) sepia(.12) !important;
  pointer-events: none !important;
}

body #menuCompanionPanel .companion-party-position.support::before {
  filter: brightness(.87) saturate(.08) !important;
}

body #menuCompanionPanel .companion-party-position.empty::before {
  filter: brightness(.56) saturate(0) !important;
}

body #menuCompanionPanel .companion-party-position > span > small {
  position: absolute !important;
  left: 38px !important;
  right: 39px !important;
  top: 25px !important;
  height: 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 14px !important;
  color: #caba8f !important;
}

body #menuCompanionPanel .companion-party-position.support > span > small {
  color: #b4bac0 !important;
}

/* Each plaque has independent anchors; a wrapped effect cannot lift its name. */
body #menuCompanionPanel .companion-party-position.primary {
  --equipped-image-top: 44px;
  --equipped-name-top: 45px;
  --equipped-effect-top: 73px;
}

body #menuCompanionPanel .companion-party-position.support {
  --equipped-image-top: 44px;
  --equipped-name-top: 45px;
  --equipped-effect-top: 73px;
}

body #menuCompanionPanel .companion-party-position > img {
  position: absolute !important;
  left: 32px !important;
  top: var(--equipped-image-top) !important;
}

body #menuCompanionPanel .companion-party-position > span {
  display: block !important;
}

body #menuCompanionPanel .companion-party-position > span > strong {
  position: absolute !important;
  top: var(--equipped-name-top) !important;
  left: 81px !important;
  right: 105px !important;
  margin: 0 !important;
}

body #menuCompanionPanel .companion-party-position > span > em {
  position: absolute !important;
  top: var(--equipped-effect-top) !important;
  left: 81px !important;
  right: 105px !important;
  margin: 0 !important;
}

body #menuCompanionPanel .companion-party-position > button[data-party-clear],
body #menuCompanionPanel .companion-party-position > button[data-support-clear] {
  position: absolute !important;
  top: 49px !important;
  right: 36px !important;
}

body #menuCompanionPanel .companion-party-position.empty > span > strong,
body #menuCompanionPanel .companion-party-position.empty > span > em {
  right: 36px !important;
}

body #menuCompanionPanel .companion-party-role-label {
  font-weight: 900 !important;
}

body #menuCompanionPanel .companion-party-role-strength {
  color: #a6a9aa !important;
  font-size: 9px !important;
}

/* Keep the detail hit area separate from the inset clear control. */
body #menuCompanionPanel .companion-party-position > button.companion-party-detail-trigger {
  right: 108px !important;
}

/* Separate equipped slots from the collection without a competing text card. */
body #menuCompanionPanel .companion-party-divider {
  height: 32px !important;
  min-height: 32px !important;
  margin: 1px 20px 3px !important;
  background: transparent url("assets/generated/unlock_showcase_item_v2_1792936800300/item-unlock-divider-alpha.png") center / 100% auto no-repeat !important;
  filter: brightness(.8) saturate(.28) !important;
  pointer-events: none !important;
}

body #menuCompanionPanel .companion-party-note[hidden] {
  display: none !important;
}

body #menuCompanionPanel .companion-party-note:not([hidden]) {
  min-height: 0 !important;
  margin: 0 18px 6px !important;
  padding: 3px 8px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #d7c6a9 !important;
  font-size: 10.5px !important;
  line-height: 15px !important;
  text-align: center !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-party-position {
    padding-left: 30px !important;
    padding-right: 34px !important;
  }

  body #menuCompanionPanel .companion-party-position > span > small {
    left: 36px !important;
    right: 37px !important;
  }

  body #menuCompanionPanel .companion-party-position > img {
    left: 30px !important;
  }

  body #menuCompanionPanel .companion-party-position > span > strong,
  body #menuCompanionPanel .companion-party-position > span > em {
    left: 73px !important;
    right: 101px !important;
  }

  body #menuCompanionPanel .companion-party-position > button[data-party-clear],
  body #menuCompanionPanel .companion-party-position > button[data-support-clear] {
    right: 34px !important;
  }

  body #menuCompanionPanel .companion-party-position > button.companion-party-detail-trigger {
    right: 104px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #menuCompanionPanel .companion-menu-tabs > button::before {
    transition: none !important;
  }
}


/* SOURCE: ui/styles/menus/store-purchase-confirm-v1.css */
/* Shared store and lobby-offer purchase confirmation on an authored game frame. */

.store-purchase-confirm-panel {
  position: fixed;
  inset: 0;
  z-index: 3400;
  display: none;
  place-items: center;
  box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top)) 9px max(12px, env(safe-area-inset-bottom));
  background: rgba(0, 4, 10, .82);
  backdrop-filter: blur(2px);
}

.store-purchase-confirm-panel.active {
  display: grid;
}

.store-purchase-confirm-card {
  position: relative;
  box-sizing: border-box;
  width: min(344px, calc(100vw - 18px));
  aspect-ratio: 1448 / 1086;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url("assets/generated/item_sale_confirm_gothic_1790601600014/item-sale-confirm-frame-alpha.png") center / 100% 100% no-repeat;
  color: #eaf4f7;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .82));
}

.store-purchase-confirm-card h2 {
  position: absolute;
  top: 4.3%;
  left: 19%;
  width: 62%;
  height: 12.5%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0 4px 1px;
  color: #f4df9d;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 3px #000, 0 0 7px rgba(62, 174, 229, .18);
}

.store-purchase-confirm-product {
  position: absolute;
  top: 23.2%;
  left: 12.2%;
  width: 75.6%;
  height: 32.8%;
  display: grid;
  grid-template-columns: 29% minmax(0, 1fr);
  align-items: center;
  box-sizing: border-box;
}

.store-purchase-confirm-product > img {
  width: 62px;
  height: 62px;
  max-width: 86%;
  max-height: 82%;
  justify-self: center;
  object-fit: contain;
  transform: translateX(8px);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .78)) drop-shadow(0 0 7px rgba(68, 180, 231, .2));
}

.store-purchase-confirm-product > span {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  justify-items: center;
  gap: 4px;
  box-sizing: border-box;
  padding: 9px 10px 8px 12px;
  text-align: center;
}

.store-purchase-confirm-product strong,
.store-purchase-confirm-product small,
.store-purchase-confirm-product b {
  display: block;
  min-width: 0;
  margin: 0;
}

.store-purchase-confirm-product strong {
  max-width: 100%;
  color: #fff0b0;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.12;
  word-break: keep-all;
  text-shadow: 0 2px 2px #000;
}

.store-purchase-confirm-product small {
  align-self: center;
  color: #c0d7df;
  font-size: 8.4px;
  font-weight: 800;
  line-height: 1.27;
  word-break: keep-all;
  text-shadow: 0 1px 2px #000;
}

.store-purchase-confirm-product b {
  color: #ffe08a;
  font-size: 13.5px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 2px #000, 0 0 7px rgba(255, 196, 70, .18);
}

.store-purchase-confirm-card > p {
  position: absolute;
  top: 59.3%;
  left: 12.2%;
  width: 75.6%;
  height: 11.7%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0 17px 1px;
  color: #c8d8dd;
  font-size: 9.3px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
  text-shadow: 0 1px 2px #000;
}

.store-purchase-confirm-actions {
  position: absolute;
  top: 74.7%;
  left: 12.2%;
  width: 75.6%;
  height: 14.7%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.8%;
}

.store-purchase-confirm-actions button {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 12px 1px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #cbd9de;
  font-family: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 2px #000;
  outline: 0;
  box-shadow: none;
  touch-action: manipulation;
}

#storePurchaseConfirmAcceptButton {
  color: #fff0ad;
}

.store-purchase-confirm-actions button:focus-visible {
  color: #fff5c8;
  text-shadow: 0 2px 2px #000, 0 0 7px rgba(75, 194, 240, .5);
}

.store-purchase-confirm-actions button:active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.78);
}

@media (max-width: 370px) {
  .store-purchase-confirm-card {
    width: min(336px, calc(100vw - 16px));
  }

  .store-purchase-confirm-card h2 {
    font-size: 15px;
  }

  .store-purchase-confirm-product > img {
    width: 58px;
    height: 58px;
  }

  .store-purchase-confirm-product > span {
    gap: 3px;
    padding-inline: 10px 8px;
  }

  .store-purchase-confirm-product strong {
    font-size: 12.4px;
  }

  .store-purchase-confirm-product small {
    font-size: 8px;
  }

  .store-purchase-confirm-product b {
    font-size: 13px;
  }
}


/* SOURCE: ui/styles/rewards/unlock-showcase-clean-v8.css */
/* Item unlock V8: transparent outer silhouette and header-bay meta label. */

.unlock-showcase.item-unlock .unlock-card {
  border: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/generated/unlock_showcase_item_v8_1795688400000/item-unlock-frame-alpha.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.72)) !important;
}

.unlock-showcase.item-unlock .unlock-card::before,
.unlock-showcase.item-unlock .unlock-card::after {
  content: none !important;
  display: none !important;
}

.unlock-showcase.item-unlock .unlock-card > .label {
  position: relative !important;
  z-index: 6 !important;
  top: 0 !important;
  transform: translateY(-116px) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .unlock-showcase.item-unlock .unlock-card > .label {
    transform: translateY(-113px) !important;
  }
}


/* SOURCE: ui/styles/rewards/unlock-showcase-title-v9.css */
/* Item unlock title V9.
   Reuse the approved reward title plaque and register this one label to the
   painted top-header recess independently from the icon and item name. */

html body #unlockShowcase.unlock-showcase.item-unlock .unlock-card > #unlockShowcaseMeta.label {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 6 !important;
  top: 0 !important;
  width: 216px !important;
  min-width: 216px !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  margin: 0 !important;
  padding: 0 34px 1px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/reward_skill_integration_1793023200102/reward-title-plaque.png") center / 100% 100% no-repeat !important;
  color: #ffe49a !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  text-align: center !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .82),
    0 0 8px rgba(255, 217, 111, .24) !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .52)) !important;
  transform: translateY(-108px) !important;
}

@media (max-width: 370px) {
  html body #unlockShowcase.unlock-showcase.item-unlock .unlock-card > #unlockShowcaseMeta.label {
    width: 210px !important;
    min-width: 210px !important;
    height: 37px !important;
    min-height: 37px !important;
    padding-inline: 32px !important;
    font-size: 12.7px !important;
    transform: translateY(-108px) !important;
  }
}


/* SOURCE: ui/styles/rewards/reward-result-clean-title-v10.css */
/* Reward-result V10: remove the painted title plaque and center the reward art
   in the circular medallion's visible interior. */
.unlock-showcase.reward-result .unlock-card {
  background-image: url("assets/generated/reward_result_clean_title_v9_1795861200000/reward-result-frame-clean-title-alpha.png") !important;
}

.unlock-showcase.reward-result[data-reward-type="coins"] .unlock-icon {
  left: 49.4% !important;
  top: 39.8% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.unlock-showcase.reward-result .unlock-card > strong {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* SOURCE: ui/styles/rewards/reward-result-streamlined-v11.css */
/* Reward-result V11: lower ornament density while preserving the game's
   black, aged-gold and restrained cyan fantasy material. */
.unlock-showcase.reward-result .unlock-card {
  background-image: url("assets/generated/reward_result_streamlined_v11_1795882800000/reward-result-frame-streamlined-alpha.png") !important;
}

.unlock-showcase.reward-result[data-reward-type="coins"] .unlock-icon {
  left: 49.3% !important;
  top: 38.3% !important;
  width: 100px !important;
  height: 100px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.unlock-showcase.reward-result .unlock-card > strong {
  left: 15% !important;
  right: 15% !important;
  top: 62.2% !important;
  height: 5.8% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 17px !important;
}

.unlock-showcase.reward-result .unlock-card > p {
  top: 70.4% !important;
  height: 11.2% !important;
}

.unlock-showcase.reward-result .unlock-confirm-button {
  bottom: 6.3% !important;
  height: 6.6% !important;
}


/* SOURCE: ui/styles/rewards/reward-result-modern-slab-v12.css */
/* Reward-result V12: a restrained forged slab with no circular medallion,
   classical columns, crown, or gemstone ornaments. */
.unlock-showcase.reward-result .unlock-card {
  background-image: url("assets/generated/reward_result_modern_slab_v12_1795886400000/reward-result-modern-slab-alpha.png") !important;
}

.unlock-showcase.reward-result[data-reward-type="coins"] .unlock-icon {
  left: 50% !important;
  top: 37.2% !important;
  width: 108px !important;
  height: 108px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.unlock-showcase.reward-result .unlock-card > strong {
  left: 14% !important;
  right: 14% !important;
  top: 61.2% !important;
  height: 6.2% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.unlock-showcase.reward-result .unlock-card > p {
  top: 72.7% !important;
  height: 10.9% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 8px !important;
  line-height: 1 !important;
}

.unlock-showcase.reward-result .unlock-confirm-button,
.unlock-showcase.reward-result.effect-smooth-icon .unlock-confirm-button,
.unlock-showcase.reward-result:is([data-reward-type="purgeF"], [data-reward-type="purgeF3"], [data-reward-type="riskPurge"]) .unlock-confirm-button {
  left: 29% !important;
  right: 29% !important;
  bottom: 6.9% !important;
  height: 6.2% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 0 2px !important;
  line-height: 1 !important;
  transform: none !important;
}


/* SOURCE: ui/styles/inventory/reward-result-fusion-language-v13.css */
/* Reward-result V13: reuse the exact promotion/fusion visual language instead
   of maintaining a standalone reward-popup frame. */
.unlock-showcase.reward-result .unlock-card {
  width: min(332px, calc(100vw - 16px)) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 356 / 468 !important;
  overflow: hidden !important;
  background: transparent url("assets/generated/fusion_secret_frame_alpha_v7_1793710800000/fusion-secret-frame-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.unlock-showcase.reward-result .unlock-card > .label {
  display: none !important;
}

.unlock-showcase.reward-result .unlock-icon,
.unlock-showcase.reward-result.effect-smooth-icon .unlock-icon,
.unlock-showcase.reward-result[data-reward-type="coins"] .unlock-icon {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 50% !important;
  top: 39.6% !important;
  z-index: 2 !important;
  width: 272px !important;
  height: 142px !important;
  margin: 0 !important;
  padding: 26px 86px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") center / 100% 100% no-repeat !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .58)) !important;
}

.unlock-showcase.reward-result .unlock-card > strong {
  box-sizing: border-box !important;
  left: 12% !important;
  right: 12% !important;
  top: 4.8% !important;
  height: 9.2% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 8px 2px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff0b5 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.unlock-showcase.reward-result .unlock-card > p,
.unlock-showcase.reward-result.effect-smooth-icon .unlock-card > p,
.unlock-showcase.reward-result[data-reward-type="scrap"] .unlock-card > p,
.unlock-showcase.reward-result[data-reward-type="scrapBig"] .unlock-card > p {
  box-sizing: border-box !important;
  left: 12% !important;
  right: 12% !important;
  top: 60.2% !important;
  width: auto !important;
  height: 14.7% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 26px 2px !important;
  overflow: hidden !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  color: #f7e9b7 !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  text-align: center !important;
}

.unlock-showcase.reward-result .unlock-confirm-button,
.unlock-showcase.reward-result.effect-smooth-icon .unlock-confirm-button,
.unlock-showcase.reward-result:is([data-reward-type="scrap"], [data-reward-type="scrapBig"], [data-reward-type="purgeF"], [data-reward-type="purgeF3"], [data-reward-type="riskPurge"]) .unlock-confirm-button {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 6.2% !important;
  z-index: 3 !important;
  width: 188px !important;
  height: 46px !important;
  min-width: 188px !important;
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 26px 4px !important;
  border: 0 !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / 100% 100% no-repeat !important;
  color: #fff0b5 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .68)) !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 370px) {
  .unlock-showcase.reward-result .unlock-icon,
  .unlock-showcase.reward-result.effect-smooth-icon .unlock-icon,
  .unlock-showcase.reward-result[data-reward-type="coins"] .unlock-icon {
    width: 264px !important;
    height: 138px !important;
    padding: 25px 82px !important;
  }

  .unlock-showcase.reward-result .unlock-confirm-button,
  .unlock-showcase.reward-result.effect-smooth-icon .unlock-confirm-button,
  .unlock-showcase.reward-result:is([data-reward-type="scrap"], [data-reward-type="scrapBig"], [data-reward-type="purgeF"], [data-reward-type="purgeF3"], [data-reward-type="riskPurge"]) .unlock-confirm-button {
    width: 180px !important;
    min-width: 180px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 12.5px !important;
  }
}


/* SOURCE: ui/styles/rewards/reward-result-title-plate-v14.css */
/* Reward-result V14: give the reward title its own calm fusion-style painted bay.
   Icon, amount, and confirm controls stay on their accepted V13 positions. */
.unlock-showcase.reward-result .unlock-card > strong {
  left: 50% !important;
  right: auto !important;
  top: 2.8% !important;
  width: 236px !important;
  height: 55px !important;
  padding: 0 24px 3px !important;
  background: transparent url("assets/generated/fusion_secret_result_v4_1793700000000/secret-name-plate-calm-alpha.png") center / 100% 100% no-repeat !important;
  font-size: 17px !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 370px) {
  .unlock-showcase.reward-result .unlock-card > strong {
    width: 228px !important;
    height: 54px !important;
    font-size: 16.5px !important;
  }
}


/* SOURCE: ui/styles/rewards/reward-result-purge-compensation-v16.css */
/* The substitution result needs its own readable explanation, not tiny card copy.
   Keep the accepted fusion frame, icon bay, title plate and confirm button. */
.unlock-showcase.reward-result[data-reward-type="purge-compensation"] .unlock-card > p {
  top: 59% !important;
  height: 23% !important;
  left: 10% !important;
  right: 10% !important;
  padding: 8px 14px 10px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  white-space: pre-line !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}


/* SOURCE: ui/styles/inventory/completion-fusion-suite-v15.css */
/* Three completion popups only. Daily challenge retains its accepted design.
   Each painted bay has a mode-specific optical registration below. */
#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate),
#saleResultPanel {
  padding: 10px !important;
  background: rgba(2, 5, 11, .78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-card,
#saleResultPanel .sale-result-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(356px, calc(100vw - 20px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 356 / 468 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_secret_frame_alpha_v7_1793710800000/fusion-secret-frame-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-card::before,
#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-card::after,
#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) :is(.unlock-portal, .unlock-chest, .unlock-showcase-divider-art),
#saleResultPanel .sale-result-card::before,
#saleResultPanel .sale-result-card::after {
  display: none !important;
  content: none !important;
}

#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-card > .label,
#saleResultPanel .sale-result-kicker {
  position: absolute !important;
  box-sizing: border-box !important;
  left: 15% !important;
  right: 15% !important;
  top: var(--completion-header-top) !important;
  height: 8.4% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 4px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #fff0b5 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
}

#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-icon,
#saleResultPanel .sale-result-reward > img {
  position: absolute !important;
  box-sizing: border-box !important;
  left: var(--completion-art-x) !important;
  top: var(--completion-art-top) !important;
  z-index: 2 !important;
  width: 80% !important;
  height: 31% !important;
  margin: 0 !important;
  padding: var(--completion-art-padding) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") center / 100% 100% no-repeat !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  transform: translateX(-50%) !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-card > strong,
#saleResultPanel #saleResultTitle {
  position: absolute !important;
  box-sizing: border-box !important;
  left: 10% !important;
  right: 10% !important;
  top: var(--completion-name-top) !important;
  width: auto !important;
  max-width: none !important;
  height: 14.4% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 18px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #fff0b5 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  text-shadow: 0 2px 2px #000 !important;
}

/* Plain explanatory copy: no CSS rectangle, rule, translucent fill, or inset. */
#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-card > p,
#saleResultPanel .sale-result-bonus {
  position: absolute !important;
  box-sizing: border-box !important;
  left: 12% !important;
  right: 12% !important;
  top: var(--completion-copy-top) !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 13.8% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #dce8ed !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  white-space: pre-line !important;
  text-wrap: balance !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-shadow: 0 2px 2px #000 !important;
}

#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-confirm-button,
#saleResultPanel .sale-result-close {
  position: absolute !important;
  box-sizing: border-box !important;
  left: 50% !important;
  right: auto !important;
  bottom: 6.2% !important;
  top: auto !important;
  z-index: 3 !important;
  width: 188px !important;
  min-width: 188px !important;
  height: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 26px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #fff0b5 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
  transform: translateX(-50%) !important;
  filter: none !important;
  cursor: pointer;
}

#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-confirm-button:is(:hover, :focus-visible),
#saleResultPanel .sale-result-close:is(:hover, :focus-visible) {
  outline: 0 !important;
  filter: brightness(1.12) !important;
}
#unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-confirm-button:active,
#saleResultPanel .sale-result-close:active {
  transform: translate(-50%, 1px) !important;
  filter: brightness(.86) !important;
}

#unlockShowcase.boss-cache,
#unlockShowcase.boss-cache-jackpot {
  --completion-header-top: 5.2%;
  --completion-art-x: 50%;
  --completion-art-top: 19%;
  --completion-art-padding: 8px 66px 10px;
  --completion-name-top: 53%;
  --completion-copy-top: 68.5%;
}
#unlockShowcase.deep-gate {
  --completion-header-top: 5.2%;
  --completion-art-x: 50%;
  --completion-art-top: 19%;
  --completion-art-padding: 18px 66px 18px;
  --completion-name-top: 53%;
  --completion-copy-top: 68.5%;
}
#saleResultPanel {
  --completion-header-top: 5.2%;
  --completion-art-x: 50%;
  --completion-art-top: 19%;
  --completion-art-padding: 12px 66px 6px;
  --completion-name-top: 53%;
  --completion-copy-top: 76%;
}
#saleResultPanel .sale-result-reward {
  position: static !important;
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
#saleResultPanel .sale-result-reward > span {
  position: absolute !important;
  left: 12% !important;
  right: 12% !important;
  top: 69.5% !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
  text-align: center !important;
}
#saleResultPanel #saleResultCount,
#saleResultPanel .sale-result-bonus[hidden] { display: none !important; }
#saleResultPanel #saleResultValue {
  color: #fff0b5 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}
#saleResultPanel .sale-result-bonus {
  height: 7% !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #bad0d8 !important;
}

@media (max-width: 370px) {
  #unlockShowcase:is(.boss-cache, .boss-cache-jackpot, .deep-gate) .unlock-confirm-button,
  #saleResultPanel .sale-result-close {
    width: 180px !important;
    min-width: 180px !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 12.5px !important;
  }
  #unlockShowcase.deep-gate .unlock-card > strong,
  #saleResultPanel #saleResultTitle { font-size: 17px !important; }
}


/* SOURCE: ui/styles/rewards/run-unlock-results-v1.css */
/* Result entry points use their existing painted bays; no extra surface. */
#endPanel .end-text > .result-unlock-summary {
  position: absolute !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #fff0bb !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#endPanel .result-unlock-summary::before,
#endPanel .result-unlock-summary::after { content: none !important; }
#endPanel .result-unlock-summary:disabled { opacity: .65 !important; cursor: default; }
#endPanel .result-unlock-summary:not(:disabled):hover { filter: brightness(1.2); }
#endPanel .result-unlock-summary:focus-visible { outline: none; filter: brightness(1.25); }
#endPanel .result-unlock-summary:not(:disabled):active > * { transform: translateY(1px); filter: brightness(.8); }
#endPanel .result-unlock-summary > * { margin: 0 !important; padding: 0 !important; font-style: normal !important; }

/* Victory: the narrow authored progress rail has its own optical position. */
#endPanel.clear .end-text > .result-unlock-summary {
  left: 9.2% !important;
  right: 9.2% !important;
  top: calc(56.7% - 22px) !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 12px 1px !important;
}
#endPanel.clear .result-unlock-heading { font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.2 !important; }
#endPanel.clear .result-unlock-count { font-size: 13px !important; font-weight: 900 !important; line-height: 1.2 !important; color: #a6e0f1 !important; }
#endPanel.clear .result-unlock-view { font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #d9caa5 !important; }

/* Defeat: use only the left bay beside best equipment. */
#endPanel:is(.defeat, .victory) .end-text > .result-unlock-summary {
  left: 7.3% !important;
  width: 42.7% !important;
  top: 48.5% !important;
  height: 14% !important;
  display: grid !important;
  grid-template-rows: 18px 28px 16px !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 4px !important;
  padding: 0 8px !important;
}
#endPanel:is(.defeat, .victory) .result-unlock-heading { font-size: 12px !important; font-weight: 800 !important; line-height: 18px !important; color: #b9c9ed !important; }
#endPanel:is(.defeat, .victory) .result-unlock-count { font-size: 23px !important; font-weight: 900 !important; line-height: 28px !important; }
#endPanel:is(.defeat, .victory) .result-unlock-view { font-size: 11px !important; font-weight: 700 !important; line-height: 16px !important; color: #ceba8e !important; }
#endPanel:is(.defeat, .victory) .result-unlock-summary:disabled { grid-template-rows: 18px auto !important; row-gap: 7px !important; }
#endPanel:is(.defeat, .victory) .result-unlock-summary:disabled .result-unlock-heading { font-size: 12.2px !important; font-weight: 900 !important; }
#endPanel:is(.defeat, .victory) .result-unlock-summary:disabled .result-unlock-count { font-size: 11.2px !important; font-weight: 1000 !important; line-height: 1.16 !important; }
#endPanel:is(.defeat, .victory) .result-unlock-summary:disabled .result-unlock-view { display: none !important; }

/* Empty result messages share the stat wells' palette, not a disabled-action
   fade. Keep the disabled behavior and all accepted geometry unchanged. */
#endPanel:is(.defeat, .victory) .result-unlock-summary:disabled { opacity: 1 !important; }
#endPanel:is(.defeat, .victory) .result-unlock-summary:disabled .result-unlock-heading,
#endPanel:is(.defeat, .victory) .result-best-item.empty > .result-best-heading {
  color: #aebdff !important;
  text-shadow: none !important;
}
#endPanel:is(.defeat, .victory) .result-unlock-summary:disabled .result-unlock-count,
#endPanel:is(.defeat, .victory) .result-best-item.empty > .result-best-copy > strong {
  color: #f6e8c9 !important;
  text-shadow: 0 1px 2px #000 !important;
}

.run-unlock-panel {
  position: fixed;
  inset: 0;
  z-index: 1600;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(2, 5, 11, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.run-unlock-panel.active { display: flex; }
.run-unlock-card {
  position: relative;
  width: min(356px, calc(100vw - 24px));
  height: min(624px, calc(100dvh - 32px));
  box-sizing: border-box;
  overflow: hidden;
  background: transparent url("assets/generated/fusion_secret_frame_alpha_v7_1793710800000/fusion-secret-frame-alpha.png") center / 100% 100% no-repeat;
}
.run-unlock-panel[data-unlock-count="1"] .run-unlock-card { height: min(360px, calc(100dvh - 32px)); }
.run-unlock-panel[data-unlock-count="1"] #runUnlockTitle { font-size: 16px; transform: translateY(3px); }
.run-unlock-panel[data-unlock-count="2"] .run-unlock-card { height: min(452px, calc(100dvh - 32px)); }
.run-unlock-panel[data-unlock-count="3"] .run-unlock-card { height: min(540px, calc(100dvh - 32px)); }
.run-unlock-panel:is([data-unlock-count="1"], [data-unlock-count="2"], [data-unlock-count="3"]) .run-unlock-items {
  display: flex;
  flex-direction: column;
}
.run-unlock-panel:is([data-unlock-count="1"], [data-unlock-count="2"], [data-unlock-count="3"]) .run-unlock-entry { flex-shrink: 0; }
.run-unlock-panel:is([data-unlock-count="1"], [data-unlock-count="2"], [data-unlock-count="3"]) .run-unlock-entry:first-child { margin-top: auto; }
.run-unlock-panel:is([data-unlock-count="1"], [data-unlock-count="2"], [data-unlock-count="3"]) .run-unlock-entry:last-child { margin-bottom: auto; }
#runUnlockTitle {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 5.1%;
  height: 8.4%;
  margin: 0;
  padding: 0 2px 2px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  color: #fff0b5;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 2px #000;
}
.run-unlock-total {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 16%;
  margin: 0;
  color: #b5dce9;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.run-unlock-items {
  position: absolute;
  left: 9.8%;
  right: 9.8%;
  top: 20.5%;
  bottom: 17.5%;
  margin: 0;
  padding: 0 3px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #78684a transparent;
  list-style: none;
}
.run-unlock-entry {
  box-sizing: border-box;
  min-height: 92px;
  margin: 0 0 9px;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat;
}
.run-unlock-entry:last-child { margin-bottom: 0; }
.run-unlock-entry > img { width: 48px; height: 48px; object-fit: contain; image-rendering: auto; }
.run-unlock-copy { min-width: 0; display: grid; gap: 3px; text-align: left; }
.run-unlock-grade { color: #a7dced; font-size: 10px; font-weight: 800; line-height: 1.15; }
.run-unlock-copy > strong { color: #fff0b5; font-size: 13px; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; }
.run-unlock-source { color: #bac9cf; font-size: 10.5px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
#runUnlockCloseButton {
  position: absolute;
  left: 50%;
  bottom: 6.2%;
  width: 188px;
  height: 46px;
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 0 26px;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / 100% 100% no-repeat;
  color: #fff0b5;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 2px #000;
  transform: translateX(-50%);
  cursor: pointer;
  touch-action: manipulation;
}
#runUnlockCloseButton:focus-visible { outline: none; filter: brightness(1.15); }
#runUnlockCloseButton:active { transform: translate(-50%, 1px); filter: brightness(.8); }
@media (max-width: 370px) {
  #endPanel:is(.defeat, .victory) .result-unlock-summary:disabled .result-unlock-heading { font-size: 11.4px !important; }
  #endPanel:is(.defeat, .victory) .result-unlock-summary:disabled .result-unlock-count { font-size: 10.2px !important; }
  .run-unlock-entry { padding-inline: 14px; gap: 10px; }
  #runUnlockCloseButton { width: 180px; height: 44px; min-height: 44px; font-size: 12.5px; }
}


/* SOURCE: ui/styles/menus/lobby-beginner-journey-v1.css */
/* Compact novice quest card. The existing raster owns the visible surface. */

#menuLobbyPanel .lobby-beginner-journey {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: max(162px, calc(env(safe-area-inset-bottom) + 144px));
  box-sizing: border-box;
  width: calc(100% - 22px);
  aspect-ratio: 8 / 1;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) minmax(82px, auto);
  align-items: center;
  gap: 6px;
  padding: 5px 16px 5px 15px;
  border: 0;
  background: transparent url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-section-header.png") center / 100% 100% no-repeat;
  color: #e9f5f8;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .58));
  transform: translateX(-50%);
}

#menuLobbyPanel .lobby-beginner-journey[hidden] {
  display: none !important;
}

.lobby-beginner-journey > img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .82));
}

.lobby-beginner-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  align-content: center;
}

.lobby-beginner-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #75d8ed;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.lobby-beginner-head b {
  color: #92e6f2;
  font: inherit;
}

.lobby-beginner-head em {
  color: #fff0aa;
  font: inherit;
  font-style: normal;
}

.lobby-beginner-goal-row {
  min-width: 0;
  display: block;
}

.lobby-beginner-goal-row strong {
  min-width: 0;
  overflow: hidden;
  color: #fff1b7;
  font-size: 10.5px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .94);
  white-space: nowrap;
}

.lobby-beginner-reward {
  min-width: 70px;
  display: grid;
  gap: 2px;
  justify-items: end;
  align-content: center;
  padding-left: 7px;
  border-left: 1px solid rgba(77, 192, 215, .38);
}

.lobby-beginner-reward small {
  color: #72cada;
  font-size: 7px;
  font-weight: 850;
  line-height: 1;
}

.lobby-beginner-reward b {
  color: #f5dda0;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .92);
  white-space: nowrap;
}

.lobby-beginner-reward > span {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.lobby-beginner-reward img {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  object-fit: contain;
}

@media (max-width: 370px), (max-height: 760px) {
  #menuLobbyPanel .lobby-beginner-journey {
    bottom: max(151px, calc(env(safe-area-inset-bottom) + 135px));
    width: calc(100% - 18px);
    grid-template-columns: 21px minmax(0, 1fr) minmax(72px, auto);
    gap: 5px;
    padding-inline: 13px;
  }

  .lobby-beginner-journey > img {
    width: 21px;
    height: 21px;
  }

  .lobby-beginner-head { font-size: 7.4px; }
  .lobby-beginner-goal-row strong { font-size: 9.7px; }
  .lobby-beginner-reward { min-width: 65px; padding-left: 6px; }
  .lobby-beginner-reward small { font-size: 6.6px; }
  .lobby-beginner-reward b { font-size: 8.4px; }
}


/* SOURCE: ui/styles/shared/cloud-session-v1.css */
#cloudSessionPanel {
  position: fixed; inset: 0; z-index: 18000; display: none; place-items: center;
  padding: 12px; box-sizing: border-box; background: rgba(0, 4, 10, .8); backdrop-filter: blur(2px);
}
#cloudSessionPanel.active { display: grid; }
#cloudSessionPanel .cloud-session-card { width: min(342px, 100%); margin: 0; text-align: center; }
#cloudSessionPanel .cloud-session-message {
  box-sizing: border-box; min-height: 188px; padding: 34px 30px 30px;
  display: grid; align-content: center; gap: 15px;
  background: transparent url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-transparent.png") center / 100% 100% no-repeat;
}
#cloudSessionTitle { margin: 0; font-size: 17px; line-height: 1.35; color: #f1dc96; font-weight: 800; text-shadow: 0 2px 3px #000; }
#cloudSessionCopy { margin: 0; font-size: 12px; line-height: 1.65; color: #d1ddde; white-space: pre-line; word-break: keep-all; text-shadow: 0 1px 2px #000; }
#cloudSessionPanel .cloud-session-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: -10px 9px 0; }
#cloudSessionPanel .cloud-session-actions button {
  box-sizing: border-box; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 12px 1px;
  display: grid; place-items: center; border: 0; border-radius: 0; box-shadow: none;
  background: transparent url("assets/generated/settings_controls_v2_1793462400000/settings-action-button-v2-final.png") center / 100% 100% no-repeat;
  color: #dbe7e9; font-weight: 800; line-height: 1.2; font-family: inherit; font-size: 12px;
  text-shadow: 0 2px 2px #000; outline: none;
}
#cloudSessionPanel #cloudSessionAccept { color: #f4dfa4; }
#cloudSessionPanel .cloud-session-actions button:active { transform: translateY(1px) scale(.985); filter: brightness(.8); }
#cloudSessionPanel .cloud-session-actions button:focus-visible { filter: brightness(1.3); }
#cloudSessionPanel .cloud-session-actions button:disabled { opacity: .55; }
@media (max-width: 370px) {
  #cloudSessionTitle { font-size: 16px; }
  #cloudSessionCopy { font-size: 11.5px; }
}


/* SOURCE: ui/styles/shared/supply-depot-v1.css */
/* Supply is the third game tab. Reuse the accepted black-metal artwork. */
.phone-shell > .combat-panel + .tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.phone-shell > .panel[hidden] {
  display: none !important;
}

.phone-shell > .combat-panel + .tabs .tab-button:focus-visible {
  outline: 1px solid #d7c28b !important;
  outline-offset: -6px !important;
}

/* Five existing paid tools keep their compact size, now in one row. */
#capsulesPanel .chance-strip.board-actions {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: 38px !important;
  gap: 4px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex: 0 0 38px !important;
}

#capsulesPanel .chance-strip.board-actions .chance-button {
  min-width: 0 !important;
  height: 38px !important;
  padding-inline: 2px !important;
}

#supplyPanel.active {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  min-height: 0 !important;
  width: auto !important;
  margin: 0 3.25% 6px !important;
  padding: 18px 14px !important;
  border: 12px solid transparent !important;
  border-image: url("assets/generated/loot_bag_shell_clean_1790860800002/panel-frame-9slice-quiet-sides.png") 170 / 13px / 0 stretch !important;
  border-radius: 0 !important;
  background: rgba(2, 8, 14, .72) !important;
  box-shadow: none !important;
  filter: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

#supplyPanel .supply-depot-head {
  flex: 0 0 auto;
  padding: 0 6px;
}

#supplyPanel .supply-depot-head h2 {
  margin: 0 0 5px;
  color: #f3e2ad;
  font-size: 15px;
  line-height: 20px;
}

#supplyPanel .supply-depot-head p {
  margin: 0;
  color: #adb6bc;
  font-size: 10px;
  line-height: 15px;
}

#supplyPanel .supply-depot-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

#supplyPanel .supply-action {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 64px;
  min-height: 64px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-tab-button.png") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #f3e2ad;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#supplyPanel .supply-action > img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

#supplyPanel .supply-action-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#supplyPanel .supply-action-copy strong {
  color: #f3e2ad;
  font-size: 12px;
  font-weight: 900;
  line-height: 16px;
  text-shadow: 0 1px 2px #000;
}

#supplyPanel .supply-action-copy small {
  color: #b9c0c5;
  font-size: 9px;
  font-weight: 600;
  line-height: 13px;
  overflow-wrap: break-word;
}

#supplyPanel .supply-action-state {
  color: #e5d0a1;
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
}

#supplyPanel .supply-action:not(:disabled) .supply-action-state::before {
  content: "▶";
  margin-right: 4px;
  font-size: 8px;
}

#supplyPanel .supply-action:hover:not(:disabled) {
  filter: brightness(1.14);
}

#supplyPanel .supply-action:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(.86);
}

#supplyPanel .supply-action:focus-visible {
  outline: 1px solid #d7c28b;
  outline-offset: -7px;
}

#supplyPanel .supply-action:disabled {
  cursor: default;
  opacity: .62;
  filter: grayscale(.5);
}

@media (max-width: 370px) {
  #supplyPanel.active {
    padding-inline: 12px !important;
  }

  #supplyPanel .supply-action {
    grid-template-columns: 28px minmax(0, 1fr) 54px;
    gap: 8px;
    padding-inline: 14px;
  }

  #supplyPanel .supply-action > img {
    width: 28px;
    height: 28px;
  }
}


/* SOURCE: ui/styles/menus/tutorial-required-flow-v1.css */
/* Guide, not an item result: a flat game-native plate, guide masthead and
   a small underlined continuation control. Corners are never stretched. */
#tutorialPanel {
  box-sizing: border-box !important;
  width: min(344px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto 44px !important;
  gap: 3px !important;
  padding: 8px 9px 3px !important;
  border: 12px solid transparent !important;
  border-image: url("assets/generated/codex_detail_inner_v6_1793206800000/codex-info-panel-calm.png") 60 140 fill / 1 / 0 stretch !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .65)) !important;
  overflow: visible !important;
}

#tutorialPanel > div:first-child {
  align-self: start !important;
  overflow: visible !important;
}

#tutorialPanel .tutorial-guide-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  color: #a6b6ba !important;
  font-size: 10px !important;
  line-height: 14px !important;
  letter-spacing: .06em !important;
}
#tutorialPanel #tutorialProgress {
  display: inline-block !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: #c9bb91 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  line-height: 14px !important;
  letter-spacing: .025em !important;
  text-shadow: 0 1px 2px #000 !important;
}
#tutorialPanel #tutorialProgress::before {
  content: none !important;
  display: none !important;
}
#tutorialPanel[data-phase="battle"] #tutorialProgress::before { color: #e2bd65 !important; }
#tutorialPanel[data-phase="growth"] #tutorialProgress::before { color: #b39cff !important; }
#tutorialPanel[data-phase="tip"] #tutorialProgress::before { color: #aeb9be !important; }

#tutorialPanel #tutorialTitle {
  margin: 0 0 5px !important;
  color: #eedda8 !important;
  font-size: 15px !important;
  line-height: 18px !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 1px 2px #000 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* The first draw prompt is intentionally explanation-only; remove the title
   row without changing the painted guide plate or its surrounding layout. */
#tutorialPanel.tutorial-titleless #tutorialTitle {
  display: none !important;
}

#tutorialPanel #tutorialText {
  color: #deddd5 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 18px !important;
  letter-spacing: -.025em !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* A guide continuation, deliberately distinct from the large loot confirm. */
#tutorialPanel .tutorial-actions {
  height: 44px !important;
  min-height: 44px !important;
  grid-template-columns: 98px !important;
  grid-template-rows: 44px !important;
  justify-content: end !important;
  gap: 0 !important;
}

#tutorialPanel #tutorialNextButton {
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  place-items: center !important;
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 26px 0 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: #f2e3b4 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 18px !important;
  text-align: center !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#tutorialPanel #tutorialNextButton::before {
  content: "" !important;
  position: absolute !important;
  inset: auto 5px 5px !important;
  height: 1px !important;
  z-index: -1 !important;
  background: #ac9864 !important;
  filter: none !important;
  transition: filter 80ms ease !important;
  pointer-events: none !important;
}

#tutorialPanel #tutorialNextButton::after {
  content: "\2192" !important;
  position: absolute !important;
  right: 13px !important;
  top: 12px !important;
  font-size: 18px !important;
  line-height: 18px !important;
  color: #ccb879 !important;
}
#tutorialPanel #tutorialNextButton[hidden] { display: none !important; }

#tutorialPanel #tutorialNextButton:hover::before,
#tutorialPanel #tutorialNextButton:focus-visible::before {
  height: 2px !important;
  filter: brightness(1.3) !important;
}
#tutorialPanel #tutorialNextButton:focus-visible { outline: 1px solid #cfb978 !important; outline-offset: -3px !important; }

#tutorialPanel #tutorialNextButton:active,
html[data-qa-tutorial-confirm-pressed] #tutorialPanel #tutorialNextButton {
  transform: translateY(1px) !important;
  color: #fff7d2 !important;
  background: rgba(176, 157, 109, .12) !important;
}

/* Action steps have no empty button bay; the highlighted game control is next. */
#tutorialPanel.tutorial-action-required {
  grid-template-rows: auto !important;
  gap: 0 !important;
  padding-bottom: 10px !important;
}
#tutorialPanel.tutorial-action-required .tutorial-actions { display: none !important; }

/* A quiet brass pointer replaces the old blue neon triangle. */
.tutorial-material-highlight { outline:2px solid #f2d58c !important; outline-offset:-2px !important; box-shadow:inset 0 0 12px #d9aa4555,0 0 7px #e2b45177 !important; }
.tutorial-placement-cell { outline:2px solid #efd28a !important; outline-offset:-2px !important; background-color:#9b763d55 !important; }
.tutorial-placement-cell[data-lesson-number]::after { content:attr(data-lesson-number); color:#fff0bd; font-weight:900; font-size:14px; text-shadow:0 1px 2px #000; pointer-events:none; }
#tutorialPanel::before {
  background: #b4a06e !important;
  filter: drop-shadow(0 2px 2px #000) !important;
}
#tutorialPanel::after { background: #091119 !important; }
#tutorialPanel[data-pointer-side="bottom"]::before { bottom: -12px !important; }
#tutorialPanel[data-pointer-side="bottom"]::after { bottom: -9px !important; }
#tutorialPanel[data-pointer-side="top"]::before { top: -12px !important; }
#tutorialPanel[data-pointer-side="top"]::after { top: -9px !important; }

/* Learning feedback stays on the approved guide plate, without extra cards. */
#tutorialPanel #tutorialFeedback {
  display: block;
  margin: 8px 0 1px;
  padding-top: 7px;
  border-top: 1px solid #524d3e;
  color: #ddd9c9;
  font-size: 11.5px;
  line-height: 17px;
  overflow-wrap: anywhere;
}
#tutorialPanel #tutorialFeedback[hidden] { display: none; }
#tutorialPanel #tutorialFeedback > strong {
  display: block;
  color: #c8b987;
  font-size: 11px;
  line-height: 16px;
  margin-bottom: 4px;
}
#tutorialPanel #tutorialFeedback > span { display: block; margin-top: 3px; }

/* The enemy is highlighted by its painted silhouette, not its large hitbox. */
body.tutorial-locked #enemyFighter.tutorial-target {
  outline: none !important;
  box-shadow: none !important;
}


/* SOURCE: ui/styles/shared/ui-audit-repair-v1.css */
/* Four reviewed dialogs only. Reuse accepted painted metal surfaces. */

/* The four icon wells belong to the artwork, never to a text grid row. */
#boardPassiveChoicePanel .board-passive-choice-card {
  width: min(380px, calc(100vw - 8px)) !important;
  height: auto !important;
  aspect-ratio: 938 / 1677 !important;
  max-height: none !important;
}

#boardPassiveChoicePanel .board-passive-choice-card > .board-clear-supply-preview {
  left: 9.2% !important;
  right: 10% !important;
  top: 24.5% !important;
  height: 12% !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}

#boardPassiveChoicePanel .board-passive-choice-card > .board-clear-supply-preview::before,
#boardPassiveChoicePanel .board-passive-choice::before {
  content: none !important;
}

#boardPassiveChoicePanel .board-clear-supply-preview > img {
  position: absolute !important;
  left: 14.65% !important;
  top: 49% !important;
  width: 44px !important;
  height: 44px !important;
  transform: translate(-50%, -50%) !important;
}

#boardPassiveChoicePanel .board-clear-supply-preview > span {
  position: absolute !important;
  left: 30% !important;
  right: 4% !important;
  top: 47% !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  transform: translateY(-50%) !important;
}

#boardPassiveChoicePanel .board-clear-supply-preview > span > b {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 10.5px !important;
  line-height: 12px !important;
}

#boardPassiveChoicePanel .board-clear-supply-preview > span > strong {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 17px !important;
  line-height: 20px !important;
}

#boardPassiveChoicePanel .board-clear-supply-preview > span > small {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  font-size: 11px !important;
  line-height: 13px !important;
  -webkit-line-clamp: unset !important;
}

#boardPassiveChoicePanel .board-passive-choice-list {
  position: static !important;
  display: block !important;
  overflow: visible !important;
}

#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice {
  position: absolute !important;
  left: 9.2% !important;
  right: 10% !important;
  width: auto !important;
  height: 12.8% !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(1) { top: 37.3% !important; }
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(2) { top: 50.8% !important; }
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(3) { top: 64.2% !important; }

#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice > img {
  position: absolute !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Independent optical anchors, including the artwork's unequal inner gutters. */
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(1) > img {
  left: 14.8% !important; top: 49% !important;
  width: 44px !important; height: 44px !important;
  transform: translate(-50%, -50%) !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(2) > img {
  left: 14.7% !important; top: 49.5% !important;
  width: 44px !important; height: 44px !important;
  transform: translate(-50%, -50%) !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(3) > img {
  left: 14.7% !important; top: 49% !important;
  width: 44px !important; height: 44px !important;
  transform: translate(-50%, -50%) !important;
}

#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice > span {
  position: absolute !important;
  left: 30% !important;
  right: 4% !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  transform: translateY(-50%) !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(1) > span { top: 48% !important; }
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(2) > span { top: 49% !important; }
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(3) > span { top: 48.5% !important; }

#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice b {
  display: block !important;
  margin: 0 0 2px !important;
  font-size: 10.5px !important;
  line-height: 12px !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice strong {
  display: block !important;
  margin: 0 0 3px !important;
  font-size: 16px !important;
  line-height: 18px !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice em {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  font-size: 11.3px !important;
  font-weight: 600 !important;
  line-height: 13.5px !important;
  letter-spacing: -.025em !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  text-shadow: 0 1px 1px #000 !important;
}

/* A boss keeps its portrait, but the choices get the space and material of the
   accepted fusion results. Additional choices scroll instead of compressing. */
#rewardPanel.boss-reward .reward-modal-card {
  width: min(368px, calc(100vw - 16px)) !important;
  height: min(704px, calc(100dvh - 24px)) !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  background: transparent url("assets/generated/fusion_secret_frame_alpha_v7_1793710800000/fusion-secret-frame-alpha.png") center / 100% 100% no-repeat !important;
}
#rewardPanel.boss-reward .reward-modal-card > div:first-child {
  position: static !important;
  display: contents !important;
}
#rewardPanel.boss-reward .reward-modal-card > div:first-child > strong {
  position: absolute !important;
  left: 16% !important; right: 16% !important; top: 7.1% !important;
  display: block !important;
  height: 27px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffedb1 !important;
  font-size: 21px !important;
  line-height: 27px !important;
  text-align: center !important;
  transform: none !important;
}
#rewardPanel.boss-reward .reward-modal-card > div:first-child > .label { display: none !important; }
#rewardPanel.boss-reward .reward-boss-portrait {
  position: absolute !important;
  left: 50% !important; right: auto !important; top: 16% !important;
  width: 148px !important; height: 126px !important;
  min-width: 0 !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
}
#rewardPanel.boss-reward .reward-grid {
  left: 10% !important; right: 10% !important; top: 33% !important; bottom: 7% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #756c54 transparent;
}
#rewardPanel.boss-reward .reward-modal-card .reward-card:not(.reward-ad-reroll) {
  position: relative !important;
  flex: 1 0 78px !important;
  width: 100% !important; height: auto !important; min-height: 78px !important;
  display: block !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-image: none !important; border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}
#rewardPanel.boss-reward .reward-card:not(.reward-ad-reroll)::before,
#rewardPanel.boss-reward .reward-card:not(.reward-ad-reroll)::after { content: none !important; }
#rewardPanel.boss-reward .reward-card:not(.reward-ad-reroll) .reward-icon {
  position: absolute !important;
  left: 10% !important; top: 50% !important;
  width: 38px !important; height: 38px !important;
  margin: 0 !important; padding: 0 !important;
  transform: translate(-50%, -50%) !important;
}
#rewardPanel.boss-reward .reward-card:not(.reward-ad-reroll) .reward-copy {
  position: absolute !important;
  left: 21% !important; right: 7% !important; top: 49% !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important; padding: 0 !important;
  transform: translateY(-50%) !important;
  text-align: left !important;
}
#rewardPanel.boss-reward .reward-card:not(.reward-ad-reroll) .reward-copy strong {
  display: block !important;
  margin: 0 0 5px !important;
  color: #fff0b5 !important;
  font-size: 15px !important; line-height: 17px !important;
}
#rewardPanel.boss-reward .reward-card:not(.reward-ad-reroll) .reward-copy small {
  display: block !important;
  height: auto !important; max-height: none !important;
  color: #d9e1e5 !important;
  font-size: 11px !important; line-height: 13px !important;
  white-space: pre-line !important;
  overflow: visible !important;
}
#rewardPanel.boss-reward .reward-ad-reroll {
  box-sizing: border-box !important;
  min-width: 0 !important;
  position: relative !important;
  flex: 0 0 48px !important;
  width: 100% !important; height: 48px !important; min-height: 48px !important;
  display: block !important;
  border: 0 !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 30px 3px !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}
#rewardPanel.boss-reward .reward-ad-reroll .reward-ad-icon-wrap,
#rewardPanel.boss-reward .reward-ad-reroll .reward-ad-refresh,
#rewardPanel.boss-reward .reward-ad-reroll::before,
#rewardPanel.boss-reward .reward-ad-reroll::after { display: none !important; }
#rewardPanel.boss-reward .reward-ad-reroll .reward-copy {
  position: absolute !important;
  inset: 0 28px 3px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: grid !important;
  place-content: center !important;
  transform: none !important;
}
#rewardPanel.boss-reward .reward-ad-reroll .reward-copy strong {
  font-size: 12px !important; line-height: 15px !important;
  text-align: center !important;
}
#rewardPanel.boss-reward .reward-card:active:not(:disabled) { filter: brightness(.76) !important; }
#rewardPanel.boss-reward .reward-card:focus-visible { outline: 2px solid #cab887 !important; outline-offset: -5px !important; }

/* One quiet plate per enemy; no web-style box around every number. */
#enemyInfoPanel .enemy-info-card > #enemyInfoList {
  left: 10% !important; right: 10% !important;
  padding: 0 !important;
  gap: 7px !important;
  grid-auto-rows: minmax(min-content, 1fr) !important;
  align-content: start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#enemyInfoPanel .enemy-info-card > #enemyInfoList .enemy-info-row {
  position: relative !important;
  display: block !important;
  height: auto !important;
  min-height: 111px !important;
  margin: 0 !important;
  padding: 11px 14px 12px 64px !important;
  border: 0 !important; border-radius: 0 !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-heading {
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-portrait {
  max-width: none !important; max-height: none !important;
  padding: 0 !important; margin: 0 !important;
  position: absolute !important;
  left: 5px !important; top: 18px !important;
  width: 54px !important; height: 54px !important;
  transform: scale(1.5) !important;
  transform-origin: 50% 58% !important;
  object-fit: contain !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 3px #000);
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-name {
  display: block !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 17px !important;
  color: #fff0b5 !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-stage {
  display: block !important;
  margin: 3px 0 0 !important;
  color: #bbcae0 !important;
}
#enemyInfoPanel #enemyInfoList[data-enemy-count="2"] .enemy-entry-stage,
#enemyInfoPanel #enemyInfoList[data-enemy-count="3"] .enemy-entry-stage { display: none !important; }
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 1.1fr 1fr 1.1fr !important;
  gap: 4px !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values > span {
  grid-row: 1 !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important;
}
#enemyInfoPanel #enemyInfoList .enemy-entry-values > .enemy-entry-hp { grid-column: 1 !important; }
#enemyInfoPanel #enemyInfoList .enemy-entry-values > .enemy-entry-attack { grid-column: 2 !important; }
#enemyInfoPanel #enemyInfoList .enemy-entry-values > .enemy-entry-speed { grid-column: 3 !important; }
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values small {
  display: block !important;
  color: #aac0cf !important;
  font-size: 9px !important; line-height: 11px !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values b {
  display: block !important;
  margin-top: 2px !important;
  font-size: 11px !important; line-height: 13px !important;
  color: #eee5c8 !important;
  white-space: nowrap !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-traits {
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  margin: 0 0 4px !important; padding: 0 !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-traits > span {
  display: block !important;
  color: #bbd6e1 !important;
  font-size: 10px !important; line-height: 13px !important;
  white-space: normal !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row > .enemy-entry-affinity {
  margin: 0 !important;
  color: #bbc8d2 !important;
  font-size: 9.5px !important; line-height: 12px !important;
  word-break: keep-all !important;
  white-space: normal !important;
}
#enemyInfoPanel .enemy-info-card[data-enemy-count="3"] { height: 574px !important; aspect-ratio: auto !important; }
#enemyInfoPanel .enemy-info-card[data-enemy-count="2"] { height: 500px !important; aspect-ratio: auto !important; }
#enemyInfoPanel .enemy-info-card[data-enemy-count="1"] { height: 390px !important; aspect-ratio: auto !important; }
#enemyInfoPanel .enemy-info-card[data-enemy-count="1"] #enemyInfoList .enemy-info-row > small {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
#enemyInfoPanel #enemyInfoList[data-enemy-count="2"] .enemy-entry-portrait {
  top: calc(50% - 7px) !important;
  transform: translateY(-50%) scale(1.5) !important;
}

@media (max-width: 370px) {
  #boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice em { font-size: 11px !important; line-height: 13px !important; }
  #rewardPanel.boss-reward .reward-card:not(.reward-ad-reroll) .reward-copy strong { font-size: 14px !important; }
  #rewardPanel.boss-reward .reward-card:not(.reward-ad-reroll) .reward-copy small { font-size: 10.5px !important; }
  #enemyInfoPanel .enemy-info-card > #enemyInfoList .enemy-info-row { padding-left: 60px !important; padding-right: 12px !important; }
  #enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-portrait { left: 3px !important; width: 52px !important; height: 52px !important; }
  #enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-name { font-size: 13px !important; }
}

/* These two portraits have left-heavy painted pixels in their idle canvases.
   Register each independently; the accepted quail and other portraits stay put. */
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-portrait[src*="/beyond3TideCapybara/"] {
  left: 12px !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-portrait[src*="/beyond3CloudChinchilla/"] {
  left: 14px !important;
}
@media (max-width: 370px) {
  #enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-portrait[src*="/beyond3TideCapybara/"] { left: 10px !important; }
  #enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-portrait[src*="/beyond3CloudChinchilla/"] { left: 12px !important; }
}


/* SOURCE: ui/styles/inventory/item-effect-targets-v1.css */
/* Keep the accepted detail frame. Only the third painted well changes when
   an item affects enemies; never merge those values into player bonuses. */
#itemInfoPanel .item-info-card #itemInfoStats > .enemy-effect-chip > strong {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: 12px !important;
  font-size: 10.5px !important;
  line-height: 12px !important;
  color: #ead6b6 !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > .enemy-effect-chip > strong > .item-summary-part {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  transform: none !important;
  text-align: center !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > .enemy-effect-chip > small {
  color: #ead6b6 !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > .target-split-chip {
  display: block !important;
  padding: 2px 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}
#itemInfoPanel #itemInfoStats .target-split-chip > .item-target-group {
  box-sizing: border-box !important;
  position: absolute !important;
  top: 2px !important;
  bottom: 1px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}
#itemInfoPanel #itemInfoStats .item-target-group[data-target="effect"] {
  left: 10px !important;
  right: auto !important;
  width: 43% !important;
}
#itemInfoPanel #itemInfoStats .item-target-group[data-target="enemy"] {
  left: auto !important;
  right: 5px !important;
  width: 48% !important;
}
#itemInfoPanel #itemInfoStats .item-target-group > small {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 9.3px !important;
  line-height: 11px !important;
  text-align: center !important;
  transform: none !important;
}
#itemInfoPanel #itemInfoStats .item-target-group > .item-target-values {
  position: absolute !important;
  inset: 14px 0 0 !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: min-content !important;
  gap: 0 3px !important;
  align-self: start !important;
  justify-self: stretch !important;
  align-content: safe center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #796e54 transparent;
  color: #f8e6a8 !important;
  font-size: 10px !important;
  line-height: 12px !important;
  text-align: center !important;
  transform: none !important;
}
#itemInfoPanel #itemInfoStats .item-target-group .item-target-values > span {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: inherit !important;
  color: inherit !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
}
#itemInfoPanel #itemInfoStats .item-target-group[data-target="enemy"] > small,
#itemInfoPanel #itemInfoStats .item-target-group[data-target="enemy"] > strong {
  color: #ead6b6 !important;
}
#itemInfoPanel #itemInfoStats .item-target-group[data-target="enemy"] > .item-target-values {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Codex records use their existing quiet metal panel for a separate enemy row. */
.codex-item-detail .codex-enemy-effect-values {
  display: flex;
  min-height: 58px;
  padding: 10px 12px;
  box-sizing: border-box;
  background: transparent url("assets/generated/codex_detail_inner_v6_1793206800000/codex-info-panel-calm.png") center / 100% 100% no-repeat;
}
.codex-item-detail .codex-enemy-effect-values > span {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  padding-top: 2px;
  text-align: center;
}
.codex-item-detail .codex-enemy-effect-values small {
  display: block;
  font-size: 9px;
  line-height: 12px;
  color: #c7d5dd;
  white-space: nowrap;
}
.codex-item-detail .codex-enemy-effect-values strong {
  display: block;
  margin-top: 4px;
  color: #ead6b6;
  font-size: 12px;
  line-height: 15px;
}


/* SOURCE: ui/styles/rewards/board-passive-room-v3.css */
/* Taller painted reward bays. No reward values or choice rules change.
   The bitmap's spare white canvas is excluded by an independent silhouette
   mask. Each visible round well is registered separately from its text bay. */
#boardPassiveChoicePanel .board-passive-choice-card {
  position: relative !important;
  width: min(380px, calc(100vw - 12px), calc((100dvh - 24px) * 784 / 1829)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 784 / 1829 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-image: none !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#boardPassiveChoicePanel .board-passive-choice-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  border: 0 !important;
  background: url("assets/generated/board_passive_tall_rows_v3_20260828/board-passive-tall-rows-v3.png") left top / 109.6938776% 100% no-repeat !important;
  -webkit-mask: url("assets/generated/board_passive_tall_rows_v3_20260828/frame-silhouette.svg") center / 100% 100% no-repeat;
  mask: url("assets/generated/board_passive_tall_rows_v3_20260828/frame-silhouette.svg") center / 100% 100% no-repeat;
  pointer-events: none !important;
}

#boardPassiveChoicePanel .board-passive-choice-card::after { content: none !important; }

#boardPassiveChoicePanel .board-passive-choice-card > div:first-child {
  position: absolute !important;
  z-index: 1 !important;
  left: 12% !important;
  right: 12% !important;
  top: 9.3% !important;
  height: 9.8% !important;
  min-height: 0 !important;
  gap: 4px !important;
}

#boardPassiveChoicePanel .board-passive-choice-card > div:first-child > strong {
  font-size: 20px !important;
  line-height: 23px !important;
}

#boardPassiveChoicePanel .board-passive-choice-card > div:first-child > small {
  font-size: 9.5px !important;
  line-height: 12px !important;
}

#boardPassiveChoicePanel .board-passive-choice-card > .board-clear-supply-preview,
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice {
  left: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
}

#boardPassiveChoicePanel .board-passive-choice-card > .board-clear-supply-preview {
  top: 20.9% !important;
  height: 15.55% !important;
}

#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(1) {
  top: 37.2% !important;
  height: 15.95% !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(2) {
  top: 53.95% !important;
  height: 16.05% !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(3) {
  top: 70.9% !important;
  height: 16.15% !important;
}

#boardPassiveChoicePanel .board-clear-supply-preview > img {
  left: 24.15% !important;
  top: 56.8% !important;
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(1) > img {
  left: 24.15% !important;
  top: 56.6% !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(2) > img {
  left: 24.1% !important;
  top: 58.4% !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(3) > img {
  left: 24.15% !important;
  top: 59.7% !important;
}

#boardPassiveChoicePanel .board-clear-supply-preview > span,
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice > span {
  left: 37% !important;
  right: 14% !important;
}
#boardPassiveChoicePanel .board-clear-supply-preview > span { top: 51.5% !important; }
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(1) > span { top: 50% !important; }
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(2) > span { top: 50% !important; }
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(3) > span { top: 50% !important; }

#boardPassiveChoicePanel .board-clear-supply-preview > span > strong {
  font-size: 16px !important;
  line-height: 19px !important;
}
#boardPassiveChoicePanel .board-clear-supply-preview > span > small,
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice em {
  font-size: 11.5px !important;
  line-height: 14.5px !important;
}

#boardPassiveChoicePanel .board-passive-reroll-ad {
  left: 12% !important;
  right: 12% !important;
  top: 87.9% !important;
  height: 5.8% !important;
}
#boardPassiveChoicePanel .board-passive-reroll-ad .board-passive-reroll-icon {
  position: absolute !important;
  left: 18% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
#boardPassiveChoicePanel .board-passive-reroll-ad .board-passive-reroll-copy {
  position: absolute !important;
  left: 58% !important;
  top: 50% !important;
  width: max-content !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  justify-items: center !important;
}
#boardPassiveChoicePanel .board-passive-reroll-copy b { font-size: 15px !important; }
#boardPassiveChoicePanel .board-passive-reroll-copy small { font-size: 10px !important; }
#boardPassiveChoicePanel .board-passive-reroll-state {
  position: absolute !important;
  right: 2% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#boardPassiveChoicePanel .board-passive-choice:active:not(:disabled) {
  filter: brightness(.8) !important;
}
#boardPassiveChoicePanel .board-passive-choice:focus-visible > span {
  outline: 1px solid #b4a477;
  outline-offset: 5px;
}


/* SOURCE: ui/styles/rewards/board-passive-calm-v4.css */
/* Modest ornament reduction on the accepted tall-row reward frame.
   Preserve V3 typography and rewards. The unmodified generated bitmap has
   opaque spare canvas; this projection and separate mask exclude only that
   exterior. The PNG scales uniformly: 860/840 by 1829/1735. */
#boardPassiveChoicePanel .board-passive-choice-card {
  width: min(380px, calc(100vw - 12px), calc((100dvh - 24px) * 840 / 1735)) !important;
  aspect-ratio: 840 / 1735 !important;
}

#boardPassiveChoicePanel .board-passive-choice-card::before {
  background: url("assets/generated/board_passive_calm_v4_20260828/board-passive-calm-v4.png") left 85.106383% / 102.3809524% 105.4178674% no-repeat !important;
  -webkit-mask: url("assets/generated/board_passive_calm_v4_20260828/frame-silhouette.svg") center / 100% 100% no-repeat;
  mask: url("assets/generated/board_passive_calm_v4_20260828/frame-silhouette.svg") center / 100% 100% no-repeat;
}

#boardPassiveChoicePanel .board-passive-choice-card > div:first-child {
  top: 6% !important;
  height: 9% !important;
}

#boardPassiveChoicePanel .board-passive-choice-card > .board-clear-supply-preview {
  top: 17.406% !important;
  height: 15.447% !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(1) {
  top: 33.775% !important;
  height: 16.369% !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(2) {
  top: 51.182% !important;
  height: 16.254% !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(3) {
  top: 68.300% !important;
  height: 16.660% !important;
}

/* Each circle is independently registered to its painted opening. */
#boardPassiveChoicePanel .board-clear-supply-preview > img {
  left: 23.57% !important;
  top: 54.48% !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(1) > img {
  left: 23.55% !important;
  top: 56% !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(2) > img {
  left: 23.65% !important;
  top: 54.6% !important;
}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(3) > img {
  left: 23.6% !important;
  top: 54.3% !important;
}

#boardPassiveChoicePanel .board-clear-supply-preview > span,
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice > span {
  left: 35.5% !important;
  right: 14% !important;
}
#boardPassiveChoicePanel .board-clear-supply-preview > span { top: 50% !important; }

#boardPassiveChoicePanel .board-passive-reroll-ad {
  top: 85.764% !important;
  height: 6.455% !important;
  display: block !important;
}

#boardPassiveChoicePanel .board-passive-reroll-icon {
  position: absolute !important;
  left: 12.5% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

#boardPassiveChoicePanel .board-passive-reroll-ad .board-passive-reroll-copy,
#boardPassiveChoicePanel .board-passive-reroll-ad.watched .board-passive-reroll-copy {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: max-content !important;
  max-width: 70% !important;
  justify-items: center !important;
  text-align: center !important;
  transform: translate(-50%, -50%) !important;
}

#boardPassiveChoicePanel .board-passive-reroll-state {
  position: absolute !important;
  right: 7.5% !important;
  top: 50% !important;
  transform: translate(50%, -50%) !important;
}


/* SOURCE: ui/styles/inventory/item-clarity-v1.css */
/* Readable item copy, registered to the five existing painted wells.
   No replacement artwork, new card surface or gameplay change. */
#itemInfoPanel .item-info-card #itemInfoStats > .item-stat-chip {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > .item-stat-chip > small {
  position: absolute !important;
  inset: 0 0 auto !important;
  width: 100% !important;
  height: 13px !important;
  display: block !important;
  font-size: 10px !important;
  line-height: 13px !important;
  transform: none !important;
  text-align: center !important;
}
/* Lower only the first well's heading; its value and the other wells stay put. */
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="primary"] > small {
  top: 3px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > .item-stat-chip > .item-readable-values {
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 15px 0 0 !important;
  width: 100% !important;
  height: calc(100% - 15px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 8px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: min-content !important;
  gap: 3px 8px !important;
  align-content: safe center !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  transform: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #887655 transparent;
  font-size: 11px !important;
  line-height: 14px !important;
  text-align: center !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > .item-stat-chip > .item-readable-values > .item-summary-part {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  font: inherit !important;
  grid-column: auto !important;
  color: inherit !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
}
#itemInfoPanel .item-info-card #itemInfoStats > .item-stat-chip > .item-readable-values > .item-summary-part:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="primary"] > .item-readable-values {
  top: 14px !important;
  height: calc(100% - 14px) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 3px !important;
  padding: 0 2px !important;
  font-size: 10px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="primary"][data-part-count="2"] > .item-readable-values { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="primary"][data-part-count="1"] > .item-readable-values { grid-template-columns: minmax(0, 1fr) !important; font-size: 11px !important; }
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="primary"] > .item-readable-values > .item-summary-part { grid-column: auto !important; }
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="primary"] > .item-readable-values > .item-summary-part:last-child:nth-child(odd) { grid-column: auto !important; }
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="primary"][data-part-count="1"] > .item-readable-values > .item-summary-part { grid-column: 1 / -1 !important; }
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="effect"] > .item-readable-values {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  line-height: 14px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="effect"][data-part-count="2"] > .item-readable-values {
  gap: 2px !important;
  line-height: 13px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="secondary"] > .item-readable-values { gap: 2px 8px !important; line-height: 13px !important; }
#itemInfoPanel .item-info-card #itemInfoStats > [data-copy-mode="prose"] > .item-readable-values { grid-template-columns: minmax(0, 1fr) !important; }
#itemInfoPanel .item-info-card #itemInfoStats .item-readable-group,
#itemInfoPanel .item-info-card #itemInfoStats .item-readable-group > span {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
  font: inherit !important;
  color: inherit !important;
  text-align: center !important;
}
#itemInfoPanel .item-readable-group > b { display: block; color: #a6d6df; font-size: 10px; margin-bottom: 2px; }
#itemInfoPanel .item-readable-group[data-target="enemy"] { color: #e1cfb1; }
#itemInfoPanel .item-info-scroll-cue { display: none; font: inherit; color: #bcb59d; }
#itemInfoPanel [data-fit-overflow] > small > .item-info-scroll-cue { display: inline; }
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row {
  overflow: hidden !important;
  pointer-events: auto !important;
}
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row > div {
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 0 4px !important;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: min-content !important;
  gap: 2px !important;
  align-content: safe center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #887655 transparent;
  transform: none !important;
}
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row.recipe.unknown > div { left: 31% !important; }
/* The equation has its own left anchor, independent of the text column. */
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row.recipe.unknown > .item-recipe-equation {
  position: absolute !important;
  left: 16px !important;
  right: auto !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row > div > small,
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row > div > strong,
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row > div > em {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  line-height: 14px !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  text-align: center !important;
  grid-column: 1 / -1 !important;
}
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row > div > small { font-size: 10px !important; }
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row > div > strong { font-size: 11.5px !important; }
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row > div > em { font-size: 10.5px !important; color: #d2d5cf !important; font-style: normal; }
#itemInfoPanel .item-info-card .item-info-relations .item-relation-row[data-fit-overflow] > div > small::after { content: none; }
#itemInfoPanel .item-info-card .item-info-head .label { font-size: 8.6px !important; line-height: 11px !important; }
#bagPanel .effect-summary-empty { line-height: 1.6 !important; word-break: keep-all; }
body.tutorial-locked #bagTrayList .tutorial-starter-item.tutorial-target {
  outline: 2px solid #e5ce83 !important;
  outline-offset: 2px !important;
}
#rewardChoices .reward-current-health { display: block; font-size: 10px; line-height: 13px; color: #b9d9c5; font-weight: 650; }
/* The three-line guard reward needs its own room for the added HP line. */
#rewardPanel.boss-reward .reward-modal-card .reward-card.reward-bossGuardMark {
  flex-basis: 96px !important;
  min-height: 96px !important;
}


/* SOURCE: ui/styles/menus/store-growth-sale-polish-v1.css */
/* Readability only. Preserve painted panels, economy, disabled conditions,
   and the individually aligned currency rail. */
#itemSaleConfirmPanel .item-sale-confirm-card h2 { white-space: nowrap; }

/* Align only the icon to the painted well's top/bottom jewel axis.
   The text well and both actions retain their existing positions. */
#itemSaleConfirmPanel #itemSaleConfirmIcon {
  transform: translate(-4px, 2px);
}

/* Lack of shards disables the action, not the information. */
body #menuGrowthPanel .meta-upgrade-card.needs-shards,
body #menuGrowthPanel .meta-activation-card:disabled {
  opacity: 1 !important;
  filter: brightness(.94) saturate(.88) drop-shadow(0 3px 4px rgba(0, 0, 0, .45)) !important;
}
body #menuGrowthPanel .meta-upgrade-card strong,
body #menuGrowthPanel .meta-activation-card strong {
  font-size: 12.5px !important;
  line-height: 14px !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px #000 !important;
}
body #menuGrowthPanel .meta-upgrade-card > span small,
body #menuGrowthPanel .meta-activation-card > span small {
  color: #d2dfe5 !important;
  font-size: 10px !important;
  line-height: 12px !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body #menuGrowthPanel .meta-upgrade-card > em small {
  font-size: 9px !important;
  line-height: 11px !important;
}
body #menuGrowthPanel .meta-upgrade-card.needs-shards > em,
body #menuGrowthPanel .meta-activation-card:disabled > em {
  opacity: .74 !important;
  color: #ddd2c1 !important;
}

/* These longer descriptions need their own inner-gutter and vertical room.
   Short rows and the already-correct cost wells keep their prior geometry. */
body #menuGrowthPanel .meta-upgrade-card[data-meta-upgrade="freeReroll"] {
  height: 82px !important;
  min-height: 82px !important;
}
body #menuGrowthPanel .meta-upgrade-card[data-meta-upgrade="freeReroll"] > span {
  padding-right: 12px !important;
}
body #menuGrowthPanel .meta-upgrade-card[data-meta-upgrade="sssBoardLuck"] {
  height: 82px !important;
  min-height: 82px !important;
}
body #menuGrowthPanel .meta-upgrade-card[data-meta-upgrade="sssBoardLuck"] > span {
  padding-right: 12px !important;
}
body #menuGrowthPanel .meta-upgrade-card[data-meta-upgrade="allBoardSssLuck"] {
  height: 82px !important;
  min-height: 82px !important;
}
body #menuGrowthPanel .meta-upgrade-card[data-meta-upgrade="allBoardSssLuck"] > span {
  padding-right: 12px !important;
}
body #menuGrowthPanel .meta-upgrade-card[data-meta-upgrade="boardPassiveChoice"] {
  height: 82px !important;
  min-height: 82px !important;
}
body #menuGrowthPanel .meta-upgrade-card[data-meta-upgrade="boardPassiveChoice"] > span {
  padding-right: 12px !important;
}
body #menuGrowthPanel .meta-upgrade-description-line { display: block; }

/* Complete row art remains. Reuse the accepted confirmation button for prices. */
#menuStorePanel .store-product-card,
#menuStorePanel .store-product-card[data-store-tone] {
  min-height: 84px !important;
  grid-template-columns: 40px minmax(0, 1fr) 110px !important;
  gap: 6px !important;
  padding: 10px 8px 10px 10px !important;
}
#menuStorePanel .store-product-heading { display: block !important; }
#menuStorePanel .store-product-title strong {
  display: block !important;
  font-size: 12.5px !important;
  line-height: 16px !important;
  font-weight: 800 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#menuStorePanel .store-product-badge {
  margin-top: 4px !important;
  font-size: 9px !important;
  line-height: 11px !important;
  font-weight: 700 !important;
}
#menuStorePanel .store-product-title small {
  margin-top: 5px !important;
  color: #d4dce0 !important;
  font-size: 10px !important;
  line-height: 13px !important;
  font-weight: 600 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#menuStorePanel .store-product-content-part {
  display: inline-block !important;
  white-space: nowrap !important;
}
#menuStorePanel .store-buy-button {
  position: relative !important;
  width: 110px !important;
  min-width: 110px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 17px !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / contain no-repeat !important;
  clip-path: none !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}
#menuStorePanel .store-buy-button b {
  color: #fff0b5 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 16px !important;
  text-shadow: 0 1px 1px #000 !important;
}
#menuStorePanel .store-product-card:active:not([aria-disabled="true"]) .store-buy-button {
  filter: brightness(.8) !important;
}
#menuStorePanel .store-product-group-head strong {
  font-size: 12px !important;
  line-height: 15px !important;
}
#menuStorePanel .store-product-group-head small {
  color: #b9cdd7 !important;
  font-size: 9px !important;
  line-height: 12px !important;
}
#menuStorePanel .store-notice {
  font-size: 9px !important;
  line-height: 12px !important;
}


/* SOURCE: ui/styles/shared/critical-stats-v1.css */
/* Only the extra row created by separate critical stats. Keep all artwork,
   other wells, and the already-aligned one-to-four-value layouts unchanged. */
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="secondary"]:is([data-part-count="5"], [data-part-count="6"]) {
  top: 34.3% !important;
  height: 9.9% !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="secondary"]:is([data-part-count="5"], [data-part-count="6"]) > .item-readable-values {
  top: 13px !important;
  height: calc(100% - 13px) !important;
  gap: 1px 8px !important;
  line-height: 12.5px !important;
}


/* SOURCE: ui/styles/shared/result-explanation-v1.css */
/* Clear copy inside the existing painted wells. No replacement artwork. */
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat] {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
}
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat] > small,
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat] > b {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
}
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat] > small { top: 10px !important; font-size: 9px !important; line-height: 11px !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat] > b { top: 24px !important; font-size: 12px !important; line-height: 15px !important; }

/* V5: register each payload to its own painted recess. The shared grid and
   the artwork stay still; these offsets belong to individual cells only. */
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat="power"] > :is(small, b) { transform: translate(-2px, 2px) !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat="attack"] > :is(small, b) { transform: translate(-3px, 2px) !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat="dps"] > :is(small, b) { transform: translate(-4px, 2px) !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat="armor"] > :is(small, b) { transform: translate(-2px, 3px) !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat="speed"] > :is(small, b) { transform: translate(-3px, 3px) !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat="critical"] > :is(small, b) { transform: translate(-4px, 3px) !important; }

/* The title and the two summary wells have separate optical centers. */
#endPanel.end-panel:is(.defeat, .victory) .end-card > strong { transform: translate(-3px, 3px) !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-mini-card:nth-child(1) > :is(small, strong) { transform: translateX(-1px) !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-mini-card:nth-child(2) > :is(small, strong) { transform: translateX(-3px) !important; }

/* Only populated equipment changes. Empty messages retain the accepted V3
   size, line spacing and position; each populated element moves separately. */
#endPanel.end-panel:is(.defeat, .victory) .result-best-item:not(.empty) > .result-best-heading { transform: translate(-3px, 8px) !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-best-item:not(.empty) {
  grid-template-columns: 48px fit-content(76px) !important;
  justify-content: center !important;
}
#endPanel.end-panel:is(.defeat, .victory) .result-best-item:not(.empty) > img { translate: -3px 0 !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-best-item:not(.empty) > .result-best-copy { translate: -3px 0 !important; }
#endPanel.end-panel:is(.defeat, .victory) .result-best-item .result-best-rank {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 3px !important;
  white-space: nowrap !important;
}
#endPanel.end-panel:is(.defeat, .victory) .result-best-rank > :is(b, em) {
  margin: 0 !important;
  line-height: 12px !important;
}
@media (max-width: 370px) {
  #endPanel.end-panel:is(.defeat, .victory) .result-best-item:not(.empty) { grid-template-columns: 42px fit-content(70px) !important; }
}

@media (max-width: 370px) {
  #endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat="dps"] > :is(small, b) { transform: translate(-3px, 2px) !important; }
  #endPanel.end-panel:is(.defeat, .victory) .result-line > span[data-result-stat="critical"] > :is(small, b) { transform: translate(-3px, 3px) !important; }
}

/* Each enemy keeps its portrait/name/stat anchors; effects occupy real room
   below those fields. The outer frame and the individual recess are reused. */
#enemyInfoPanel .enemy-info-card[data-enemy-count="3"] { height: min(660px, calc(100dvh - 28px)) !important; }
#enemyInfoPanel .enemy-info-card[data-enemy-count="2"] { height: min(570px, calc(100dvh - 28px)) !important; }
#enemyInfoPanel .enemy-info-card[data-enemy-count="1"] { height: min(480px, calc(100dvh - 28px)) !important; }
#enemyInfoPanel .enemy-info-card[data-enemy-count="1"][data-has-abilities="false"] { height: min(390px, calc(100dvh - 28px)) !important; }
#enemyInfoPanel .enemy-info-card > #enemyInfoList {
  top: 24% !important;
  bottom: 7% !important;
  height: auto !important;
  grid-template-rows: none !important;
  grid-auto-rows: max-content !important;
  gap: 8px !important;
  scrollbar-width: thin;
  scrollbar-color: #80745e transparent;
  overscroll-behavior: contain;
}
#enemyInfoPanel .enemy-info-card > #enemyInfoList .enemy-info-row {
  min-height: 135px !important;
  padding-top: 14px !important;
  padding-bottom: 15px !important;
}
#enemyInfoPanel #enemyInfoList .enemy-entry-abilities,
#enemyInfoPanel #enemyInfoList .enemy-entry-ability {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#enemyInfoPanel #enemyInfoList .enemy-entry-abilities { margin: 6px 0 !important; }
#enemyInfoPanel #enemyInfoList .enemy-entry-ability + .enemy-entry-ability { margin-top: 7px !important; }
#enemyInfoPanel #enemyInfoList .enemy-entry-ability > small,
#enemyInfoPanel #enemyInfoList .enemy-entry-ability > strong {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
  overflow: visible !important;
  text-align: left !important;
}
#enemyInfoPanel #enemyInfoList .enemy-entry-ability > small { color: #a6c7d4 !important; font-size: 9px !important; line-height: 12px !important; }
#enemyInfoPanel #enemyInfoList .enemy-entry-ability > strong { color: #f1e7c8 !important; font-size: 11px !important; line-height: 15px !important; }
#enemyInfoPanel #enemyInfoList .enemy-info-row > .enemy-entry-affinity { overflow: visible !important; text-overflow: clip !important; line-height: 13px !important; max-height: none !important; -webkit-line-clamp: unset !important; }
#enemyInfoPanel .enemy-info-card > #enemyInfoList .enemy-info-row.boss {
  padding-top: 25px !important;
  padding-bottom: 28px !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row.boss .enemy-entry-portrait { top: 29px !important; transform: scale(1.2) !important; }

/* The feature value owns a bounded text area; long targets wrap instead of
   becoming abbreviated or spilling across the adjacent painted bay. */
html body #fusionPanel.fusion-panel.structured-fusion-result #fusionResultStats > .fusion-stat-feature:not(.mythic-power-summary) > strong {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
  max-width: 100% !important;
  line-height: 13px !important;
}
html body #fusionPanel.fusion-panel.structured-fusion-result #fusionResultStats > .fusion-stat-feature:not(.mythic-power-summary) > strong > .fusion-feature-line {
  white-space: normal !important;
  word-break: keep-all !important;
}
/* These spans are lines of copy, not the old generic stat-pill component. */
html body #fusionPanel.fusion-panel.mythic-item #fusionResultStats > .mythic-power-summary > small {
  grid-template-rows: 12px !important;
}
html body #fusionPanel.fusion-panel.mythic-item #fusionResultStats > .fusion-stat-feature > strong > .fusion-feature-line {
  display: block !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: inherit !important;
  color: inherit !important;
  transform: none !important;
}


/* SOURCE: ui/styles/menus/store-growth-calm-v2.css */
/* Growth V3: native-ratio black metal, illustrated effects and separate actions.
   The accepted menu shell and wallet remain untouched. */
body #menuGrowthPanel .meta-upgrade-list,
body #menuGrowthPanel .meta-activation-list {
  transform: none !important;
  gap: 9px !important;
  padding-inline: 4px !important;
}
body #menuGrowthPanel .meta-growth-guide {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 14px 9px;
  color: #aebec7;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
}
body #menuGrowthPanel .meta-growth-guide > span:last-child { color: #d0c4a3; }
body #menuGrowthPanel .meta-upgrade-card,
body #menuGrowthPanel .meta-upgrade-card.affordable,
body #menuGrowthPanel .meta-upgrade-card.needs-shards,
body #menuGrowthPanel .meta-activation-card {
  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1810 / 869;
  padding: 12px 17px !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 20px minmax(0, 1fr) 36px !important;
  align-items: stretch !important;
  gap: 4px !important;
  cursor: default;
}
body #menuGrowthPanel .meta-upgrade-card::before,
body #menuGrowthPanel .meta-activation-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1;
  pointer-events: none;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  background: url("assets/generated/store_card_native_v3_20260828/store-card-wide-v3.png") center / contain no-repeat !important;
  -webkit-mask: url("assets/generated/store_card_native_v3_20260828/store-card-wide-mask-v3.svg") center / contain no-repeat;
  mask: url("assets/generated/store_card_native_v3_20260828/store-card-wide-mask-v3.svg") center / contain no-repeat;
}
body #menuGrowthPanel .meta-upgrade-card::after,
body #menuGrowthPanel .meta-activation-card::after { content: none !important; }
body #menuGrowthPanel .meta-upgrade-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 7px;
}
body #menuGrowthPanel .meta-upgrade-heading strong {
  color: #f1dfb0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 19px !important;
  white-space: nowrap;
  text-shadow: 0 1px 1px #000 !important;
}
body #menuGrowthPanel .meta-upgrade-level {
  color: #9fb1bd;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
}
body #menuGrowthPanel .meta-upgrade-body {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
body #menuGrowthPanel .meta-upgrade-body .meta-upgrade-art {
  display: block;
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  justify-self: center;
  filter: none !important;
}
body #menuGrowthPanel .meta-growth-effects { min-width: 0; display: grid; gap: 4px; }
body #menuGrowthPanel .meta-growth-effect-row { display: grid; gap: 2px; min-width: 0; }
body #menuGrowthPanel .meta-growth-effect-label {
  color: #c6d0d5;
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
}
body #menuGrowthPanel .meta-growth-values {
  display: flex !important;
  align-items: baseline;
  gap: 9px !important;
  white-space: nowrap;
  font-size: 21px;
  font-weight: 700;
  line-height: 26px;
}
body #menuGrowthPanel .meta-growth-current { color: #aebcc6; font-size: 17px; font-weight: 600; }
body #menuGrowthPanel .meta-growth-arrow { color: #8e9eaa; font-size: 14px; font-weight: 400; }
body #menuGrowthPanel .meta-growth-values b { color: #f8e5ac; font-weight: 800; }
body #menuGrowthPanel [data-effect-count="2"] { gap: 8px; }
body #menuGrowthPanel [data-effect-count="2"] .meta-growth-effect-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
}
body #menuGrowthPanel [data-effect-count="2"] .meta-growth-effect-label { font-size: 10px; }
body #menuGrowthPanel [data-effect-count="2"] .meta-growth-values { font-size: 15px; line-height: 20px; gap: 5px !important; }
body #menuGrowthPanel [data-effect-count="2"] .meta-growth-current,
body #menuGrowthPanel [data-effect-count="2"] .meta-growth-arrow { font-size: 12px; }
body #menuGrowthPanel .meta-growth-note {
  margin: 0;
  color: #b9cbd3;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 14px;
}
body #menuGrowthPanel [data-upgrade-id="boardPassiveChoice"] .meta-growth-values { font-size: 17px; line-height: 22px; }
body #menuGrowthPanel [data-upgrade-id="boardPassiveChoice"] .meta-growth-current { font-size: 13px; }
body #menuGrowthPanel .meta-upgrade-action {
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body #menuGrowthPanel .meta-upgrade-cost {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px !important;
  line-height: 20px;
  color: #d9d0e4;
}
body #menuGrowthPanel .meta-cost-caption { margin-right: 3px; color: #b3bdc3; font-size: 10.5px; font-weight: 600; }
body #menuGrowthPanel .meta-upgrade-cost img {
  width: 17px !important;
  height: 20px !important;
  object-fit: contain !important;
  filter: none !important;
}
body #menuGrowthPanel .meta-upgrade-cost b { font-size: 15px; line-height: 18px; font-weight: 800; }
body #menuGrowthPanel .meta-upgrade-action button {
  width: 118px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px 1px !important;
  margin: 0 !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / contain no-repeat !important;
  box-shadow: none !important;
  color: #f8e5ad !important;
  display: grid !important;
  place-items: center;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 18px !important;
  text-align: center !important;
  text-shadow: 0 1px 1px #000 !important;
  filter: none !important;
  transform: none !important;
}
body #menuGrowthPanel .meta-upgrade-action button:disabled { opacity: .48 !important; filter: saturate(.4) !important; }
body #menuGrowthPanel .meta-upgrade-action button:active:not(:disabled) { filter: brightness(.75) !important; transform: translateY(1px) !important; }
body #menuGrowthPanel .meta-upgrade-action button:focus-visible { outline: 1px solid #e6c782; outline-offset: 2px; }
body #menuGrowthPanel .meta-activation-list > strong { margin: 9px 13px 0; color: #e1d3ae; font-size: 13px; line-height: 20px; }
body #menuGrowthPanel .meta-activation-copy { min-width: 0; display: grid; gap: 5px; }
body #menuGrowthPanel .meta-activation-copy p {
  margin: 0;
  color: #d5dce0;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  word-break: keep-all;
}
body #menuGrowthPanel .meta-activation-copy > span { color: #a6bac5; font-size: 10.5px; line-height: 15px; }
body #menuGrowthPanel .growth-empty {
  padding: 35px 14px !important;
  border: 0 !important;
  border-image: none !important;
  background: none !important;
  box-shadow: none !important;
  color: #c9d5dc !important;
  font-size: 12px !important;
  line-height: 20px;
  text-align: center;
}

/* Summon quantities get their own small shelves. V4 keeps the native-ratio
   paintings and foregrounds the product art, quantity and total price. */
#menuStorePanel .store-product-group,
#menuStorePanel .store-product-group-grid {
  background: none !important;
  box-shadow: none !important;
}
#menuStorePanel .store-product-group-grid {
  gap: 7px !important;
  padding: 6px 1px 10px !important;
}
#menuStorePanel [data-store-group="summon"] .store-product-group-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#menuStorePanel .store-product-card[data-store-kind],
#menuStorePanel .store-product-card[data-store-kind]:hover,
#menuStorePanel .store-product-card[data-store-kind]:focus-visible {
  min-width: 0 !important;
  border: 0 !important;
  border-image: none !important;
  background: none !important;
  clip-path: none !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  isolation: isolate;
  align-content: center !important;
}
/* Native-ratio whole paintings: neither the corners nor the interior are
   stretched or nine-sliced. Masks only hide the generated exterior matte.
   The compact blank plate is rotated as a whole to its landscape orientation. */
#menuStorePanel .store-product-card[data-store-kind]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  background: var(--store-native-card) center / contain no-repeat !important;
  -webkit-mask: var(--store-native-mask) center / contain no-repeat;
  mask: var(--store-native-mask) center / contain no-repeat;
}
#menuStorePanel .store-product-card[data-store-kind]::after {
  content: none !important;
}
#menuStorePanel .store-product-card[data-store-kind="summon"] {
  --store-native-card: url("assets/generated/store_card_native_v3_20260828/store-card-compact-v3.png");
  --store-native-mask: url("assets/generated/store_card_native_v3_20260828/store-card-compact-mask-v3.svg");
  aspect-ratio: 1292 / 1217;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "art" "quantity" "price" !important;
  grid-template-rows: 58px 32px 29px !important;
  gap: 3px 0 !important;
  min-height: 0 !important;
  padding: 8px 12px 6px !important;
}
#menuStorePanel .store-product-card[data-store-kind="summon"]::before {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(100% * 1217 / 1292) !important;
  height: calc(100% * 1292 / 1217) !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
}
#menuStorePanel .store-ticket-visual {
  grid-area: art;
  position: relative;
  width: 100%;
  height: 58px;
  pointer-events: none;
}
#menuStorePanel .store-ticket-leaf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  object-fit: contain;
  transform: translate(calc(-50% + var(--ticket-x, 0px)), calc(-50% + var(--ticket-y, 0px))) rotate(var(--ticket-turn, 0deg));
  filter: brightness(.8) drop-shadow(0 1px 1px #000);
}
#menuStorePanel .store-ticket-leaf:last-child { filter: drop-shadow(0 1px 1px #000); }
#menuStorePanel [data-layers="2"] .store-ticket-leaf:nth-child(1) { --ticket-x: -9px; --ticket-turn: -14deg; }
#menuStorePanel [data-layers="2"] .store-ticket-leaf:nth-child(2) { --ticket-x: 7px; --ticket-y: 1px; --ticket-turn: 5deg; }
#menuStorePanel [data-layers="3"] .store-ticket-leaf:nth-child(1) { --ticket-x: -14px; --ticket-turn: -17deg; }
#menuStorePanel [data-layers="3"] .store-ticket-leaf:nth-child(2) { --ticket-x: 14px; --ticket-turn: 13deg; }
#menuStorePanel [data-layers="3"] .store-ticket-leaf:nth-child(3) { --ticket-y: 2px; }
#menuStorePanel [data-layers="4"] .store-ticket-leaf:nth-child(1) { --ticket-x: -19px; --ticket-y: -2px; --ticket-turn: -20deg; }
#menuStorePanel [data-layers="4"] .store-ticket-leaf:nth-child(2) { --ticket-x: 17px; --ticket-y: -2px; --ticket-turn: 16deg; }
#menuStorePanel [data-layers="4"] .store-ticket-leaf:nth-child(3) { --ticket-x: -7px; --ticket-y: 2px; --ticket-turn: -8deg; }
#menuStorePanel [data-layers="4"] .store-ticket-leaf:nth-child(4) { --ticket-x: 5px; --ticket-y: 3px; --ticket-turn: 3deg; }
#menuStorePanel [data-layers="5"] .store-ticket-leaf:nth-child(1) { --ticket-x: -23px; --ticket-y: -2px; --ticket-turn: -22deg; }
#menuStorePanel [data-layers="5"] .store-ticket-leaf:nth-child(2) { --ticket-x: 21px; --ticket-y: -2px; --ticket-turn: 19deg; }
#menuStorePanel [data-layers="5"] .store-ticket-leaf:nth-child(3) { --ticket-x: -12px; --ticket-y: 1px; --ticket-turn: -12deg; }
#menuStorePanel [data-layers="5"] .store-ticket-leaf:nth-child(4) { --ticket-x: 12px; --ticket-y: 1px; --ticket-turn: 10deg; }
#menuStorePanel [data-layers="5"] .store-ticket-leaf:nth-child(5) { --ticket-y: 3px; }
#menuStorePanel [data-layers="6"] .store-ticket-leaf:nth-child(1) { --ticket-x: -24px; --ticket-y: -4px; --ticket-turn: -24deg; }
#menuStorePanel [data-layers="6"] .store-ticket-leaf:nth-child(2) { --ticket-x: 24px; --ticket-y: -4px; --ticket-turn: 22deg; }
#menuStorePanel [data-layers="6"] .store-ticket-leaf:nth-child(3) { --ticket-x: -15px; --ticket-y: -1px; --ticket-turn: -16deg; }
#menuStorePanel [data-layers="6"] .store-ticket-leaf:nth-child(4) { --ticket-x: 15px; --ticket-y: -1px; --ticket-turn: 13deg; }
#menuStorePanel [data-layers="6"] .store-ticket-leaf:nth-child(5) { --ticket-x: -5px; --ticket-y: 2px; --ticket-turn: -5deg; }
#menuStorePanel [data-layers="6"] .store-ticket-leaf:nth-child(6) { --ticket-x: 5px; --ticket-y: 3px; --ticket-turn: 3deg; }
#menuStorePanel .store-ticket-count {
  grid-area: quantity;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #f5e2b0;
}
#menuStorePanel .store-ticket-count b {
  font-size: 30px;
  line-height: 32px;
  font-weight: 800;
}
#menuStorePanel .store-ticket-count small {
  color: #bdb8ae;
  font-size: 12px;
}
#menuStorePanel [data-store-kind="summon"] .store-buy-button {
  grid-area: price;
  justify-self: center;
  width: 118px !important;
  min-width: 0 !important;
  max-width: calc(100% + 2px) !important;
  height: 29px !important;
  min-height: 29px !important;
  padding: 0 14px !important;
  background-size: 100% 100% !important;
}
#menuStorePanel [data-store-kind="summon"] .store-buy-button b {
  font-size: 11.5px !important;
}
#menuStorePanel .store-product-card[data-store-kind="expedition"] {
  --store-native-card: url("assets/generated/store_card_native_v3_20260828/store-card-wide-v3.png");
  --store-native-mask: url("assets/generated/store_card_native_v3_20260828/store-card-wide-mask-v3.svg");
  aspect-ratio: 1810 / 869;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "heading" "contents" "price" !important;
  grid-template-rows: 18px 64px 31px !important;
  padding: 11px 16px !important;
  gap: 3px 0 !important;
  min-height: 0 !important;
}
#menuStorePanel .store-bundle-heading {
  grid-area: heading;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
}
#menuStorePanel .store-bundle-heading > strong {
  color: #f4e3b7;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}
#menuStorePanel .store-bundle-heading > span {
  color: #a4b9c3;
  font-size: 9px;
  line-height: 14px;
  white-space: nowrap;
}
#menuStorePanel .store-bundle-contents {
  grid-area: contents;
  display: grid;
  grid-template-columns: repeat(var(--store-content-count), minmax(0, 1fr));
  gap: 6px;
  height: 64px;
}
#menuStorePanel .store-bundle-resource {
  min-width: 0;
  display: grid;
  grid-template-rows: 32px 12px 19px;
  justify-items: center;
  align-content: center;
  text-align: center;
}
#menuStorePanel .store-bundle-resource > img {
  width: 34px;
  height: 32px;
  object-fit: contain;
}
#menuStorePanel .store-bundle-label {
  color: #bacbd2;
  font-size: 9.5px;
  line-height: 12px;
  white-space: nowrap;
}
#menuStorePanel .store-bundle-amount {
  color: #f5e2b0;
  font-size: 16px;
  line-height: 19px;
}
#menuStorePanel .store-bundle-amount > small {
  margin-left: 2px;
  color: #bdb8ae;
  font-size: 10px;
  font-weight: 600;
}
#menuStorePanel .store-bundle-contents[data-count="1"] .store-bundle-resource {
  grid-template-columns: 64px 64px;
  grid-template-rows: 19px 32px;
  grid-template-areas: "icon label" "icon amount";
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 2px 8px;
}
#menuStorePanel .store-bundle-contents[data-count="1"] img {
  grid-area: icon;
  width: 64px;
  height: 60px;
}
#menuStorePanel .store-bundle-contents[data-count="1"] .store-bundle-label {
  grid-area: label;
  align-self: end;
  font-size: 11px;
  line-height: 15px;
}
#menuStorePanel .store-bundle-contents[data-count="1"] .store-bundle-amount {
  grid-area: amount;
  font-size: 27px;
  line-height: 32px;
}
#menuStorePanel .store-bundle-contents[data-count="1"] .store-bundle-amount > small {
  font-size: 12px;
}
#menuStorePanel [data-store-kind="expedition"] .store-buy-button {
  grid-area: price;
  justify-self: center;
  width: 126px !important;
  min-width: 126px !important;
  height: 31px !important;
  min-height: 31px !important;
}

body #menuGrowthPanel .meta-upgrade-entry{min-width:0}
body #menuGrowthPanel .meta-upgrade-explanation{margin:3px 14px 8px;color:#c4cbd0;font-size:11px;line-height:16px;word-break:keep-all;overflow-wrap:anywhere}
body #menuGrowthPanel [data-upgrade-id="freeReroll"] .meta-growth-effect-label{white-space:normal;max-width:110px}


/* SOURCE: ui/styles/companions/companion-specialties-v1.css */
/* Use approved painted recesses. Every field and action owns its own interior. */
.companion-workshop-layer[hidden], .companion-workshop-entry[hidden] { display: none !important; }
.companion-workshop-entry { margin: 8px 12px; display: flex; align-items: center; gap: 10px; }
.companion-workshop-entry > button { flex: 0 0 112px; }
.companion-workshop-entry > small { color: #c1bfae; font-size: 12px; line-height: 1.4; }
.companion-workshop-layer { position: fixed; z-index: 19000; inset: 0; display: grid; place-items: center; background: #000b; padding: 10px 8px; }
.companion-workshop-dialog { width: min(354px, 100%); max-height: calc(100dvh - 20px); box-sizing: border-box; padding: 24px 22px 25px; display: flex; flex-direction: column; gap: 10px; color: #e9e3cc; background: transparent url('assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png') center / 100% 100% no-repeat; filter: drop-shadow(0 8px 16px #000b); }
.companion-workshop-heading { position: relative; min-height: 32px; padding: 0 28px; flex: 0 0 auto; }
.companion-workshop-heading h2 { margin: 0; text-align: center; font-size: 21px; line-height: 32px; color: #f1e2a8; transform: translateY(5px); }
.companion-workshop-close { position: absolute; right: 0; top: -2px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center/contain no-repeat; color: transparent; font-size: 0; box-shadow: none; cursor: pointer; }
#companionWorkshopMessage { flex: 0 0 auto; margin: 0; font-size: 13px; line-height: 1.5; color: #d9ccb0; text-align: center; overflow-wrap: anywhere; }
.companion-workshop-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #6e6755 #101212; padding: 1px 2px; }
.specialty-card { padding: 6px 8px 10px; margin: 0 0 12px; border: 20px solid transparent; border-image: url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png') 140 fill / 20px / 0 stretch; background: none; }
.specialty-card:last-child { margin-bottom: 0; }
.specialty-card > header { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 10px; align-items: center; min-height: 52px; }
.specialty-card > header > img { width: 48px; height: 52px; object-fit: contain; object-position: center; }
.specialty-card > header small { display: block; color: #bcb7a6; font-size: 12px; line-height: 18px; }
.specialty-card h3 { margin: 2px 0 0; color: #efe2ac; font-size: 17px; line-height: 23px; }
.specialty-effect { font-size: 15px; font-weight: 700; line-height: 1.5; margin: 12px 0 9px; white-space: pre-line; color: #efe9d5; }
.specialty-help { font-size: 13px; line-height: 1.65; color: #c6c5bb; margin: 0 0 14px; word-break: keep-all; overflow-wrap: break-word; }
.specialty-field { display: block; font-size: 13px; line-height: 20px; color: #c5c0ac; margin: 10px 0; }
.specialty-field select { display: block; width: 100%; max-width: 100%; height: 42px; margin-top: 5px; padding: 0 9px; border: 1px solid #726858; border-radius: 5px; color: #efe6c9; background: #0a0e10; font: inherit; font-size: 13px; }
.specialty-field select:focus-visible, .specialty-button:focus-visible, .companion-workshop-close:focus-visible { outline: 2px solid #b4a47b; outline-offset: 2px; }
.companion-workshop-close:active { transform: translateY(1px) scale(.9); filter: brightness(.7); }
.specialty-button { display: block; width: 100%; height: 44px; box-sizing: border-box; border: 0; border-radius: 0; padding: 8px 12px; color: #ebdfbb; background: transparent url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png') center / 100% 100% no-repeat; box-shadow: none; font-size: 14px; line-height: 20px; font-weight: 700; text-align: center; cursor: pointer; }
.specialty-button:active:not(:disabled) { filter: brightness(1.25); }
.specialty-button:disabled { opacity: .45; cursor: default; }
.specialty-action-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.specialty-preview, .specialty-status { margin: 10px 0; font-size: 13px; line-height: 1.55; color: #d7cba6; }
.specialty-held-item { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 9px; align-items: center; margin: 12px 0; }
.specialty-held-item img { width: 42px; height: 48px; object-fit: contain; }
.specialty-held-item b { font-size: 15px; line-height: 21px; }
.specialty-held-item small { display: block; font-size: 12px; color: #cfc4a7; margin-top: 5px; }
.specialty-card[data-specialty-kind="mixedAlchemy"] .specialty-held-item { background: none; box-shadow: none; }
.specialty-card[data-specialty-kind="mixedAlchemy"] .specialty-held-item small { color: inherit; }
.companion-workshop-confirm { flex: 0 0 44px; width: 166px; align-self: center; }
body #menuCompanionPanel .companion-detail-dialog[data-specialty="true"] .companion-detail-effects b { white-space: pre-line; font-size: 13px !important; line-height: 16px !important; }
body #menuCompanionPanel .companion-detail-dialog[data-specialty="true"] .companion-detail-effects > span:nth-child(1) small,
body #menuCompanionPanel .companion-detail-dialog[data-specialty="true"] .companion-detail-effects > span:nth-child(1) b { transform: none !important; }
body #menuCompanionPanel .companion-detail-dialog[data-specialty="true"] .companion-detail-effects > span:nth-child(2) small,
body #menuCompanionPanel .companion-detail-dialog[data-specialty="true"] .companion-detail-effects > span:nth-child(2) b { transform: none !important; }
body #menuCompanionPanel .specialty-companion > span > em { white-space: pre-line !important; font-size: 10px !important; line-height: 14px !important; }

/* Each hatchling shares the same portrait well and text baseline. */
.specialty-card[data-specialty-kind="growingEgg"] { padding: 4px 2px 8px; }
.specialty-card[data-specialty-kind="growingEgg"] .specialty-effect { font-size: 13px; line-height: 1.6; }
.egg-tendencies > div { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 9px; min-height: 78px; margin: 6px 0; padding: 8px 5px; background: transparent url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png') center / 100% 100% no-repeat; }
.egg-tendencies img { display: block; width: 52px; height: 60px; object-fit: contain; object-position: center; transform: translateX(5px); }
.egg-tendencies b { display: block; color: #eee0ae; font-size: 14px; line-height: 20px; }
.egg-tendencies em { float: right; position: relative; right: 10px; font-style: normal; color: #abd4d8; font-size: 12px; }
.egg-tendencies small { display: block; color: #b7b29f; font-size: 11px; line-height: 17px; }
.egg-tendencies p { margin: 3px 0 0; color: #dedaca; font-size: 11px; line-height: 16px; word-break: keep-all; }
.egg-tendencies > div > span { min-width: 0; padding-right: 7px; }
.egg-tendencies p, .egg-tendencies small, .egg-tendencies b { overflow-wrap: anywhere; }
html[lang="ja"] #companionWorkshopPanel .specialty-help,
html[lang="ja"] .egg-tendencies p { word-break: normal; line-break: strict; }
.egg-hatched { text-align: center; }
.egg-hatched img { width: 116px; height: 122px; object-fit: contain; transform: translateX(5px); }
.egg-hatched p { font-size: 13px; line-height: 21px; margin: 2px 0 12px; white-space: pre-line; }
.egg-rules { margin-top: 12px; }
.egg-rules summary { cursor: pointer; color: #e9d59b; font-size: 13px; line-height: 30px; }
.egg-rules .specialty-help { white-space: pre-line; padding-top: 8px; font-size: 12px; }
.egg-rules summary:active { filter: brightness(.75); }
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="growingEgg"] #companionDetailGrowth { font-size: 11.5px !important; line-height: 17px !important; white-space: pre-line; max-height: 182px; overflow-y: auto; overscroll-behavior: contain; }
.prism-element-row { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; margin:12px 0; }
.prism-element-row > span { display:flex; flex-direction:column; align-items:center; min-width:0; text-align:center; }
.prism-element-row img { width:28px; height:28px; object-fit:contain; }
.prism-element-row small { font-size:10px; overflow-wrap:anywhere; line-height:1.4; margin-top:4px; }
.prism-element-row [data-collected="false"] { filter:grayscale(1); opacity:.36; }
.specialty-card[data-specialty-kind="prismCollection"] .specialty-effect,
.specialty-card[data-specialty-kind="prismCollection"] .specialty-help { word-break:keep-all; overflow-wrap:anywhere; }
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="prismCollection"] #companionDetailGrowth { word-break:keep-all !important; overflow-wrap:anywhere; white-space:pre-line !important; }
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="prismCollection"][data-readable-effects="true"] .companion-detail-effects {
  grid-template-rows: 104px !important;
}
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="prismCollection"][data-readable-effects="true"][data-max-stars="true"] {
  --max-detail-effects-height: 104px !important;
}
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="prismCollection"][data-readable-effects="true"]:not([data-max-stars="true"]):has(.collection-detail-party-actions:not(:empty)) {
  --prism-detail-art-height: 186px;
  height: 703px !important;
  grid-template-rows: var(--prism-detail-art-height) auto auto 18px 104px auto 104px minmax(60px,auto) 42px !important;
}
@media (max-width:375px), (max-height:820px) {
  body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="prismCollection"][data-readable-effects="true"]:not([data-max-stars="true"]):has(.collection-detail-party-actions:not(:empty)) {
    --prism-detail-art-height: 164px;
    height: 679px !important;
  }
}
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="prismCollection"][data-readable-effects="true"] .companion-detail-effects > span:nth-child(1) {
  height: auto !important; min-height: 104px !important;
  grid-template-rows: max-content max-content !important;
  padding: 8px 18px !important;
}
body #menuCompanionPanel #companionDetailDialog[data-specialty-kind="prismCollection"][data-readable-effects="true"] #companionDetailCurrentEffect {
  line-height: 14px !important;
}
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="mixedAlchemy"][data-readable-effects="true"] .companion-detail-effects > span:nth-child(1) {
  padding: 6px 18px !important;
  row-gap: 0 !important;
}
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="mixedAlchemy"][data-readable-effects="true"] #companionDetailCurrentEffect {
  line-height: 14px !important;
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v1.css */
/* Companion summon reveal V1: restrained in-card pity copy, one-cell resource
   correction, and a painted charge / surge / reveal sequence. */

/* The premium resource cell has the longest label. Correct only this painted
   quarter instead of moving the four-cell rail as one group. */
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-premium {
  --resource-copy-left: 35px;
}

body #menuCompanionPanel .companion-currency-item.currency-premium > .companion-currency-copy {
  right: 2px !important;
}

body #menuCompanionPanel .companion-currency-item.currency-premium > .companion-currency-copy > em {
  max-width: 100% !important;
  overflow: hidden !important;
  color: #c9d8df !important;
  font-size: 7px !important;
  letter-spacing: -.06em !important;
}

body.companion-summon-reveal-open {
  overflow: hidden !important;
}

body #menuCompanionPanel .companion-summon-reveal[hidden] {
  display: none !important;
}

body #menuCompanionPanel .companion-summon-reveal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

body #menuCompanionPanel .companion-summon-reveal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(42, 89, 154, .38) 0 12%, rgba(5, 11, 22, .88) 44%, rgba(0, 2, 8, .97) 76%),
    rgba(0, 2, 8, .94) !important;
  backdrop-filter: blur(5px) brightness(.52) !important;
  animation: companion-summon-backdrop-in .24s ease-out both !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-backdrop {
  background:
    radial-gradient(circle at 50% 45%, rgba(100, 32, 154, .5) 0 12%, rgba(17, 5, 32, .92) 45%, rgba(1, 1, 8, .98) 78%),
    rgba(0, 1, 7, .96) !important;
}

body #menuCompanionPanel .companion-summon-reveal-stage {
  position: relative !important;
  width: min(374px, calc(100vw - 8px), calc((100dvh - 8px) * .6667)) !important;
  aspect-ratio: 2 / 3 !important;
  max-height: calc(100dvh - 8px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent url("assets/generated/ui/loot-reveal-frame-v2.png") center / 100% 100% no-repeat !important;
  color: #e9f4f8 !important;
  text-shadow: 0 2px 3px #000, 0 0 5px rgba(12, 32, 52, .9) !important;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .78)) !important;
  animation: companion-summon-stage-in .32s cubic-bezier(.2, .82, .3, 1) both !important;
}

body #menuCompanionPanel .companion-summon-reveal-title {
  position: absolute !important;
  top: 15.7% !important;
  left: 20% !important;
  right: 20% !important;
  z-index: 8 !important;
  display: block !important;
  margin: 0 !important;
  color: #f0e2aa !important;
  font-size: clamp(16px, 4.8vw, 20px) !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-title {
  color: #f3d59b !important;
}

body #menuCompanionPanel .companion-summon-reveal-kicker {
  position: absolute !important;
  top: 22.4% !important;
  left: 15% !important;
  right: 15% !important;
  z-index: 8 !important;
  margin: 0 !important;
  color: #bdd9e9 !important;
  font-size: clamp(8px, 2.4vw, 10px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transition: color .22s ease, transform .22s ease !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-kicker {
  color: #dfc0f2 !important;
}

body #menuCompanionPanel .companion-summon-reveal-energy {
  position: absolute !important;
  top: 25% !important;
  left: 50% !important;
  z-index: 3 !important;
  width: 74% !important;
  aspect-ratio: 1 !important;
  transform: translateX(-50%) !important;
  transform-origin: center !important;
  transition: opacity .28s ease, transform .4s cubic-bezier(.2, .8, .2, 1), filter .28s ease !important;
}

body #menuCompanionPanel .companion-summon-reveal-energy > img {
  position: absolute !important;
  inset: 2% !important;
  z-index: 2 !important;
  width: 96% !important;
  height: 96% !important;
  object-fit: contain !important;
  filter: saturate(.72) brightness(.55) contrast(1.08) !important;
  opacity: .58 !important;
  transform: scale(.88) !important;
  transition: opacity .35s ease, transform .52s cubic-bezier(.2, .8, .2, 1), filter .35s ease !important;
  animation: companion-summon-art-breathe 1.3s ease-in-out infinite alternate !important;
}

body #menuCompanionPanel .summon-reveal-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 4 !important;
  width: 84% !important;
  height: 84% !important;
  border: 1px solid rgba(85, 196, 255, .64) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px rgba(42, 167, 255, .65), inset 0 0 12px rgba(36, 132, 255, .26) !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  animation: companion-summon-ring-spin 3.4s linear infinite !important;
}

body #menuCompanionPanel .summon-reveal-ring::before,
body #menuCompanionPanel .summon-reveal-ring::after {
  content: "" !important;
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  background: url("assets/generated/abyss_little_stars_v3_1793206800000/spark_star.png") center / contain no-repeat !important;
  filter: drop-shadow(0 0 4px #79d9ff) !important;
}

body #menuCompanionPanel .summon-reveal-ring::before { top: -4px !important; left: 50% !important; }
body #menuCompanionPanel .summon-reveal-ring::after { bottom: -4px !important; left: 50% !important; }

body #menuCompanionPanel .summon-reveal-ring.ring-two {
  width: 66% !important;
  height: 66% !important;
  border-color: rgba(233, 195, 91, .56) !important;
  transform: translate(-50%, -50%) rotate(35deg) !important;
  animation-direction: reverse !important;
  animation-duration: 2.7s !important;
}

body #menuCompanionPanel .summon-reveal-ring.ring-three {
  width: 48% !important;
  height: 48% !important;
  border-color: rgba(141, 105, 255, .62) !important;
  animation-duration: 2s !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .summon-reveal-ring {
  border-color: rgba(178, 88, 255, .72) !important;
  box-shadow: 0 0 12px rgba(138, 44, 255, .78), inset 0 0 14px rgba(111, 43, 213, .35) !important;
}

body #menuCompanionPanel .summon-reveal-core {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 5 !important;
  width: 18% !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #fff 0 8%, #83dcff 24%, rgba(22, 125, 255, .65) 50%, transparent 72%) !important;
  box-shadow: 0 0 15px #66d5ff, 0 0 34px rgba(35, 125, 255, .85) !important;
  transform: translate(-50%, -50%) !important;
  animation: companion-summon-core-pulse .68s ease-in-out infinite alternate !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .summon-reveal-core {
  background: radial-gradient(circle, #fff 0 8%, #e6b5ff 24%, rgba(148, 45, 255, .72) 52%, transparent 74%) !important;
  box-shadow: 0 0 18px #d49aff, 0 0 42px rgba(122, 31, 255, .9) !important;
}

body #menuCompanionPanel .companion-summon-reveal-energy > i {
  position: absolute !important;
  z-index: 6 !important;
  width: 13px !important;
  height: 13px !important;
  background: url("assets/generated/abyss_little_stars_v3_1793206800000/spark_star.png") center / contain no-repeat !important;
  filter: drop-shadow(0 0 5px #75d8ff) !important;
  animation: companion-summon-spark 1.15s ease-in-out infinite alternate !important;
}

body #menuCompanionPanel .companion-summon-reveal-energy > i:nth-of-type(1) { left: 8%; top: 28%; animation-delay: -.1s !important; }
body #menuCompanionPanel .companion-summon-reveal-energy > i:nth-of-type(2) { left: 23%; top: 5%; animation-delay: -.45s !important; }
body #menuCompanionPanel .companion-summon-reveal-energy > i:nth-of-type(3) { right: 18%; top: 9%; animation-delay: -.8s !important; }
body #menuCompanionPanel .companion-summon-reveal-energy > i:nth-of-type(4) { right: 4%; top: 42%; animation-delay: -.25s !important; }
body #menuCompanionPanel .companion-summon-reveal-energy > i:nth-of-type(5) { right: 18%; bottom: 5%; animation-delay: -.62s !important; }
body #menuCompanionPanel .companion-summon-reveal-energy > i:nth-of-type(6) { left: 24%; bottom: 2%; animation-delay: -.95s !important; }
body #menuCompanionPanel .companion-summon-reveal-energy > i:nth-of-type(7) { left: 3%; bottom: 34%; animation-delay: -.33s !important; }
body #menuCompanionPanel .companion-summon-reveal-energy > i:nth-of-type(8) { left: 48%; top: 14%; animation-delay: -.72s !important; }

body #menuCompanionPanel .companion-summon-reveal-results {
  position: absolute !important;
  top: 25.5% !important;
  left: 16.5% !important;
  right: 16.5% !important;
  bottom: 25% !important;
  z-index: 7 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  gap: 3px !important;
  align-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-results {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  left: 22% !important;
  right: 22% !important;
  top: 28% !important;
  bottom: 27% !important;
}

body #menuCompanionPanel .companion-summon-reveal-card {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: 12px 14px 11px !important;
  align-content: center !important;
  column-gap: 5px !important;
  padding: 3px 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/companion_ui_v6/companion-tab-inactive.png") center / 100% 100% no-repeat !important;
  color: #e8f4f8 !important;
  opacity: 0 !important;
  transform: translateY(8px) scale(.94) !important;
}

body #menuCompanionPanel .summon-reveal-card-art {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  width: 38px !important;
  height: 38px !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(68, 134, 177, .22), rgba(4, 10, 19, .8) 68%) !important;
}

body #menuCompanionPanel .summon-reveal-card-art > img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 3px #000) !important;
}

body #menuCompanionPanel .companion-summon-reveal-card > small,
body #menuCompanionPanel .companion-summon-reveal-card > strong,
body #menuCompanionPanel .companion-summon-reveal-card > em {
  grid-column: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body #menuCompanionPanel .companion-summon-reveal-card > small { color: #91d2eb !important; font-size: 7px !important; }
body #menuCompanionPanel .companion-summon-reveal-card > strong { color: #f1e5b3 !important; font-size: 9px !important; }
body #menuCompanionPanel .companion-summon-reveal-card > em { color: #c6d7df !important; font-size: 7px !important; font-style: normal !important; }

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) 18px 24px 17px !important;
  gap: 2px !important;
  padding: 10px 12px 12px !important;
  background-size: 116% 106% !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .summon-reveal-card-art {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: radial-gradient(circle, rgba(79, 149, 195, .35), rgba(4, 9, 18, .38) 50%, transparent 72%) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .summon-reveal-card-art > img {
  width: 86% !important;
  height: 86% !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > small,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > strong,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > em {
  grid-column: 1 !important;
  text-align: center !important;
  text-overflow: clip !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > small { font-size: 10px !important; }
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > strong { font-size: 15px !important; }
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > em { font-size: 9px !important; }

body #menuCompanionPanel .companion-summon-reveal-card.rarity-legendary,
body #menuCompanionPanel .companion-summon-reveal-card.rarity-mythic {
  filter: drop-shadow(0 0 4px rgba(236, 169, 67, .58)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-card.rarity-mythic {
  filter: drop-shadow(0 0 5px rgba(240, 95, 156, .82)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-count {
  position: absolute !important;
  left: 19% !important;
  right: 19% !important;
  bottom: 19.2% !important;
  z-index: 8 !important;
  margin: 0 !important;
  color: #a9c8d6 !important;
  font-size: clamp(8px, 2.2vw, 10px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions {
  position: absolute !important;
  left: 24% !important;
  right: 24% !important;
  bottom: 6.6% !important;
  z-index: 9 !important;
  height: 8% !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal-actions > button:not(.active) {
  width: 100% !important;
  height: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/companion_ui_v6/companion-tab-active.png") center / 100% 100% no-repeat !important;
  color: #f1e5b3 !important;
  font-size: clamp(10px, 3vw, 13px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: none !important;
  filter: saturate(.68) brightness(.82) !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button:active {
  filter: saturate(.78) brightness(.68) !important;
  transform: translateY(1px) scale(.99) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="surge"] .companion-summon-reveal-stage {
  animation: companion-summon-surge .48s ease-out both !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="surge"] .companion-summon-reveal-energy > img {
  opacity: .12 !important;
  transform: scale(.62) !important;
  filter: brightness(1.8) saturate(1.4) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="surge"] .summon-reveal-ring {
  animation-duration: .42s !important;
  border-width: 2px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="surge"] .summon-reveal-core {
  animation: companion-summon-core-burst .5s ease-out both !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="reveal"] .companion-summon-reveal-energy {
  opacity: .08 !important;
  transform: translateX(-50%) scale(1.22) !important;
  filter: blur(1px) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="reveal"] .companion-summon-reveal-results {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="reveal"] .companion-summon-reveal-card {
  animation: companion-summon-card-reveal .38s calc(var(--summon-result-index) * 55ms) cubic-bezier(.2, .82, .3, 1) forwards !important;
}

/* Static QA routes show the settled frame; real summons keep the staged card reveal above. */

body #menuCompanionPanel .companion-summon-reveal[data-rarity="mythic"][data-phase="reveal"] .companion-summon-reveal-backdrop {
  box-shadow: inset 0 0 80px rgba(211, 51, 130, .36) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="mythic"][data-phase="reveal"] .companion-summon-reveal-stage {
  filter: drop-shadow(0 0 16px rgba(235, 76, 157, .52)) drop-shadow(0 20px 24px rgba(0, 0, 0, .78)) !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-premium {
    --resource-copy-left: 33px;
  }

  body #menuCompanionPanel .companion-currency-item.currency-premium > .companion-currency-copy > em {
    font-size: 6.4px !important;
    letter-spacing: -.08em !important;
  }

  body #menuCompanionPanel .companion-summon-card.premium > .companion-mythic-pity-status {
    gap: 4px !important;
  }

  body #menuCompanionPanel .companion-summon-card.premium > .companion-mythic-pity-status > span {
    font-size: 8px !important;
  }

  body #menuCompanionPanel .companion-summon-card.premium > .companion-mythic-pity-status > b {
    font-size: 9.5px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal-card {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 3px !important;
    padding-inline: 4px !important;
  }

  body #menuCompanionPanel .summon-reveal-card-art { width: 34px !important; height: 34px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body #menuCompanionPanel .companion-summon-reveal *,
  body #menuCompanionPanel .companion-summon-reveal *::before,
  body #menuCompanionPanel .companion-summon-reveal *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@keyframes companion-summon-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes companion-summon-stage-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes companion-summon-art-breathe {
  from { transform: scale(.86); filter: saturate(.68) brightness(.48); }
  to { transform: scale(.93); filter: saturate(.9) brightness(.7); }
}

@keyframes companion-summon-ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes companion-summon-core-pulse {
  from { transform: translate(-50%, -50%) scale(.72); opacity: .72; }
  to { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}

@keyframes companion-summon-spark {
  from { opacity: .28; transform: scale(.62) rotate(-12deg); }
  to { opacity: 1; transform: scale(1.15) rotate(12deg); }
}

@keyframes companion-summon-surge {
  0% { transform: translate(0, 0) scale(1); filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .78)) brightness(1); }
  30% { transform: translate(-2px, 1px) scale(1.008); filter: drop-shadow(0 0 14px rgba(105, 198, 255, .7)) brightness(1.32); }
  62% { transform: translate(2px, -1px) scale(.998); filter: drop-shadow(0 0 26px rgba(180, 117, 255, .86)) brightness(1.72); }
  100% { transform: translate(0, 0) scale(1); filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .78)) brightness(1); }
}

@keyframes companion-summon-core-burst {
  0% { transform: translate(-50%, -50%) scale(.8); opacity: .76; }
  55% { transform: translate(-50%, -50%) scale(4.8); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}

@keyframes companion-summon-card-reveal {
  0% { opacity: 0; transform: translateY(8px) scale(.94); filter: brightness(2.1); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.025); filter: brightness(1.35); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v2.css */
/* Companion summon reveal V2
   One painted hierarchy for common/premium and 1/10 results. Effects use
   light only; every text/card/button is seated in a painted recess. */

body #menuCompanionPanel .companion-summon-reveal {
  --summon-light: 103, 213, 255;
  --summon-light-strong: #83dcff;
  --summon-copy: #cbe7f2;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] {
  --summon-light: 207, 107, 255;
  --summon-light-strong: #e0a4ff;
  --summon-copy: #ead2f6;
}

body #menuCompanionPanel .companion-summon-reveal::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: -1 !important;
  width: min(152vw, 760px) !important;
  aspect-ratio: 1 !important;
  pointer-events: none !important;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(var(--summon-light), .11) 0 1.2deg,
    transparent 1.2deg 13deg
  ) !important;
  -webkit-mask-image: radial-gradient(circle, transparent 0 14%, #000 34%, transparent 72%) !important;
  mask-image: radial-gradient(circle, transparent 0 14%, #000 34%, transparent 72%) !important;
  opacity: .36 !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  animation: companion-summon-v2-rays 18s linear infinite !important;
}

body #menuCompanionPanel .companion-summon-reveal::after {
  content: "" !important;
  position: absolute !important;
  inset: -15% !important;
  z-index: 18 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 50% 50%, #fff 0 4%, rgba(var(--summon-light), .92) 10%, rgba(var(--summon-light), .28) 28%, transparent 58%) !important;
  opacity: 0 !important;
  transform: scale(.42) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="surge"]::after {
  animation: companion-summon-v2-flash .62s ease-out both !important;
}

body #menuCompanionPanel .companion-summon-reveal-backdrop {
  background:
    radial-gradient(circle at 50% 47%, rgba(var(--summon-light), .28) 0 13%, rgba(4, 10, 20, .92) 45%, rgba(0, 2, 8, .985) 78%),
    rgba(0, 2, 8, .96) !important;
  box-shadow: inset 0 0 92px rgba(var(--summon-light), .12) !important;
}

body #menuCompanionPanel .companion-summon-reveal-stage {
  width: min(382px, calc(100vw - 8px), calc((100dvh - 10px) * .6966)) !important;
  aspect-ratio: 1047 / 1503 !important;
  max-height: calc(100dvh - 10px) !important;
  background: transparent url("assets/generated/popup_rework_single_info_alpha_1790947200024/sss-reveal-frame-single-info-alpha.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .84)) drop-shadow(0 0 11px rgba(var(--summon-light), .18)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-title {
  top: 7.8% !important;
  left: 24% !important;
  right: 24% !important;
  color: #f2dfa8 !important;
  font-size: clamp(16px, 4.7vw, 20px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  transform: translateY(-1px) !important;
}

body #menuCompanionPanel .companion-summon-reveal-kicker {
  top: 12.4% !important;
  left: 22% !important;
  right: 22% !important;
  color: var(--summon-copy) !important;
  font-size: clamp(7.5px, 2.15vw, 9px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
}

body #menuCompanionPanel .companion-summon-reveal-energy {
  top: 19.5% !important;
  width: 63% !important;
}

/* Common summon keeps one continuous source silhouette across charge/surge. */
body #menuCompanionPanel #companionSummonReveal[data-type="common"][data-static="0"]:not([data-phase="reveal"]) .companion-summon-reveal-energy > img {
  animation: common-summon-gather var(--common-summon-duration, 1020ms) cubic-bezier(.3, 0, .55, 1) both !important;
  filter: saturate(.92) brightness(.85) !important;
  transform: none !important;
  opacity: 1 !important;
}
body #menuCompanionPanel #companionSummonReveal[data-type="common"][data-phase="reveal"] .companion-summon-reveal-energy > img { visibility: hidden !important; }
body #menuCompanionPanel #companionSummonReveal[data-type="common"] .companion-summon-reveal-stage {
  animation: none !important;
}
body #menuCompanionPanel #companionSummonReveal[data-type="common"] .companion-summon-reveal-energy {
  transform: translateX(-50%) !important;
  transition: opacity .25s ease !important;
}
@keyframes common-summon-gather {
  0% { scale: 1; }
  65% { scale: .55; }
  100% { scale: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body #menuCompanionPanel #companionSummonReveal[data-type="common"] .companion-summon-reveal-energy > img { animation: none !important; }
}
body #menuCompanionPanel .companion-summon-reveal-energy > img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .68 !important;
  filter: saturate(.86) brightness(.6) contrast(1.1) drop-shadow(0 0 12px rgba(var(--summon-light), .24)) !important;
}

body #menuCompanionPanel .summon-reveal-ring {
  width: 92% !important;
  height: 92% !important;
  border-color: rgba(var(--summon-light), .78) !important;
  box-shadow: 0 0 10px rgba(var(--summon-light), .78), inset 0 0 16px rgba(var(--summon-light), .28) !important;
}

body #menuCompanionPanel .summon-reveal-ring.ring-two {
  width: 70% !important;
  height: 70% !important;
  border-color: rgba(242, 204, 112, .7) !important;
}

body #menuCompanionPanel .summon-reveal-ring.ring-three {
  width: 49% !important;
  height: 49% !important;
  border-color: rgba(var(--summon-light), .9) !important;
}

body #menuCompanionPanel .summon-reveal-core {
  width: 20% !important;
  background: radial-gradient(circle, #fff 0 8%, var(--summon-light-strong) 24%, rgba(var(--summon-light), .72) 49%, transparent 74%) !important;
  box-shadow: 0 0 18px var(--summon-light-strong), 0 0 48px rgba(var(--summon-light), .9) !important;
}

body #menuCompanionPanel .companion-summon-reveal-energy > i {
  width: 15px !important;
  height: 15px !important;
  filter: drop-shadow(0 0 6px var(--summon-light-strong)) brightness(1.15) !important;
}

body #menuCompanionPanel .companion-summon-reveal-results {
  top: 20.2% !important;
  left: 13.2% !important;
  right: 13.2% !important;
  bottom: 39.7% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  gap: 3px 4px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-results {
  top: 19.5% !important;
  left: 20% !important;
  right: 20% !important;
  bottom: 38.5% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-results::before {
  content: attr(data-best-label) !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 1.5% !important;
  z-index: -1 !important;
  color: rgba(var(--summon-light), .13) !important;
  font-size: clamp(42px, 13vw, 54px) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 0 16px rgba(var(--summon-light), .38) !important;
}

body #menuCompanionPanel .companion-summon-reveal-card {
  --summon-grade: #8db6c9;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-rows: 9px 13px 9px !important;
  align-content: center !important;
  column-gap: 4px !important;
  padding: 4px 6px !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .72)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-card.rarity-common { --summon-grade: #b9c6cd; }
body #menuCompanionPanel .companion-summon-reveal-card.rarity-rare { --summon-grade: #70c9ec; }
body #menuCompanionPanel .companion-summon-reveal-card.rarity-hero { --summon-grade: #a68cff; }
body #menuCompanionPanel .companion-summon-reveal-card.rarity-legendary { --summon-grade: #f3b967; }
body #menuCompanionPanel .companion-summon-reveal-card.rarity-mythic { --summon-grade: #ff7bb6; }

body #menuCompanionPanel .summon-reveal-card-art {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  width: 36px !important;
  height: 36px !important;
  background: radial-gradient(circle, rgba(var(--summon-light), .22), rgba(3, 8, 16, .62) 67%, transparent 72%) !important;
}

body #menuCompanionPanel .summon-reveal-card-art > img {
  width: 34px !important;
  height: 34px !important;
  filter: drop-shadow(0 2px 3px #000) drop-shadow(0 0 3px color-mix(in srgb, var(--summon-grade) 70%, transparent)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-card > small,
body #menuCompanionPanel .companion-summon-reveal-card > strong,
body #menuCompanionPanel .companion-summon-reveal-card > em {
  grid-column: 2 !important;
  text-align: left !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-summon-reveal-card > small {
  color: var(--summon-grade) !important;
  font-size: 7.2px !important;
  align-self: end !important;
}

body #menuCompanionPanel .companion-summon-reveal-card > strong {
  color: #f1e3b2 !important;
  font-size: 9.5px !important;
  letter-spacing: -.045em !important;
  align-self: center !important;
}

body #menuCompanionPanel .companion-summon-reveal-card > em {
  color: #b9d2dc !important;
  font-size: 7.2px !important;
  align-self: start !important;
}

body #menuCompanionPanel .companion-summon-reveal-card.rarity-legendary,
body #menuCompanionPanel .companion-summon-reveal-card.rarity-mythic {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--summon-grade) 60%, transparent)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 4px 8px 7px !important;
  background: radial-gradient(circle at 50% 44%, rgba(var(--summon-light), .23), rgba(3, 8, 18, .11) 56%, transparent 72%) !important;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--summon-grade) 48%, transparent)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .summon-reveal-card-art {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(circle, rgba(var(--summon-light), .2), rgba(4, 9, 18, .08) 58%, transparent 72%) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .summon-reveal-card-art > img {
  width: 88% !important;
  height: 88% !important;
  filter: drop-shadow(0 4px 5px #000) drop-shadow(0 0 9px color-mix(in srgb, var(--summon-grade) 58%, transparent)) !important;
  transform: translateY(-3%) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > small,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > strong,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > em {
  display: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > small {
  color: var(--summon-grade) !important;
  font-size: 11px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > strong {
  color: #f3e3ad !important;
  font-size: clamp(15px, 4.4vw, 18px) !important;
  letter-spacing: -.04em !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > em {
  color: #d0e2e8 !important;
  font-size: 9px !important;
}

body #menuCompanionPanel .companion-summon-reveal-count {
  top: 68.2% !important;
  left: 18% !important;
  right: 18% !important;
  bottom: auto !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  place-items: center !important;
  color: #d2e3e8 !important;
  font-size: clamp(9px, 2.55vw, 11px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em !important;
  white-space: normal !important;
  text-wrap: balance !important;
}

body #menuCompanionPanel .companion-summon-reveal-count > strong,
body #menuCompanionPanel .companion-summon-reveal-count > span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1.15 !important;
}

body #menuCompanionPanel .companion-summon-reveal-count > strong {
  color: #f2e0aa !important;
  font-size: clamp(12px, 3.35vw, 14px) !important;
  letter-spacing: -.04em !important;
}

body #menuCompanionPanel .companion-summon-reveal-count > span {
  margin-top: 5px !important;
  color: #c5dce5 !important;
  font-size: clamp(8.5px, 2.35vw, 10px) !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions {
  left: 22% !important;
  right: 22% !important;
  bottom: 5.3% !important;
  height: 8.2% !important;
  min-height: 40px !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal-actions > button:not(.active) {
  min-height: 40px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 20px 1px !important;
  outline: 0 !important;
  background: transparent url("assets/generated/board_result_confirm_button_1790688000000/board-result-confirm-button-trimmed.png") center / 100% 100% no-repeat !important;
  color: #f2e2ad !important;
  font-size: clamp(11px, 3.2vw, 14px) !important;
  line-height: 1 !important;
  filter: saturate(.82) brightness(.94) drop-shadow(0 2px 3px rgba(0, 0, 0, .7)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button[hidden] {
  display: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-actions > button:not(.active) {
  filter: hue-rotate(14deg) saturate(.9) brightness(.96) drop-shadow(0 0 5px rgba(193, 93, 255, .28)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button:focus,
body #menuCompanionPanel .companion-summon-reveal-actions > button:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  filter: saturate(1.02) brightness(1.08) drop-shadow(0 0 7px rgba(var(--summon-light), .64)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button:active {
  transform: translateY(1px) scale(.985) !important;
  filter: saturate(.86) brightness(.76) drop-shadow(0 1px 1px rgba(0, 0, 0, .7)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="surge"] .companion-summon-reveal-stage {
  animation: companion-summon-v2-stage-surge .62s cubic-bezier(.2, .82, .3, 1) both !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="surge"] .summon-reveal-ring {
  border-width: 2px !important;
  animation-duration: .28s !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="reveal"]::before {
  opacity: .54 !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="reveal"] .companion-summon-reveal-energy {
  opacity: 0 !important;
  transform: translateX(-50%) scale(1.45) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-phase="reveal"] .companion-summon-reveal-card {
  animation: companion-summon-v2-card-in .42s calc(var(--summon-result-index) * 72ms) cubic-bezier(.16, .86, .24, 1) forwards !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-static="1"][data-phase="reveal"] .companion-summon-reveal-card {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="legendary"][data-phase="reveal"] .companion-summon-reveal-stage {
  filter: drop-shadow(0 0 17px rgba(244, 181, 84, .5)) drop-shadow(0 18px 26px rgba(0, 0, 0, .84)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="mythic"][data-phase="reveal"] .companion-summon-reveal-stage {
  filter: drop-shadow(0 0 20px rgba(255, 82, 163, .62)) drop-shadow(0 18px 28px rgba(0, 0, 0, .86)) !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal-title {
    top: 7.7% !important;
    font-size: 17px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal-kicker {
    top: 12.35% !important;
    font-size: 7.5px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal-results {
    left: 12.6% !important;
    right: 12.6% !important;
    gap: 2px 3px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal-card {
    grid-template-columns: 33px minmax(0, 1fr) !important;
    grid-template-rows: 8px 12px 8px !important;
    column-gap: 3px !important;
    padding: 3px 5px !important;
  }

  body #menuCompanionPanel .summon-reveal-card-art {
    width: 33px !important;
    height: 33px !important;
  }

  body #menuCompanionPanel .summon-reveal-card-art > img {
    width: 31px !important;
    height: 31px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal-card > small,
  body #menuCompanionPanel .companion-summon-reveal-card > em {
    font-size: 6.8px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal-card > strong {
    font-size: 8.8px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .summon-reveal-card-art {
    width: 100% !important;
    height: 100% !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .summon-reveal-card-art > img {
    width: 88% !important;
    height: 88% !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > small {
    font-size: 10px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > strong {
    font-size: 15px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card > em {
    font-size: 8.5px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal-count {
    top: 68% !important;
    font-size: 9px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal-actions {
    left: 21% !important;
    right: 21% !important;
  }
}

@keyframes companion-summon-v2-rays {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes companion-summon-v2-flash {
  0% { opacity: 0; transform: scale(.36); }
  42% { opacity: .94; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.38); }
}

@keyframes companion-summon-v2-stage-surge {
  0% { transform: scale(1); filter: brightness(1); }
  28% { transform: translateX(-2px) scale(1.006); filter: brightness(1.32); }
  52% { transform: translateX(2px) scale(.998); filter: brightness(1.75); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes companion-summon-v2-card-in {
  0% { opacity: 0; transform: translateY(10px) scale(.9); filter: brightness(2.4); }
  64% { opacity: 1; transform: translateY(-1px) scale(1.025); filter: brightness(1.28); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  body #menuCompanionPanel .companion-summon-reveal::before,
  body #menuCompanionPanel .companion-summon-reveal::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v3.css */
/* Companion summon reveal V3
   Keep all ten acquired companions visible after the light show, even when a
   background browser pauses CSS animations. Each painted card owns its icon
   well and copy alignment independently. */

body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-phase="reveal"] .companion-summon-reveal-results {
  top: 19.7% !important;
  left: 12.8% !important;
  right: 12.8% !important;
  bottom: 39.1% !important;
  gap: 4px 5px !important;
  opacity: 1 !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: 9px 13px 9px !important;
  column-gap: 4px !important;
  padding: 4px 7px 4px 6px !important;
  overflow: hidden !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  background: radial-gradient(circle, rgba(var(--summon-light), .2) 0 42%, rgba(3, 8, 16, .7) 64%, transparent 72%) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art > img {
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: translate(0, 0) scale(var(--summon-art-scale, 1)) !important;
  transform-origin: 50% 50% !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card > small,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card > strong,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card > em {
  grid-column: 2 !important;
  justify-self: stretch !important;
  align-self: center !important;
  width: 100% !important;
  text-align: left !important;
}

/* The settled result must never depend on an animation reaching its final
   frame. The staggered light wash remains decorative only. */
body #menuCompanionPanel .companion-summon-reveal[data-phase="reveal"] .companion-summon-reveal-card {
  opacity: 1 !important;
  transform: none !important;
  animation: companion-summon-v3-card-light .34s calc(var(--summon-result-index) * 65ms) ease-out both !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-static="1"][data-phase="reveal"] .companion-summon-reveal-card {
  animation: none !important;
}

@keyframes companion-summon-v3-card-light {
  0% { opacity: 1; transform: none; filter: brightness(1.85); }
  62% { opacity: 1; transform: none; filter: brightness(1.18); }
  100% { opacity: 1; transform: none; filter: brightness(1); }
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-phase="reveal"] .companion-summon-reveal-results {
    left: 12.4% !important;
    right: 12.4% !important;
    gap: 3px 4px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
    grid-template-columns: 35px minmax(0, 1fr) !important;
    grid-template-rows: 8px 12px 8px !important;
    column-gap: 3px !important;
    padding: 3px 6px 3px 5px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
    width: 32px !important;
    height: 32px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art > img {
    width: 29px !important;
    height: 29px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #menuCompanionPanel .companion-summon-reveal[data-phase="reveal"] .companion-summon-reveal-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v4.css */
/* Companion summon reveal V4
   One pull keeps the painted summoning circle. Ten pulls use ten independent
   painted seals that turn into ten independent result cards. Decorative light
   is clipped to those painted homes, and only SS+ results use the full burst. */

/* V2's viewport-wide rays and flash ignored the painted frame. V4 replaces
   them with effects owned by the stage's actual circle or ten-card bay. */
body #menuCompanionPanel .companion-summon-reveal::before,
body #menuCompanionPanel .companion-summon-reveal::after {
  display: none !important;
  animation: none !important;
}

body #menuCompanionPanel .companion-summon-reveal-stage::before,
body #menuCompanionPanel .companion-summon-reveal-stage::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 19.5% !important;
  width: 63% !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
}

body #menuCompanionPanel .companion-summon-reveal-stage::before {
  z-index: 1 !important;
  background:
    repeating-conic-gradient(from 0deg, rgba(var(--summon-light), .13) 0 1deg, transparent 1deg 15deg),
    radial-gradient(circle, rgba(var(--summon-light), .14), transparent 66%) !important;
  -webkit-mask-image: radial-gradient(circle, transparent 0 17%, #000 32%, rgba(0, 0, 0, .64) 56%, transparent 74%) !important;
  mask-image: radial-gradient(circle, transparent 0 17%, #000 32%, rgba(0, 0, 0, .64) 56%, transparent 74%) !important;
  opacity: .14 !important;
  animation: companion-summon-v4-home-turn 14s linear infinite !important;
}

body #menuCompanionPanel .companion-summon-reveal-stage::after {
  z-index: 6 !important;
  background: radial-gradient(circle, #fff 0 4%, rgba(var(--summon-light), .78) 11%, rgba(var(--summon-light), .2) 32%, transparent 65%) !important;
  opacity: 0 !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage::before,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage::after {
  left: 11.8% !important;
  right: 11.8% !important;
  top: 18.9% !important;
  bottom: 40.2% !important;
  width: auto !important;
  aspect-ratio: auto !important;
  border-radius: 7px !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage::before {
  background:
    linear-gradient(90deg, transparent 0 49.4%, rgba(var(--summon-light), .18) 50%, transparent 50.6%),
    repeating-linear-gradient(0deg, rgba(var(--summon-light), .09) 0 1px, transparent 1px 20%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent) !important;
  mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent) !important;
  animation: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage::after {
  background: radial-gradient(ellipse at center, #fff 0 3%, rgba(var(--summon-light), .74) 12%, rgba(var(--summon-light), .18) 38%, transparent 72%) !important;
}

/* Standard C-S results stay restrained. SS and SSS receive the full light. */
body #menuCompanionPanel .companion-summon-reveal[data-effect="standard"] .companion-summon-reveal-backdrop {
  background:
    radial-gradient(circle at 50% 43%, rgba(var(--summon-light), .11) 0 12%, rgba(4, 10, 20, .94) 42%, rgba(0, 2, 8, .99) 76%),
    rgba(0, 2, 8, .98) !important;
  box-shadow: inset 0 0 72px rgba(var(--summon-light), .05) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="standard"] .companion-summon-reveal-stage::before {
  opacity: .11 !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="high"] .companion-summon-reveal-stage::before {
  opacity: .42 !important;
  filter: drop-shadow(0 0 8px rgba(244, 190, 93, .46)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="mythic"] .companion-summon-reveal-stage::before {
  opacity: .54 !important;
  filter: drop-shadow(0 0 11px rgba(242, 87, 174, .58)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="standard"] .summon-reveal-ring {
  opacity: .46 !important;
  box-shadow: 0 0 5px rgba(var(--summon-light), .38), inset 0 0 8px rgba(var(--summon-light), .14) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="standard"] .summon-reveal-ring.ring-two { opacity: .34 !important; }
body #menuCompanionPanel .companion-summon-reveal[data-effect="standard"] .summon-reveal-ring.ring-three { opacity: .24 !important; }

body #menuCompanionPanel .companion-summon-reveal[data-effect="standard"] .summon-reveal-core {
  width: 15% !important;
  opacity: .72 !important;
  box-shadow: 0 0 9px var(--summon-light-strong), 0 0 24px rgba(var(--summon-light), .46) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="standard"] .companion-summon-reveal-energy > i {
  width: 10px !important;
  height: 10px !important;
  opacity: .38 !important;
  filter: drop-shadow(0 0 3px var(--summon-light-strong)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="standard"] .companion-summon-reveal-energy > i:nth-of-type(n+5) {
  display: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="standard"][data-phase="surge"] .companion-summon-reveal-stage::after {
  animation: companion-summon-v4-soft-flash .3s ease-out both !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="high"][data-phase="surge"] .companion-summon-reveal-stage::after,
body #menuCompanionPanel .companion-summon-reveal[data-effect="mythic"][data-phase="surge"] .companion-summon-reveal-stage::after {
  animation: companion-summon-v4-rare-flash .7s ease-out both !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-effect="standard"][data-phase="surge"] .companion-summon-reveal-stage::after {
  animation-name: companion-summon-v4-soft-flash-ten !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-effect="high"][data-phase="surge"] .companion-summon-reveal-stage::after,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-effect="mythic"][data-phase="surge"] .companion-summon-reveal-stage::after {
  animation-name: companion-summon-v4-rare-flash-ten !important;
}

/* A ten-pull starts from ten separate painted seals, never the one-pull orb. */
body #menuCompanionPanel .companion-summon-reveal-ten-charge {
  display: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-energy {
  display: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge {
  position: absolute !important;
  left: 11.8% !important;
  right: 11.8% !important;
  top: 18.9% !important;
  bottom: 40.2% !important;
  z-index: 7 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px 8px !important;
  opacity: 1 !important;
  transition: opacity .18s ease !important;
}

body #menuCompanionPanel .companion-summon-reveal-ten-charge > span {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  filter: brightness(.78) saturate(.7) drop-shadow(0 1px 1px rgba(0, 0, 0, .72)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-ten-charge > span::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  background: url("assets/generated/abyss_little_stars_v3_1793206800000/spark_star.png") center / contain no-repeat !important;
  opacity: .68 !important;
  filter: saturate(.78) brightness(1.04) drop-shadow(0 0 4px rgba(var(--summon-light), .48)) !important;
  animation: companion-summon-v4-seal-breathe 1.15s ease-in-out infinite alternate !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="high"] .companion-summon-reveal-ten-charge > span,
body #menuCompanionPanel .companion-summon-reveal[data-effect="mythic"] .companion-summon-reveal-ten-charge > span {
  filter: brightness(.88) saturate(.92) drop-shadow(0 0 3px rgba(var(--summon-light), .34)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-effect="high"] .companion-summon-reveal-ten-charge > span::before,
body #menuCompanionPanel .companion-summon-reveal[data-effect="mythic"] .companion-summon-reveal-ten-charge > span::before {
  width: 22px !important;
  height: 22px !important;
  opacity: 1 !important;
  filter: saturate(1.1) brightness(1.3) drop-shadow(0 0 8px var(--summon-light-strong)) !important;
  animation-name: companion-summon-v4-seal-high !important;
  animation-duration: .72s !important;
}

body #menuCompanionPanel .companion-summon-reveal-ten-charge > span:nth-child(2)::before { animation-delay: -.12s !important; }
body #menuCompanionPanel .companion-summon-reveal-ten-charge > span:nth-child(3)::before { animation-delay: -.24s !important; }
body #menuCompanionPanel .companion-summon-reveal-ten-charge > span:nth-child(4)::before { animation-delay: -.36s !important; }
body #menuCompanionPanel .companion-summon-reveal-ten-charge > span:nth-child(5)::before { animation-delay: -.48s !important; }
body #menuCompanionPanel .companion-summon-reveal-ten-charge > span:nth-child(6)::before { animation-delay: -.60s !important; }
body #menuCompanionPanel .companion-summon-reveal-ten-charge > span:nth-child(7)::before { animation-delay: -.72s !important; }
body #menuCompanionPanel .companion-summon-reveal-ten-charge > span:nth-child(8)::before { animation-delay: -.84s !important; }
body #menuCompanionPanel .companion-summon-reveal-ten-charge > span:nth-child(9)::before { animation-delay: -.96s !important; }
body #menuCompanionPanel .companion-summon-reveal-ten-charge > span:nth-child(10)::before { animation-delay: -1.08s !important; }

body #menuCompanionPanel .companion-summon-reveal[data-phase="reveal"] .companion-summon-reveal-ten-charge {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ten result cards occupy the exact ten seal homes with real gutters. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-phase="reveal"] .companion-summon-reveal-results {
  left: 11.8% !important;
  right: 11.8% !important;
  top: 18.9% !important;
  bottom: 40.2% !important;
  gap: 6px 8px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
  grid-template-columns: 35px minmax(0, 1fr) !important;
  grid-template-rows: 8px 12px 8px !important;
  padding: 3px 7px 3px 6px !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .72)) !important;
  isolation: isolate !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card.rarity-legendary {
  filter: drop-shadow(0 0 4px rgba(243, 185, 103, .62)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card.rarity-mythic {
  filter: drop-shadow(0 0 5px rgba(255, 123, 182, .74)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
  width: 32px !important;
  height: 32px !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge,
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-phase="reveal"] .companion-summon-reveal-results {
    left: 11.5% !important;
    right: 11.5% !important;
    gap: 5px 7px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage::before,
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage::after {
    left: 11.5% !important;
    right: 11.5% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #menuCompanionPanel .companion-summon-reveal-stage::before,
  body #menuCompanionPanel .companion-summon-reveal-stage::after,
  body #menuCompanionPanel .companion-summon-reveal-ten-charge > span::before {
    animation: none !important;
  }
}

@keyframes companion-summon-v4-home-turn {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes companion-summon-v4-soft-flash {
  0% { opacity: 0; transform: translateX(-50%) scale(.86); }
  45% { opacity: .34; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.08); }
}

@keyframes companion-summon-v4-rare-flash {
  0% { opacity: 0; transform: translateX(-50%) scale(.72); }
  42% { opacity: .94; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.2); }
}

@keyframes companion-summon-v4-soft-flash-ten {
  0% { opacity: 0; transform: scale(.92); }
  45% { opacity: .3; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes companion-summon-v4-rare-flash-ten {
  0% { opacity: 0; transform: scale(.84); }
  42% { opacity: .88; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes companion-summon-v4-seal-breathe {
  from { opacity: .35; transform: scale(.82); }
  to { opacity: .62; transform: scale(1); }
}

@keyframes companion-summon-v4-seal-high {
  from { opacity: .66; transform: scale(.78); }
  to { opacity: 1; transform: scale(1.12); }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v5.css */
/* Companion summon reveal V5
   Ten pulls use a purpose-built painted 2x5 frame. No circular one-pull home,
   pasted card surfaces, wide overlay flash, or stage shake remains. */

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage {
  aspect-ratio: 1047 / 1501 !important;
  background: transparent url("assets/generated/companion_summon_reveal_v5_20260831/ten-pull-reveal-frame-v2-alpha.png") center / 100% 100% no-repeat !important;
}

/* The ten painted recesses own the light. Do not reuse the one-pull circle or
   cast one large rectangular flash across several cells. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage::before,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage::after {
  display: none !important;
  animation: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-phase="reveal"] .companion-summon-reveal-results {
  left: 19% !important;
  right: 19% !important;
  top: 16.5% !important;
  bottom: 27.2% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px 10px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span {
  overflow: hidden !important;
  background: none !important;
  border-radius: 5px !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span::before {
  z-index: 2 !important;
  width: 18px !important;
  height: 18px !important;
  opacity: .48 !important;
  filter: saturate(.78) brightness(.92) drop-shadow(0 0 3px rgba(var(--summon-light), .4)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span::after {
  content: "" !important;
  position: absolute !important;
  inset: 7% !important;
  z-index: 1 !important;
  border-radius: 5px !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at center, rgba(var(--summon-light), .48) 0 8%, rgba(var(--summon-light), .16) 31%, transparent 72%) !important;
  opacity: .1 !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-effect="high"] .companion-summon-reveal-ten-charge > span::before {
  width: 21px !important;
  height: 21px !important;
  opacity: .82 !important;
  filter: saturate(1.02) brightness(1.18) drop-shadow(0 0 6px var(--summon-light-strong)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-effect="mythic"] .companion-summon-reveal-ten-charge > span::before {
  width: 23px !important;
  height: 23px !important;
  opacity: 1 !important;
  filter: saturate(1.14) brightness(1.34) drop-shadow(0 0 8px var(--summon-light-strong)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-effect="standard"][data-phase="surge"] .companion-summon-reveal-ten-charge > span::after {
  animation: companion-summon-v5-cell-soft .28s ease-out both !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-effect="high"][data-phase="surge"] .companion-summon-reveal-ten-charge > span::after,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-effect="mythic"][data-phase="surge"] .companion-summon-reveal-ten-charge > span::after {
  animation: companion-summon-v5-cell-rare .58s ease-out both !important;
}

/* The borders already exist in the new raster frame. Result content is placed
   inside each recess instead of drawing another card on top. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
  grid-template-columns: 33px minmax(0, 1fr) !important;
  grid-template-rows: 10px 15px 9px !important;
  column-gap: 4px !important;
  padding: 5px 7px 5px 6px !important;
  background: none !important;
  filter: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
  width: 31px !important;
  height: 31px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art > img {
  width: 29px !important;
  height: 29px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card > small,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card > strong,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card > em {
  align-self: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card > small,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card > em {
  font-size: 7.5px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card > strong {
  font-size: 8.5px !important;
  letter-spacing: -.06em !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-count {
  top: 77.7% !important;
  left: 18% !important;
  right: 18% !important;
}

/* A surge changes light only. The whole frame never moves sideways. */
body #menuCompanionPanel .companion-summon-reveal[data-phase="surge"] .companion-summon-reveal-stage {
  transform: none !important;
  animation: none !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge,
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-phase="reveal"] .companion-summon-reveal-results {
    left: 18.8% !important;
    right: 18.8% !important;
    gap: 3px 9px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
    grid-template-columns: 31px minmax(0, 1fr) !important;
    grid-template-rows: 9px 14px 8px !important;
    padding: 4px 6px 4px 5px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
    width: 29px !important;
    height: 29px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art > img {
    width: 27px !important;
    height: 27px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card > strong {
    font-size: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span::after {
    animation: none !important;
  }
}

@keyframes companion-summon-v5-cell-soft {
  0% { opacity: .08; transform: scale(.96); }
  48% { opacity: .26; transform: scale(1); }
  100% { opacity: .08; transform: scale(1); }
}

@keyframes companion-summon-v5-cell-rare {
  0% { opacity: .1; transform: scale(.92); }
  46% { opacity: .72; transform: scale(1); }
  100% { opacity: .1; transform: scale(1); }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v6.css */
/* Companion summon reveal V6
   The top plaque owns one title only. Ten-pull contents are aligned against
   each painted recess independently; no equal-row wrapper decides the fit. */

/* The old helper line was removed from the markup. Keep this guard so a stale
   cached document cannot paint it below the title. */
body #menuCompanionPanel .companion-summon-reveal-kicker {
  display: none !important;
}

/* Optical center of the actual painted title recess (not the whole frame). */
body #menuCompanionPanel .companion-summon-reveal-title {
  top: 6.35% !important;
  left: 24% !important;
  right: 24% !important;
  height: 6.55% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  line-height: 1 !important;
  transform: none !important;
}

/* Fill the frame, then seat every child in its own painted home. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-phase="reveal"] .companion-summon-reveal-results {
  inset: 0 !important;
  display: block !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
  position: absolute !important;
  width: 28.2% !important;
  height: 9.7% !important;
  margin: 0 !important;
}

/* Left and right recesses have different painted centers. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(odd),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(odd) {
  left: 19.5% !important;
  right: auto !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(even),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(even) {
  left: 51.3% !important;
  right: auto !important;
}

/* The source painting's lower row gaps grow slightly. Each pair is corrected
   independently instead of distributing five equal grid tracks. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(1),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(2),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(1),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(2) { top: 17.5% !important; }

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(3),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(4),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(3),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(4) { top: 28.25% !important; }

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(5),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(6),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(5),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(6) { top: 39.12% !important; }

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(7),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(8),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(7),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(8) { top: 50.31% !important; }

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(9),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge > span:nth-child(10),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(9),
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card:nth-child(10) { top: 61.77% !important; }

/* The summary copy is centered in the separate lower plaque. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-count {
  top: 74.35% !important;
  left: 17.2% !important;
  right: 17.2% !important;
  height: 9.55% !important;
  min-height: 0 !important;
  align-content: center !important;
  padding: 1px 0 0 !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal-title {
    top: 6.35% !important;
    height: 6.55% !important;
    font-size: 17px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-ten-charge,
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-phase="reveal"] .companion-summon-reveal-results {
    inset: 0 !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v7.css */
/* Companion summon reveal V7
   Align text and motion to the painted homes themselves. The result cards use
   rarity color for grade and name, and no longer spend a row on summon state. */

body #menuCompanionPanel .companion-summon-reveal {
  --summon-grade: #b9c6cd;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="novice"] { --summon-grade: #9caa93; }
body #menuCompanionPanel .companion-summon-reveal[data-rarity="common"] { --summon-grade: #b9c6cd; }
body #menuCompanionPanel .companion-summon-reveal[data-rarity="rare"] { --summon-grade: #70c9ec; }
body #menuCompanionPanel .companion-summon-reveal[data-rarity="hero"] { --summon-grade: #a68cff; }
body #menuCompanionPanel .companion-summon-reveal[data-rarity="legendary"] { --summon-grade: #f3b967; }
body #menuCompanionPanel .companion-summon-reveal[data-rarity="mythic"] { --summon-grade: #ff7bb6; }

/* The source plaque's painted center is y=11.1% of the stage. */
body #menuCompanionPanel .companion-summon-reveal-title {
  top: 7.85% !important;
  left: 24% !important;
  right: 24% !important;
  height: 6.5% !important;
  padding: 1px 0 0 !important;
  transform: none !important;
}

/* The circular painted home is centered at y=38.55%. Keep the effect's
   square and all three rings on that same center instead of the old grid. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-energy {
  top: 16.6% !important;
  width: 63% !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .summon-reveal-ring {
  width: 92% !important;
  height: 92% !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .summon-reveal-ring.ring-two {
  width: 70% !important;
  height: 70% !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .summon-reveal-ring.ring-three {
  width: 49% !important;
  height: 49% !important;
}

/* Seat the revealed character on the same painted-circle center. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-results {
  top: 17.55% !important;
  bottom: 40.45% !important;
}

/* A single result needs only rarity and name; the rarity color does the rest. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-count {
  grid-template-rows: auto !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-count > strong {
  color: var(--summon-grade) !important;
  text-shadow: 0 0 8px color-mix(in srgb, var(--summon-grade) 46%, transparent) !important;
}

/* Every ten-pull cell keeps only image, grade and name. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-rows: 12px 16px !important;
  align-content: center !important;
  column-gap: 5px !important;
  padding: 4px 5px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 36px !important;
  height: 36px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
  grid-column: 2 !important;
  color: var(--summon-grade) !important;
  text-shadow: 0 0 5px color-mix(in srgb, var(--summon-grade) 42%, transparent) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade {
  grid-row: 1 !important;
  align-self: end !important;
  font-size: 8px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
  grid-row: 2 !important;
  align-self: start !important;
  font-size: 10px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-state {
  display: none !important;
}

/* One live action occupies the painted button recess; there is no skip button
   left underneath it to create a second outline or hit target. */
body #menuCompanionPanel .companion-summon-reveal-actions {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal-title {
    top: 7.85% !important;
    height: 6.5% !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
    grid-template-columns: 33px minmax(0, 1fr) !important;
    grid-template-rows: 11px 15px !important;
    column-gap: 4px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade {
    font-size: 7.4px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
    font-size: 9px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v8.css */
/* Companion summon reveal V8
   The painted frame already owns the title, cell and action homes. Content is
   optically seated inside those homes without drawing a second control skin. */

/* The glyph mass was visibly low even though its CSS box was centered. */
body #menuCompanionPanel .companion-summon-reveal-title {
  top: 6.85% !important;
  height: 6.4% !important;
  padding: 0 !important;
  font-size: clamp(17px, 4.55vw, 19px) !important;
  line-height: 1 !important;
}

/* Ten-result cells reserve almost half their width for readable character art.
   Names own two real lines; no inherited one-line ellipsis remains. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: 10px 25px !important;
  align-content: center !important;
  column-gap: 3px !important;
  padding: 3px 4px 3px 2px !important;
  overflow: hidden !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 42px !important;
  height: 42px !important;
  justify-self: center !important;
  align-self: center !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--summon-grade) 28%, transparent), rgba(3, 8, 16, .54) 65%, transparent 72%) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art > img {
  width: 40px !important;
  height: 40px !important;
  transform: translate(0, 0) scale(calc(var(--summon-art-scale, 1) * 1.1)) !important;
  filter: saturate(1.12) brightness(1.08) contrast(1.04) drop-shadow(0 2px 2px #000) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--summon-grade) !important;
  text-align: left !important;
  text-overflow: clip !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .92) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade {
  grid-row: 1 !important;
  align-self: end !important;
  white-space: nowrap !important;
  font-size: 8.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
  grid-row: 2 !important;
  align-self: start !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -.055em !important;
}

/* Reuse the game's star painting as a rarity-colored mask over the small blue
   cell gems. Each result card owns its own top and bottom accent. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card::before,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card::after,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card::before,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  z-index: 4 !important;
  width: 9px !important;
  height: 9px !important;
  pointer-events: none !important;
  background: var(--summon-grade) !important;
  -webkit-mask: url("assets/generated/abyss_little_stars_v3_1793206800000/spark_star.png") center / contain no-repeat !important;
  mask: url("assets/generated/abyss_little_stars_v3_1793206800000/spark_star.png") center / contain no-repeat !important;
  filter: drop-shadow(0 0 3px var(--summon-grade)) !important;
  transform: translateX(-50%) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card::before { top: -3px !important; }
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card::after { bottom: -3px !important; }
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card::before { top: 0 !important; }
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card::after { bottom: 0 !important; }

/* The frame raster already contains the final action home. The live button is
   text and hit area only, so one-pull and ten-pull can never look doubled. */
body #menuCompanionPanel .companion-summon-reveal-actions {
  left: 22% !important;
  right: 22% !important;
  bottom: 6.4% !important;
  height: 7.3% !important;
  min-height: 0 !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal-actions > button:not(.active) {
  min-height: 0 !important;
  padding: 0 0 1px !important;
  border: 0 !important;
  background: none !important;
  color: #f2e2ad !important;
  font-size: clamp(12px, 3.25vw, 14px) !important;
  line-height: 1 !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .95)) !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-actions > button:not(.active) {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .95)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button:focus,
body #menuCompanionPanel .companion-summon-reveal-actions > button:focus-visible {
  box-shadow: none !important;
  filter: drop-shadow(0 0 3px rgba(var(--summon-light), .72)) !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button:active {
  color: #c9b77f !important;
  filter: brightness(.76) drop-shadow(0 1px 1px rgba(0, 0, 0, .95)) !important;
  transform: translateY(1px) !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal-title {
    top: 6.85% !important;
    height: 6.4% !important;
    font-size: 17px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
    grid-template-columns: 39px minmax(0, 1fr) !important;
    grid-template-rows: 9px 24px !important;
    column-gap: 2px !important;
    padding: 3px 3px 3px 2px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
    width: 39px !important;
    height: 39px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art > img {
    width: 38px !important;
    height: 38px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade {
    font-size: 8px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
    font-size: 9.5px !important;
    line-height: 1.06 !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v9.css */
/* Companion summon reveal V9
   Optical text seating, production item-grade colors and contained ten-pull art. */

/* A line box placed at the top of the title rectangle was never visually
   centered. Let the painted title recess own an actual two-axis center. */
body #menuCompanionPanel .companion-summon-reveal-title {
  top: 6.85% !important;
  height: 6.4% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  transform: none !important;
}

/* Companion grades use the same final text and accent colors as item grades:
   C green, B sky, A violet, S orange, SS gold, SSS crimson/ivory. */
body #menuCompanionPanel .companion-summon-reveal[data-rarity="novice"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-novice {
  --summon-grade: #8dffb0;
  --summon-accent: #4ade80;
  --summon-light: 74, 222, 128;
  --summon-light-strong: #8dffb0;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="common"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-common {
  --summon-grade: #79ddff;
  --summon-accent: #35c8ff;
  --summon-light: 53, 200, 255;
  --summon-light-strong: #79ddff;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="rare"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-rare {
  --summon-grade: #eadbff;
  --summon-accent: #a970ff;
  --summon-light: 169, 112, 255;
  --summon-light-strong: #eadbff;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="hero"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-hero {
  --summon-grade: #ffc08b;
  --summon-accent: #ff873b;
  --summon-light: 255, 135, 59;
  --summon-light-strong: #ffc08b;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="legendary"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-legendary {
  --summon-grade: #fff18a;
  --summon-accent: #ffe052;
  --summon-light: 255, 224, 82;
  --summon-light-strong: #fff18a;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="mythic"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-mythic {
  --summon-grade: #fff0e8;
  --summon-accent: #ff4d59;
  --summon-light: 255, 77, 89;
  --summon-light-strong: #fff0e8;
}

/* The single-pull portal now follows the result grade instead of staying
   common-blue or premium-purple. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-card,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .summon-reveal-card-art {
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--summon-accent) 28%, transparent), rgba(3, 8, 18, .08) 57%, transparent 72%) !important;
}

/* The ten-pull board keeps the accepted outer frame, title, summary and
   button, while its ten independent recesses no longer carry a decorative
   diamond through the text/image axis. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage {
  background: transparent url("assets/generated/companion_summon_reveal_v9_20260831/ten-pull-reveal-frame-clean-v9-alpha.png") center / 100% 100% no-repeat !important;
}

/* Ten-pull portraits stay larger than the old 29px version, but every optical
   scale now remains inside its own painted recess. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  column-gap: 3px !important;
  padding: 4px 5px 4px 3px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
  width: 38px !important;
  height: 38px !important;
  overflow: hidden !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--summon-accent) 15%, transparent), rgba(3, 8, 16, .34) 64%, transparent 72%) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art > img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: scale(var(--summon-art-scale, 1)) !important;
  filter: saturate(1.1) brightness(1.07) contrast(1.04) drop-shadow(0 2px 2px #000) !important;
}

/* Added top/bottom spark masks competed with the frame intersections and the
   result copy. Keep only the restrained decoration already painted in the art. */
body #menuCompanionPanel .companion-summon-reveal-card::before,
body #menuCompanionPanel .companion-summon-reveal-card::after {
  content: none !important;
  display: none !important;
}

/* Korean glyph mass sits slightly above its CSS line center. The button hit
   area does not move; only the label receives the optical correction. */
body #menuCompanionPanel .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal-actions > button:not(.active) {
  display: grid !important;
  place-items: center !important;
  padding: 3px 0 0 !important;
  background: none !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal-title {
    top: 6.85% !important;
    height: 6.4% !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    padding: 4px 4px 4px 3px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
    width: 36px !important;
    height: 36px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art > img {
    width: 32px !important;
    height: 32px !important;
  }
}


/* SOURCE: ui/styles/menus/menu-collection-focus-v1.css */
/* Approved menu concepts, integrated with live data.
   Existing tab artwork, main shells, wallets, summoning, king records and
   all detail artwork are retained. Never import the prototype's tab styles. */
:root {
  --collection-wide: url("assets/generated/store_card_native_v3_20260828/store-card-wide-v3.png");
  --collection-wide-mask: url("assets/generated/store_card_native_v3_20260828/store-card-wide-mask-v3.svg");
  --collection-square: url("assets/generated/store_card_native_v3_20260828/store-card-compact-v3.png");
  --collection-square-mask: url("assets/generated/store_card_native_v3_20260828/store-card-compact-mask-v3.svg");
  --collection-button: url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png");
  --collection-recess: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png");
}
body .collection-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:12px 4px 10px; margin:0; min-height:40px; }
body .collection-section-heading h2 { margin:0; color:#e9e1c8; font-size:14px; line-height:20px; font-weight:800; text-shadow:0 1px 2px #000; }
body .collection-section-heading > span { font-size:10px; color:#9eafba; }
body .collection-section-heading > span b { font-size:15px; color:#efd797; margin-right:3px; }
body .collection-empty { grid-column:1/-1; margin:20px 8px; text-align:center; color:#adc0cb; font-size:12px; line-height:20px; }

/* Owned companions: keep summon wallets and existing tab artwork unchanged. */
body #menuCompanionPanel[data-companion-view="party"] #companionCurrencyBar { display:none !important; }
body #menuCompanionPanel.menu-panel.active[data-companion-view="party"] { grid-template-rows:55px 44px minmax(0,1fr) !important; }
body #menuCompanionPanel[data-companion-view="party"] #companionPartyView { grid-row:3 !important; }
body #menuCompanionPanel #companionPartyView { padding:0 15px 12px !important; }
body #menuCompanionPanel #companionPartyView::before,
body #menuCompanionPanel #companionPartyView::after { content:none !important; }
body #menuCompanionPanel #companionPartySlot {
  box-sizing:border-box !important; position:relative !important;
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:7px !important;
  width:100% !important; min-height:126px !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  border:0 !important;
  border-image:none !important;
  mask:none !important;
  clip-path:none !important;
  border-radius:0 !important; background:none !important; box-shadow:none !important; transform:none !important;
}
body #menuCompanionPanel #companionPartySlot::before,
body #menuCompanionPanel #companionPartySlot::after { content:none !important; }
body #menuCompanionPanel .collection-party-position {
  box-sizing:border-box; position:relative; isolation:isolate; display:grid; grid-template-columns:48px minmax(0,1fr);
  grid-template-rows:16px minmax(28px,auto) 12px minmax(26px,auto); column-gap:6px; align-content:center; align-items:center;
  min-width:0; min-height:126px; padding:7px 8px 8px; text-align:left;
  border:0; border-image:none;
  background:none; box-shadow:none;
}
body #menuCompanionPanel .collection-party-position::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--collection-recess) center/100% 100% no-repeat; mask:none; opacity:.82; }
body #menuCompanionPanel .collection-party-position::after { content:none; }
body #menuCompanionPanel .collection-party-position .collection-party-role { grid-column:1/-1; grid-row:1; align-self:start; color:#d7c898; font-size:9px; line-height:14px; font-weight:800; text-align:center; }
body #menuCompanionPanel .collection-party-position > img { grid-column:1; grid-row:2/5; position:static; display:block; width:48px; height:59px; margin:0; object-fit:contain; transform:scale(var(--companion-art-scale,1)); transform-origin:center; }
body #menuCompanionPanel .collection-party-position > strong { grid-column:2; grid-row:2; align-self:center; min-width:0; color:#ede4c9; font-size:10.5px; line-height:14px; font-weight:800; word-break:keep-all; }
body #menuCompanionPanel .collection-party-position .collection-party-stars { grid-column:2; grid-row:3; display:block; color:#c0b080; font-size:7.5px; line-height:12px; min-height:12px; letter-spacing:.4px; }
body #menuCompanionPanel .collection-party-position > p { grid-column:2; grid-row:4; align-self:start; margin:2px 0 0; color:#a7c4d2; font-size:9px; line-height:13px; word-break:keep-all; white-space:pre-line; overflow-wrap:anywhere; }
body #menuCompanionPanel .collection-party-position.empty { cursor:default; }
body #menuCompanionPanel .collection-party-position.empty .collection-party-role { color:#7d8d96 !important; }
body #menuCompanionPanel .collection-empty-position { grid-column:1/-1; grid-row:2/5; position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; width:100%; height:100%; min-height:78px; margin:0; padding:0 4px 2px; border:0; background:none; box-shadow:none; }
body #menuCompanionPanel .collection-empty-position::before,body #menuCompanionPanel .collection-empty-position::after { content:none !important; }
body #menuCompanionPanel .collection-empty-position > span { display:block; color:#66767e; font-size:22px; font-weight:300; line-height:25px; }
body #menuCompanionPanel #companionPartySlot .collection-empty-position > strong { display:block; color:#929da1 !important; font-size:10px !important; font-weight:700 !important; line-height:15px; text-shadow:none !important; }
body #menuCompanionPanel .collection-empty-position:focus-visible { outline:1px solid #9f8d65; outline-offset:-3px; }
body #menuCompanionPanel .collection-slot-detail { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; }
body #menuCompanionPanel .collection-slot-detail::before,body #menuCompanionPanel .collection-slot-detail::after { content:none !important; }
body #menuCompanionPanel .collection-slot-detail:focus-visible { outline:1px solid #bca877 !important; outline-offset:2px; }
body #menuCompanionPanel .collection-roster-heading { padding-top:13px; padding-bottom:5px; }
body #menuCompanionPanel .companion-roster-tools { display:grid; grid-template-columns:minmax(0,1fr) 76px; align-items:center; gap:6px; min-height:30px; margin:0 2px 8px; }
body #menuCompanionPanel .companion-roster-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; min-width:0; }
body #menuCompanionPanel .companion-roster-tools button { position:relative; isolation:isolate; min-width:0; width:100%; height:29px; margin:0; padding:0 4px 1px; border:0; border-radius:0; background:var(--collection-button) center/100% 100% no-repeat; box-shadow:none; color:#899aa3; font-size:9px; font-weight:800; line-height:13px; filter:brightness(.58) saturate(.35); }
body #menuCompanionPanel .companion-roster-tools button.active,body #menuCompanionPanel .companion-roster-sort { color:#e8d39a !important; filter:brightness(.88) saturate(.72) !important; }
body #menuCompanionPanel .companion-roster-tools button:focus-visible { outline:1px solid #aa976a; outline-offset:1px; }
body #menuCompanionPanel .companion-roster-tools button:active { transform:translateY(1px); filter:brightness(.5) saturate(.4) !important; }
body #menuCompanionPanel #companionPartyList { display:grid !important; gap:6px !important; margin:0 !important; padding:0 2px 12px !important; background:none !important; border:0 !important; box-shadow:none !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card {
  box-sizing:border-box !important; position:relative !important; isolation:isolate !important; display:grid !important; grid-template-columns:58px minmax(0,1fr) 50px !important;
  gap:8px !important; align-items:center !important; width:100% !important; min-height:91px !important;
  height:auto !important; margin:0 !important; padding:7px 8px !important;
  border:0 !important; border-image:none !important; border-radius:0 !important; background:none !important;
  box-shadow:none !important; filter:none !important; transform:none !important;
}
body #menuCompanionPanel #companionPartyList .companion-party-card::before,
body #menuCompanionPanel #companionPartyList .companion-party-card::after { content:none !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card::before { content:"" !important; position:absolute !important; inset:0 !important; z-index:-1 !important; background:var(--collection-recess) center/100% 100% no-repeat !important; mask:none !important; opacity:.78 !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card > img { position:static !important; width:58px !important; height:68px !important; object-fit:contain !important; transform:scale(var(--companion-art-scale,1)) !important; transform-origin:center !important; margin:0 !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card > span:not(.collection-party-status):not(.companion-party-card-actions) { display:block !important; min-width:0; }
body #menuCompanionPanel #companionPartyList .companion-party-card strong { display:block !important; color:#ede3c9 !important; font-size:12.5px !important; line-height:18px !important; white-space:normal !important; word-break:keep-all !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card small { display:block !important; color:#b6ac8c !important; margin-top:2px !important; font-size:8.5px !important; line-height:12px !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card.rarity-novice small { color:#a9a58f !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card.rarity-common small { color:#63cce3 !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card.rarity-rare small { color:#ae86e8 !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card.rarity-hero small { color:#efd374 !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card.rarity-legendary small { color:#f0a6bc !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card.rarity-mythic small { color:#efffff !important; text-shadow:0 0 5px #42f5ff,0 0 10px rgba(255,202,74,.65) !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card em { display:block !important; color:#b4c5cf !important; margin-top:3px !important; font-size:10px !important; line-height:14px !important; white-space:pre-line !important; word-break:keep-all !important; overflow-wrap:anywhere !important; }
body #menuCompanionPanel #companionPartyList .companion-party-detail-trigger { inset:0 !important; width:100% !important; height:100% !important; }
body #menuCompanionPanel .collection-party-status { position:relative; z-index:2; display:flex !important; flex-direction:column; justify-content:center; align-items:center; min-width:0; color:#d3c096; font-size:8px; line-height:12px; text-align:center; white-space:nowrap; }
body #menuCompanionPanel .collection-party-status > span { display:grid; place-items:center; width:48px; height:21px; margin-bottom:1px; padding-bottom:1px; background:var(--collection-button) center/100% 100% no-repeat; color:#e6d099; font-size:8px; font-weight:800; filter:brightness(.82) saturate(.68); }
body #menuCompanionPanel .collection-party-status.support > span { color:#a7cfda; filter:brightness(.68) saturate(.5); }
body #menuCompanionPanel .collection-party-status b { color:#9e8f6e; font-size:19px; font-weight:400; line-height:20px; }
body #menuCompanionPanel #companionPartyList .companion-party-card.active,body #menuCompanionPanel #companionPartyList .companion-party-card.support-active { filter:brightness(1.08) !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card.active::before,body #menuCompanionPanel #companionPartyList .companion-party-card.support-active::before { opacity:.94 !important; }
body #menuCompanionPanel #companionPartyView { scrollbar-width:thin !important; scrollbar-color:#435963 transparent !important; }
body #menuCompanionPanel #companionPartyView::-webkit-scrollbar { width:3px !important; }
body #menuCompanionPanel #companionPartyView::-webkit-scrollbar-track { background:transparent !important; }
body #menuCompanionPanel #companionPartyView::-webkit-scrollbar-thumb { background:#435963 !important; border-radius:2px !important; }
body #menuCompanionPanel #companionPartyList .companion-party-card.first-companion-guide-target { grid-template-columns:55px minmax(0,1fr) 62px !important; }
body #menuCompanionPanel #companionPartyList .first-companion-guide-target > .companion-party-detail-trigger { right:69px !important; width:auto !important; }
body #menuCompanionPanel #companionPartyList .first-companion-guide-target .companion-party-card-actions { position:relative; z-index:2; }
body #menuCompanionPanel #companionPartyView .companion-collection-summary { margin:4px 3px 12px !important; padding:0 !important; color:#94aab6 !important; font-size:10px !important; line-height:16px !important; text-align:center !important; }
body #menuCompanionPanel #companionPartyNote:not([hidden]) { display:block !important; margin:8px 3px; color:#d8c397; font-size:11px; line-height:16px; }
body #menuCompanionPanel .companion-detail-dialog:has(.collection-detail-party-actions:not(:empty)) { height:679px !important; grid-template-rows:186px auto auto 18px 80px auto 104px minmax(60px,auto) 42px !important; }
body #menuCompanionPanel .companion-detail-dialog:has(.collection-detail-party-actions:not(:empty)) .companion-detail-art { width:150px !important; height:186px !important; padding:23px 17px 19px !important; }
body #menuCompanionPanel .companion-detail-dialog:has(.collection-detail-party-actions:not(:empty)) .companion-detail-art > img { width:124px !important; height:124px !important; }
body #menuCompanionPanel .companion-detail-dialog[data-rarity="novice"] .companion-detail-rarity { color:#a9a58f !important; }
body #menuCompanionPanel .companion-detail-dialog[data-rarity="common"] .companion-detail-rarity { color:#63cce3 !important; }
body #menuCompanionPanel .companion-detail-dialog[data-rarity="rare"] .companion-detail-rarity { color:#ae86e8 !important; }
body #menuCompanionPanel .companion-detail-dialog[data-rarity="hero"] .companion-detail-rarity { color:#efd374 !important; }
body #menuCompanionPanel .companion-detail-dialog[data-rarity="legendary"] .companion-detail-rarity { color:#f0a6bc !important; }
body #menuCompanionPanel .companion-detail-dialog[data-rarity="mythic"] .companion-detail-rarity { color:#efffff !important; text-shadow:0 0 5px #42f5ff,0 0 10px rgba(255,202,74,.65) !important; }
body #menuCompanionPanel .collection-detail-party-actions { display:grid; width:100%; justify-self:stretch; align-self:start; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin:0; }
body #menuCompanionPanel .collection-detail-party-actions > button { position:relative; display:block; width:100%; min-height:36px; height:36px; padding:0 10px 1px; border:0; border-radius:0; background:var(--collection-button) center/100% 100% no-repeat; box-shadow:none; color:#eed79c; font-size:11px; font-weight:800; line-height:15px; }
body #menuCompanionPanel .collection-detail-party-actions > button:disabled { color:#8e979b; filter:saturate(.3) brightness(.65); }
body #menuCompanionPanel .collection-detail-party-actions > p { grid-column:1/-1; margin:0; padding:0 3px; font-size:10px; color:#aebdc5; text-align:center; line-height:15px; word-break:keep-all; }
body #menuCompanionPanel .collection-detail-party-actions:empty { display:none; }
/* The detail shows only the ability that is active now. */
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="fieldKitchen"]:has(.collection-detail-party-actions:not(:empty)) { grid-template-rows:186px auto auto 18px 80px auto 104px minmax(60px,auto) 42px !important; }
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="fieldKitchen"] .companion-detail-effects { grid-template-rows:80px !important; gap:0 !important; }
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="fieldKitchen"] .companion-detail-effects > span:nth-child(1) { min-height:80px !important; padding:11px 18px 15px !important; row-gap:4px !important; }
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="fieldKitchen"] .companion-detail-effects b { font-size:11.5px !important; line-height:16px !important; }
body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="fieldKitchen"] .companion-detail-growth { width:100%; font-size:9.5px !important; line-height:15px !important; white-space:pre-line; text-align:center; }
#companionWorkshopPanel #specialtyFoodPreview { white-space:pre-line; }

/* Two-line abilities keep the accepted artwork, with breathing room inside one well. */
body #menuCompanionPanel .companion-detail-dialog[data-readable-effects="true"]:has(.collection-detail-party-actions:not(:empty)) { grid-template-rows:186px auto auto 18px 80px auto 104px minmax(60px,auto) 42px !important; }
body #menuCompanionPanel .companion-detail-dialog[data-readable-effects="true"] .companion-detail-effects { grid-template-rows:80px !important; gap:0 !important; }
body #menuCompanionPanel .companion-detail-dialog[data-readable-effects="true"] .companion-detail-effects > span:nth-child(1) { min-height:80px !important; padding:11px 18px 15px !important; row-gap:4px !important; }
body #menuCompanionPanel .companion-detail-dialog[data-readable-effects="true"] .companion-detail-effects b { font-size:11.5px !important; line-height:16px !important; white-space:pre-line !important; }
body #menuCompanionPanel .companion-detail-growth { white-space:pre-line; }
body #menuCompanionPanel .companion-detail-dialog[data-readable-effects="true"] .companion-detail-growth { width:100%; font-size:9.5px !important; line-height:15px !important; text-align:center; }

body #menuCompanionPanel .companion-detail-next-effect[hidden] { display:none !important; }

/* At five stars keep completion as one compact line and remove dust controls. */
body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"][data-rarity]:has(.collection-detail-party-actions:not(:empty)) {
  --max-detail-art-height:186px;
  --max-detail-effects-height:80px;
  height:569px !important;
  grid-template-rows:var(--max-detail-art-height) auto auto 18px var(--max-detail-effects-height) auto minmax(60px,auto) 42px !important;
}
body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"][data-readable-effects="true"]:has(.collection-detail-party-actions:not(:empty)),
body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"][data-specialty-kind="fieldKitchen"]:has(.collection-detail-party-actions:not(:empty)) { --max-detail-effects-height:80px; }
body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"] .companion-detail-dust-growth { display:none !important; }
body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"] .collection-detail-party-actions { grid-row:7 !important; }
body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"] .companion-detail-return { grid-row:8 !important; }
body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"] .companion-detail-effects > span:nth-child(2) small,
body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"] .companion-detail-effects > span:nth-child(2) b { transform:none !important; }
@media (max-width:375px), (max-height:820px) {
  body #menuCompanionPanel .companion-detail-dialog:not([data-max-stars="true"]):has(.collection-detail-party-actions:not(:empty)) { height:655px !important; }
  body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"][data-rarity]:has(.collection-detail-party-actions:not(:empty)) { height:545px !important; }
}
@media (max-width:370px) {
  body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"][data-rarity]:has(.collection-detail-party-actions:not(:empty)) { --max-detail-art-height:164px; --max-detail-effects-height:80px; }
  body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"][data-readable-effects="true"]:has(.collection-detail-party-actions:not(:empty)),
  body #menuCompanionPanel .companion-detail-dialog[data-max-stars="true"][data-specialty-kind="fieldKitchen"]:has(.collection-detail-party-actions:not(:empty)) { --max-detail-effects-height:80px; }
}

/* Three independent primary record tabs stay inside the codex's painted safe area. */
body #menuCodexPanel.menu-panel.active {
  grid-template-rows:55px 46px minmax(0,1fr) !important;
  gap:6px !important;
}
body #menuCodexPanel .codex-tabbar {
  box-sizing:border-box !important;
  /* Match the painted inner document well, not the panel's outer frame. */
  width:calc(100% - 50px) !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:4px !important;
  height:46px !important;
  min-height:46px !important;
  margin-inline:auto !important;
  padding:3px 0 4px !important;
  overflow:hidden !important;
  background:none !important;
  filter:none !important;
}
body #menuCodexPanel .codex-tabbar::before { content:none !important; display:none !important; }
body #menuCodexPanel .codex-tab,
body #menuCodexPanel .codex-tab.open {
  box-sizing:border-box !important;
  min-width:0 !important;
  height:39px !important;
  min-height:39px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  place-items:center !important;
  align-content:center !important;
  gap:2px !important;
  margin:0 !important;
  padding:1px 7px 2px !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent url("assets/generated/codex-smooth-20260921/button.png") center / 111% 180% no-repeat !important;
  border-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
body #menuCodexPanel .codex-tab.open {
  filter:none !important;
}
/* This tab now has its own symmetric painted well, not the old shared atlas. */
body #menuCodexPanel .codex-tab:last-child {
  padding-inline:7px !important;
}
body #menuCodexPanel .codex-row.boss.locked .codex-row-art { opacity:.85 !important; }
body #menuCodexPanel .codex-row.boss.locked .codex-row-art > img {
  width:42px !important;height:42px !important;
  max-width:42px !important;max-height:42px !important;
  object-fit:contain !important;opacity:1 !important;filter:none !important;
}
body #menuCodexPanel .codex-tab::after { content:none !important; display:none !important; }
body #menuCodexPanel .codex-tab > img,
body #menuCodexPanel .codex-tab > span small { display:none !important; }
body #menuCodexPanel .codex-tab > span {
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:end !important;
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
}
body #menuCodexPanel .codex-tab > span b {
  display:block !important;
  overflow:hidden !important;
  color:#c7d0d4 !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-align:center !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-shadow:none !important;
}
body #menuCodexPanel .codex-tab.open > span b { color:#fff0ad !important; }
body #menuCodexPanel .codex-tab > strong {
  grid-column:1 !important;
  grid-row:2 !important;
  align-self:start !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  color:#7faebf !important;
  font-size:8px !important;
  font-weight:700 !important;
  text-shadow:none !important;
  line-height:1 !important;
  text-align:center !important;
  white-space:nowrap !important;
}
body #menuCodexPanel .codex-tab.open > strong { color:#e7cf88 !important; }
body #menuCodexPanel .codex-tab:active { transform:translateY(1px) !important; filter:none !important; }

@media (max-width:370px), (max-height:700px) {
  body #menuCodexPanel.menu-panel.active { grid-template-rows:50px 44px minmax(0,1fr) !important; gap:5px !important; }
  body #menuCodexPanel .codex-tabbar { width:calc(100% - 46px) !important; height:44px !important; min-height:44px !important; gap:3px !important; }
  body #menuCodexPanel .codex-tab,
  body #menuCodexPanel .codex-tab.open { height:37px !important; min-height:37px !important; padding-inline:5px !important; }
  body #menuCodexPanel .codex-tab > span b { font-size:10.5px !important; }
  body #menuCodexPanel .codex-tab > strong { font-size:8px !important; }
}

/* Item gallery. Boss tab and original two-tab rail are not restyled. */
body #menuCodexPanel.collection-codex-items .codex-book { border:0 !important; border-image:none !important; background:none !important; box-shadow:none !important; filter:none !important; overflow:hidden !important; padding:0 9px 12px !important; }
body #menuCodexPanel.collection-codex-items #itemCodexBody { overflow:hidden !important; }
/* Keep fixed detail/dimmer layers relative to the viewport, not a filtered book. */
body #menuCodexPanel:has([data-codex-detail]:not([hidden])) { filter:none !important; overflow:visible !important; }
body #menuCodexPanel:has([data-codex-detail]:not([hidden])) .codex-book,
body #menuCodexPanel.collection-codex-items #itemCodexBody:has([data-codex-detail]:not([hidden])) { overflow:visible !important; }
body #menuCodexPanel:has([data-codex-detail]:not([hidden])) .codex-book { z-index:4000 !important; }
body #menuCodexPanel.collection-codex-items .codex-book::before,
body #menuCodexPanel.collection-codex-items .codex-book::after { content:none !important; }
body #itemCodexBody .collection-catalog { display:block !important; height:100% !important; padding:0 3px 18px !important; margin:0 !important; background:none !important; border:0 !important; box-shadow:none !important; overflow-y:auto !important; overflow-x:hidden !important; scrollbar-width:thin !important; scrollbar-color:#627c8b #06111f !important; }
body #itemCodexBody .collection-catalog.detail-open { pointer-events:none; }
body #itemCodexBody .collection-catalog::-webkit-scrollbar { width:4px !important; }
body .collection-codex-filters { display:flex; align-items:center; gap:3px; margin:1px 0 13px; }
body .collection-codex-filters > button { min-width:0; flex:1; height:29px; margin:0; padding:0 3px; border:0; border-radius:0; background:none; box-shadow:none; color:#97a9b4; font-size:10px; font-weight:700; }
body .collection-codex-filters > button.active { color:#f1d795; background:var(--collection-button) center/100% 100% no-repeat; }
body .collection-codex-filters > button:focus-visible { outline:1px solid #b8a371; outline-offset:1px; }
body #itemCodexBody .collection-codex-filters { overflow-x:auto; scrollbar-width:thin; padding:2px 0; margin-bottom:5px; }
body #itemCodexBody .collection-codex-filters > button { flex:0 0 auto; min-width:54px; height:32px; padding:0 7px; font-size:11px; white-space:nowrap; }
body #itemCodexBody .collection-rarity-filters { margin-bottom:13px; }
body #itemCodexBody .collection-rarity-filters > button { min-width:32px; padding:0 6px; }
body #itemCodexBody .collection-item-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px 7px; padding:0 1px; }
body #itemCodexBody .collection-item-tile { display:block; min-width:0; padding:0; margin:0; border:0; border-image:none; border-radius:0; background:none; box-shadow:none; text-align:center; color:#e9e1ca; cursor:pointer; }
body #itemCodexBody .collection-item-tile:disabled { cursor:default; opacity:1; }
body #itemCodexBody .collection-item-well { display:grid; place-items:center; position:relative; isolation:isolate; aspect-ratio:1217/1292; }
body #itemCodexBody .collection-item-well::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--collection-square) center/contain no-repeat; mask:var(--collection-square-mask) center/contain no-repeat; }
body #itemCodexBody .collection-item-well > img { display:block; width:71%; height:71%; margin-top:7px; object-fit:contain; }
body #itemCodexBody .collection-item-well > b { position:absolute; top:10px; left:10px; color:#e6c783; font-size:9px; line-height:12px; }
body #itemCodexBody [data-codex-rarity="SSS"] .collection-item-well > b { color:#e5b6bc; }
body #itemCodexBody [data-codex-rarity="SS"] .collection-item-well > b { color:#ccb3e2; }
body #itemCodexBody [data-codex-rarity="신화"] .collection-item-well > b { color:#a5e3ec; }
body #itemCodexBody .collection-item-tile > strong { display:block; margin:5px 0 0; color:#eee4c9; font-size:10.5px; font-weight:800; line-height:15px; word-break:keep-all; overflow-wrap:anywhere; }
body #itemCodexBody .collection-item-tile > small { display:block; margin:3px 0 0; color:#98b2c0; font-size:9px; line-height:13px; }
body #itemCodexBody .collection-item-tile.locked img { width:26px; height:26px; opacity:.28; }
body #itemCodexBody .collection-item-tile.locked > strong { color:#7b8f9c; }

/* Secondary guide filters are deliberately slimmer than the two-line record tabs. */
body #codexGuideBody .collection-guide-tabs {
  box-sizing:border-box !important;
  width:calc(100% - 18px) !important;
  height:34px !important;
  min-height:34px !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  margin:1px 9px 4px !important;
  padding:3px 9px 4px !important;
  background:transparent url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-tab-button.png") center / 100% 100% no-repeat !important;
  filter:none !important;
}
body #codexGuideBody .collection-guide-tabs button,
body #codexGuideBody .collection-guide-tabs button.active {
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  height:27px !important;
  min-height:27px !important;
  margin:0 !important;
  padding:0 5px 1px !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#aebbc0 !important;
  font-size:10px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-align:center !important;
  text-shadow:0 2px 2px rgba(0,0,0,.94) !important;
  white-space:nowrap !important;
  filter:none !important;
  transform:none !important;
  position:relative !important;
}
body #codexGuideBody .collection-guide-tabs button:not(:last-child)::after {
  content:"" !important;
  position:absolute !important;
  top:5px !important;
  right:0 !important;
  width:1px !important;
  height:17px !important;
  background:linear-gradient(180deg,transparent,rgba(159,132,73,.56),transparent) !important;
}
body #codexGuideBody .collection-guide-tabs button.active {
  color:#fff0ad !important;
  background:none !important;
  text-shadow:0 2px 2px rgba(0,0,0,.94),0 0 5px rgba(222,180,77,.26) !important;
  filter:none !important;
}
body #codexGuideBody .collection-guide-tabs button:active { transform:translateY(1px) !important; filter:brightness(.92) !important; }
body #codexGuideBody #guideRecipeView.active { display:block !important; min-height:0 !important; padding:0 10px 9px !important; background:none !important; box-shadow:none !important; overflow:hidden !important; }
body #codexGuideBody #guideUnlockView.active { display:block !important; min-height:0 !important; padding:4px 10px 10px !important; overflow:hidden !important; }
body #codexGuideBody #guideUnlockView .menu-unlock-list { height:100% !important; }
body #codexGuideBody #guideRecipeView .menu-recipe-box { display:flex !important; flex-direction:column !important; min-height:0 !important; height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; border-image:none !important; background:none !important; box-shadow:none !important; }
body #codexGuideBody #guideRecipeView .menu-recipe-box::before,
body #codexGuideBody #guideRecipeView .menu-recipe-box::after { content:none !important; }
body #codexGuideBody #guideRecipeView .menu-recipe-head { flex:none !important; width:100% !important; height:44px !important; min-height:44px !important; padding:0 5px !important; margin:0 !important; background:none !important; filter:none !important; }
body #codexGuideBody #guideRecipeView .menu-recipe-head > span { color:#e9dfc6 !important; font-size:14px !important; line-height:20px !important; }
body #codexGuideBody #guideRecipeView .menu-recipe-head > strong { color:#ecd392 !important; font-size:12px !important; }
body #codexGuideBody #menuRecipeBody { display:block !important; flex:1 !important; min-height:0 !important; height:auto !important; max-height:none !important; padding:0 1px 12px !important; margin:0 !important; border:0 !important; background:none !important; overflow-y:auto !important; overflow-x:hidden !important; }
body #codexGuideBody #menuRecipeList { display:block !important; min-height:0 !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important; }
body #codexGuideBody .collection-recipe-card { position:relative; isolation:isolate; width:100%; aspect-ratio:1810/869; margin:0 0 11px; padding:0; border:0; background:none; }
body #codexGuideBody .collection-recipe-card::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--collection-wide) center/contain no-repeat; mask:var(--collection-wide-mask) center/contain no-repeat; }
body #codexGuideBody .collection-recipe-card > header { position:absolute; top:11px; left:16px; right:16px; display:flex; align-items:baseline; justify-content:space-between; gap:5px; }
body #codexGuideBody .collection-recipe-card h3 { margin:0; font-size:13px; line-height:18px; color:#eed592; font-weight:800; word-break:keep-all; }
body #codexGuideBody .collection-recipe-card > header > span { color:#b5afba; font-size:9px; white-space:nowrap; }
body #codexGuideBody .collection-recipe-formula { position:absolute; left:12px; right:12px; top:34px; bottom:34px; display:grid; grid-template-columns:1fr 13px 1fr 18px 1.08fr; align-items:center; }
body #codexGuideBody .collection-recipe-formula > b { align-self:center; margin-top:-20px; text-align:center; color:#a89a76; font-size:13px; font-weight:500; }
body #codexGuideBody .collection-recipe-part { min-width:0; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
body #codexGuideBody .collection-recipe-part img { width:42px; height:42px; object-fit:contain; flex-shrink:0; }
body #codexGuideBody .collection-recipe-part.result img { width:50px; height:50px; margin-top:-4px; margin-bottom:-4px; }
body #codexGuideBody .collection-recipe-part strong { color:#c2cfd7; margin-top:3px; font-size:9px; line-height:12px; font-weight:600; word-break:keep-all; overflow-wrap:anywhere; }
body #codexGuideBody .collection-recipe-part small { font-size:8px; line-height:10px; color:#9eabba; }
body #codexGuideBody .collection-recipe-card > p { position:absolute; left:12px; right:12px; bottom:22px; margin:0; font-size:9px; line-height:12px; color:#d0c3a7; text-align:center; }
body #codexGuideBody .collection-recipe-source { position:absolute; left:12px; right:12px; bottom:11px; color:#8fa2ae; font-size:8px; line-height:10px; text-align:center; }
body #codexGuideBody .menu-recipe-unknown { color:#93a8b6 !important; font-size:10px !important; padding:13px 2px 18px !important; text-align:center; }
body #codexGuideBody .menu-recipe-empty { background:none !important; border:0 !important; box-shadow:none !important; }
@media (max-width:370px) {
  body #menuCompanionPanel .companion-detail-dialog:has(.collection-detail-party-actions:not(:empty)) { grid-template-rows:164px auto auto 18px 80px auto 104px minmax(60px,auto) 42px !important; }
  body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="fieldKitchen"]:has(.collection-detail-party-actions:not(:empty)) { grid-template-rows:164px auto auto 18px 80px auto 104px minmax(60px,auto) 42px !important; }
  body #menuCompanionPanel .companion-detail-dialog[data-readable-effects="true"]:has(.collection-detail-party-actions:not(:empty)) { grid-template-rows:164px auto auto 18px 80px auto 104px minmax(60px,auto) 42px !important; }
  body #menuCompanionPanel .companion-detail-dialog:has(.collection-detail-party-actions:not(:empty)) .companion-detail-art { width:133px !important; height:164px !important; padding:20px 15px 17px !important; }
  body #menuCompanionPanel .companion-detail-dialog:has(.collection-detail-party-actions:not(:empty)) .companion-detail-art > img { width:109px !important; height:109px !important; }
  body #menuCompanionPanel #companionPartyView { padding-left:11px !important; padding-right:11px !important; }
  body #menuCompanionPanel #companionPartySlot { gap:5px !important; }
  body #menuCompanionPanel .collection-party-position { grid-template-columns:43px minmax(0,1fr); column-gap:5px; min-height:124px; padding-left:7px; padding-right:7px; }
  body #menuCompanionPanel .collection-party-position > img { width:43px; height:56px; }
  body #menuCompanionPanel .collection-party-position > strong { font-size:10.5px; }
  body #menuCompanionPanel .collection-party-position > p { font-size:8.5px; line-height:12px; }
  body #menuCompanionPanel .companion-roster-tools { grid-template-columns:minmax(0,1fr) 72px; gap:5px; margin-left:1px; margin-right:1px; }
  body #menuCompanionPanel .companion-roster-filters { gap:3px; }
  body #menuCompanionPanel #companionPartyList .companion-party-card { grid-template-columns:52px minmax(0,1fr) 48px !important; gap:6px !important; min-height:89px !important; padding:6px 7px !important; }
  body #menuCompanionPanel #companionPartyList .companion-party-card > img { width:52px !important; height:65px !important; }
  body #menuCompanionPanel #companionPartyList .companion-party-card strong { font-size:12px !important; }
  body #menuCompanionPanel #companionPartyList .companion-party-card em { font-size:9.5px !important; line-height:13px !important; }
  body #itemCodexBody .collection-item-grid { gap:14px 6px; }
  body #itemCodexBody .collection-item-tile > strong { font-size:10px; }
  body #itemCodexBody .collection-item-tile > small { font-size:8px; }
  body #codexGuideBody .collection-recipe-formula { top:30px; bottom:33px; }
  body #codexGuideBody .collection-recipe-card h3 { font-size:12px; line-height:17px; }
  body #codexGuideBody .collection-recipe-part img { width:36px; height:36px; }
  body #codexGuideBody .collection-recipe-part.result img { width:44px; height:44px; }
  body #codexGuideBody .collection-recipe-part strong { font-size:8.5px; line-height:11px; margin-top:2px; }
  body #codexGuideBody .collection-recipe-card > p { font-size:8.5px; }
}



/* SOURCE: ui/styles/shared/player-clarity-v2.css */
/* Keep the approved reward artwork and anchors. Only preserve the two-line stat copy. */
#rewardPanel:not(.boss-reward) .reward-tech .reward-copy small,
#rewardPanel:not(.boss-reward) .reward-focusBoost .reward-copy small {
  white-space: pre-line !important;
}


/* SOURCE: ui/styles/shared/popup-remaining-fixes-v1.css */
/* Remaining popup audit fixes. Deliberately leaves accepted ordinary fusion,
   companion collection/detail, settings, and reward surfaces unchanged. */

/* Keep the journey rail clear of the run actions and king-mark artwork. */
#menuLobbyPanel:has(#lobbyNewRunButton:not([hidden])) .lobby-beginner-journey {
  bottom: max(206px, calc(env(safe-area-inset-bottom) + 188px));
}
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-journey {
  bottom: max(334px, calc(env(safe-area-inset-bottom) + 316px));
}
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel:has(#lobbyNewRunButton:not([hidden])) .lobby-beginner-journey {
  bottom: max(362px, calc(env(safe-area-inset-bottom) + 344px));
}
/* Calibrated separately: lower the journey by 16px, kings by 18px, marks
   by 30px from v1. Keep the existing artwork scale and action positions. */
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-new-run-button {
  bottom: max(162px, calc(env(safe-area-inset-bottom) + 144px));
}
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel:has(#lobbyNewRunButton:not([hidden])) .lobby-mark-board {
  bottom: 176px !important;
}
.main-menu[data-lobby-phase="deep"] #menuLobbyPanel:has(#lobbyNewRunButton:not([hidden])) .lobby-deep-cast {
  transform: translateY(-26px);
}
.main-menu[data-lobby-phase="deep"] #menuLobbyPanel:not(:has(#lobbyNewRunButton:not([hidden]))) .lobby-mark-board {
  bottom: 152px !important;
}
@media (max-width: 370px), (max-height: 760px) {
  #menuLobbyPanel:has(#lobbyNewRunButton:not([hidden])) .lobby-beginner-journey {
    bottom: max(195px, calc(env(safe-area-inset-bottom) + 179px));
  }
  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-journey {
    bottom: max(324px, calc(env(safe-area-inset-bottom) + 308px));
  }
  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel:has(#lobbyNewRunButton:not([hidden])) .lobby-beginner-journey {
    bottom: max(352px, calc(env(safe-area-inset-bottom) + 336px));
  }
  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-new-run-button {
    bottom: max(153px, calc(env(safe-area-inset-bottom) + 137px));
  }
}
@media (max-height: 760px) {
  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel:has(#lobbyNewRunButton:not([hidden])) .lobby-mark-board {
    bottom: 165px !important;
  }
  .main-menu[data-lobby-phase="deep"] #menuLobbyPanel:not(:has(#lobbyNewRunButton:not([hidden]))) .lobby-mark-board {
    bottom: 141px !important;
  }
}

/* Mythic acquisition has more stats than the painted well can hold.
   Scroll text inside the well, never the frame or the confirmed button. */
#pullRevealPanel.pull-reveal.high-rarity.mythic-reveal .rare-showcase .stats.stats-expanded {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px 11px 8px !important;
  overflow: hidden !important;
}
.rare-stat-scroll {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a48a54 #121b22;
  padding: 0 4px;
  box-sizing: border-box;
  color: #f5ead2;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
}
.rare-stat-scroll .effect-detail-row { display: block; margin: 0 0 5px; }
.rare-stat-scroll-hint { flex: 0 0 auto; font-size: 9px; line-height: 12px; color: #96d5dc; text-align: center; }
.effect-detail-unit { display: inline-block; max-width: 100%; word-break: keep-all; overflow-wrap: break-word; }
.effect-detail-separator { color: #9b9175; }
.rare-stat-scroll:focus-visible { outline: 1px solid #b69c62; outline-offset: -1px; }

/* Mythic fusion uses the approved complete frame and complete stat recesses.
   No old four-cell strip, empty cells, or narrow blue feature bars. */
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] .fusion-card {
  position: relative !important;
  top: auto !important;
  width: min(356px, calc(100vw - 16px)) !important;
  height: min(628px, calc(100dvh - 24px)) !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent url('assets/generated/fusion_secret_frame_alpha_v7_1793710800000/fusion-secret-frame-alpha.png') center / 100% 100% no-repeat !important;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] .fusion-card::before,
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] .fusion-card::after,
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats::before,
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats::after {
  display: none !important;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionTitle {
  position: absolute !important;
  inset: 5.7% 13% auto !important;
  width: auto !important;
  height: 7% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: #fff0b5 !important;
  text-shadow: 0 2px 2px #000 !important;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] .fusion-absorb {
  position: absolute !important;
  inset: 16% 10% auto !important;
  width: auto !important;
  height: 94px !important;
  min-height: 0 !important;
  padding: 10px !important;
  margin: 0 !important;
  background: transparent url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png') center / 100% 100% no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] .fusion-result {
  position: absolute !important;
  inset: calc(16% + 100px) 10% auto !important;
  width: auto !important;
  height: 64px !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  background: transparent url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png') center / 100% 100% no-repeat !important;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] .fusion-result > div { width: 100% !important; transform: none !important; }
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultMeta { font-size: 10px !important; line-height: 14px !important; }
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultName {
  margin: 1px 0 0 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  color: #f5e4b4 !important;
  text-shadow: 0 2px 2px #000 !important;
  word-break: keep-all !important;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats[data-core-count][data-feature-count] {
  position: absolute !important;
  inset: calc(16% + 172px) 10% 98px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: min-content !important;
  align-content: start !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 3px 5px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ac915d #111a21;
  background: none !important;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > .fusion-stat-card {
  position: relative !important;
  inset: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  box-sizing: border-box !important;
  padding: 9px 6px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png') center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > .fusion-stat-feature,
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > .fusion-stat-wide {
  grid-column: 1 / -1 !important;
  padding: 10px 16px !important;
  min-height: 68px !important;
  order: 1;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > .mythic-power-summary { order: -1; }
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > .fusion-stat-card > small,
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > .fusion-stat-card > strong {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  transform: none !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: visible !important;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > .fusion-stat-card > small { font-size: 10px !important; line-height: 14px !important; color: #8ed9e7 !important; }
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > .fusion-stat-card > strong { font-size: 14px !important; line-height: 18px !important; color: #f6e4ad !important; }
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > .fusion-stat-feature > strong { font-size: 12px !important; line-height: 17px !important; }
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats strong :is(b,em) { font: inherit !important; }
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats strong em,
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] .fusion-feature-line { display: block !important; }
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionCloseButton {
  position: absolute !important;
  inset: auto auto 38px 50% !important;
  width: 188px !important;
  height: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 24px 2px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent url('assets/generated/item_detail_refresh_1790256000256/fusion-confirm-quiet.png') center / 100% 100% no-repeat !important;
  transform: translateX(-50%) !important;
  box-shadow: none !important;
  color: #fff0b5 !important;
  font-size: 14px !important;
}
body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionCloseButton:active { filter: brightness(.8) !important; }
.mythic-fusion-scroll-hint { display: none; }
body #fusionPanel.mythic-item .mythic-fusion-scroll-hint {
  position: absolute;
  inset: auto 12% 82px;
  display: block;
  color: #92cdd4;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
}
body #fusionPanel.mythic-item #fusionResultStats:focus-visible { outline: 1px solid #af995e; outline-offset: 2px; }

/* Only effect-detail popups need this extra copy height. Other rewards stay put. */
#unlockShowcase.unlock-showcase.reward-result.effect-summary-detail #unlockShowcaseText {
  top: 58.5% !important;
  height: 23% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: safe center !important;
  gap: 5px !important;
  padding: 12px 15px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
  overflow: auto !important;
}
#unlockShowcase.effect-summary-detail .effect-detail-row { display: block; flex: 0 0 auto; width: 100%; }


/* SOURCE: ui/styles/combat/combat-motion-flow-v2.css */
/* Keep the approved sprites; normalize only the gecko's oversized attack row.
   Optical floor: y=238 in its 300px canvas. Tongue/tail reach stays authored. */
#enemyFighter.enemy-redraw-gecko img {
  --mint-motion-scale: 1;
  --mint-motion-y: 0%;
  transform-origin: 50% 79.333333%;
  transform: translateY(calc(0.586667% + var(--mint-motion-y))) scale(calc(1.02 * var(--mint-motion-scale)));
}
#enemyFighter.enemy-redraw-gecko.anim-attack img {
  --mint-motion-scale: 0.824;
  --mint-motion-y: -0.84048%;
}

/* Recoil belongs to the image layer; it must not restart the attack lunge. */
.fight-stage.fighting .fighter img {
  translate: var(--combat-recoil-x, 0px) var(--fighter-frame-anchor-y, 0%);
  transition: translate 65ms ease-out, filter 65ms ease-out;
}
.fight-stage.fighting .player-fighter.combat-flinch { --combat-recoil-x: -1.5px; }
.fight-stage.fighting .enemy-fighter.combat-flinch { --combat-recoil-x: 1.5px; }
.fight-stage.fighting .player-fighter.combat-heavy-hit { --combat-recoil-x: -3px; }
.fight-stage.fighting .enemy-fighter.combat-heavy-hit { --combat-recoil-x: 3px; }
.fight-stage.fighting .fighter.combat-flinch img { filter: brightness(1.18); }
.fight-stage.fighting .fighter.combat-heavy-hit img { filter: brightness(1.32); }
.fight-stage.fighting .fighter.combat-action { animation: none; }
.fight-stage.fighting .player-fighter.combat-action.strike {
  animation: combatPlayerLunge var(--combat-motion-ms, 500ms) ease-out;
}
.fight-stage.fighting .enemy-fighter.combat-action.strike {
  animation: combatEnemyLunge var(--combat-motion-ms, 400ms) ease-out;
}
.fight-stage.fighting .fighter.combat-ready {
  animation: combatReadyBreath 1500ms ease-in-out infinite;
}
.fight-stage.fighting .fighter.combat-controlled { animation: none; }
@keyframes combatPlayerLunge {
  0% { transform: translateX(0); }
  20% { transform: translateX(-1px); }
  32%, 42% { transform: translateX(5px); }
  75% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@keyframes combatEnemyLunge {
  0% { transform: translateX(0); }
  20% { transform: translateX(1px); }
  32%, 42% { transform: translateX(-7px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
@keyframes combatReadyBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.6px); }
}
@media (prefers-reduced-motion: reduce) {
  .fight-stage.fighting .fighter.combat-ready { animation: none; }
}


/* SOURCE: ui/styles/combat/combat-effects-art-v3.css */
/* Combat art V3: separate actor cues, painted material, no generated CSS sigils.
   The PNG has transparent vertical bleed. Its centre recess is registered below;
   each text/icon gets its own inset instead of using the outer canvas centre. */
#fightStage {
  --combat-cue-art: url("assets/generated/combat_effects_art_20260829/combat-nameplate.png");
}

#fightStage .skill-fx,
#fightStage #enemySkillBanner {
  position: absolute;
  inset: 5px auto auto 3px;
  box-sizing: border-box;
  width: 116px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: var(--combat-cue-art) center / 100% 270% no-repeat;
  box-shadow: none;
  filter: none;
  transform: none;
  opacity: 0;
  z-index: 11;
  pointer-events: none;
}

#fightStage #enemySkillBanner {
  inset: 5px 3px auto auto !important;
  width: 116px !important;
  height: 28px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--combat-cue-art) center / 100% 270% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  overflow: visible !important;
}

#fightStage .skill-fx::before,
#fightStage .skill-fx::after,
#fightStage #enemySkillBanner::before,
#fightStage #enemySkillBanner::after {
  content: none !important;
  display: none !important;
}

#fightStage #skillFxIcon,
#fightStage #enemySkillBanner > img {
  position: absolute;
  left: 12px;
  top: 4px;
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  image-rendering: auto;
  filter: none;
  transform: none;
}

#fightStage #skillFxLabel,
#fightStage #enemySkillBanner > span {
  position: absolute;
  inset: 6px 11px 5px 33px;
  width: auto;
  min-width: 0;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #f2e7c7;
  font-size: 10px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.25px;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transform: none;
}

#fightStage #enemySkillBanner[data-enemy-tier="boss"] > span { color: #efd1a0; }
#fightStage #enemySkillBanner[data-phase="2"] { top: 3px !important; height: 32px !important; }
#fightStage #enemySkillBanner[data-phase="2"] > img { top: 6px; }
#fightStage #enemySkillBanner[data-phase="2"] > span { inset-block: 5px; flex-direction: column; gap: 1px; font-size: 9px; white-space: nowrap; }
#fightStage #enemySkillBanner > span small { font-size: 8px; line-height: 1; color: #c6bacf; }
#fightStage .skill-fx.active { animation: combatCueReveal 1100ms ease-out both; }
#fightStage #enemySkillBanner.show { opacity: 1; animation: combatEnemyCueReveal 180ms ease-out both !important; }
/* The same enemy name used to appear in three separate overlays. */
#fightStage .clash-mark.boss { display: none !important; }

/* Transient reaction labels occupy the gap between actors, above the HP rails. */
#fightStage .fight-feedback-slot,
#fightStage .fight-feedback-slot:has(.clash-mark) {
  left: 50%;
  top: auto;
  bottom: 29px !important;
  width: 96px;
  height: 24px;
  min-height: 0;
  transform: translateX(-50%);
}

#fightStage .clash-mark,
#fightStage .critical-mark {
  box-sizing: border-box;
  width: 96px;
  height: 24px;
  min-width: 0;
  min-height: 0;
  padding: 1px 11px 0;
  border: 0;
  border-radius: 0;
  background: var(--combat-cue-art) center / 100% 270% no-repeat !important;
  color: #e9e1cb;
  box-shadow: none;
  filter: none;
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fightStage .clash-mark::before,
#fightStage .clash-mark::after,
#fightStage .critical-mark::before,
#fightStage .critical-mark::after { content: none !important; }
#fightStage .clash-mark.critical,
#fightStage .critical-mark { color: #f6ce88; }
#fightStage .clash-mark.reflect,
#fightStage .clash-mark.freeze { color: #bad9e3; }
#fightStage .clash-mark.flash { animation: combatCueReveal 900ms ease-out both; }
#fightStage .clash-mark.entrance,
#fightStage .clash-mark.freeze {
  width: 96px !important;
  height: 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 1px 11px 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
}
#fightStage .clash-mark.entrance.flash,
#fightStage .clash-mark.freeze.flash { animation: combatCueReveal 1100ms ease-out both !important; }
#fightStage .critical-mark { position: absolute; inset: 0; margin: auto; width: 76px; height: 24px; font-size: 10px; transform: none; }
#fightStage .critical-mark.show { animation: combatCueReveal 900ms ease-out both; }
#fightStage:has(.clash-mark.flash) .critical-mark { opacity: 0 !important; }

/* Small material-backed status labels retain their live duration/count. */
#fightStage .stage-hud { z-index: 16 !important; }
#fightStage .combat-unit-status {
  bottom: 20px;
  width: 104px;
  max-width: 100%;
  height: 21px;
  padding: 1px 10px 0;
  border: 0;
  border-radius: 0;
  background: var(--combat-cue-art) center / 100% 270% no-repeat;
  box-shadow: none;
  filter: none;
  color: #ddd5ed;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}
#fightStage .combat-unit-status[data-kind="shield"],
#fightStage .combat-unit-status[data-kind="regen"] { color: #bfdbc9; }
#fightStage .combat-unit-status[data-kind="damage-over-time"] { color: #e7b7a3; }

/* Reuse the painted impact; do not blow it up over both actors and buttons. */
#fightStage .slash-fx { left: 75%; top: 54%; width: 66px; height: 49px; background-size: contain; filter: none; }
#fightStage .slash-fx.burst { width: 84px; height: 62px; filter: none; }
#fightStage .slash-fx.active { animation: combatPaintedImpact 320ms ease-out both; }
#fightStage .damage-float { filter: none !important; text-shadow: 0 2px 1px #120c07, 1px 0 1px #120c07, -1px 0 1px #120c07 !important; }
#fightStage .player-damage-float.heal { color: #c6edb2 !important; filter: none !important; text-shadow: 0 2px 1px #0b1b10, 1px 0 1px #0b1b10, -1px 0 1px #0b1b10 !important; }

/* Existing sockets remain, without CSS neon squares, rarity pills or auras. */
#fightStage #playerGearFx { top: 14px !important; }
#fightStage #playerGearFx .gear-piece,
#fightStage #playerGearFx .gear-piece:nth-child(n),
#fightStage #playerGearFx .gear-piece.rarity-SSS.mythic-item,
#fightStage .board-passive-badge,
#fightStage .board-passive-badge.compact {
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/generated/loot_board_rune_socket_1790601600055/loot-rune-socket.png") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}
#fightStage #playerGearFx .gear-piece small,
#fightStage #playerGearFx .gear-piece.rarity-SSS small,
#fightStage #playerGearFx .gear-piece.mythic-item small {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px #000, 1px 0 1px #000, -1px 0 1px #000 !important;
}
#fightStage .board-passive-badge img,
#fightStage .board-passive-badge.compact img { filter: none !important; }
#fightStage .player-fighter[class*="gear-"]::before { content: none; }
#fightStage:has(.skill-fx.active) #playerGearFx { opacity: 0; }
#fightStage:has(.board-passive-badges.active) .skill-fx { left: 25px; width: 94px; }
#fightStage:has(.board-passive-badges.active) #skillFxLabel { inset: 4px 8px 3px 29px; font-size: 9px; }
#fightStage:has(.board-passive-badges.active) #skillFxIcon { left: 9px; width: 18px; }

@keyframes combatCueReveal {
  0% { opacity: 0; translate: 0 3px; }
  15%, 78% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 -3px; }
}
@keyframes combatEnemyCueReveal {
  from { opacity: 0; translate: 0 3px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes combatPaintedImpact {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.75); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

/* Explicit screenshot fixture, never set by normal play. */
html[data-qa-combat-effects-hold="1"] #mainMenu { display: none !important; }
html[data-qa-combat-effects-hold="1"] #fightStage :is(.skill-fx.active, .clash-mark.flash, .critical-mark.show, .slash-fx.active, .damage-float.show, #enemySkillBanner.show) {
  animation: none !important;
  opacity: 1 !important;
  translate: none !important;
}
html[data-qa-combat-effects-hold="1"] #fightStage .slash-fx.active { transform: translate(-50%, -50%); }

@media (max-width: 370px) {
  #fightStage .skill-fx, #fightStage #enemySkillBanner { width: 105px; }
  #fightStage #enemySkillBanner { width: 105px !important; }
  #fightStage:has(.board-passive-badges.active) .skill-fx { width: 83px; }
  #fightStage #skillFxLabel, #fightStage #enemySkillBanner > span { left: 30px; right: 9px; font-size: 9px; }
  #fightStage #skillFxIcon, #fightStage #enemySkillBanner > img { left: 10px; }
  #fightStage #enemySkillBanner[data-phase="2"] > span { font-size: 8.5px; }
  #fightStage .combat-unit-status { width: 98px; font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #fightStage .skill-fx.active, #fightStage #enemySkillBanner.show { animation: none; opacity: 1; }
}


/* SOURCE: ui/styles/combat/combat-effects-icons-v4.css */
/* Combat effects V4: restore authored badges and the original icon-led skill
   hierarchy. Only the CSS-painted rings/polygons stay removed. */
#fightStage {
  --combat-cue-atlas-v4: url("assets/generated/combat_effect_icons_v4_20260829/combat-skill-icons-v4.png");
  --combat-status-art-v4: url("assets/generated/reward_modal_suite_1790109000000/combat-status-badge.png");
  --combat-socket-art-v4: url("assets/generated/loot_board_rune_socket_1790601600055/loot-rune-socket.png");
}

/* The transient skill returns to the centre with a readable icon. Its frame and
   label are bitmap art; no CSS neon circle, dotted ring or polygon is drawn. */
#fightStage .skill-fx {
  inset: auto !important;
  left: 50% !important;
  top: 36% !important;
  width: 116px !important;
  height: 88px !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.76) !important;
  overflow: visible !important;
  z-index: 12;
}

#fightStage .skill-fx::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0 24px 20px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--combat-socket-art-v4) center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .72));
  transform: none !important;
}

#fightStage .skill-fx::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 20px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--combat-status-art-v4) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

#fightStage #skillFxIcon,
#fightStage #bossCutinIcon {
  box-sizing: border-box;
  object-fit: contain !important;
  image-rendering: auto !important;
  background-image: var(--combat-cue-atlas, var(--combat-cue-atlas-v4)) !important;
  background-repeat: no-repeat !important;
  background-size: 500% 400% !important;
}

#fightStage #skillFxIcon {
  position: absolute !important;
  left: 36px !important;
  top: 6px !important;
  width: 44px !important;
  height: 44px !important;
  display: block !important;
  padding: 0 !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .86)) !important;
  transform: none !important;
  z-index: 2;
}

#fightStage #skillFxLabel {
  position: absolute !important;
  inset: auto !important;
  left: 11px !important;
  right: 11px !important;
  bottom: 1px !important;
  width: auto !important;
  height: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px 1px !important;
  border: 0 !important;
  background: none !important;
  color: #f4e8c7 !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: -.2px !important;
  text-align: center !important;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(118, 203, 231, .28) !important;
  white-space: nowrap !important;
  transform: none !important;
  z-index: 3;
}

/* Seraphim's font sits optically lower than the other labels, so only this
   painted label is corrected upward. */
#fightStage .skill-fx[data-cue-kind="seraph"] #skillFxLabel {
  bottom: 2px !important;
  padding-bottom: 2px !important;
}

#fightStage .skill-fx.active {
  animation: combatIconCueV4 1100ms cubic-bezier(.18, .86, .26, 1) both !important;
}

/* During the 1.1 s cue the skill art replaces the centre action label instead
   of being printed on top of it. */
#fightStage:has(.skill-fx.active) #battleButton {
  opacity: 0 !important;
}
#fightStage:has(.skill-fx.active) .stage-controls {
  opacity: 0 !important;
}

/* Enemy name stays over the encounter; the restored centre cue carries the
   icon. This replaces the V3 tiny right-side icon/name card. */
#fightStage #enemySkillBanner {
  inset: auto !important;
  left: 75% !important;
  right: auto !important;
  top: 4px !important;
  width: auto !important;
  min-width: 94px !important;
  max-width: 136px !important;
  height: 26px !important;
  min-height: 26px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 13px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--combat-status-art-v4) center / 100% 100% no-repeat !important;
  color: #fff0c6 !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .68)) !important;
  overflow: hidden !important;
  opacity: 0;
  transform: translate(-50%, 7px) scale(.9) !important;
}

#fightStage #enemySkillBanner::before,
#fightStage #enemySkillBanner::after {
  content: none !important;
  display: none !important;
}

#fightStage #enemySkillBanner.show {
  animation: enemySkillBannerHoldV4 3600ms ease both !important;
}

/* Exact cell registration for the 5 x 4 atlas (the fourth row is empty). */
#fightStage [data-cue-kind="strike"] { background-position: 0% 0% !important; }
#fightStage [data-cue-kind="guard"] { background-position: 25% 0% !important; }
#fightStage [data-cue-kind="heal"] { background-position: 50% 0% !important; }
#fightStage [data-cue-kind="flare"] { background-position: 75% 0% !important; }
#fightStage [data-cue-kind="curse"] { background-position: 100% 0% !important; }
#fightStage [data-cue-kind="haste"] { background-position: 0% 33.333% !important; }
#fightStage [data-cue-kind="mark"] { background-position: 25% 33.333% !important; }
#fightStage [data-cue-kind="pierce"] { background-position: 50% 33.333% !important; }
#fightStage [data-cue-kind="frost"] { background-position: 75% 33.333% !important; }
#fightStage [data-cue-kind="venom"] { background-position: 100% 33.333% !important; }
#fightStage [data-cue-kind="moon"] { background-position: 0% 66.667% !important; }
#fightStage [data-cue-kind="storm"] { background-position: 25% 66.667% !important; }
#fightStage [data-cue-kind="shatter"] { background-position: 50% 66.667% !important; }
#fightStage [data-cue-kind="seraph"] { background-position: 75% 66.667% !important; }
#fightStage [data-cue-kind="abyss"] { background-position: 100% 66.667% !important; }

/* Restore the original authored status bitmap. Each control label owns its
   optical correction instead of sharing a wrapper offset. */
#fightStage .combat-unit-status {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  bottom: 20px;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 94px;
  max-width: 100%;
  height: 18px;
  margin: 0 0 -1px;
  padding: 0 9px 1px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--combat-status-art-v4) center / 100% 100% no-repeat;
  box-shadow: none;
  color: #eee7ff;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.15px;
  white-space: nowrap;
  text-align: center;
  text-overflow: clip;
  text-shadow: 0 1px 2px #08030f, 0 0 5px rgba(174, 124, 255, .56);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .62));
  transform: translateX(-50%);
}

#fightStage .combat-unit-status[data-kind="stun"] { padding: 0 9px 2px; }
#fightStage .combat-unit-status[data-kind="sleep"] { padding: 0 9px 2px; }
#fightStage .combat-unit-status[data-kind="root"] { padding: 0 9px 2px; }
#fightStage .combat-unit-status[data-kind="bubble"] { padding: 0 9px 2px; }
#fightStage .combat-unit-status[data-kind="time"] { padding: 0 9px 2px; }
#fightStage .combat-unit-status[data-kind="seal"] { padding: 0 9px 2px; }
#fightStage .combat-unit-status[data-kind="shield"],
#fightStage .combat-unit-status[data-kind="regen"] {
  color: #c8f3ff;
  text-shadow: 0 1px 2px #02070c, 0 0 5px rgba(69, 188, 255, .5);
}
#fightStage .combat-unit-status[data-kind="damage-over-time"] {
  color: #ffd3bc;
  text-shadow: 0 1px 2px #100401, 0 0 5px rgba(255, 102, 66, .5);
}
#fightStage .combat-unit-status[hidden] { display: none !important; }

/* Restore authored reaction art. Critical receives its own one-pixel optical
   lift; no other reaction badge is moved with it. */
#fightStage .fight-feedback-slot,
#fightStage .fight-feedback-slot:has(.clash-mark) {
  left: 50%;
  bottom: 3px !important;
  width: min(176px, 46vw);
  height: auto;
  min-height: 39px;
  transform: translateX(-50%);
}

#fightStage .critical-mark {
  position: absolute;
  inset: auto;
  left: 50%;
  top: -10px;
  width: 104px;
  height: 35px;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  border: 0;
  border-radius: 0;
  background: url("assets/generated/combat_ui_refresh_1788795000000/badge-critical.webp") center / 100% 100% no-repeat !important;
  color: #fff4c4;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(51, 17, 6, .95), 0 0 6px rgba(255, 217, 102, .76);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .5));
  opacity: 0;
  transform: translateX(-50%) scale(.72);
}
#fightStage .critical-mark::before,
#fightStage .critical-mark::after { content: none !important; }
#fightStage .critical-mark.show { animation: playerCriticalFlash 620ms cubic-bezier(.18, .9, .28, 1) !important; }

#fightStage .clash-mark.reflect,
#fightStage .clash-mark.kill {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0 0 1px;
  border: 0;
  border-radius: 0;
  color: #edfaff;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: none;
  text-shadow: 0 2px 0 rgba(3, 10, 17, .95), 0 0 6px rgba(117, 216, 255, .72);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .5));
}
#fightStage .clash-mark.reflect {
  width: 110px;
  height: 35px;
  background: url("assets/generated/combat_ui_refresh_1788795000000/badge-reflect.webp") center / 100% 100% no-repeat !important;
}
#fightStage .clash-mark.kill {
  width: 114px;
  height: 34px;
  background: url("assets/generated/combat_ui_refresh_1788795000000/badge-kill.webp") center / 100% 100% no-repeat !important;
  color: #fff1b6;
}
#fightStage .clash-mark.reflect.flash,
#fightStage .clash-mark.kill.flash { animation: combatBadgeFlash 720ms cubic-bezier(.18, .86, .26, 1) !important; }

#fightStage .clash-mark.entrance,
#fightStage .clash-mark.freeze {
  width: 118px !important;
  height: 42px !important;
  min-width: 118px !important;
  min-height: 42px !important;
  padding: 0 20px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  color: #fff3b0 !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  line-height: 40px !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000, 0 0 8px rgba(255, 218, 105, .55) !important;
}
#fightStage .clash-mark.entrance { background-image: url("assets/generated/combat_loot_refresh_1790170000000/badge-entrance.webp") !important; }
#fightStage .clash-mark.freeze {
  background-image: url("assets/generated/combat_loot_refresh_1790170000000/badge-freeze.webp") !important;
  color: #e9fbff !important;
}

@keyframes combatIconCueV4 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  15%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(.96); }
}
@keyframes enemySkillBannerHoldV4 {
  0% { opacity: 0; transform: translate(-50%, 7px) scale(.9); }
  7%, 88% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -5px) scale(.98); }
}

html[data-qa-combat-effects-hold="1"] #fightStage .skill-fx.active,
html[data-qa-combat-effects-hold="1"] #fightStage #enemySkillBanner.show,
html[data-qa-combat-effects-hold="1"] #fightStage .critical-mark.show,
html[data-qa-combat-effects-hold="1"] #fightStage .clash-mark.flash {
  animation: none !important;
  opacity: 1 !important;
}
html[data-qa-combat-effects-hold="1"] #fightStage .skill-fx.active { transform: translate(-50%, -50%) scale(1) !important; }
html[data-qa-combat-effects-hold="1"] #fightStage #enemySkillBanner.show { transform: translate(-50%, 0) !important; }
html[data-qa-combat-effects-hold="1"] #fightStage .critical-mark.show { transform: translateX(-50%) scale(1) !important; }
html[data-qa-combat-effects-hold="1"] #fightStage #battleButton { visibility: hidden !important; }

@media (max-width: 370px) {
  #fightStage .skill-fx { width: 110px !important; }
  #fightStage #skillFxIcon { left: 33px !important; }
  #fightStage .combat-unit-status { width: 90px; height: 17px; padding-inline: 7px; font-size: 8.6px; }
  #fightStage .combat-unit-status[data-kind="stun"] { padding: 0 7px 2px; }
  #fightStage .combat-unit-status[data-kind="sleep"] { padding: 0 7px 2px; }
  #fightStage .combat-unit-status[data-kind="root"] { padding: 0 7px 2px; }
  #fightStage .combat-unit-status[data-kind="bubble"] { padding: 0 7px 2px; }
  #fightStage .combat-unit-status[data-kind="time"] { padding: 0 7px 2px; }
  #fightStage .combat-unit-status[data-kind="seal"] { padding: 0 7px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  #fightStage .skill-fx.active,
  #fightStage #enemySkillBanner.show { animation: none !important; opacity: 1 !important; }
}


/* SOURCE: ui/styles/combat/combat-effects-layout-v5.css */
/* Combat effects V5: keep the live battle controls visible, attach the painted
   nameplate to the actual skill text, and replace the stretched result card
   with a purpose-built boss cut-in strip. */
#fightStage {
  --combat-boss-cutin-v5: url("assets/generated/combat_effect_layout_v5_20260829/boss-skill-cutin-v5.png");
}

/* The cue now sits over its owner, clear of the two centre controls. The icon
   and its text recess are independent painted targets. */
#fightStage .skill-fx {
  inset: auto !important;
  left: 4px !important;
  right: auto !important;
  top: 4px !important;
  width: 112px !important;
  height: 34px !important;
  transform: translateY(3px) scale(.82) !important;
  transform-origin: left center !important;
  overflow: visible !important;
}

#fightStage .skill-fx[data-cue-side="enemy"] {
  left: auto !important;
  right: 4px !important;
  transform-origin: right center !important;
}

#fightStage .skill-fx::before,
#fightStage .skill-fx::after {
  content: none !important;
  display: none !important;
}

#fightStage #skillFxIcon {
  left: 0 !important;
  top: 1px !important;
  width: 32px !important;
  height: 32px !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .88)) !important;
}

#fightStage #skillFxLabel,
#fightStage .skill-fx[data-cue-kind="seraph"] #skillFxLabel {
  inset: auto !important;
  left: 30px !important;
  right: 0 !important;
  top: 5px !important;
  bottom: auto !important;
  width: auto !important;
  height: 24px !important;
  box-sizing: border-box !important;
  padding: 0 8px 1px !important;
  background: var(--combat-status-art-v4) center / 100% 100% no-repeat !important;
  color: #f4e8c7 !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .72)) !important;
}

/* A cue may animate over the battle, but it never removes either action. */
#fightStage:has(.skill-fx.active) #battleButton,
#fightStage:has(.skill-fx.active) .stage-controls {
  opacity: 1 !important;
  visibility: visible !important;
}

#fightStage .skill-fx.active {
  animation: combatIconCueV5 1100ms cubic-bezier(.18, .86, .26, 1) both !important;
}

html[data-qa-combat-effects-hold="1"] #fightStage .skill-fx.active {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Purpose-built painted cut-in. Every line is registered to the long recess,
   while the icon is independently centred in the circular left well. */
#fightStage .boss-cutin {
  inset: auto !important;
  left: 50% !important;
  top: 4px !important;
  width: min(342px, calc(100% - 6px)) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 1 !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--combat-boss-cutin-v5) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .72)) !important;
  overflow: visible !important;
  z-index: 18 !important;
}

#fightStage .boss-cutin #bossCutinIcon {
  position: absolute !important;
  left: 10.1% !important;
  top: 26.5% !important;
  width: 16.2% !important;
  height: 48.5% !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .88)) !important;
}

#fightStage .boss-cutin #bossCutinKind,
#fightStage .boss-cutin #bossCutinTitle,
#fightStage .boss-cutin #bossCutinText {
  position: absolute !important;
  left: 29.5% !important;
  right: 8.2% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 3px !important;
  overflow: hidden !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#fightStage .boss-cutin #bossCutinKind {
  top: 24.5% !important;
  height: 13.5% !important;
  color: #a9d9ec !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

#fightStage .boss-cutin #bossCutinTitle {
  top: 37.5% !important;
  height: 24% !important;
  color: #f4dfaa !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
}

#fightStage .boss-cutin #bossCutinText {
  top: 61% !important;
  height: 18% !important;
  color: #c7d9e4 !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
}

@keyframes combatIconCueV5 {
  0% { opacity: 0; transform: translateY(4px) scale(.82); }
  15%, 76% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-3px) scale(.97); }
}

@media (max-width: 370px), (max-height: 760px) {
  #fightStage .skill-fx {
    left: 3px !important;
    width: 108px !important;
  }

  #fightStage .skill-fx[data-cue-side="enemy"] { left: auto !important; right: 3px !important; }
  #fightStage #skillFxIcon { width: 30px !important; height: 30px !important; top: 2px !important; }
  #fightStage #skillFxLabel,
  #fightStage .skill-fx[data-cue-kind="seraph"] #skillFxLabel { left: 28px !important; font-size: 9px !important; }

  #fightStage .boss-cutin {
    width: min(326px, calc(100% - 4px)) !important;
    top: 4px !important;
  }

  #fightStage .boss-cutin #bossCutinTitle { font-size: 13px !important; }
  #fightStage .boss-cutin #bossCutinText { font-size: 8px !important; }
}


/* SOURCE: ui/styles/inventory/item-effect-source-v1.css */
/* Source-item identity inside the existing effect bays and item-detail wells.
   Palette matches the live bag. No panel, button or copy position changes. */
[data-item-rarity="F"] { --source-grade: #eef1f4; --source-gem-filter: grayscale(1) brightness(1.32); }
[data-item-rarity="D"] { --source-grade: #8297aa; --source-gem-filter: grayscale(.86) saturate(.34) brightness(.82); }
[data-item-rarity="C"] { --source-grade: #4ade80; --source-gem-filter: hue-rotate(-90deg) saturate(1.12) brightness(.94); }
[data-item-rarity="B"] { --source-grade: #35c8ff; --source-gem-filter: saturate(1.04) brightness(.98); }
[data-item-rarity="A"] { --source-grade: #a970ff; --source-gem-filter: hue-rotate(58deg) saturate(1.12) brightness(.96); }
[data-item-rarity="S"] { --source-grade: #ff873b; --source-gem-filter: hue-rotate(180deg) saturate(1.2) brightness(1.02); }
[data-item-rarity="SS"] { --source-grade: #ffe052; --source-gem-filter: hue-rotate(208deg) saturate(1.12) brightness(1.1); }
[data-item-rarity="SSS"] { --source-grade: #ff4d59; --source-gem-filter: hue-rotate(148deg) saturate(1.22) brightness(1.02); }
[data-item-rarity="mythic"] { --source-grade: #45f3e6; --source-gem-filter: hue-rotate(-24deg) saturate(1.18) brightness(1.08); }

#bagPanel .effect-summary-chip > .effect-source-stack {
  position: relative !important;
  display: block !important;
  width: 29px !important;
  height: 28px !important;
  overflow: visible !important;
}
#bagPanel .effect-summary-chip .effect-source-item {
  position: absolute !important;
  inset: 1px auto auto 1px !important;
  width: 26px !important;
  height: 26px !important;
  padding: 2px !important;
  border: 1px solid color-mix(in srgb, var(--source-grade) 65%, #38332c) !important;
  border-radius: 4px !important;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--source-grade) 24%, #080b10), #080b10) !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  filter: none !important;
}
#bagPanel .effect-summary-chip .effect-source-stack[data-count="2"] img {
  width: 22px !important;
  height: 22px !important;
  inset: 0 auto auto 0 !important;
}
#bagPanel .effect-summary-chip .effect-source-stack[data-count="2"] img:nth-child(2) {
  inset: 6px auto auto 8px !important;
}
#bagPanel .effect-summary-chip .effect-source-stack > em {
  display: block !important;
  position: absolute !important;
  right: -3px !important;
  bottom: -1px !important;
  z-index: 1;
  padding: 0 2px;
  border-radius: 2px;
  background: #080b10;
  color: #fff0bf;
  font: 800 8px/10px sans-serif;
}

/* Replace only the old generic-sigil bay, retaining its exact painted frame. */
#unlockShowcase .unlock-effect-sources[hidden] { display: none !important; }
#unlockShowcase.has-effect-sources #unlockShowcaseIcon { visibility: hidden !important; }
#unlockShowcase.effect-summary-detail.effect-long-title #unlockShowcaseTitle {
  white-space: normal !important;
  font-size: 15px !important;
  line-height: 18px !important;
  word-break: keep-all !important;
}
/* The frame already paints its own title recess.  Effect-source popups should
   not stack another gold name plate behind the copy; keep only a soft, diffuse
   shadow so the label stays legible without reading as a second panel. */
#unlockShowcase.effect-summary-detail.has-effect-sources #unlockShowcaseTitle {
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .96),
    0 0 7px rgba(0, 0, 0, .88),
    0 0 13px rgba(228, 196, 119, .14) !important;
}
#unlockShowcase .unlock-effect-sources {
  box-sizing: border-box;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 39.6%;
  width: 272px;
  height: 142px;
  padding: 18px 19px;
  transform: translate(-50%, -50%);
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") center / 100% 100% no-repeat;
}
#unlockShowcase .effect-source-inventory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: safe center;
  gap: 10px 6px;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #887655 transparent;
}
#unlockShowcase .effect-source-inventory[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
#unlockShowcase .effect-source-inventory[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#unlockShowcase .effect-source-gear {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  min-width: 0;
  text-align: center;
}
#unlockShowcase .effect-source-gear img {
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--source-grade) 65%, #38332c);
  border-radius: 7px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--source-grade) 24%, #080b10), #080b10);
  object-fit: contain;
  image-rendering: auto;
}
#unlockShowcase .effect-source-gear b {
  max-width: 100%;
  font-size: 11px;
  line-height: 14px;
  color: #f5e9cc;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
#unlockShowcase .effect-source-gear small { font-size: 10px; line-height: 12px; color: var(--source-grade); }
#unlockShowcase .effect-source-inventory[data-count="1"] img { width: 62px; height: 62px; }
#unlockShowcase .effect-source-inventory[data-count="1"] b { font-size: 12px; }
#unlockShowcase .effect-source-inventory[data-count="2"] img { width: 54px; height: 54px; }
#unlockShowcase .effect-source-inventory:focus-visible { outline: 1px solid #a7956c; outline-offset: 1px; }

/* Repaint only the gems from a duplicate of the accepted frame. Neutral metal
   keeps its original luminance while the top, rails and footer follow grade. */
#itemInfoPanel[data-item-rarity] .item-info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent url("assets/generated/item_detail_panel_no_center_gems_1793699200000/item-detail-panel-no-center-gems.png") center / 100% 100% no-repeat;
  filter: var(--source-gem-filter);
  -webkit-mask:
    linear-gradient(#000 0 0) left top / 23% 18% no-repeat,
    linear-gradient(#000 0 0) right top / 23% 18% no-repeat,
    linear-gradient(#000 0 0) left center / 8.2% 72% no-repeat,
    linear-gradient(#000 0 0) right center / 8.2% 72% no-repeat,
    linear-gradient(#000 0 0) left bottom / 15% 10.5% no-repeat,
    linear-gradient(#000 0 0) right bottom / 15% 10.5% no-repeat,
    radial-gradient(circle at 28.1% 6.8%, #000 0 1.45%, transparent 2.15%),
    radial-gradient(circle at 28.1% 22.3%, #000 0 1.45%, transparent 2.15%),
    radial-gradient(circle at 50% 97.2%, #000 0 1.85%, transparent 2.8%);
  mask:
    linear-gradient(#000 0 0) left top / 23% 18% no-repeat,
    linear-gradient(#000 0 0) right top / 23% 18% no-repeat,
    linear-gradient(#000 0 0) left center / 8.2% 72% no-repeat,
    linear-gradient(#000 0 0) right center / 8.2% 72% no-repeat,
    linear-gradient(#000 0 0) left bottom / 15% 10.5% no-repeat,
    linear-gradient(#000 0 0) right bottom / 15% 10.5% no-repeat,
    radial-gradient(circle at 28.1% 6.8%, #000 0 1.45%, transparent 2.15%),
    radial-gradient(circle at 28.1% 22.3%, #000 0 1.45%, transparent 2.15%),
    radial-gradient(circle at 50% 97.2%, #000 0 1.85%, transparent 2.8%);
}

/* Register the item itself to the painted icon well, independently from the
   title bay. The old inset CSS rectangle was 4px right and 6px low at 390px. */
#itemInfoPanel[data-item-rarity] .item-info-card #itemInfoIcon {
  left: 16.1% !important;
  top: 6.55% !important;
  width: 22.9% !important;
  height: 15.95% !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--source-grade) 18%, transparent), transparent 70%) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--source-grade) 38%, transparent)) !important;
}
#itemInfoPanel[data-item-rarity] .item-info-card #itemInfoTitle {
  color: color-mix(in srgb, var(--source-grade) 55%, #fff6da) !important;
  text-shadow: 0 1px 2px #000 !important;
}
#itemInfoPanel[data-item-rarity] .item-info-card #itemInfoMeta,
#itemInfoPanel[data-item-rarity] .item-info-card #itemInfoStats > .item-stat-chip > small,
#itemInfoPanel[data-item-rarity] .item-info-card .item-info-relations .item-relation-row > div > small {
  color: color-mix(in srgb, var(--source-grade) 66%, #f4ead5) !important;
  text-shadow: 0 1px 2px #000 !important;
}
#unlockShowcase .effect-source-gear[data-item-rarity="mythic"] img,
#bagPanel .effect-summary-chip .effect-source-item[data-item-rarity="mythic"] {
  border-color: transparent !important;
  background: linear-gradient(#0b0d16, #080910) padding-box, var(--mythic-aurora) border-box !important;
}
@media (max-width: 370px) {
  #unlockShowcase .unlock-effect-sources { width: 264px; height: 138px; }
}


/* SOURCE: ui/styles/menus/lobby-king-goal-v3.css */
/* Stage-45 lobby: restrained native frames pair each king with its own mark. */

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel #lobbyMarkBoard.lobby-mark-board {
  box-sizing: border-box;
  left: 4px;
  right: 4px;
  bottom: 198px !important;
  width: auto !important;
  height: 168px !important;
  min-height: 168px !important;
  aspect-ratio: auto !important;
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: transparent !important;
  box-shadow: none;
  filter: none !important;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel #lobbyMarkBoard.lobby-mark-board::before,
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel #lobbyMarkBoard.lobby-mark-board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel #lobbyMarkBoard.lobby-mark-board::before {
  z-index: 0;
  box-sizing: border-box;
  border: 9px solid transparent;
  border-image:
    url("assets/generated/bag_content_gothic_1790601600072/bag-slot-frame.png")
    32 / 9px stretch;
  opacity: .78;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel #lobbyMarkBoard.lobby-mark-board::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(2, 8, 18, .5) 0 17%, transparent 34% 62%, rgba(2, 8, 18, .34) 82%, rgba(2, 8, 18, .52) 100%),
    radial-gradient(ellipse 58% 42% at 50% 48%, transparent 0 48%, rgba(1, 5, 12, .2) 76%, rgba(1, 5, 12, .38) 100%);
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-head {
  position: absolute;
  z-index: 3;
  left: 50% !important;
  top: 9.9% !important;
  width: 35.5% !important;
  height: 12.5% !important;
  display: grid !important;
  place-items: center;
  padding: 0 2px 1px;
  background:
    url("assets/generated/bag_content_gothic_1790601600072/bag-section-header.png")
    center / 100% 100% no-repeat;
  filter: brightness(.88) saturate(.74) drop-shadow(0 2px 2px rgba(0, 0, 0, .7));
  transform: translateX(-50%) !important;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-head > div {
  position: static !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  width: auto !important;
  display: block !important;
  transform: none !important;
  white-space: nowrap !important;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-head span {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  color: #f4deb0;
  font-size: 8.2px;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
  transform: translate(-50%, -50%) !important;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-head strong {
  position: absolute !important;
  left: auto !important;
  right: 7% !important;
  top: 50% !important;
  color: #8fdff4;
  font-size: 7.4px;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
  transform: translateY(-50%) !important;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-head p {
  display: none;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-deep-cast {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
  transform: none !important;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-deep-cast img {
  box-sizing: border-box;
  position: absolute;
  left: var(--king-x);
  top: var(--king-y);
  width: 18.1%;
  height: 35.5%;
  padding: 0;
  object-fit: contain;
  object-position: 50% 50%;
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, .88))
    drop-shadow(0 5px 4px rgba(0, 0, 0, .62));
  transform: translateX(-50%) scale(var(--king-scale));
  transform-origin: center 72%;
  animation: lobby-goal-king-float 3.8s ease-in-out infinite;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-deep-cast img:nth-child(1) {
  --king-x: 13.95%;
  --king-y: 22.4%;
  --king-scale: 1.7;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-deep-cast img:nth-child(2) {
  --king-x: 31.74%;
  --king-y: 21.2%;
  --king-scale: 1.52;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-deep-cast img:nth-child(3) {
  --king-x: 49.63%;
  --king-y: 22.4%;
  --king-scale: 1.65;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-deep-cast img:nth-child(4) {
  --king-x: 67.42%;
  --king-y: 20.6%;
  --king-scale: 1.4;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-deep-cast img:nth-child(5) {
  --king-x: 85.21%;
  --king-y: 21.6%;
  --king-scale: 1.55;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-deep-cast img:nth-child(2),
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-deep-cast img:nth-child(4) {
  animation-delay: -1.25s;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-deep-cast img:nth-child(3) {
  animation-delay: -2.1s;
}

@keyframes lobby-goal-king-float {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(var(--king-scale)); }
  50% { transform: translateX(-50%) translateY(-1px) scale(var(--king-scale)); }
}

.main-menu[data-lobby-phase="final"] #menuLobbyPanel .lobby-deep-cast img {
  opacity: .74;
  filter: saturate(.72) brightness(.86) drop-shadow(0 3px 3px rgba(0, 0, 0, .78));
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slots {
  position: absolute;
  z-index: 3;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot {
  position: absolute !important;
  left: var(--mark-x) !important;
  top: 0 !important;
  box-sizing: border-box;
  width: 18.1% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%) !important;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot::before,
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* One quiet painted ring is reused per cell; no shared five-bay altar image. */
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot::before {
  z-index: 0;
  top: 41.5%;
  width: calc(100% - 3px);
  aspect-ratio: 1;
  background:
    url("assets/generated/king_mark_v3/king-mark-overlay.png")
    12.3% 44% / 778.5% auto no-repeat;
  filter: brightness(.82) saturate(.64) drop-shadow(0 2px 2px rgba(0, 0, 0, .72));
  opacity: .92;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot::after {
  z-index: 0;
  top: 83.1%;
  width: 86%;
  height: 14px;
  background:
    url("assets/generated/ui/tab-button.png")
    center / 100% 100% no-repeat;
  filter: brightness(.76) saturate(.62);
  opacity: .9;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot:nth-child(1) {
  --mark-x: 13.95%;
  --mark-size: 27px;
  --mark-y: 67.75%;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot:nth-child(2) {
  --mark-x: 31.74%;
  --mark-size: 27.5px;
  --mark-y: 68.05%;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot:nth-child(3) {
  --mark-x: 49.63%;
  --mark-size: 27.5px;
  --mark-y: 67.95%;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot:nth-child(4) {
  --mark-x: 67.42%;
  --mark-size: 30px;
  --mark-y: 68.05%;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot:nth-child(5) {
  --mark-x: 85.21%;
  --mark-size: 27.5px;
  --mark-y: 67.75%;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot img {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--mark-y) !important;
  width: var(--mark-size) !important;
  height: var(--mark-size) !important;
  box-sizing: content-box;
  padding: 3px;
  object-fit: contain;
  background:
    radial-gradient(circle, rgba(2, 8, 17, .86) 0 49%, transparent 51%),
    url("assets/generated/bag_content_gothic_1790601600072/bag-slot-frame.png")
    center / 100% 100% no-repeat;
  transform: translate(-50%, -50%) !important;
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, .8))
    drop-shadow(0 0 4px rgba(77, 201, 235, .26));
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot strong {
  position: absolute;
  z-index: 2;
  left: 50% !important;
  right: auto !important;
  top: 83.1% !important;
  width: 82% !important;
  display: block;
  overflow: hidden;
  color: #e6d7b6;
  font-size: 6.4px;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  transform: translate(-50%, -50%) !important;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot.locked img {
  opacity: .24;
  filter: grayscale(1) brightness(.58) drop-shadow(0 2px 2px rgba(0, 0, 0, .8));
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot.locked strong {
  color: #7e8992;
}

/* A readable quest card and a quieter New Expedition action share one utility row. */
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-journey {
  box-sizing: border-box;
  left: 10px;
  right: auto;
  bottom: max(158px, calc(env(safe-area-inset-bottom) + 140px)) !important;
  width: calc(100% - 138px);
  height: 40px;
  min-height: 40px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 74px;
  gap: 5px;
  padding: 4px 10px 4px 11px;
  overflow: hidden;
  background:
    url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-section-header.png")
    center / 100% 100% no-repeat;
  filter: brightness(.84) saturate(.76) drop-shadow(0 4px 5px rgba(0, 0, 0, .58));
  transform: none;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-journey > img {
  width: 19px;
  height: 19px;
  place-self: center;
  object-fit: contain;
  filter: saturate(.78) brightness(.88);
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  line-height: 1;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-copy b {
  color: #e7d29e;
  font-size: 7.2px;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-copy em {
  color: #82d1e8;
  font-size: 6.8px;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-goal-row {
  display: block;
  font-size: 0;
  line-height: 0;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-goal-row strong {
  display: block;
  overflow: hidden;
  color: #fff0b4;
  font-size: 8.5px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-reward {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: center;
  align-content: center;
  padding-left: 6px;
  border-left: 1px solid rgba(77, 192, 215, .32);
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-reward small {
  color: #72cfe2;
  font-size: 6.4px;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-reward > span {
  gap: 2px;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  width: auto;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-reward img {
  width: 13px;
  height: 13px;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-reward b {
  display: block;
  overflow: hidden;
  max-width: 48px;
  color: #e8d397;
  font-size: 7.1px;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep Continue dominant; New Expedition is readable but quieter and smaller. */
.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-new-run-button {
  left: auto;
  right: 10px;
  bottom: max(158px, calc(env(safe-area-inset-bottom) + 140px));
  width: 110px;
  height: 40px;
  min-height: 40px;
  padding: 0 18px 1px;
  background:
    transparent url("assets/generated/settings_controls_v2_1793462400000/settings-action-button-v2-final.png")
    center / 100% 100% no-repeat;
  color: #ead7a8;
  font-size: 9.7px;
  filter: brightness(.91) saturate(.78) drop-shadow(0 4px 6px rgba(0, 0, 0, .58));
  transform: none;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-new-run-button:is(:active, .qa-pressed) {
  transform: translateY(1px) scale(.985);
  filter: brightness(.76) saturate(.72) drop-shadow(0 2px 4px rgba(0, 0, 0, .52));
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel:has(#lobbyNewRunButton:not([hidden])) #lobbyMarkBoard.lobby-mark-board {
  bottom: 198px !important;
}

.main-menu[data-lobby-marks="visible"] #menuLobbyPanel:not(:has(#lobbyNewRunButton:not([hidden]))) #lobbyMarkBoard.lobby-mark-board {
  bottom: 184px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel #lobbyMarkBoard.lobby-mark-board {
    bottom: 194px !important;
    height: 158px !important;
    min-height: 158px !important;
  }

  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel:has(#lobbyNewRunButton:not([hidden])) #lobbyMarkBoard.lobby-mark-board,
  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel:not(:has(#lobbyNewRunButton:not([hidden]))) #lobbyMarkBoard.lobby-mark-board {
    bottom: 194px !important;
  }

  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-beginner-journey {
    bottom: max(159px, calc(env(safe-area-inset-bottom) + 143px)) !important;
    width: calc(100% - 128px);
    height: 38px;
    min-height: 38px;
  }

  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-new-run-button {
    bottom: max(159px, calc(env(safe-area-inset-bottom) + 143px));
    width: 100px;
    height: 38px;
    min-height: 38px;
  }

  .main-menu[data-lobby-marks="visible"] #menuLobbyPanel .lobby-mark-slot img {
    width: calc(var(--mark-size) - 2px) !important;
    height: calc(var(--mark-size) - 2px) !important;
  }
}


/* SOURCE: ui/styles/shared/first-flow-finish-v1.css */
/* First-session finish pass V5: let the painting run under a foreground metal
   lip, keep its opening optically centered, and respect phone safe controls. */
body #menuStoryPanel.menu-panel.active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: max(10px, env(safe-area-inset-top)) 7px max(10px, env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  filter: none !important;
}

body #menuStoryPanel .story-stage {
  align-self: center !important;
  flex: 0 0 auto !important;
  display: block !important;
  width: min(372px, calc(100vw - 14px)) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 8px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #menuStoryPanel .story-art {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 auto 13px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/first_flow_finish_v2_20260830/story-illustration-frame-v1.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .58)) !important;
}

body #menuStoryPanel .story-art .story-illustration {
  z-index: 1 !important;
  inset: 6% !important;
  width: 88% !important;
  height: 88% !important;
  object-fit: cover !important;
  border-radius: clamp(15px, 4.4vw, 18px) !important;
  filter: saturate(1.02) contrast(1.03) brightness(.94) !important;
}

/* Preserve the complete unique creature cast in these two taller ending paintings. */
body #menuStoryPanel .story-art .story-illustration[src*="hero-02d-scenes-v2-20260907/ending_"] {
  object-fit: contain !important;
}

/* The same authored mount is repeated only on its metal lip, above the image.
   This hides the painting edge and removes the residual black top/bottom bands. */
body #menuStoryPanel .story-art::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  display: block !important;
  padding: 7.6% 8.2% 7.6% 7% !important;
  border-radius: 38px !important;
  background: transparent url("assets/generated/first_flow_finish_v2_20260830/story-illustration-frame-v1.png") center / 100% 100% no-repeat !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) !important;
  pointer-events: none !important;
}

body #menuStoryPanel .story-step-label {
  align-self: flex-start !important;
  margin-top: 0 !important;
}

body #menuStoryPanel .story-actions {
  flex: 0 0 auto !important;
  align-self: center !important;
  width: min(356px, calc(100vw - 30px)) !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: -7px 0 0 !important;
}

/* Dedicated one-line reward plate with an independent optical center. */
body .monetization-toast {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  bottom: max(74px, calc(env(safe-area-inset-bottom) + 54px)) !important;
  width: min(330px, calc(100vw - 22px)) !important;
  min-height: 58px !important;
  padding: 1px 42px 3px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/first_flow_finish_v2_20260830/beginner-quest-toast-plate-v2.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .76)) !important;
  color: #e8eef1 !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -.012em !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #000 !important;
}

/* Reuse the forged-metal confirmation plate already used by current result screens. */
body #tutorialPanel.tutorial-single-action {
  grid-template-rows: minmax(0, 1fr) 38px !important;
}

body #tutorialPanel.tutorial-single-action .tutorial-actions {
  width: 132px !important;
  height: 38px !important;
  min-height: 38px !important;
  grid-template-columns: 132px !important;
  grid-template-rows: 38px !important;
  justify-self: center !important;
  justify-content: center !important;
}

body #tutorialPanel.tutorial-single-action #tutorialNextButton:not([hidden]) {
  display: grid !important;
  place-items: center !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 20px 1px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent url("assets/generated/board_result_confirm_button_1790688000000/board-result-confirm-button-trimmed.png") center / 100% 100% no-repeat !important;
  color: #f5e8b2 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow: none !important;
  filter: saturate(.82) brightness(.94) drop-shadow(0 3px 4px rgba(0, 0, 0, .58)) !important;
}

body #tutorialPanel.tutorial-single-action #tutorialNextButton::before,
body #tutorialPanel.tutorial-single-action #tutorialNextButton::after {
  content: none !important;
  display: none !important;
}

body #tutorialPanel.tutorial-single-action #tutorialNextButton:hover,
body #tutorialPanel.tutorial-single-action #tutorialNextButton:focus-visible {
  outline: 0 !important;
  filter: saturate(.92) brightness(1.04) drop-shadow(0 3px 5px rgba(0, 0, 0, .62)) !important;
}

body #tutorialPanel.tutorial-single-action #tutorialNextButton:active,
html[data-qa-tutorial-confirm-pressed] body #tutorialPanel.tutorial-single-action #tutorialNextButton {
  transform: translateY(1px) scale(.985) !important;
  background: transparent url("assets/generated/board_result_confirm_button_1790688000000/board-result-confirm-button-trimmed.png") center / 100% 100% no-repeat !important;
  filter: saturate(.78) brightness(.84) drop-shadow(0 2px 3px rgba(0, 0, 0, .56)) !important;
}

body .monetization-toast[data-state="rewarded"] {
  color: #ffe6a3 !important;
}

body .monetization-toast[data-state="success"] {
  color: #bdebd8 !important;
}

body .monetization-toast[data-state="error"] {
  color: #ffc7bc !important;
}

@media (max-width: 370px) {
  body #menuStoryPanel.menu-panel.active {
    gap: 5px !important;
    padding-inline: 7px !important;
  }

  body #menuStoryPanel .story-actions {
    width: min(330px, calc(100vw - 30px)) !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  body .monetization-toast {
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 52px)) !important;
    width: min(318px, calc(100vw - 18px)) !important;
    min-height: 56px !important;
    padding-inline: 39px !important;
    font-size: 11px !important;
  }
}

/* Unlocks float above the game as a temporary notice, not another board slot. */
body #monetizationToast[data-state="item-unlock-brief"] {
  top: max(126px, calc(env(safe-area-inset-top) + 116px)) !important;
  bottom: auto !important;
  min-height: 76px !important;
  width: min(330px, calc(100vw - 26px)) !important;
  padding: 11px 29px 13px !important;
  background: #0b111b url("assets/generated/first_flow_finish_v2_20260830/beginner-quest-toast-plate-v2.png") center / 100% 100% no-repeat !important;
  gap: 12px;
  justify-content: flex-start !important;
  text-align: left !important;
  transform: translate(-50%, -16px);
  filter: drop-shadow(0 10px 14px #000) drop-shadow(0 0 5px #ad884c66) !important;
}
body #monetizationToast[data-state="item-unlock-brief"].show { transform: translate(-50%, 0); }
.unlock-brief-icon { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 5px var(--unlock-grade, #eef1f4)); }
.unlock-brief-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.unlock-brief-copy strong { color: #f2d68e; font-size: 13px; line-height: 1.2; }
.unlock-brief-copy > span { color: #ede7d8; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.unlock-brief-copy > .unlock-brief-reason { color: #c2cbd0; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { body #monetizationToast[data-state="item-unlock-brief"] { transition: opacity .18s; transform: translateX(-50%); } }

.unlock-brief-icon[data-rarity="F"] { --unlock-grade: #eef1f4; }
.unlock-brief-icon[data-rarity="D"] { --unlock-grade: #a5b7c8; }
.unlock-brief-icon[data-rarity="C"] { --unlock-grade: #8dffb0; }
.unlock-brief-icon[data-rarity="B"] { --unlock-grade: #79ddff; }
.unlock-brief-icon[data-rarity="A"] { --unlock-grade: #c7a0ff; }
.unlock-brief-icon[data-rarity="S"] { --unlock-grade: #ffc08b; }
.unlock-brief-icon[data-rarity="SS"] { --unlock-grade: #fff18a; }
.unlock-brief-icon[data-rarity="SSS"] { --unlock-grade: #ff6872; }


/* SOURCE: ui/styles/menus/menu-priority-unification-v1.css */
/* Priority visual unification V1 — SD menu backgrounds + compact game-native settings/credits. */

:root {
  --priority-panel-art: url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png");
  --priority-card-art: url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png");
  --priority-button-art: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-neutral.png");
  --priority-button-primary-art: url("assets/generated/ui_controls_purpose_1788505000000/button-miniwide-primary.png");
}

/* The new painting already contains the hero and creatures. Keep the accepted live controls in place. */
.main-menu:is([data-panel="home"], [data-panel="login"]),
body:has(#menuHomePanel.active:not([hidden])) .main-menu {
  background: #050912 !important;
}

.main-menu:is([data-panel="home"], [data-panel="login"]) .menu-scene,
body:has(#menuHomePanel.active:not([hidden])) .main-menu .menu-scene {
  background:
    linear-gradient(180deg, rgba(2, 7, 14, .08) 0%, rgba(2, 6, 13, .02) 46%, rgba(2, 5, 11, .54) 70%, rgba(2, 4, 9, .96) 100%),
    url("assets/generated/hero-02d-scenes-v1-20260907/home.png") center 43% / cover no-repeat !important;
  box-shadow:
    inset 0 74px 70px rgba(3, 7, 15, .24),
    inset 0 -150px 105px rgba(1, 3, 8, .76) !important;
}

.main-menu:is([data-panel="home"], [data-panel="login"]) .menu-scene::before,
body:has(#menuHomePanel.active:not([hidden])) .main-menu .menu-scene::before {
  background:
    radial-gradient(circle at 50% 27%, rgba(164, 121, 255, .10), transparent 34%),
    linear-gradient(90deg, rgba(2, 5, 11, .28), transparent 15%, transparent 85%, rgba(2, 5, 11, .28)) !important;
  opacity: 1 !important;
}

.main-menu:is([data-panel="home"], [data-panel="login"]) .menu-scene::after,
body:has(#menuHomePanel.active:not([hidden])) .main-menu .menu-scene::after {
  height: 35% !important;
  background: linear-gradient(180deg, transparent, rgba(2, 4, 9, .86) 64%, #020409 100%) !important;
}

.main-menu:is([data-panel="home"], [data-panel="login"]) .menu-characters,
body:has(#menuHomePanel.active:not([hidden])) .main-menu .menu-characters {
  display: none !important;
}

.main-menu[data-panel="lobby"][data-lobby-phase="base"] .lobby-command-art {
  object-position: 50% 50% !important;
  filter: saturate(.98) contrast(1.02) brightness(.94) !important;
}

.main-menu[data-panel="lobby"][data-lobby-phase="base"] .lobby-command::after {
  background:
    linear-gradient(180deg, rgba(3, 8, 16, .50) 0%, rgba(3, 8, 16, .10) 24%, transparent 54%, rgba(3, 7, 14, .48) 72%, rgba(2, 5, 11, .94) 100%) !important;
}

/* Keep the new deep-lobby hero above the unchanged bottom controls. */
.main-menu[data-panel="lobby"][data-lobby-phase="beyond"] .lobby-command-art {
  transform: translateY(-8dvh);
}

/* Settings: use one outer painted panel and distinct painted wells for each functional group. */
.main-menu[data-panel="settings"],
.main-menu[data-panel="credits"] {
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(75, 88, 131, .19), transparent 35%),
    linear-gradient(180deg, #07111d, #02070d) !important;
}

.main-menu[data-panel="settings"] .menu-title,
.main-menu[data-panel="settings"] .menu-characters,
.main-menu[data-panel="credits"] .menu-title,
.main-menu[data-panel="credits"] .menu-characters {
  display: none !important;
}

.main-menu[data-panel="settings"] .menu-scene,
.main-menu[data-panel="credits"] .menu-scene {
  width: min(100%, 430px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(72, 117, 151, .13), transparent 32%),
    linear-gradient(180deg, #081725, #030a12) !important;
  box-shadow: inset 0 0 38px rgba(0, 0, 0, .32) !important;
}

.main-menu[data-panel="settings"] .menu-scene::before,
.main-menu[data-panel="credits"] .menu-scene::before,
.main-menu[data-panel="settings"] .menu-scene::after,
.main-menu[data-panel="credits"] .menu-scene::after {
  display: none !important;
}

.main-menu[data-panel="settings"] .menu-card {
  inset: max(4px, env(safe-area-inset-top)) 4px max(4px, env(safe-area-inset-bottom)) !important;
  display: block !important;
  transform: none !important;
}

.main-menu[data-panel="settings"] .menu-card:has(#menuGameHomeBox[hidden]) {
  top: 50% !important;
  bottom: auto !important;
  height: min(630px, calc(100dvh - 16px)) !important;
  transform: translateY(-50%) !important;
}

body #menuSettingsPanel.menu-panel.active {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 24px 24px 25px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  background: var(--priority-panel-art) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

body #menuSettingsPanel.menu-panel.active::before,
body #menuSettingsPanel.menu-panel.active::after {
  content: none !important;
  display: none !important;
}

body #menuSettingsPanel .menu-panel-head,
body #menuSettingsPanel .settings-gothic-group,
body #menuSettingsPanel .menu-game-home-box {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuSettingsPanel .menu-panel-head {
  flex: 0 0 54px !important;
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) 74px !important;
  align-items: center !important;
  padding: 2px 4px 0 !important;
  border: 0 !important;
  background: none !important;
}

body #menuSettingsPanel .menu-panel-head > strong {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  transform: none !important;
  margin: 0 !important;
  color: #f4e3a9 !important;
  font-size: 23px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 3px #000, 0 0 8px rgba(181, 126, 46, .25) !important;
}

body #menuSettingsPanel .menu-panel-head > .menu-back-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  width: 70px !important;
  min-width: 70px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 2px 2px !important;
  border: 0 !important;
  background: var(--priority-button-art) center / 100% 100% no-repeat !important;
  color: #dbe9ee !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 3px #000 !important;
}

body #menuSettingsPanel .menu-panel-head::after {
  content: "" !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 70px !important;
  height: 34px !important;
  background: none !important;
}

body #menuSettingsPanel .settings-gothic-group,
body #menuSettingsPanel .menu-game-home-box {
  display: block !important;
  flex: 0 0 auto !important;
  padding: 10px 13px 11px !important;
  border: 12px solid transparent !important;
  border-image: var(--priority-card-art) 35 45 fill / 12px 14px / 0 stretch !important;
  background: rgba(4, 12, 21, .72) !important;
}

body #menuSettingsPanel .settings-section-heading {
  min-height: 27px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  margin: 0 1px 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

body #menuSettingsPanel .settings-section-heading::before {
  content: "◆" !important;
  color: #5cc4e8 !important;
  font-size: 8px !important;
  text-shadow: 0 0 6px rgba(76, 192, 235, .50) !important;
}

body #menuSettingsPanel .settings-section-heading > strong {
  color: #eedb9d !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

body #menuSettingsPanel .settings-section-heading > small {
  color: #8ba8b5 !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

body #menuSettingsPanel .menu-account-box,
body #menuSettingsPanel .menu-cloud-box,
body #menuSettingsPanel .menu-tutorial-box,
body #menuSettingsPanel .menu-policy-box {
  box-sizing: border-box !important;
  min-height: 43px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(111, 129, 136, .22) !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(18, 31, 43, .20), rgba(4, 10, 17, .04)) !important;
  box-shadow: none !important;
}

body #menuSettingsPanel .menu-account-box {
  display: grid !important;
  grid-template-columns: auto minmax(0, .8fr) auto minmax(0, 1.25fr) !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 7px !important;
}

body #menuSettingsPanel .menu-account-box > span {
  color: #68c3e0 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  text-align: left !important;
}

body #menuSettingsPanel .menu-account-box > strong {
  min-width: 0 !important;
  color: #f2e1aa !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body #menuSettingsPanel .menu-cloud-box,
body #menuSettingsPanel .menu-tutorial-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 82px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 6px 5px 8px !important;
}

body #menuSettingsPanel .menu-cloud-box > span {
  min-width: 0 !important;
  color: #a3bac4 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body #menuSettingsPanel .menu-tutorial-box > span,
body #menuSettingsPanel .menu-policy-box > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

body #menuSettingsPanel .menu-tutorial-box strong,
body #menuSettingsPanel .menu-policy-box > span strong {
  color: #ead89c !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
}

body #menuSettingsPanel .menu-tutorial-box small,
body #menuSettingsPanel .menu-policy-box > span small {
  color: #91aab5 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

body #menuSettingsPanel .menu-policy-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 150px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 6px 5px 8px !important;
}

body #menuSettingsPanel .menu-policy-links {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3px !important;
}

body #menuSettingsPanel .menu-small-button,
body #menuSettingsPanel .menu-small-button.ghost,
body #menuSettingsPanel .menu-policy-links a,
body #menuSettingsPanel .menu-policy-links button,
body #menuSettingsPanel .menu-game-home-button {
  box-sizing: border-box !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 5px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--priority-button-art) center / 100% 100% no-repeat !important;
  color: #dbe8ec !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px #000 !important;
  box-shadow: none !important;
  filter: none !important;
}

body #menuSettingsPanel .menu-policy-links a,
body #menuSettingsPanel .menu-policy-links button {
  height: 28px !important;
  min-height: 28px !important;
  font-size: 8.5px !important;
}

body #menuSettingsPanel .menu-policy-links #deleteAccountButton,
body #menuSettingsPanel .menu-game-home-button {
  color: #efc0aa !important;
  background-image: url("assets/generated/settings_controls_v2_1793462400000/settings-danger-wide-button-v2-final.png") !important;
}

body #menuSettingsPanel .menu-game-home-box {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
}

body #menuSettingsPanel .menu-game-home-box:not([hidden]) {
  flex: 1 1 145px !important;
  min-height: 145px !important;
  align-content: center !important;
}

body #menuSettingsPanel .menu-game-home-box[hidden] {
  display: none !important;
}

body #menuSettingsPanel .menu-game-home-button {
  justify-self: center !important;
  width: min(100%, 260px) !important;
  height: 35px !important;
}

body #menuSettingsPanel .menu-game-home-box > small {
  color: #91aab5 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* Credits: a compact maker plaque instead of a nearly empty full-height form. */
.main-menu[data-panel="credits"] .menu-card {
  top: 50% !important;
  right: 13px !important;
  bottom: auto !important;
  left: 13px !important;
  height: min(390px, calc(100dvh - 28px)) !important;
  transform: translateY(-50%) !important;
}

body #menuCreditsPanel.menu-panel.active {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 25px 27px 30px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--priority-panel-art) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

body #menuCreditsPanel .menu-panel-head {
  flex: 0 0 51px !important;
  min-height: 51px !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) 70px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 2px !important;
  background: none !important;
}

body #menuCreditsPanel .menu-panel-head > strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  color: #f4e3a9 !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 3px #000 !important;
}

body #menuCreditsPanel .menu-panel-head > .menu-back-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  width: 68px !important;
  min-width: 68px !important;
  height: 33px !important;
  min-height: 33px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 2px 2px !important;
  border: 0 !important;
  background: var(--priority-button-art) center / 100% 100% no-repeat !important;
  color: #dbe9ee !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 3px #000 !important;
}

body #menuCreditsPanel .menu-panel-head::after {
  content: "" !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 68px !important;
  height: 33px !important;
}

body #menuCreditsPanel .credits-intro {
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 74px;
  color: #8fd6ef;
  text-align: center;
}

body #menuCreditsPanel .credits-intro::before {
  content: "◆";
  color: #8569e9;
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(118, 92, 235, .55);
}

body #menuCreditsPanel .credits-intro strong {
  color: #f1df9f;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 2px 3px #000;
}

body #menuCreditsPanel .credits-box {
  width: 100% !important;
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

body #menuCreditsPanel .credits-record {
  box-sizing: border-box !important;
  min-height: 55px !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 17px !important;
  border: 10px solid transparent !important;
  border-image: var(--priority-card-art) 35 45 fill / 10px 12px / 0 stretch !important;
  background: rgba(4, 12, 21, .74) !important;
}

body #menuCreditsPanel .credits-record span {
  color: #72c7e5 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

body #menuCreditsPanel .credits-record strong {
  min-width: 0 !important;
  color: #f0dfa8 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .main-menu[data-panel="settings"] .menu-card:has(#menuGameHomeBox[hidden]) {
    height: min(550px, calc(100dvh - 16px)) !important;
  }

  body #menuSettingsPanel.menu-panel.active {
    padding: 19px 19px 20px !important;
    gap: 5px !important;
  }

  body #menuSettingsPanel .menu-panel-head {
    flex-basis: 48px !important;
  }

  body #menuSettingsPanel .settings-gothic-group,
  body #menuSettingsPanel .menu-game-home-box {
    padding: 7px 10px 8px !important;
  }

  body #menuSettingsPanel .settings-section-heading {
    min-height: 23px !important;
    margin-bottom: 2px !important;
  }

  body #menuSettingsPanel .menu-account-box,
  body #menuSettingsPanel .menu-cloud-box,
  body #menuSettingsPanel .menu-tutorial-box,
  body #menuSettingsPanel .menu-policy-box {
    min-height: 38px !important;
  }

  body #menuSettingsPanel .menu-policy-box {
    grid-template-columns: minmax(0, 1fr) 142px !important;
  }

  .main-menu[data-panel="credits"] .menu-card {
    right: 9px !important;
    left: 9px !important;
  }

  body #menuCreditsPanel.menu-panel.active {
    padding-inline: 22px !important;
  }

  body #menuCreditsPanel .credits-record {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding-inline: 8px !important;
  }

  body #menuCreditsPanel .credits-record strong {
    font-size: 10.5px !important;
    letter-spacing: -.15px !important;
  }
}



/* SOURCE: ui/styles/shared/playtest-clarity-v1.css */
/* Playtest clarity V1 20260831
   Narrow fixes from the full first-run playthrough. Existing painted frames
   remain the art source; only content registration and readable copy change. */

/* The necklace art is intact, but its detailed black-and-gold silhouette was
   being reduced to a dark knot in the smallest item slots. */
.inline-reveal-item.item-base-sageNecklace .inline-item-icon,
#bagPanel .tray-item.item-base-sageNecklace .tray-icon {
  transform: scale(1.24) !important;
  transform-origin: center !important;
  image-rendering: auto !important;
  filter: brightness(1.16) contrast(1.08) drop-shadow(0 1px 2px rgba(0, 0, 0, .8)) !important;
}
#bagPanel .item-tile.item-base-sageNecklace .item-icon {
  transform: translate(-50%, -50%) scale(1.24) !important;
  transform-origin: center !important;
  image-rendering: auto !important;
  filter: brightness(1.16) contrast(1.08) drop-shadow(0 1px 2px rgba(0, 0, 0, .8)) !important;
}

/* The current-HP line uses one full text line; the old 13px box shaved the
   descender by one pixel on the narrow reward card. */
#rewardChoices .reward-current-health {
  min-height: 14px !important;
  line-height: 14px !important;
  overflow: visible !important;
}

/* Keep the same painted-bay registration in both enabled and disabled states. */
#itemInfoPanel .item-info-actions #itemPlaceButton:disabled > strong {
  transform: translate(1.5px, -1px) !important;
}

/* Enemy portraits are registered inside each painted row independently. */
#enemyInfoPanel #enemyInfoList .enemy-info-row {
  padding-left: 70px !important;
  padding-right: 16px !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-portrait {
  left: 13px !important;
  width: 54px !important;
  height: 54px !important;
  transform: scale(1.12) !important;
  transform-origin: 50% 50% !important;
  object-fit: contain !important;
}
#enemyInfoPanel #enemyInfoList[data-enemy-count="2"] .enemy-entry-portrait {
  transform: translateY(-50%) scale(1.12) !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values {
  grid-template-columns: 1fr 1fr 1.3fr !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values > span,
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values small,
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values b {
  text-align: center !important;
}
.enemy-info-card #enemyInfoCloseButton,
.enemy-info-card[data-enemy-count="2"] #enemyInfoCloseButton,
.enemy-info-card[data-enemy-count="3"] #enemyInfoCloseButton {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  background: transparent url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png") center/contain no-repeat !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .72)) !important;
}
@media (max-width: 370px) {
  #enemyInfoPanel #enemyInfoList .enemy-info-row {
    padding-left: 66px !important;
    padding-right: 13px !important;
  }
  #enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-portrait {
    left: 11px !important;
    width: 52px !important;
    height: 52px !important;
  }
}

/* One scroll surface for the full item explanation. Rows themselves grow to
   their content, so long unique effects never receive nested scrollbars. */
#itemInfoPanel .item-info-card {
  overflow: hidden !important;
}
#itemInfoPanel .item-info-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: transparent url("assets/generated/item_detail_panel_scroll_v1_20260831/item-detail-panel-scroll-v1.png") center / 100% 100% no-repeat !important;
  filter: var(--source-gem-filter, none) !important;
  clip-path: inset(22.8% 8.8% 9.6% 8.8%) !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body {
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: 8 !important;
  left: 12.25% !important;
  right: 12.25% !important;
  top: 23.1% !important;
  bottom: 11.3% !important;
  display: block !important;
  padding: 3px 2px 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: inset(0 round 1px) !important;
  contain: paint !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body::-webkit-scrollbar {
  display: none !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body > #itemInfoText {
  display: none !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body > #itemInfoStats {
  box-sizing: border-box !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 3px 3px 0 !important;
  display: grid !important;
  grid-template-rows: none !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 5px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span,
#itemInfoPanel .item-info-card #itemInfoStats > span:nth-child(n),
#itemInfoPanel .item-info-card #itemInfoStats > .base-stat-chip,
#itemInfoPanel .item-info-card #itemInfoStats > .item-effect-detail-chip {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 5px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") center/100% 100% no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="primary"] {
  min-height: 62px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"] {
  min-height: 84px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span > small {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #91e7ff !important;
  font-size: 10px !important;
  line-height: 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  transform: none !important;
}
#itemInfoPanel .item-info-card #itemInfoStats .item-info-scroll-cue {
  display: none !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span > strong,
#itemInfoPanel .item-info-card #itemInfoStats > span[data-density] > strong,
#itemInfoPanel .item-info-card #itemInfoStats > .compact-overflow > strong {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #f8e6a8 !important;
  font-size: 11px !important;
  line-height: 14px !important;
  text-align: center !important;
  overflow: visible !important;
  transform: none !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip > .item-readable-values {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  grid-auto-rows: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span[data-layout="primary"] > strong {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(14px, auto) !important;
  gap: 1px 12px !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span[data-layout="secondary"] > .item-readable-values {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(16px, auto) !important;
  gap: 5px 8px !important;
  box-sizing: border-box !important;
  padding-inline: 7px !important;
  align-content: center !important;
  overflow: visible !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span[data-layout="secondary"] > .item-readable-values > .item-summary-part {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span[data-layout="effect"] > .item-readable-values {
  gap: 1px !important;
  font-size: 10.5px !important;
  line-height: 13px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"] > .item-readable-values > .item-summary-part {
  min-height: 13px !important;
  line-height: 13px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > .item-stat-chip > .item-readable-values > .item-summary-part,
#itemInfoPanel .item-info-card #itemInfoStats > span > strong > .item-summary-part,
#itemInfoPanel .item-info-card #itemInfoStats .item-readable-group > span {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 14px !important;
  margin: 0 !important;
  color: #fff0b1 !important;
  font: inherit !important;
  line-height: 14px !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body > #itemInfoRelations {
  box-sizing: border-box !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 5px 0 0 !important;
  padding: 0 3px !important;
  display: grid !important;
  grid-template-rows: none !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 5px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body > #itemInfoRelations[hidden] {
  display: none !important;
}
#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row,
#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row:nth-child(n) {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 63px !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  overflow: hidden !important;
  contain: paint !important;
  background: transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png") center/100% 100% no-repeat !important;
}
#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row > div {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  overflow: hidden !important;
}
#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row small,
#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row strong,
#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row em {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: keep-all !important;
  transform: none !important;
}
#itemInfoPanel .item-info-card .item-info-actions {
  z-index: 15 !important;
}
#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row.linked-set {
  min-height: 80px !important;
}

/* Register the long necklace name farther inside its painted title recess. */
#itemInfoPanel .item-info-card .item-info-head > div,
#itemInfoPanel.long-item-title .item-info-card .item-info-head > div {
  left: 40% !important;
  right: 18.4% !important;
  overflow: hidden !important;
}
#itemInfoPanel .item-info-card .item-info-head strong,
#itemInfoPanel.long-item-title .item-info-card .item-info-head strong {
  font-size: 13.4px !important;
  line-height: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* A hidden recipe is one compact centred unit. The old 100%-wide copy child
   escaped its own grid track, pushing the wording right and the icons left. */
#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row.recipe.unknown {
  grid-template-columns: 68px 128px !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 6px !important;
  padding-inline: 12px !important;
}
#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row.recipe.unknown .item-recipe-equation {
  position: relative !important;
  inset: auto !important;
  width: 68px !important;
  justify-self: center !important;
  transform: none !important;
}
#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row.recipe.unknown > div {
  position: relative !important;
  inset: auto !important;
  width: 128px !important;
  max-width: 128px !important;
  justify-self: center !important;
  transform: none !important;
}

/* Each authored unique effect occupies its own readable line. */
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="3"] {
  min-height: 91px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="4"] {
  min-height: 104px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="5"],
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="6"] {
  min-height: 117px !important;
}

/* Old fixed coordinates for five combat stats must not survive inside the new
   document-flow list. Dense bays grow by their own line count, and the one
   outer detail scroller exposes the added height without nested scrolling. */
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout] {
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="primary"][data-part-count="3"] {
  min-height: 66px !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="secondary"]:is([data-part-count="3"], [data-part-count="4"]) {
  min-height: 76px !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="secondary"]:is([data-part-count="5"], [data-part-count="6"]) {
  height: auto !important;
  min-height: 92px !important;
}
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="secondary"]:is([data-part-count="5"], [data-part-count="6"]) > .item-readable-values {
  inset: 22px 0 0 !important;
  height: calc(100% - 22px) !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] {
  min-height: 125px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="8"] {
  min-height: 139px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="9"] {
  min-height: 153px !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="10"] {
  min-height: 167px !important;
}

/* During an action-led lesson the current target and the guide are the only
   interactive controls. This also blocks pointerup-only game controls. */
body.tutorial-locked :is(button, [role="button"], a, input, select, textarea) {
  pointer-events: none !important;
}
body.tutorial-locked #itemInfoPanel button:not(.tutorial-target),
body.tutorial-locked #gameShell button:not(.tutorial-target),
body.tutorial-locked #gameShell [role="button"]:not(.tutorial-target) {
  pointer-events: none !important;
}
body.tutorial-locked .tutorial-target,
body.tutorial-locked #tutorialPanel,
body.tutorial-locked #tutorialPanel * {
  pointer-events: auto !important;
}
body.tutorial-locked #itemInfoPanel .item-info-scroll-body.tutorial-target {
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

/* The older fixed-bay stylesheet still absolutely positions these labels.
   Register every heading below its painted top rail, then begin the values
   beneath it. The three bays remain independent alignment targets. */
#itemInfoPanel .item-info-card #itemInfoStats > .item-stat-chip > small {
  position: absolute !important;
  inset: 8px 0 auto !important;
  transform: none !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > .item-stat-chip > .item-readable-values {
  position: absolute !important;
  inset: 22px 0 0 !important;
  height: calc(100% - 22px) !important;
  transform: none !important;
}

/* The authored-effect heading owns its own breathing room below the painted
   rail. It must never visually attach to the preceding detail bay. */
#itemInfoPanel .item-info-card #itemInfoStats > .item-stat-chip[data-layout="effect"] > small {
  inset: 11px 0 auto !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > .item-stat-chip[data-layout="effect"] > .item-readable-values {
  inset: 28px 0 0 !important;
  height: calc(100% - 28px) !important;
}
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"] { min-height: 89px !important; }
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="3"] { min-height: 96px !important; }
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="4"] { min-height: 109px !important; }
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"]:is([data-part-count="5"], [data-part-count="6"]) { min-height: 122px !important; }
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="7"] { min-height: 130px !important; }
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="8"] { min-height: 144px !important; }
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="9"] { min-height: 158px !important; }
#itemInfoPanel .item-info-card #itemInfoStats > span[data-layout="effect"][data-part-count="10"] { min-height: 172px !important; }

/* Enemy affinity is one authored symbol inside each enemy's own name bay.
   It no longer consumes a separate row or pushes a later enemy out of frame. */
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-heading {
  position: static !important;
  padding-right: 30px !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-element {
  position: absolute !important;
  right: 23px !important;
  top: 16px !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  overflow: hidden !important;
}
#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-element img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  clip-path: circle(50%) !important;
  opacity: .96 !important;
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px rgba(121, 210, 238, .35)) !important;
}

/* Item and enemy detail reuse the exact medallions learned on the lobby
   affinity screen. The item badge shares the metadata line without shrinking
   the title well below it. */
#itemInfoPanel .item-info-card .item-info-meta-line {
  box-sizing: border-box !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}
#itemInfoPanel .item-info-card .item-info-element-badge {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  object-fit: contain !important;
  clip-path: circle(50%) !important;
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px rgba(121, 210, 238, .28)) !important;
}
#itemInfoPanel .item-info-card .item-info-element-badge[hidden] {
  display: none !important;
}
#itemInfoPanel .item-info-card .item-info-meta-line > #itemInfoMeta {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  text-align: center !important;
  margin: 0 !important;
}


/* SOURCE: ui/styles/rewards/board-passive-sss-color-v1.css */
/* 완판의 최상위 저장 ID는 mythic이지만, 화면 등급은 아이템 SSS 진홍색을 쓴다. */
html body #boardPassiveChoicePanel #boardClearSupplyPreview { cursor:default !important; }
html body #boardPassiveChoicePanel #boardClearSupplyPreview > span { translate:0 -6px; }
html body #boardPassiveChoicePanel #boardClearSupplyPreview[data-rarity] > span > b { color:#9ed6bc !important; }
html body #boardPassiveChoicePanel #boardClearSupplyPreview .auto-reward-received-note {
  display:block !important; margin-top:5px !important; font-size:10px !important; line-height:13px !important;
  font-style:normal !important; color:#9ed6bc !important; white-space:normal !important;
}
/* Each painted well is inspected independently; leave copy positions intact. */
html body #boardPassiveChoicePanel .board-passive-choice:nth-child(1) > span { translate:0 2px; }
html body #boardPassiveChoicePanel .board-passive-choice:nth-child(2) > span { translate:0 1px; }
html body #boardPassiveChoicePanel .board-passive-choice:nth-child(3) > span { translate:0 2px; }
/* Automatic reward uses the same item palette, including its status heading. */
#boardClearSupplyPreview[data-rarity="F"] { --supply-grade-color:#eef1f4; }
#boardClearSupplyPreview[data-rarity="D"] { --supply-grade-color:#8297aa; }
#boardClearSupplyPreview[data-rarity="C"] { --supply-grade-color:#4ade80; }
#boardClearSupplyPreview[data-rarity="B"] { --supply-grade-color:#35c8ff; }
#boardClearSupplyPreview[data-rarity="A"] { --supply-grade-color:#a970ff; }
#boardClearSupplyPreview[data-rarity="S"] { --supply-grade-color:#ff873b; }
#boardClearSupplyPreview[data-rarity="SS"] { --supply-grade-color:#ffe052; }
#boardClearSupplyPreview[data-rarity="SSS"] { --supply-grade-color:#ff4d59; }
html body #boardPassiveChoicePanel #boardClearSupplyPreview > span > b,
html body #boardPassiveChoicePanel #boardClearSupplyPreview > span > strong {
  color:var(--supply-grade-color, #eef1f4) !important;
  background:transparent !important;
  text-shadow:0 1px 2px #000 !important;
}
#boardPassiveChoicePanel .board-passive-choice[data-rarity="SSS"] {
  border-color: transparent !important;
  box-shadow: none !important;
}

#boardPassiveChoicePanel .board-passive-choice[data-rarity="SSS"] b,
#boardPassiveChoicePanel .board-passive-choice[data-rarity="SSS"] strong {
  color: #ff4d59 !important;
  border-color: currentColor !important;
  background: transparent !important;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(255, 78, 88, 0.62) !important;
}

/* Match actual bag item rarity colors, not the old passive-quality palette. */
#boardPassiveChoicePanel .board-passive-choice[data-rarity="SS"] b,
#boardPassiveChoicePanel .board-passive-choice[data-rarity="SS"] strong {
  color: #ffe052 !important;
  background: transparent !important;
  text-shadow: 0 1px 2px #000 !important;
}
#boardPassiveChoicePanel .board-passive-choice[data-rarity="S"] b,
#boardPassiveChoicePanel .board-passive-choice[data-rarity="S"] strong {
  color: #ff873b !important;
  background: transparent !important;
  text-shadow: 0 1px 2px #000 !important;
}


/* SOURCE: ui/styles/menus/audio-settings-v1.css */
/* Audio settings V1: two independent controls on the established forged panel. */
:root {
  --audio-settings-action: url("assets/generated/settings_controls_v2_1793462400000/settings-action-button-v2-final.png");
  --audio-settings-rail: url("assets/generated/unlock_showcase_item_v2_1792936800300/item-unlock-divider-alpha.png");
}

body #menuSettingsPanel.menu-panel.active {
  grid-template-rows: 55px auto auto auto auto auto !important;
  align-content: start !important;
}

body #menuSettingsPanel .settings-audio-group {
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}

body #menuSettingsPanel .settings-audio-group::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  right: 0 !important;
  bottom: -9px !important;
  left: 0 !important;
  height: 18px !important;
  pointer-events: none !important;
  background: transparent var(--audio-settings-rail) center / 100% 100% no-repeat !important;
  opacity: .72 !important;
}

/* Audio V2: independent rows for switch and volume. */
body #menuSettingsPanel#menuSettingsPanel .audio-setting-row {
  grid-template-columns:76px 64px minmax(40px,1fr) 30px!important;
  grid-template-rows:32px!important;
  gap:0 6px!important;
  padding:2px 0!important;
}
body #menuSettingsPanel#menuSettingsPanel .audio-setting-name { grid-column:1!important; grid-row:1!important; }
body #menuSettingsPanel#menuSettingsPanel .audio-volume-range { grid-column:3!important; grid-row:1!important; width:100%!important; }
body #menuSettingsPanel#menuSettingsPanel .audio-setting-row > output { grid-column:4!important; grid-row:1!important; opacity:1!important; font-size:11px!important; }
body #menuSettingsPanel#menuSettingsPanel .audio-toggle-button {
  grid-column:2!important; grid-row:1!important; position:relative!important; inset:auto!important;
  width:64px!important; min-width:64px!important; height:28px!important; min-height:28px!important;
  background:transparent!important;
  padding:0!important; font-size:11px!important; color:#f2dfa6!important; filter:none!important;
}
body #menuSettingsPanel#menuSettingsPanel .audio-toggle-button[aria-pressed="false"] { color:#bec8ca!important; filter:saturate(.3)!important; }
body #menuSettingsPanel#menuSettingsPanel .audio-toggle-button:active { transform:translateY(1px)!important; filter:brightness(.85)!important; }
body #menuSettingsPanel#menuSettingsPanel .audio-toggle-button { isolation:isolate; }
body #menuSettingsPanel#menuSettingsPanel .audio-toggle-button::before { content:""; position:absolute; inset:2px 1px; z-index:-1; border-radius:6px; background:url('assets/generated/audio-toggle-v5-20260910/toggle.png') center/104.5% 134% no-repeat; pointer-events:none; }

/* Optical glyph alignment inside each existing painted recess. */
body #menuSettingsPanel#menuSettingsPanel .audio-toggle-button { padding:0 4px 2px!important; line-height:1!important; }
body #menuSettingsPanel#menuSettingsPanel #menuTutorialResetButton,
body #menuSettingsPanel#menuSettingsPanel #menuCompanionTutorialButton { display:grid!important; place-items:center!important; line-height:1!important; padding:0 8px 2px!important; }
body #menuSettingsPanel#menuSettingsPanel .menu-policy-links a { display:grid!important; place-items:center!important; line-height:1!important; padding:0 9px 2px!important; }
body #menuSettingsPanel#menuSettingsPanel #deleteAccountButton { display:grid!important; place-items:center!important; line-height:1!important; padding:0 9px 3px!important; }
body #menuSettingsPanel#menuSettingsPanel #cloudLogoutButton { display:grid!important; place-items:center!important; line-height:1!important; padding:0 8px 2px!important; }

body #menuSettingsPanel .audio-setting-row {
  box-sizing: border-box !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 86px minmax(64px, 1fr) 38px 56px !important;
  align-items: center !important;
  column-gap: 6px !important;
  margin: 0 !important;
  padding: 4px 5px 4px 8px !important;
  border: 0 !important;
  border-top: 1px solid rgba(111, 129, 136, .24) !important;
  background: linear-gradient(90deg, rgba(18, 31, 43, .20), rgba(4, 10, 17, .04)) !important;
}

body #menuSettingsPanel .audio-setting-name {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
}

body #menuSettingsPanel .audio-setting-name > strong {
  color: #ead89c !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #menuSettingsPanel .audio-setting-name > small {
  color: #91aab5 !important;
  font-size: 7.8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #menuSettingsPanel .audio-volume-range {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  accent-color: #d3a943 !important;
  cursor: pointer !important;
}

body #menuSettingsPanel .audio-volume-range::-webkit-slider-runnable-track {
  height: 6px !important;
  border: 1px solid #66562f !important;
  border-radius: 2px !important;
  background: linear-gradient(#07101a, #101e28) !important;
  box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(47, 117, 148, .24) !important;
}

body #menuSettingsPanel .audio-volume-range::-webkit-slider-thumb {
  width: 17px !important;
  height: 17px !important;
  margin-top: -6px !important;
  border: 1px solid #f0d78b !important;
  border-radius: 50% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: radial-gradient(circle at 38% 32%, #e8d48f 0 18%, #9b752b 42%, #182431 67%, #05080d 100%) !important;
  box-shadow: 0 0 0 2px #101821, 0 0 6px rgba(58, 166, 207, .55) !important;
}

body #menuSettingsPanel .audio-volume-range:focus-visible {
  outline: 1px solid rgba(242, 222, 146, .76) !important;
  outline-offset: 2px !important;
}

body #menuSettingsPanel .audio-setting-row > output {
  color: #d8ebef !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

body #menuSettingsPanel .audio-toggle-button {
  box-sizing: border-box !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 31px !important;
  min-height: 31px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 5px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--audio-settings-action) center / 100% 100% no-repeat !important;
  color: #f0dda0 !important;
  font-family: inherit !important;
  font-size: 9.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 3px #000 !important;
  box-shadow: none !important;
  filter: brightness(1.02) contrast(1.08) saturate(.96) !important;
}

body #menuSettingsPanel .audio-toggle-button[aria-pressed="false"] {
  color: #83949a !important;
  filter: brightness(.63) contrast(1.08) saturate(.48) !important;
}

body #menuSettingsPanel .audio-toggle-button:focus-visible {
  color: #fff0b8 !important;
  outline: 1px solid rgba(242, 222, 146, .76) !important;
  outline-offset: 1px !important;
}

body #menuSettingsPanel .audio-toggle-button:active {
  transform: translateY(1px) scale(.985) !important;
  filter: brightness(.78) contrast(1.08) saturate(.88) !important;
}

body #menuSettingsPanel .audio-setting-row.is-muted .audio-volume-range,
body #menuSettingsPanel .audio-setting-row.is-muted > output {
  opacity: .46 !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body #menuSettingsPanel .settings-audio-group {
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }

  body #menuSettingsPanel .audio-setting-row {
    min-height: 39px !important;
    grid-template-columns: 78px minmax(58px, 1fr) 35px 52px !important;
    column-gap: 4px !important;
    padding-inline: 6px 4px !important;
  }

  body #menuSettingsPanel .audio-setting-name > strong {
    font-size: 10.5px !important;
  }

  body #menuSettingsPanel .audio-setting-name > small {
    font-size: 7.1px !important;
  }

  body #menuSettingsPanel .audio-toggle-button {
    width: 52px !important;
    min-width: 52px !important;
    height: 29px !important;
    min-height: 29px !important;
  }
}

/* Settings fit V2: keep every setting visible without a browser scrollbar. */
.main-menu[data-panel="settings"] .menu-card:has(#menuGameHomeBox:not([hidden])) {
  top: 50% !important;
  bottom: auto !important;
  height: min(680px, calc(100dvh - 16px)) !important;
  transform: translateY(-50%) !important;
}

body #menuSettingsPanel.menu-panel.active {
  gap: 4px !important;
  padding: 15px 17px 16px !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  overscroll-behavior: none !important;
}

body #menuSettingsPanel.menu-panel.active::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body #menuSettingsPanel .menu-panel-head {
  flex: 0 0 43px !important;
}

body #menuSettingsPanel .settings-gothic-group,
body #menuSettingsPanel .menu-game-home-box {
  padding: 4px 8px 5px !important;
  border-width: 8px !important;
  border-image-width: 8px 10px !important;
}

body #menuSettingsPanel .settings-section-heading {
  min-height: 21px !important;
  margin-bottom: 2px !important;
}

body #menuSettingsPanel .audio-setting-row,
body #menuSettingsPanel .menu-account-box,
body #menuSettingsPanel .menu-cloud-box,
body #menuSettingsPanel .menu-tutorial-box,
body #menuSettingsPanel .menu-policy-box {
  min-height: 34px !important;
}

body #menuSettingsPanel .audio-setting-row {
  padding-block: 2px !important;
}

body #menuSettingsPanel .menu-account-box,
body #menuSettingsPanel .menu-cloud-box,
body #menuSettingsPanel .menu-tutorial-box {
  padding-block: 3px !important;
}

body #menuSettingsPanel .menu-small-button,
body #menuSettingsPanel .menu-small-button.ghost {
  height: 28px !important;
  min-height: 28px !important;
}

body #menuSettingsPanel .menu-policy-box {
  padding-block: 3px !important;
}

body #menuSettingsPanel .menu-policy-links a,
body #menuSettingsPanel .menu-policy-links button {
  height: 23px !important;
  min-height: 23px !important;
}

body #menuSettingsPanel .menu-game-home-box:not([hidden]) {
  flex: 0 0 auto !important;
  min-height: 86px !important;
  align-content: center !important;
}

body #menuSettingsPanel .menu-game-home-button {
  height: 31px !important;
  min-height: 31px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .main-menu[data-panel="settings"] .menu-card:has(#menuGameHomeBox:not([hidden])) {
    height: min(618px, calc(100dvh - 16px)) !important;
  }

  body #menuSettingsPanel.menu-panel.active {
    gap: 3px !important;
    padding: 11px 13px 12px !important;
  }

  body #menuSettingsPanel .menu-panel-head {
    flex-basis: 39px !important;
  }

  body #menuSettingsPanel .settings-gothic-group,
  body #menuSettingsPanel .menu-game-home-box {
    padding: 3px 6px 4px !important;
    border-width: 7px !important;
    border-image-width: 7px 9px !important;
  }

  body #menuSettingsPanel .settings-section-heading {
    min-height: 19px !important;
    margin-bottom: 1px !important;
  }

  body #menuSettingsPanel .audio-setting-row,
  body #menuSettingsPanel .menu-account-box,
  body #menuSettingsPanel .menu-cloud-box,
  body #menuSettingsPanel .menu-tutorial-box,
  body #menuSettingsPanel .menu-policy-box {
    min-height: 31px !important;
  }

  body #menuSettingsPanel .menu-game-home-box:not([hidden]) {
    min-height: 78px !important;
  }
}


/* SOURCE: ui/styles/shared/design-sweep-v1.css */
/* Confirmed painted-screen findings, 2026-09-10. */
body #menuAttendancePanel.active { background:transparent var(--menu-surface-panel) center/100% 100% no-repeat!important; border:0!important; border-image:none!important; box-shadow:none!important; }
#bagPanel .tray-item.sell-selected { outline:1px solid #d1b76b!important; outline-offset:-2px!important; border-color:#a78b49!important; box-shadow:inset 0 0 0 1px #604d26!important; }
#fusionPanel #fusionCloseButton:focus-visible { outline:1px solid #cfb977!important; outline-offset:-5px!important; border-radius:9px; }


/* Attendance stays on its own dark menu surface, including the lobby art layer. */
body:has(#menuAttendancePanel.active:not([hidden])) .menu-scene { background:#040914!important; }
body:has(#menuAttendancePanel.active:not([hidden])) .menu-characters,
body:has(#menuAttendancePanel.active:not([hidden])) .menu-scene::before,
body:has(#menuAttendancePanel.active:not([hidden])) .menu-scene::after { display:none!important; }
/* Text is registered to each individual reward well, not the entire board. */
html body #boardPassiveChoicePanel .board-passive-choice:nth-child(1) > span { translate:0 0; }
html body #boardPassiveChoicePanel .board-passive-choice:nth-child(2) > span { translate:0 -2px; }


/* SOURCE: ui/styles/companions/companion-summon-reveal-v10.css */
/* Companion summon reveal V10
   Optical seating is judged against the painted recesses in the rendered
   frame. The roster keeps the same wallet and tab rails as the summon view. */

/* V9 placed the line box too near the upper rail. Move only the title copy;
   the accepted frame, circle and result plate remain untouched. */
body #menuCompanionPanel .companion-summon-reveal-title {
  top: 7.55% !important;
  height: 6.5% !important;
  display: grid !important;
  place-items: center !important;
  padding: 1px 0 0 !important;
  transform: none !important;
}

/* Keep the action hit area on the painted button home. Only lift the Korean
   glyph mass that V9 padded downward. This applies independently to one and
   ten result frames. */
body #menuCompanionPanel .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal-actions > button:not(.active) {
  display: grid !important;
  place-items: center !important;
  padding: 0 0 3px !important;
  transform: none !important;
}

/* The old collection-focus sheet hid the wallet and collapsed the roster to
   three rows. Restore the same four live rows used by the summon tab. */
body #menuCompanionPanel.menu-panel.active[data-companion-view="party"] {
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
}

body #menuCompanionPanel[data-companion-view="party"] #companionCurrencyBar {
  display: grid !important;
  grid-row: 2 !important;
}

body #menuCompanionPanel[data-companion-view="party"] .companion-menu-tabs {
  display: grid !important;
  grid-row: 3 !important;
}

body #menuCompanionPanel[data-companion-view="party"] #companionPartyView {
  grid-row: 4 !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal-title {
    top: 7.55% !important;
    height: 6.5% !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v11.css */
/* Companion summon reveal V11
   One production grade palette across item and companion UI, plus restrained
   high-rarity material inside the existing painted result recesses. */

/* Item grade mapping: C green, B sky, A violet, S orange, SS gold,
   SSS crimson. Text and light accents now use the same identity. */
body #menuCompanionPanel .companion-summon-reveal[data-rarity="novice"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-novice,
body #menuCompanionPanel .rarity-novice,
body #menuCompanionPanel .companion-detail-dialog[data-rarity="novice"] {
  --companion-grade: #4ade80;
  --companion-grade-text: #8dffb0;
  --summon-grade: #8dffb0;
  --summon-accent: #4ade80;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="common"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-common,
body #menuCompanionPanel .rarity-common,
body #menuCompanionPanel .companion-detail-dialog[data-rarity="common"] {
  --companion-grade: #35c8ff;
  --companion-grade-text: #79ddff;
  --summon-grade: #79ddff;
  --summon-accent: #35c8ff;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="rare"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-rare,
body #menuCompanionPanel .rarity-rare,
body #menuCompanionPanel .companion-detail-dialog[data-rarity="rare"] {
  --companion-grade: #a970ff;
  --companion-grade-text: #eadbff;
  --summon-grade: #eadbff;
  --summon-accent: #a970ff;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="hero"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-hero,
body #menuCompanionPanel .rarity-hero,
body #menuCompanionPanel .companion-detail-dialog[data-rarity="hero"] {
  --companion-grade: #ff873b;
  --companion-grade-text: #ffc08b;
  --summon-grade: #ffc08b;
  --summon-accent: #ff873b;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="legendary"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-legendary,
body #menuCompanionPanel .rarity-legendary,
body #menuCompanionPanel .companion-detail-dialog[data-rarity="legendary"] {
  --companion-grade: #ffe052;
  --companion-grade-text: #fff18a;
  --summon-grade: #fff18a;
  --summon-accent: #ffe052;
}

body #menuCompanionPanel .companion-summon-reveal[data-rarity="mythic"],
body #menuCompanionPanel .companion-summon-reveal-card.rarity-mythic,
body #menuCompanionPanel .rarity-mythic,
body #menuCompanionPanel .companion-detail-dialog[data-rarity="mythic"] {
  --companion-grade: #ff4d59;
  --companion-grade-text: #ff4d59;
  --summon-grade: #ff4d59;
  --summon-accent: #ff4d59;
  --summon-light-strong: #ff4d59;
}

/* The title and confirm label are optically seated against their painted
   homes, independently for common/premium and one/ten result screens. */
body #menuCompanionPanel .companion-summon-reveal[data-type="common"] .companion-summon-reveal-title {
  top: 7.45% !important;
  height: 6.5% !important;
  padding: 0 0 2px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-title {
  top: 7.38% !important;
  height: 6.5% !important;
  padding: 0 0 2px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-actions > button:not(.active) {
  padding: 0 0 5px !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-actions > button:not(.active) {
  padding: 0 0 5px !important;
}

/* SS and SSS retain the accepted painted cells. A grade-tinted material is
   added inside the cell itself, instead of relying on a detached light beam. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card.rarity-legendary,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card.rarity-mythic {
  overflow: hidden !important;
  isolation: isolate !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card.rarity-legendary > *,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card.rarity-mythic > * {
  position: relative !important;
  z-index: 1 !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card.rarity-legendary::before,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card.rarity-mythic::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 1px solid color-mix(in srgb, var(--summon-accent) 64%, transparent) !important;
  background:
    radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--summon-accent) 25%, transparent), transparent 48%),
    linear-gradient(90deg, color-mix(in srgb, var(--summon-accent) 13%, transparent), rgba(3, 7, 13, .04) 58%, color-mix(in srgb, var(--summon-accent) 8%, transparent)) !important;
  box-shadow:
    inset 0 0 10px color-mix(in srgb, var(--summon-accent) 22%, transparent),
    0 0 7px color-mix(in srgb, var(--summon-accent) 18%, transparent) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card.rarity-mythic::before {
  border-color: rgba(255, 77, 89, .82) !important;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 77, 89, .34), transparent 48%),
    linear-gradient(90deg, rgba(116, 17, 31, .28), rgba(5, 7, 13, .04) 58%, rgba(255, 77, 89, .12)) !important;
  box-shadow: inset 0 0 12px rgba(255, 55, 68, .3), 0 0 8px rgba(229, 32, 48, .28) !important;
}

/* A single high-rarity result receives the same material in its painted name
   plate, so the reveal does not fall back to a beam-only treatment. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="legendary"] .companion-summon-reveal-count {
  background: radial-gradient(ellipse at center, rgba(255, 224, 82, .16), transparent 70%) !important;
  box-shadow: inset 0 0 12px rgba(255, 224, 82, .14) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .companion-summon-reveal-count {
  background: radial-gradient(ellipse at center, rgba(255, 77, 89, .2), transparent 70%) !important;
  box-shadow: inset 0 0 13px rgba(255, 55, 68, .18) !important;
}

/* Reveal copy, probability rows and every owned/detail rarity label share the
   same grade color. Names remain ivory where the grade is already explicit. */
body #menuCompanionPanel .companion-summon-reveal-card > small,
body #menuCompanionPanel .companion-summon-reveal-card > strong,
body #menuCompanionPanel .summon-result[class*="rarity-"] small,
body #menuCompanionPanel .companion-odds-list [class*="rarity-"] b,
body #menuCompanionPanel .companion-odds-list [class*="rarity-"] em,
body #menuCompanionPanel #companionPartyList .companion-party-card[class*="rarity-"] small,
body #menuCompanionPanel .companion-detail-dialog[data-rarity] .companion-detail-rarity {
  color: var(--companion-grade-text, var(--summon-grade)) !important;
  text-shadow: 0 1px 2px #000, 0 0 6px color-mix(in srgb, var(--companion-grade, var(--summon-accent)) 60%, transparent) !important;
}

body #menuCompanionPanel .collection-party-position[class*="rarity-"] .collection-party-stars {
  color: var(--companion-grade-text) !important;
  text-shadow: 0 1px 2px #000, 0 0 5px color-mix(in srgb, var(--companion-grade) 52%, transparent) !important;
}

/* SSS is intentionally red in every companion context, matching the item
   grade identity instead of the previous ivory/mythic text. */
body #menuCompanionPanel .companion-summon-reveal-card.rarity-mythic > small,
body #menuCompanionPanel .companion-summon-reveal-card.rarity-mythic > strong,
body #menuCompanionPanel .summon-result.rarity-mythic small,
body #menuCompanionPanel #companionPartyList .companion-party-card.rarity-mythic small,
body #menuCompanionPanel .companion-detail-dialog[data-rarity="mythic"] .companion-detail-rarity,
body #menuCompanionPanel .companion-odds-list .rarity-mythic b,
body #menuCompanionPanel .companion-odds-list .rarity-mythic em {
  color: #ff4d59 !important;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 78, 88, .95), 0 0 10px rgba(255, 42, 55, .58) !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal[data-type="common"] .companion-summon-reveal-title {
    top: 7.45% !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-title {
    top: 7.38% !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-results-v12.css */
/* Companion inline summon results V12
   Each painted result recess owns its own art, name and metadata alignment. */

body #menuCompanionPanel .companion-summon-results {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 7px 6px !important;
  padding: 1px 1px 13px !important;
}

body #menuCompanionPanel .summon-result {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 51px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 7px !important;
  min-width: 0 !important;
  min-height: 82px !important;
  padding: 9px 12px 9px 10px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/ui_controls_purpose_1788505000000/store-product-card.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .34)) !important;
}

body #menuCompanionPanel .summon-result::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 11px 10px;
  pointer-events: none;
  background: radial-gradient(circle at 28px 50%, color-mix(in srgb, var(--companion-grade) 16%, transparent), transparent 67%);
  opacity: .8;
}

body #menuCompanionPanel .summon-result-art {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 51px !important;
  height: 56px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body #menuCompanionPanel .summon-result-art > img {
  display: block !important;
  width: 49px !important;
  height: 49px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  transform: scale(var(--summon-inline-art-scale, 1)) !important;
  transform-origin: 50% 50% !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .78)) !important;
}

body #menuCompanionPanel .summon-result-copy {
  align-self: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: minmax(35px, auto) 16px !important;
  align-content: center !important;
  min-width: 0 !important;
  gap: 3px !important;
  padding: 2px 0 1px !important;
}

body #menuCompanionPanel .summon-result-copy > b {
  align-self: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #f5ead0 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -.025em !important;
  text-align: left !important;
  text-wrap: balance !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(0, 0, 0, .72) !important;
}

body #menuCompanionPanel .summon-result-meta {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  gap: 4px !important;
  padding-right: 1px !important;
}

body #menuCompanionPanel .summon-result-meta > small,
body #menuCompanionPanel .summon-result-meta > em {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #menuCompanionPanel .summon-result-meta > small {
  color: var(--companion-grade-text) !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px #000, 0 0 5px color-mix(in srgb, var(--companion-grade) 54%, transparent) !important;
}

body #menuCompanionPanel .summon-result-meta > em {
  overflow: hidden !important;
  color: #ead17d !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  text-overflow: clip !important;
  text-shadow: 0 1px 2px #000 !important;
}

body #menuCompanionPanel .summon-result.rarity-legendary,
body #menuCompanionPanel .summon-result.rarity-mythic {
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .34)) drop-shadow(0 0 3px color-mix(in srgb, var(--companion-grade) 35%, transparent)) !important;
}

@media (max-width: 370px) {
  body #menuCompanionPanel .companion-summon-results {
    gap: 6px 5px !important;
  }

  body #menuCompanionPanel .summon-result {
    grid-template-columns: 47px minmax(0, 1fr) !important;
    column-gap: 6px !important;
    min-height: 78px !important;
    padding: 8px 10px 8px 9px !important;
  }

  body #menuCompanionPanel .summon-result-art {
    width: 47px !important;
    height: 53px !important;
  }

  body #menuCompanionPanel .summon-result-art > img {
    width: 46px !important;
    height: 46px !important;
  }

  body #menuCompanionPanel .summon-result-copy {
    grid-template-rows: minmax(34px, auto) 15px !important;
    gap: 2px !important;
  }

  body #menuCompanionPanel .summon-result-copy > b {
    font-size: 11.5px !important;
    line-height: 1.16 !important;
  }

  body #menuCompanionPanel .summon-result-meta > small {
    font-size: 9px !important;
  }

  body #menuCompanionPanel .summon-result-meta > em {
    font-size: 8px !important;
  }
}


/* SOURCE: ui/styles/combat/combat-state-relic-confirm-v2.css */
/* Combat-state and boss-relic confirmation polish V2.
   Keep the accepted painted controls; only change the two requested states. */

#battleButton.battle-running,
#battleButton.battle-running:disabled {
  color: rgba(207, 218, 222, 0.74) !important;
  background-image: url("assets/generated/ui_controls_purpose_1788505000000/button-medium-primary.png") !important;
  filter: grayscale(0.48) brightness(0.56) saturate(0.64) !important;
  box-shadow: none !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.92) !important;
  opacity: 0.82 !important;
}

.unlock-showcase.boss-relic .unlock-confirm-button {
  box-sizing: border-box !important;
  width: 176px !important;
  min-width: 176px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/generated/board_result_confirm_button_1790688000000/board-result-confirm-button-trimmed.png") center / 100% 100% no-repeat !important;
  color: #fff2c4 !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.96), 0 0 5px rgba(87, 206, 255, 0.26) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
}

.unlock-showcase.boss-relic .unlock-confirm-button:hover,
.unlock-showcase.boss-relic .unlock-confirm-button:focus,
.unlock-showcase.boss-relic .unlock-confirm-button:focus-visible {
  outline: 0 !important;
  filter: brightness(1.08) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)) !important;
}

.unlock-showcase.boss-relic .unlock-confirm-button:active {
  transform: translateY(1px) !important;
  filter: brightness(0.95) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.46)) !important;
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v12.css */
/* Companion summon reveal V12
   Final optical pass for each painted title, ten-pull result recess and the
   single action home. No additional button surface is drawn over the frame. */

/* Both labels were visually high. They keep independent offsets because the
   common and premium title glyphs occupy the same recess differently. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-stage {
  background: transparent url("assets/generated/companion_summon_reveal_v12_20260831/single-frame-one-button-alpha.png") center / 100% 100% no-repeat !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage {
  background: transparent url("assets/generated/companion_summon_reveal_v12_20260831/ten-pull-frame-one-button-alpha.png") center / 100% 100% no-repeat !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="common"] .companion-summon-reveal-title {
  top: 7.8% !important;
  height: 6.4% !important;
  display: grid !important;
  place-items: center !important;
  padding: 2px 0 0 !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-title {
  top: 7.73% !important;
  height: 6.4% !important;
  display: grid !important;
  place-items: center !important;
  padding: 2px 0 0 !important;
  transform: none !important;
}

/* Every ten-pull recess owns a portrait column plus two real name lines. The
   old WebKit line clamp generated an ellipsis even when the second line was
   still available, so it is removed rather than hidden with a smaller font. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-rows: 9px 24px !important;
  align-content: center !important;
  column-gap: 3px !important;
  min-width: 0 !important;
  padding: 4px 4px 4px 3px !important;
  overflow: hidden !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 36px !important;
  height: 36px !important;
  overflow: hidden !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art > img {
  width: 33px !important;
  height: 33px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: scale(var(--summon-art-scale, 1)) !important;
  transform-origin: 50% 50% !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  font-size: 8px !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 24px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 1px 0 0 !important;
  overflow: visible !important;
  color: var(--companion-grade-text, var(--summon-grade)) !important;
  font-size: 9.25px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  text-align: left !important;
  text-overflow: clip !important;
  text-wrap: balance !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: initial !important;
}

/* The frame raster already contains the action home. Clear every older live
   button skin and decorative pseudo-element, then lift only the glyph mass. */
body #menuCompanionPanel .companion-summon-reveal-actions {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions::before,
body #menuCompanionPanel .companion-summon-reveal-actions::after,
body #menuCompanionPanel .companion-summon-reveal-actions > button::before,
body #menuCompanionPanel .companion-summon-reveal-actions > button::after {
  content: none !important;
  display: none !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal-actions > button:not(.active) {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button:focus,
body #menuCompanionPanel .companion-summon-reveal-actions > button:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

body #menuCompanionPanel .companion-summon-reveal-actions > button:active {
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal[data-type="common"] .companion-summon-reveal-title {
    top: 7.82% !important;
    padding-top: 2px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-title {
    top: 7.75% !important;
    padding-top: 2px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
    grid-template-columns: 33px minmax(0, 1fr) !important;
    grid-template-rows: 8px 23px !important;
    column-gap: 2px !important;
    padding: 4px 3px 4px 3px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
    width: 33px !important;
    height: 33px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art > img {
    width: 30px !important;
    height: 30px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade {
    font-size: 7.5px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
    height: 23px !important;
    font-size: 8.65px !important;
    line-height: 1.08 !important;
  }

  body #menuCompanionPanel .companion-summon-reveal-actions > button,
  body #menuCompanionPanel .companion-summon-reveal-actions > button:not(.active) {
    padding-bottom: 8px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v13.css */
/* Companion summon reveal V13
   Three optical corrections stay independent: ten-pull cell copy, the
   one-pull common title, and the one-pull confirmation glyph. */

/* The common one-pull title sits higher than the painted title recess. Move
   only this title down; the premium and ten-pull titles stay untouched. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-type="common"] .companion-summon-reveal-title {
  top: 7.98% !important;
  padding: 4px 0 0 !important;
}

/* In every 2x5 recess the portrait is already centered. Shift only the grade
   and name glyphs down into the optical middle of their own painted cell. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
  transform: translateY(5px) !important;
}

/* The new single-button raster places its action home lower than the legacy
   hit area. Move this one hit area onto that painted home, then center the
   glyph without directional padding. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-actions {
  bottom: 5% !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-actions > button:not(.active) {
  padding: 0 !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-type="common"] .companion-summon-reveal-title {
    top: 8% !important;
    padding-top: 4px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade,
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
    transform: translateY(5px) !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-actions > button,
  body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-actions > button:not(.active) {
    padding: 0 !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v14.css */
/* Companion summon reveal V14
   Optical-only corrections for the three targets reported after V13.
   Every selector is scoped to its own painted recess. */

/* Common one-pull only: lift the title back toward the optical centre of its
   painted title recess. Premium one-pull and all other titles stay untouched. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-type="common"] .companion-summon-reveal-title {
  top: 7.86% !important;
  padding: 2px 0 0 !important;
}

/* Ten-pull cells only: V13's five-pixel correction landed below the centre.
   Keep portraits and cell geometry fixed; lift only grade and name glyphs. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
  transform: translateY(2px) !important;
}

/* Ten-pull action only: the live element is a hit area and glyph over the
   button already painted into the frame. Lower that glyph into its centre. */
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-actions {
  bottom: 6.4% !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-actions > button,
body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-actions > button:not(.active) {
  padding: 0 !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-type="common"] .companion-summon-reveal-title {
    top: 7.88% !important;
    padding-top: 2px !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade,
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
    transform: translateY(2px) !important;
  }

  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-actions > button,
  body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-actions > button:not(.active) {
    padding: 0 !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v15.css */
/* Companion summon reveal V15
   Premium title only: lower the glyph mass into the painted title recess.
   Common summon, result copy, portraits and actions stay untouched. */

body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-title {
  top: 7.9% !important;
  padding: 3px 0 0 !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-title {
    top: 7.92% !important;
    padding-top: 3px !important;
  }
}


/* SOURCE: ui/styles/companions/companion-summon-reveal-v16.css */
/* Companion summon reveal V16
   SSS single-pull only. The portrait effect is clipped to the painted round
   well, while the full lower information recess carries the SSS material. */

/* Remove the rectangular rarity glow from the result card itself. The round
   portrait well below owns the color, so no red corners can leak outside it. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .companion-summon-reveal-card {
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Older reveal layers still left a very faint rectangular wash behind the
   portrait even after the card surface was cleared. Remove those settled
   square layers as well; the round art well below is the only grade light. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"][data-phase="reveal"] .companion-summon-reveal-energy {
  display: none !important;
  opacity: 0 !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .companion-summon-reveal-results {
  background: none !important;
  box-shadow: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .companion-summon-reveal-results::before,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .companion-summon-reveal-card::before,
body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .companion-summon-reveal-card::after {
  content: none !important;
  display: none !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .summon-reveal-card-art {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  align-self: center !important;
  justify-self: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 96, 105, .54) !important;
  border-radius: 50% !important;
  clip-path: circle(49% at 50% 50%) !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 116, 124, .38) 0 11%, rgba(139, 20, 39, .34) 32%, rgba(48, 6, 19, .2) 58%, transparent 70%) !important;
  box-shadow: inset 0 0 24px rgba(255, 52, 66, .28) !important;
  filter: drop-shadow(0 0 8px rgba(255, 55, 69, .38)) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .summon-reveal-card-art > img {
  width: 88% !important;
  height: 88% !important;
  max-width: 88% !important;
  max-height: 88% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* Fill the entire inner name recess instead of drawing a narrow red strip
   behind the glyphs. The original gold frame remains visible around it. */
body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .companion-summon-reveal-count {
  top: 61.2% !important;
  left: 17.2% !important;
  right: 17.2% !important;
  bottom: 17.4% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 80, 91, .48) !important;
  border-radius: 8px !important;
  clip-path: polygon(4% 0, 96% 0, 100% 12%, 100% 88%, 96% 100%, 4% 100%, 0 88%, 0 12%) !important;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(195, 30, 49, .36) 0 22%, rgba(102, 12, 28, .34) 58%, rgba(18, 3, 12, .28) 100%),
    linear-gradient(180deg, rgba(255, 101, 110, .08), transparent 34%, rgba(3, 2, 8, .2)) !important;
  box-shadow:
    inset 0 0 22px rgba(255, 40, 55, .24),
    inset 0 0 0 1px rgba(80, 5, 17, .58) !important;
}

body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .companion-summon-reveal-count > strong {
  color: #ff747d !important;
  font-size: clamp(13px, 3.55vw, 15px) !important;
  text-shadow: 0 2px 2px #000, 0 0 6px rgba(255, 74, 86, .88), 0 0 12px rgba(185, 20, 38, .42) !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-rarity="mythic"] .companion-summon-reveal-count {
    top: 61.3% !important;
    bottom: 17.4% !important;
  }
}


/* SOURCE: ui/styles/inventory/item-detail-content-fit-v11.css */
/* Item detail content fit v11, capture-driven at 390x844 and 360x800.
   The raster frame is preserved; each painted bay owns its own optical alignment. */
#itemInfoPanel { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.item-info-panel .item-info-card .item-info-head > div {
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 5px !important;
  text-align: center !important;
}

.item-info-panel .item-info-card .item-info-meta-line {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

.item-info-panel .item-info-card .item-info-head .label,
.item-info-panel .item-info-card .item-info-head strong {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

#itemInfoPanel .item-info-card .item-info-head #itemInfoTitle {
  transform: translateY(-3px) !important;
}

.item-info-panel.long-item-title .item-info-card .item-info-head strong {
  font-size: 16px !important;
  line-height: 1.04 !important;
}

.item-info-panel[data-title-band="very-long"] .item-info-card .item-info-head strong {
  font-size: 14.5px !important;
  line-height: 1.02 !important;
}

/* Only the value cell with many independent lines is tightened. Other rows
   keep the accepted type size and position. */
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span[data-density="dense"] > strong.item-readable-values {
  font-size: 9.5px !important;
  line-height: 11px !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span[data-density="packed"] > strong.item-readable-values {
  font-size: 8.35px !important;
  line-height: 9.5px !important;
  letter-spacing: -.035em !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span[data-copy-band="long"] > strong.item-readable-values {
  font-size: 9.5px !important;
  line-height: 11px !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span[data-copy-band="very-long"] > strong.item-readable-values {
  font-size: 8.35px !important;
  line-height: 9.5px !important;
  letter-spacing: -.035em !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span:is([data-copy-band="long"], [data-copy-band="very-long"]) > strong.item-readable-values > .item-summary-part {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span[data-fit-overflow] > strong.item-readable-values {
  font-size: 8px !important;
  line-height: 9px !important;
  letter-spacing: -.045em !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > span[data-layout="effect"][data-density="packed"] > strong.item-readable-values {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: min-content !important;
  gap: 2px 6px !important;
  align-content: center !important;
}

/* Each stat recess centres its own heading + values as one unit. The former
   absolute top/remaining-height split made sparse rows drift farther apart. */
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 6px 12px !important;
  overflow: hidden !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout] > small {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 13px !important;
  margin: 0 !important;
  line-height: 13px !important;
  transform: none !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout] > strong.item-readable-values {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="primary"] > strong.item-readable-values {
  line-height: 13px !important;
}

/* Rows without a recipe equation use the full painted relationship bay. */
.item-info-panel .item-info-card .item-relation-row.item-usage,
.item-info-panel .item-info-card .item-relation-row.recipe.known {
  grid-template-columns: minmax(0, 1fr) !important;
}

.item-info-panel .item-info-card .item-relation-row.item-usage > div,
.item-info-panel .item-info-card .item-relation-row.recipe.known > div {
  width: 100% !important;
  align-items: center !important;
  text-align: center !important;
}

.item-info-panel .item-info-card .item-relation-row.item-usage strong,
.item-info-panel .item-info-card .item-relation-row.item-usage em,
.item-info-panel .item-info-card .item-relation-row.recipe.known strong,
.item-info-panel .item-info-card .item-relation-row.recipe.known em {
  width: 100% !important;
  text-align: center !important;
}

#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row.item-usage {
  min-height: 68px !important;
  padding: 6px 12px !important;
  overflow: hidden !important;
}

#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row.item-usage > div {
  gap: 1px !important;
  overflow: hidden !important;
}

#itemInfoPanel .item-info-card #itemInfoRelations .item-relation-row.item-usage em {
  max-width: 190px !important;
  margin-inline: auto !important;
  font-size: 9.3px !important;
  line-height: 11px !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] {
  gap: 2px !important;
}

.item-info-panel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row {
  height: calc(50% - 1px) !important;
  flex: 0 0 calc(50% - 1px) !important;
}

.item-info-panel .item-info-card .item-relation-row[data-copy-density="dense"] em {
  font-size: 9px !important;
  line-height: 10.2px !important;
}

.item-info-panel .item-info-card .item-relation-row[data-copy-density="packed"] em,
.item-info-panel .item-info-card .item-relation-row[data-fit-overflow] em {
  font-size: 8.35px !important;
  line-height: 9.4px !important;
}

.item-info-panel .item-info-card .item-relation-row[data-copy-band="very-long"] em {
  max-width: 200px !important;
  font-size: 8.35px !important;
  line-height: 9.4px !important;
}

@media (max-height: 810px) {
  .item-info-panel .item-info-card .item-info-head strong {
    font-size: 17px !important;
  }

  .item-info-panel.long-item-title .item-info-card .item-info-head strong {
    font-size: 15px !important;
  }

  .item-info-panel[data-title-band="very-long"] .item-info-card .item-info-head strong {
    font-size: 13.5px !important;
  }
}


/* SOURCE: ui/styles/inventory/item-detail-scroll-touch-v12.css */
/* Item detail outer-scroll affordance v12.
   The title, close control, and action buttons remain fixed in the accepted
   painted frame. Only the central detail document scrolls when its authored
   rows are taller than the available recess. */
html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
  outline: 0 !important;
  cursor: grab;
}

html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body.drag-scrolling {
  cursor: grabbing;
  user-select: none !important;
}

html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body::-webkit-scrollbar {
  display: block !important;
  width: 4px !important;
}

html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 999px !important;
}

html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body::-webkit-scrollbar-thumb {
  min-height: 28px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body.is-scrolling {
  scrollbar-color: rgba(76, 175, 218, .72) rgba(3, 10, 17, .34) !important;
}

html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body.is-scrolling::-webkit-scrollbar-track {
  background: rgba(3, 10, 17, .34) !important;
}

html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body.is-scrolling::-webkit-scrollbar-thumb {
  border-color: rgba(8, 29, 43, .88) !important;
  background: linear-gradient(180deg, rgba(95, 205, 244, .92), rgba(31, 103, 151, .88)) !important;
  box-shadow: 0 0 4px rgba(34, 166, 224, .44) !important;
}

html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body .item-readable-values {
  outline: 0 !important;
}

html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body::-webkit-scrollbar-corner {
  background: transparent !important;
}


/* SOURCE: ui/styles/inventory/item-detail-role-clean-v14.css */
/* Item detail role cleanup v14, verified against the painted 360x800 and
   390x844 recesses. The raster frame stays unchanged; only ink is contained. */
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  padding: 4px 11px 5px !important;
  overflow: hidden !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] > small {
  position: static !important;
  inset: auto !important;
  flex: 0 0 12px !important;
  width: 100% !important;
  height: 12px !important;
  margin: 0 !important;
  line-height: 12px !important;
  transform: none !important;
  overflow: hidden !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] > .item-readable-values {
  position: static !important;
  inset: auto !important;
  flex: 0 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100% - 13px) !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: minmax(11px, auto) !important;
  gap: 0 !important;
  align-content: center !important;
  line-height: 11px !important;
  transform: none !important;
  overflow: hidden !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] .item-summary-part,
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] .item-readable-group,
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] .item-readable-group > span {
  box-sizing: border-box !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 11px !important;
  overflow: hidden !important;
}

/* Enemy penalties remain a separate visual group when an item really has
   them, but neither group is allowed to escape the single painted recess. */
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .target-split-chip[data-layout="effect"] > .item-readable-values {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 7px !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .target-split-chip[data-layout="effect"] .item-readable-group > b {
  display: block !important;
  height: 11px !important;
  margin: 0 !important;
  font-size: 9.2px !important;
  line-height: 11px !important;
  overflow: hidden !important;
}

@media (max-width: 375px), (max-height: 820px) {
  #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] {
    padding-inline: 9px !important;
  }
  #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] > .item-readable-values,
  #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] .item-summary-part {
    font-size: 9.7px !important;
    line-height: 10.5px !important;
  }
}


/* SOURCE: ui/styles/companions/first-companion-ten-pull-v2.css */
/* Mandatory first-run companion path. Reuse the accepted black/gold/cyan painted surfaces. */
body #menuLobbyPanel .lobby-companion-onboarding-guide {
  position: absolute !important;
  z-index: 30 !important;
  top: 34.5% !important;
  right: 4px !important;
  left: 4px !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px auto 5px !important;
  padding: 7px 12px !important;
  border: 10px solid transparent !important;
  border-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") 28 38 fill / 10px 13px / 0 stretch !important;
  background: rgba(4, 14, 27, .95) padding-box !important;
  color: #e8f4f8 !important;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .58)) !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide[hidden] {
  display: none !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide > img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 7px rgba(97, 215, 255, .48)) !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
  align-content: center !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide small {
  color: #69d7f3 !important;
  font-size: 8px !important;
  font-weight: 1000 !important;
  line-height: 1.15 !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide strong {
  color: #f1df9e !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 2px #000 !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide p {
  margin: 0 !important;
  color: #d3e0e6 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
}

body #menuLobbyPanel.first-companion-open-step button[data-first-companion-locked="1"] {
  opacity: .27 !important;
  filter: grayscale(.72) brightness(.58) !important;
}

body #menuLobbyPanel.first-companion-open-step #lobbyCompanionButton {
  opacity: 1 !important;
  filter: drop-shadow(0 0 5px rgba(84, 218, 255, .92)) drop-shadow(0 0 10px rgba(241, 211, 105, .58)) !important;
  animation: first-companion-ten-pull-pulse 1.15s ease-in-out infinite !important;
}

body #menuLobbyPanel #lobbyCompanionButton .lobby-companion-guide-badge {
  min-width: 31px !important;
}

body #menuCompanionPanel .companion-onboarding-guide {
  box-sizing: border-box !important;
  top: 25.7% !important;
  right: 7.8% !important;
  left: 7.8% !important;
  width: auto !important;
  min-height: 78px !important;
  grid-template-columns: 50px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border: 10px solid transparent !important;
  border-image: url("assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png") 28 38 fill / 10px 13px / 0 stretch !important;
  background: rgba(4, 14, 27, .96) padding-box !important;
  box-shadow: 0 0 18px rgba(43, 184, 229, .18) !important;
}

body #menuCompanionPanel .companion-onboarding-guide > img {
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  object-fit: contain !important;
}

body #menuCompanionPanel .companion-onboarding-guide > span {
  gap: 3px !important;
  align-content: center !important;
}

body #menuCompanionPanel .companion-onboarding-guide small {
  color: #68d6ee !important;
  line-height: 1.1 !important;
}

body #menuCompanionPanel .companion-onboarding-guide strong {
  color: #f0dda0 !important;
  font-size: 11.5px !important;
  line-height: 1.18 !important;
}

body #menuCompanionPanel .companion-onboarding-guide p {
  margin: 0 !important;
  color: #d2dfe5 !important;
  font-size: 8.4px !important;
  line-height: 1.32 !important;
}

body #menuCompanionPanel .companion-onboarding-guide > button {
  min-width: 68px !important;
  min-height: 36px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: url("assets/generated/ui_controls_purpose_1788505000000/button-compact-primary.png") center / 100% 100% no-repeat !important;
  color: #f5e6ae !important;
}

body #menuCompanionPanel .companion-onboarding-guide > button[hidden] {
  display: none !important;
}

body #menuCompanionPanel .companion-summon-actions > button.first-companion-guide-target {
  outline: 1px solid rgba(239, 215, 120, .9) !important;
  outline-offset: -4px !important;
  box-shadow: inset 0 0 12px rgba(66, 205, 242, .22), 0 0 9px rgba(239, 215, 120, .5) !important;
}

body #menuCompanionPanel .companion-menu-tabs > button:disabled,
body #menuCompanionPanel .companion-summon-card button:disabled,
body #menuCompanionPanel .companion-odds-link:disabled {
  opacity: .34 !important;
  filter: grayscale(.65) brightness(.7) !important;
}

body #menuCompanionPanel .first-companion-guide-card {
  filter: drop-shadow(0 0 7px rgba(72, 205, 255, .45)) !important;
}

body #menuCompanionPanel #companionPartyList .companion-party-card.first-companion-guide-target {
  outline: 1px solid rgba(107, 219, 242, .8) !important;
  outline-offset: -3px !important;
  box-shadow: inset 0 0 13px rgba(59, 187, 222, .16), 0 0 9px rgba(225, 198, 102, .28) !important;
  animation: none !important;
}

body #menuCompanionPanel #companionPartyList .companion-party-card-actions > .first-companion-guide-target {
  outline: 2px solid #efd778 !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 10px rgba(87, 215, 247, .62) !important;
  animation: first-companion-ten-pull-pulse 1.15s ease-in-out infinite !important;
}

/* The action button now owns a single text column. Do not compensate for
   the former card-grid leakage with a language-dependent text indent. */
body #menuCompanionPanel #companionPartyList
  .companion-party-card-actions > button[data-support-companion].first-companion-guide-target {
  text-indent: 0 !important;
}

@keyframes first-companion-ten-pull-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

@media (max-width: 380px), (max-height: 810px) {
  body #menuLobbyPanel .lobby-companion-onboarding-guide {
    top: 33.5% !important;
    min-height: 68px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    padding-inline: 9px !important;
  }

  body #menuLobbyPanel .lobby-companion-onboarding-guide > img {
    width: 43px !important;
    height: 43px !important;
  }

  body #menuCompanionPanel .companion-onboarding-guide {
    top: 25.4% !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 72px !important;
    padding-inline: 8px !important;
  }

  body #menuCompanionPanel .companion-onboarding-guide > img {
    width: 40px !important;
    height: 40px !important;
  }

  body #menuCompanionPanel .companion-onboarding-guide > button {
    grid-column: 1 / -1 !important;
    min-height: 31px !important;
  }
}

/* First companion onboarding is a real coachmark, not another content row.
   The highlighted action remains visible through the cut-out while every
   unrelated control is dimmed and input-locked. */
body #menuLobbyPanel,
body #menuCompanionPanel {
  position: relative !important;
  overflow: hidden !important;
}

body .first-companion-spotlight {
  position: absolute !important;
  z-index: 90 !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(237, 213, 121, .98) !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow:
    0 0 0 999px rgba(0, 3, 9, .78),
    0 0 0 4px rgba(74, 190, 232, .16),
    0 0 22px rgba(232, 203, 105, .56) !important;
  pointer-events: none !important;
  transition: left 100ms ease, top 100ms ease, width 100ms ease, height 100ms ease !important;
}

body .first-companion-spotlight[hidden] {
  display: none !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide,
body #menuCompanionPanel .companion-onboarding-guide {
  position: absolute !important;
  z-index: 92 !important;
  box-sizing: border-box !important;
  width: min(326px, calc(100% - 16px)) !important;
  max-width: calc(100% - 16px) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 43px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border: 12px solid transparent !important;
  border-image: url("assets/generated/codex_detail_inner_v6_1793206800000/codex-info-panel-calm.png") 60 140 fill / 1 / 0 stretch !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .68)) !important;
  pointer-events: none !important;
  overflow: visible !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide::before,
body #menuLobbyPanel .lobby-companion-onboarding-guide::after,
body #menuCompanionPanel .companion-onboarding-guide::before,
body #menuCompanionPanel .companion-onboarding-guide::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  left: var(--first-companion-pointer-x, 50%) !important;
  border: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide::before,
body #menuCompanionPanel .companion-onboarding-guide::before {
  width: 18px !important;
  height: 12px !important;
  background: #b4a06e !important;
  filter: drop-shadow(0 2px 2px #000) !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide::after,
body #menuCompanionPanel .companion-onboarding-guide::after {
  width: 12px !important;
  height: 8px !important;
  background: #091119 !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide[data-pointer-side="bottom"]::before,
body #menuCompanionPanel .companion-onboarding-guide[data-pointer-side="bottom"]::before {
  bottom: -12px !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide[data-pointer-side="bottom"]::after,
body #menuCompanionPanel .companion-onboarding-guide[data-pointer-side="bottom"]::after {
  bottom: -9px !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide[data-pointer-side="top"]::before,
body #menuCompanionPanel .companion-onboarding-guide[data-pointer-side="top"]::before {
  top: -12px !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
}

body #menuLobbyPanel .lobby-companion-onboarding-guide[data-pointer-side="top"]::after,
body #menuCompanionPanel .companion-onboarding-guide[data-pointer-side="top"]::after {
  top: -9px !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
}

body.first-companion-guided #menuLobbyPanel.active button,
body.first-companion-guided #menuCompanionPanel.active button {
  pointer-events: none !important;
}

body.first-companion-guided #menuLobbyPanel.active #lobbyCompanionButton,
body.first-companion-guided #menuCompanionPanel.active button.first-companion-guide-target {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body.first-companion-guided #menuCompanionPanel.active .companion-tab-view {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.first-companion-guided #menuLobbyPanel.first-companion-open-step #lobbyCompanionButton,
body.first-companion-guided #menuCompanionPanel .companion-summon-actions > button.first-companion-guide-target,
body.first-companion-guided #menuCompanionPanel #companionPartyList .companion-party-card.first-companion-guide-target,
body.first-companion-guided #menuCompanionPanel #companionPartyList .companion-party-card-actions > .first-companion-guide-target {
  outline: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

body.first-companion-guided #menuLobbyPanel.first-companion-open-step #lobbyCompanionButton {
  filter: none !important;
}

@media (max-width: 380px), (max-height: 810px) {
  body #menuLobbyPanel .lobby-companion-onboarding-guide,
  body #menuCompanionPanel .companion-onboarding-guide {
    width: min(322px, calc(100% - 16px)) !important;
    grid-template-columns: 39px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px 9px !important;
  }

  body #menuLobbyPanel .lobby-companion-onboarding-guide > img,
  body #menuCompanionPanel .companion-onboarding-guide > img {
    width: 38px !important;
    height: 38px !important;
  }
}

/* The authored result frame has no spare painted bay. Register the first-run
   ticket reward in the existing hero copy instead of adding an overlapping card. */
.end-panel:is(.defeat, .victory) .run-result-hero .result-hero-note.first-companion-ticket-note,
.end-panel.clear .run-result-hero .result-hero-note.first-companion-ticket-note {
  display: block !important;
  margin-top: 1px !important;
  color: #ffe29a !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px #000, 0 0 7px rgba(91, 163, 255, .42) !important;
}

@media (max-width: 370px) {
  .end-panel:is(.defeat, .victory) .run-result-hero .result-hero-note.first-companion-ticket-note,
  .end-panel.clear .run-result-hero .result-hero-note.first-companion-ticket-note {
    font-size: 9.2px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #menuLobbyPanel.first-companion-open-step #lobbyCompanionButton,
  body #menuCompanionPanel #companionPartyList .companion-party-card-actions > .first-companion-guide-target {
    animation: none !important;
  }
}


/* SOURCE: ui/styles/shared/beginner-context-coachmark-v1.css */
/* One-time, need-driven beginner prompts. They reuse the accepted painted
   tutorial surface and leave only the indicated real control actionable. */
html[data-beginner-context-step="supply-option"] body .beginner-context-spotlight {
  box-shadow: 0 0 0 200vmax rgba(0, 3, 9, .87), 0 0 0 4px rgba(237,213,121,.18), 0 0 22px rgba(232,203,105,.58) !important;
}
/* The required exchange lesson keeps only its real button illuminated. */
html[data-beginner-context-step="supply-exchange"] body .beginner-context-spotlight,
html[data-beginner-context-step="supply-open"] body .beginner-context-spotlight {
  box-shadow: 0 0 0 200vmax rgba(0, 3, 9, .87),
    0 0 0 4px rgba(237, 213, 121, .18),
    0 0 22px rgba(232, 203, 105, .58) !important;
}
body .beginner-context-spotlight {
  position: fixed !important;
  z-index: 286 !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(237, 213, 121, .98) !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow:
    0 0 0 200vmax rgba(0, 3, 9, .8),
    0 0 0 4px rgba(74, 190, 232, .16),
    0 0 22px rgba(232, 203, 105, .58) !important;
  pointer-events: none !important;
  transition: left 100ms ease, top 100ms ease, width 100ms ease, height 100ms ease !important;
}

body .beginner-context-spotlight[hidden],
body .beginner-context-guide[hidden] {
  display: none !important;
}

body .beginner-context-guide {
  position: fixed !important;
  z-index: 288 !important;
  box-sizing: border-box !important;
  width: min(326px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 43px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border: 12px solid transparent !important;
  border-image: url("assets/generated/codex_detail_inner_v6_1793206800000/codex-info-panel-calm.png") 60 140 fill / 1 / 0 stretch !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .68)) !important;
  pointer-events: none !important;
  overflow: visible !important;
}

body .beginner-context-guide > img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px #000) !important;
}

body .beginner-context-guide > span {
  display: grid !important;
  min-width: 0 !important;
  align-content: center !important;
  gap: 1px !important;
}

body .beginner-context-guide > button {
  grid-column: 2 !important;
  justify-self: end !important;
  box-sizing: border-box !important;
  width: 96px !important;
  min-width: 96px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 2px 0 0 !important;
  padding: 0 12px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent url("assets/generated/board_result_confirm_button_1790688000000/board-result-confirm-button-trimmed.png") center / 100% 100% no-repeat !important;
  color: #f5e8b2 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow: none !important;
  filter: saturate(.82) brightness(.94) drop-shadow(0 3px 4px rgba(0, 0, 0, .58)) !important;
  transform: none !important;
  pointer-events: auto !important;
}

body .beginner-context-guide > button:hover,
body .beginner-context-guide > button:focus-visible {
  outline: 0 !important;
  filter: saturate(.92) brightness(1.04) drop-shadow(0 3px 5px rgba(0, 0, 0, .62)) !important;
}

body .beginner-context-guide > button:active {
  transform: translateY(1px) scale(.985) !important;
  filter: saturate(.78) brightness(.84) drop-shadow(0 2px 3px rgba(0, 0, 0, .56)) !important;
}

body .beginner-context-guide > button[hidden] {
  display: none !important;
}

body .beginner-context-guide small {
  color: #76d9ee !important;
  font-size: 8.6px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body .beginner-context-guide strong {
  display: block !important;
  color: #ffe39a !important;
  font-size: 12.2px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 2px #000 !important;
}

body .beginner-context-guide p {
  margin: 1px 0 0 !important;
  color: #eef6ff !important;
  font-size: 9.4px !important;
  font-weight: 750 !important;
  line-height: 1.38 !important;
  overflow-wrap: anywhere !important;
}

body .beginner-context-guide::before,
body .beginner-context-guide::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  left: var(--beginner-context-pointer-x, 50%) !important;
  border: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

body .beginner-context-guide::before {
  width: 18px !important;
  height: 12px !important;
  background: #b4a06e !important;
  filter: drop-shadow(0 2px 2px #000) !important;
}

body .beginner-context-guide::after {
  width: 12px !important;
  height: 8px !important;
  background: #091119 !important;
}

body .beginner-context-guide[data-pointer-side="bottom"]::before {
  bottom: -12px !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

body .beginner-context-guide[data-pointer-side="bottom"]::after {
  bottom: -9px !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

body .beginner-context-guide[data-pointer-side="top"]::before {
  top: -12px !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
}

body .beginner-context-guide[data-pointer-side="top"]::after {
  top: -9px !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
}

body.beginner-context-guided .beginner-context-target {
  touch-action: manipulation !important;
}

@media (max-width: 380px), (max-height: 810px) {
  body .beginner-context-guide {
    width: min(322px, calc(100vw - 16px)) !important;
    grid-template-columns: 39px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px 9px !important;
  }

  body .beginner-context-guide > img {
    width: 37px !important;
    height: 37px !important;
  }

  body .beginner-context-guide strong {
    font-size: 11.5px !important;
  }

  body .beginner-context-guide p {
    font-size: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .beginner-context-spotlight {
    transition: none !important;
  }
}
html[data-beginner-context-step="first-preparation"] #beginnerContextText {
  white-space: pre-line !important;
  line-height: 1.5 !important;
}


/* SOURCE: ui/styles/shared/ui-detail-consolidation-v1.css */
/* Reuse the accepted painted art while consolidating repeated detail views. */

.menu-lobby-panel .lobby-status-grid {
  left: 34px !important;
  right: 34px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

#menuCompanionPanel .collection-party-position[data-companion-id="abyssVampireStar"] > p {
  width: calc(100% - 12px) !important;
  font-size: 7.4px !important;
  line-height: 9px !important;
  letter-spacing: -.025em !important;
  white-space: pre-line !important;
}

#itemInfoPanel.codex-preview {
  z-index: 2600 !important;
  /* Keep the equipment journal visibly behind its detail layer. */
  background: rgba(3, 7, 12, .38) !important;
  backdrop-filter: none !important;
}

body.menu-open #itemInfoPanel.codex-preview.active {
  display: grid !important;
}

#itemInfoPanel.codex-preview #itemPlaceButton[hidden],
#itemInfoPanel.codex-preview #itemSellButton[hidden] {
  display: none !important;
}

#boardPassiveChoicePanel .board-passive-reroll-state {
  right: 13.5% !important;
  transform: translate(0, -50%) !important;
}

#menuCodexPanel .codex-boss-detail {
  background: #000 url("assets/generated/codex_boss_detail_single_v3_20260901/codex-boss-detail-single-v3.png") center 50% / 98% 100% no-repeat !important;
}

#menuCodexPanel #bossCodexBody:has(.codex-boss-detail:not([hidden])) {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

#menuCodexPanel #bossCodexBody:has(.codex-boss-detail:not([hidden]))::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#menuCodexPanel .codex-book:has(.codex-boss-detail:not([hidden])) {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

#menuCodexPanel .codex-book:has(.codex-boss-detail:not([hidden]))::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-titlebar {
  left: 14% !important;
  right: 14% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  place-items: center !important;
  padding: 0 31px 1px !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-close {
  right: -22px !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-titlebar > strong {
  transform: translateY(13px) !important;
  align-self: center !important;
  font-size: 17px !important;
  line-height: 22px !important;
  text-align: center !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-scroll {
  display: block !important;
  padding: 0 3px 12px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

#menuCodexPanel .codex-boss-analysis-shell {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 160px minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  padding: 16px 22px 18px !important;
  overflow: hidden !important;
  background: none !important;
}

#menuCodexPanel .codex-boss-detail .codex-boss-hero {
  height: 160px !important;
  min-height: 160px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  padding: 8px 12px 4px !important;
  background: none !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-art {
  width: 248px !important;
  height: 154px !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-art > img {
  width: 242px !important;
  height: 152px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-record-body {
  gap: 0 !important;
  padding: 0 5px 6px !important;
  overflow: visible !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-section,
#menuCodexPanel .codex-boss-detail .codex-detail-section + .codex-detail-section {
  gap: 2px !important;
  padding: 7px 10px 9px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-section-head {
  height: 25px !important;
  min-height: 25px !important;
  margin: 0 0 2px !important;
  padding: 0 8px !important;
  justify-content: flex-start !important;
  background: none !important;
}

#menuCodexPanel .codex-boss-detail .codex-detail-section-head > span {
  font-size: 11.5px !important;
  line-height: 15px !important;
  text-align: left !important;
}

#menuCodexPanel .codex-boss-detail .codex-boss-detail-skills {
  display: grid !important;
  gap: 1px !important;
}

#menuCodexPanel .codex-boss-detail .codex-boss-detail-skills > div,
#menuCodexPanel .codex-boss-detail .codex-boss-detail-skills > div:first-child {
  min-height: 43px !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  align-content: center !important;
  padding: 5px 8px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#menuCodexPanel .codex-boss-detail .codex-boss-detail-skills span {
  width: 56px !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #87dff4 !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

#menuCodexPanel .codex-boss-detail .codex-boss-detail-skills strong {
  margin: 0 !important;
  align-self: end !important;
  justify-self: start !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

#menuCodexPanel .codex-boss-detail .codex-boss-detail-skills p {
  margin: 0 !important;
  align-self: start !important;
  justify-self: start !important;
  color: #dce7e9 !important;
  font-size: 8px !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

#menuCodexPanel .codex-boss-affinity {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1px !important;
  padding: 2px 7px 1px !important;
}

#menuCodexPanel .boss-affinity-row {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) 58px !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 37px !important;
  padding: 2px 5px !important;
}

#menuCodexPanel .boss-affinity-row > small {
  justify-self: start !important;
  color: #88dff5 !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

#menuCodexPanel .boss-affinity-marks {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

#menuCodexPanel .boss-affinity-marks > span {
  display: grid !important;
  grid-template-columns: 30px auto !important;
  align-items: center !important;
  gap: 6px !important;
}

#menuCodexPanel .boss-affinity-marks img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 4px rgba(90, 207, 241, .28)) !important;
}

#menuCodexPanel .boss-affinity-marks b,
#menuCodexPanel .boss-affinity-row > em {
  color: #f2e9ce !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

#menuCodexPanel .boss-affinity-row > em {
  justify-self: end !important;
  color: #b8c8cf !important;
  text-align: right !important;
}

#menuCodexPanel .boss-affinity-row.attack > em {
  color: #87e0b5 !important;
}

#menuCodexPanel .boss-affinity-row.defense > em {
  color: #e6a0a0 !important;
}

#menuCodexPanel .codex-boss-response-copy {
  margin: 4px 9px 1px !important;
  color: #e8edf0 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

@media (max-width: 370px), (max-height: 700px) {
  .menu-lobby-panel .lobby-status-grid {
    left: 28px !important;
    right: 28px !important;
  }

  #menuCompanionPanel .collection-party-position[data-companion-id="abyssVampireStar"] > p {
    font-size: 7.2px !important;
    letter-spacing: -.03em !important;
  }

  #menuCodexPanel .codex-boss-analysis-shell {
    grid-template-rows: 145px minmax(0, 1fr) !important;
    padding: 14px 18px 16px !important;
  }

  #menuCodexPanel .codex-boss-detail .codex-boss-hero {
    height: 145px !important;
    min-height: 145px !important;
  }

  #menuCodexPanel .codex-boss-detail .codex-detail-art {
    width: 222px !important;
    height: 142px !important;
  }

  #menuCodexPanel .codex-boss-detail .codex-detail-art > img {
    width: 218px !important;
    height: 140px !important;
  }

  #menuCodexPanel .boss-affinity-row {
    grid-template-columns: 58px minmax(0, 1fr) 54px !important;
    gap: 5px !important;
  }
}


/* SOURCE: ui/styles/shared/character-detail-clarity-v1.css */
/* Character and first-run clarity pass v1, 2026-09-01. */

/* The first reward reuses the same calm painted guide plate as the first
   expedition instructions. Keep all copy inside its authored inner recess. */
#tutorialPanel.tutorial-panel.tutorial-step-4.tutorial-reward-target {
  box-sizing: border-box !important;
  width: min(344px, calc(100vw - 32px)) !important;
  aspect-ratio: auto !important;
  grid-template-rows: auto !important;
  gap: 0 !important;
  padding: 8px 9px 10px !important;
  border: 12px solid transparent !important;
  border-image: url("assets/generated/codex_detail_inner_v6_1793206800000/codex-info-panel-calm.png") 60 140 fill / 1 / 0 stretch !important;
  background: none !important;
}

/* The reward card already says what happened. Repeating "first expedition /
   first battle" on its upper rail only crowds the authored frame. */
#tutorialPanel.tutorial-panel.tutorial-step-4.tutorial-reward-target .tutorial-guide-head {
  display: none !important;
}

#tutorialPanel.tutorial-step-4 #tutorialFeedback {
  margin-top: 6px !important;
  padding-top: 5px !important;
  font-size: 11px !important;
  line-height: 15px !important;
}

#tutorialPanel.tutorial-step-4 #tutorialFeedback > strong {
  margin-bottom: 2px !important;
  line-height: 15px !important;
}

#tutorialPanel.tutorial-step-4 #tutorialFeedback > span {
  margin-top: 1px !important;
}

/* Long Korean names remain the authored names. Only their own painted title
   bay scales, so the metadata and already-correct short names never move. */
#itemInfoPanel[data-title-band="very-long"] .item-info-card .item-info-head > div {
  left: 39.2% !important;
  right: 16.8% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#itemInfoPanel[data-title-band="very-long"] .item-info-card #itemInfoTitle {
  max-width: 100% !important;
  font-size: 11.2px !important;
  line-height: 13px !important;
  letter-spacing: -.045em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

@media (max-width: 370px) {
  #itemInfoPanel[data-title-band="very-long"] .item-info-card #itemInfoTitle {
    font-size: 10.5px !important;
    letter-spacing: -.055em !important;
  }
}


/* SOURCE: ui/styles/shared/player-element-detail-v1.css */
/* Player combat detail: readable elemental equipment rows on the accepted blue-black recess art. */
.combat-stats-card .combat-element-section {
  min-width: 0;
  margin: 8px 0 28px;
}

.combat-stats-card .combat-element-heading {
  padding: 7px 2px 10px;
  scroll-snap-align: start;
}

.combat-stats-card .combat-element-heading strong {
  display: block;
  color: #ffedaa;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.02em;
}

.combat-stats-card .combat-element-heading small {
  display: block;
  margin-top: 2px;
  color: #a5bec9;
  font-size: 9.5px;
  line-height: 1.45;
}

.combat-stats-card .combat-element-legend {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: 22px;
  padding: 0 11px;
  box-sizing: border-box;
  color: #7894a1;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.combat-stats-card .combat-element-legend span:first-child {
  padding-left: 1px;
}

.combat-stats-card .combat-element-rows {
  display: grid;
  gap: 4px;
}

.combat-stats-card .combat-element-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  column-gap: 0;
  min-height: 68px;
  padding: 8px 11px 9px;
  box-sizing: border-box;
  background: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat;
  scroll-snap-align: start;
}

.combat-stats-card .combat-element-identity {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  min-width: 0;
  padding: 1px 5px 0 0;
  box-sizing: border-box;
}

.combat-stats-card .combat-element-identity img {
  display: block;
  width: 31px;
  height: 31px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .9));
}

.combat-stats-card .combat-element-name {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  color: #dcecf2;
}

.combat-stats-card .combat-element-value {
  position: relative;
  display: grid;
  grid-template-rows: 12px 20px 12px;
  justify-items: center;
  align-content: center;
  gap: 0;
  min-width: 0;
  padding: 2px 3px 0;
  box-sizing: border-box;
  text-align: center;
}

.combat-stats-card .combat-element-value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(120, 168, 187, .55) 24%, rgba(167, 129, 65, .62) 70%, transparent);
}

.combat-stats-card .combat-element-value small {
  align-self: end;
  color: #a9c3ce;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.combat-stats-card .combat-element-value b {
  align-self: center;
  color: #ffedaa;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
}

.combat-stats-card .combat-element-value em {
  align-self: start;
  max-width: 100%;
  color: #b9cbd2;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.combat-stats-card .combat-element-value.is-empty b {
  color: #718a95;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.combat-stats-card .combat-element-value.is-empty em {
  color: #657d88;
}

.combat-stats-card .combat-element-value.is-penalty b {
  color: #f0a290;
}

.combat-stats-card .combat-element-extra {
  grid-column: 2 / 4;
  display: block;
  min-width: 0;
  margin: 3px 3px 0;
  color: #a8c1cc;
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

.combat-stats-card .combat-element-extra b {
  color: #ffedaa;
  font-size: 10px;
  white-space: nowrap;
}

.combat-stats-card .combat-element-empty {
  margin: 0;
  min-height: 72px;
  padding: 0 24px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  color: #9bb4bf;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  background: url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat;
}

.combat-stats-card .combat-element-note {
  margin: 9px 2px 2px;
  color: #8fa9b5;
  font-size: 9px;
  line-height: 1.55;
  scroll-snap-align: start;
}

.combat-stats-card .combat-element-section.is-empty .combat-element-legend,
.combat-stats-card .combat-element-section.is-empty .combat-element-note {
  display: none;
}

.combat-stats-card .combat-element-section.is-empty .combat-element-empty {
  margin-top: 5px;
}

.combat-stats-card .combat-element-row[data-element="wood"] .combat-element-name { color: #9bd888; }
.combat-stats-card .combat-element-row[data-element="fire"] .combat-element-name { color: #f3a38b; }
.combat-stats-card .combat-element-row[data-element="earth"] .combat-element-name { color: #dfbf82; }
.combat-stats-card .combat-element-row[data-element="metal"] .combat-element-name { color: #d1dfe8; }
.combat-stats-card .combat-element-row[data-element="water"] .combat-element-name { color: #91cde7; }
.combat-stats-card .combat-element-row[data-element="light"] .combat-element-name { color: #f3e8aa; }
.combat-stats-card .combat-element-row[data-element="dark"] .combat-element-name { color: #c7a3e6; }

@media (max-width: 370px) {
  .combat-stats-card .combat-element-row,
  .combat-stats-card .combat-element-legend {
    grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr);
  }

  .combat-stats-card .combat-element-row {
    padding-inline: 9px;
  }

  .combat-stats-card .combat-element-value em {
    font-size: 7.5px;
  }
}

/* Keep the painted bays and their percentage anchors on one aspect ratio,
   including narrow/tall Android screens. Disable WebView text inflation. */
html body .combat-stats-card {
  width:min(370px,calc(100vw - 10px),calc((100dvh - 10px) * 841 / 1870))!important;
  height:auto!important;
  aspect-ratio:841 / 1870!important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html body .combat-stats-card .combat-stats-head strong {
  max-width:100%;
  font-size:clamp(14px,4.6vw,18px)!important;
  text-align:center;
}
html body .combat-stats-card .combat-power-hero > span {
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:2px 7px!important;
  min-width:0;
}
html body .combat-stats-card .combat-power-hero small {
  grid-column:1 / -1!important;
  line-height:1.3!important;
}
html body .combat-stats-card .combat-power-hero strong,
html body .combat-stats-card .combat-power-hero em {
  position:static!important;
  margin:0!important;
  line-height:1.1!important;
}


/* SOURCE: ui/styles/inventory/item-effect-priority-v1.css */
/* The first line in the existing painted effect bay is the item's defining
   effect. Keep the accepted raster surface and use only a restrained ink cue. */
#itemInfoPanel .item-info-card #itemInfoStats [data-layout="effect"] .item-summary-core {
  color: #f2d88f !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 5px rgba(118, 205, 222, .16) !important;
}

/* The authored equipment-effect bay is the main reason to inspect an item.
   Keep its painted geometry, but let both its heading and each independent
   effect line read at the same mobile distance as the base-stat bay. */
#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="effect"] > small {
  font-size: 11.2px !important;
  line-height: 12px !important;
}

#itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] > strong.item-readable-values {
  font-size: 10.8px !important;
  line-height: 14px !important;
  letter-spacing: -.012em !important;
}

#itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] > strong.item-readable-values > .item-summary-part {
  font-size: inherit !important;
  line-height: inherit !important;
}

#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="effect"][data-part-count="3"] {
  min-height: 112px !important;
}

#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="effect"][data-part-count="4"] {
  min-height: 126px !important;
}

#itemInfoPanel .item-info-card #itemInfoStats > [data-layout="effect"]:is([data-part-count="5"], [data-part-count="6"]) {
  min-height: 140px !important;
}


/* SOURCE: ui/styles/inventory/item-detail-placement-split-v1.css */
/* Item detail placement split v1.
   The existing painted recesses stay intact. Placement lives only in the
   lower relation bays, and two relation rows fit without hiding under the
   fixed action rail at 360x800 or 390x844. */
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="primary"],
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="secondary"] {
  min-height: 52px !important;
  padding-block: 4px !important;
}

#itemInfoPanel .item-info-card .item-info-relations[data-row-count="2"] {
  gap: 2px !important;
}

#itemInfoPanel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row,
#itemInfoPanel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row.linked-set {
  box-sizing: border-box !important;
  height: 52px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
  padding: 4px 11px !important;
}

#itemInfoPanel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row > div {
  gap: 0 !important;
}

#itemInfoPanel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row > div > small,
#itemInfoPanel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row.linked-set > div > small {
  position: static !important;
  line-height: 12px !important;
  transform: none !important;
}

#itemInfoPanel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row > div > strong,
#itemInfoPanel .item-info-card .item-info-relations[data-row-count="2"] .item-relation-row > div > em {
  line-height: 12px !important;
}

/* Five or six independent effect lines need a taller bay, but the older
   140px floor also pushed the final relation line behind the action rail.
   126px keeps every line inside its own recess at both QA sizes. */
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"]:is([data-part-count="5"], [data-part-count="6"]) {
  min-height: 126px !important;
}


/* SOURCE: ui/styles/inventory/item-detail-long-effect-fit-v1.css */
/* Long item-effect copy needs more painted breathing room, not smaller ink.
   This late, narrow rule preserves the accepted raster frame and only grows
   the existing effect recess when three semantic parts wrap like five lines. */
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats
  > .item-stat-chip[data-layout="effect"][data-copy-band="very-long"]:is([data-part-count="2"], [data-part-count="3"]) {
  box-sizing: border-box !important;
  min-height: 118px !important;
  flex: 0 0 118px !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats
  > .item-stat-chip[data-layout="effect"][data-copy-band="very-long"]
  > .item-readable-values {
  max-height: calc(100% - 15px) !important;
}

/* The base-stat recess was visually tighter than the other authored bays.
   Give its heading and values a little vertical air without stretching the
   secondary or effect recesses that already fit. */
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats
  > .item-stat-chip[data-layout="primary"] {
  min-height: 58px !important;
  flex: 0 0 58px !important;
}

/* Consumable instructions use two complete phrases rather than short stat
   values. Only that prose-shaped secondary bay gets extra vertical room. */
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats
  > .item-stat-chip[data-layout="secondary"][data-copy-mode="prose"] {
  min-height: 60px !important;
  flex: 0 0 60px !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats
  > .item-stat-chip[data-layout="secondary"][data-copy-mode="prose"]
  > .item-readable-values {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: min-content !important;
  align-content: center !important;
  gap: 1px !important;
  font-size: 9.2px !important;
  line-height: 11px !important;
}

#itemInfoPanel .item-info-card #itemInfoStats
  > .item-stat-chip[data-layout="secondary"][data-copy-mode="prose"]
  .item-info-scroll-cue {
  display: none !important;
}

/* Every item uses the same painted horizontal recess. The detail document may
   still pan vertically, but no scrollbar track or reserved gutter is allowed
   to steal width from only the items whose copy happens to be tall. */
html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body {
  scrollbar-width: none !important;
  scrollbar-gutter: auto !important;
}

html body #itemInfoPanel.item-info-panel .item-info-card .item-info-scroll-body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body > #itemInfoStats {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats
  > .item-stat-chip[data-layout] {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  overflow: hidden !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats
  > .item-stat-chip[data-layout]
  > :is(small, .item-readable-values),
#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats
  > .item-stat-chip[data-layout]
  :is(.item-summary-part, .item-readable-group, .item-readable-group > span) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats
  > .item-stat-chip[data-layout]
  :is(.item-summary-part, .item-readable-group > span) {
  overflow-wrap: anywhere !important;
}


/* SOURCE: ui/styles/menus/lobby-top-hud-v2.css */
/* Lobby hierarchy V7: quiet status board, left attendance shortcut, right purchase CTA. */

/* The record plaque replaces the decorative phase copy at the top. */
.menu-lobby-panel .lobby-head {
  display: none !important;
}

.menu-lobby-panel .lobby-status-grid {
  position: absolute !important;
  z-index: 16 !important;
  top: max(1px, env(safe-area-inset-top)) !important;
  right: auto !important;
  left: 50% !important;
  width: 258px !important;
  height: 78px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  padding: 23px 14px 8px !important;
  overflow: visible !important;
  background: transparent url("assets/generated/lobby_top_hud_v4_20260903/expedition-status-board-v4.png") center / 100% auto no-repeat !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .68)) !important;
  transform: translateX(-50%) !important;
}

.menu-lobby-panel .lobby-status-grid > div {
  position: relative !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 47px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.menu-lobby-panel .lobby-status-grid > div > img {
  position: absolute !important;
  z-index: 2 !important;
  left: 19px !important;
  top: 52% !important;
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .76)) drop-shadow(0 0 4px rgba(111, 188, 255, .28)) !important;
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-status-grid > div > span,
.menu-lobby-panel .lobby-status-grid > div > strong {
  position: absolute !important;
  z-index: 2 !important;
  right: 4px !important;
  left: 35px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 1 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.menu-lobby-panel .lobby-status-grid > div > span {
  top: 10px !important;
  height: 11px !important;
  color: #a9dce8 !important;
  font-size: 7.1px !important;
  font-weight: 900 !important;
  line-height: 9px !important;
  overflow: visible !important;
}

.menu-lobby-panel .lobby-status-grid > div > strong {
  top: 23px !important;
  height: 18px !important;
  color: #ffe8a6 !important;
  font-size: 11.4px !important;
  font-weight: 1000 !important;
  line-height: 16px !important;
  overflow: visible !important;
  text-shadow: 0 1px 3px #000 !important;
}

/* The two rewards are deliberately different: warm purchase crest vs cool attendance ribbon. */
.menu-lobby-panel .lobby-side-actions {
  position: absolute !important;
  z-index: 15 !important;
  top: max(80px, calc(env(safe-area-inset-top) + 78px)) !important;
  right: 4px !important;
  left: auto !important;
  width: 190px !important;
  height: 138px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 68px 64px !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  filter: none !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-side-actions-title {
  display: none !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 190px !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .7)) !important;
  transform: none !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer {
  background-image: url("assets/generated/lobby_side_cta_v6_20260903/beginner-cta-v6.png") !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  background-image: url("assets/generated/lobby_side_cta_v6_20260903/attendance-cta-v6.png") !important;
}

.menu-lobby-panel .lobby-side-actions button > img,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  position: absolute !important;
  z-index: 2 !important;
  left: 25px !important;
  top: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .78)) drop-shadow(0 0 5px rgba(255, 185, 55, .28)) !important;
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  left: 33px !important;
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .78)) drop-shadow(0 0 6px rgba(77, 202, 255, .5)) !important;
  transform: translate(-50%, -50%) rotate(-5deg) !important;
}

.menu-lobby-panel .lobby-side-actions button > span {
  position: absolute !important;
  z-index: 2 !important;
  top: 14px !important;
  right: 54px !important;
  left: 47px !important;
  height: 34px !important;
  display: grid !important;
  place-content: center !important;
  gap: 3px !important;
  padding: 0 !important;
  text-align: center !important;
}

.menu-lobby-panel .lobby-side-actions button small {
  color: #ffcc6b !important;
  font-size: 6.6px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut small {
  color: #91e9ff !important;
}

.menu-lobby-panel .lobby-side-actions button strong,
.menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
  color: #f4e3b3 !important;
  font-size: 9.8px !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut strong {
  color: #edfaff !important;
}

.menu-lobby-panel .lobby-side-actions button > b {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  right: 8px !important;
  bottom: auto !important;
  left: 140px !important;
  height: 16px !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #ffd66f !important;
  font-size: 7.2px !important;
  font-weight: 1000 !important;
  line-height: 16px !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: translateY(-50%) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > b {
  left: 140px !important;
  color: #8feeff !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
  top: 13px !important;
  right: 58px !important;
  left: 57px !important;
  height: 35px !important;
}

.menu-lobby-panel .lobby-side-actions button:hover,
.menu-lobby-panel .lobby-side-actions button:focus-visible {
  filter: brightness(1.1) saturate(1.04) !important;
  transform: none !important;
}

.menu-lobby-panel .lobby-side-actions button:active {
  filter: brightness(.9) !important;
  transform: translateY(1px) !important;
}

.menu-lobby-panel .lobby-attendance-shortcut .lobby-tool-badge {
  top: 0 !important;
  right: 5px !important;
}

/* Lower the beginner copy into the painted recess without moving its frame. */
#menuLobbyPanel .lobby-beginner-copy,
#menuLobbyPanel .lobby-beginner-reward {
  transform: translateY(3px) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-status-grid {
    left: 52% !important;
    width: 248px !important;
    height: 73px !important;
    top: max(1px, env(safe-area-inset-top)) !important;
    padding: 22px 13px 7px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div {
    height: 44px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > img {
    left: 18px !important;
    width: 20px !important;
    height: 20px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > span,
  .menu-lobby-panel .lobby-status-grid > div > strong {
    right: 3px !important;
    left: 33px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > span {
    top: 9px !important;
    height: 10px !important;
    font-size: 6.6px !important;
    line-height: 8px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > strong {
    top: 21px !important;
    height: 18px !important;
    font-size: 10.6px !important;
    line-height: 16px !important;
  }

  .menu-lobby-panel .lobby-side-actions {
    top: max(75px, calc(env(safe-area-inset-top) + 73px)) !important;
    right: 4px !important;
    width: 176px !important;
    height: 127px !important;
    grid-template-rows: 63px 59px !important;
    gap: 5px !important;
    padding: 0 !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
    width: 176px !important;
  }

  .menu-lobby-panel .lobby-side-actions button > img,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
    left: 23px !important;
    width: 22px !important;
    height: 22px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
    left: 30px !important;
    width: 26px !important;
    height: 26px !important;
  }

  .menu-lobby-panel .lobby-side-actions button > span {
    top: 13px !important;
    right: 50px !important;
    left: 43px !important;
    height: 31px !important;
  }

  .menu-lobby-panel .lobby-side-actions button > b {
    top: 50% !important;
    right: 7px !important;
    bottom: auto !important;
    left: 129px !important;
    height: 15px !important;
    font-size: 6.7px !important;
    line-height: 15px !important;
  }

  .menu-lobby-panel .lobby-side-actions button small {
    font-size: 6.1px !important;
  }

  .menu-lobby-panel .lobby-side-actions button strong,
  .menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
    font-size: 9.1px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
    top: 12px !important;
    right: 54px !important;
    left: 52px !important;
    height: 32px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > b {
    right: 8px !important;
    left: 130px !important;
  }
}

/* V10 optical correction: tighter status copy and one-piece lobby shortcuts. */

@media (max-width: 370px), (max-height: 760px) {
}

/* V11 final optical pass: shared status baselines, compact distinct shortcuts. */

@media (max-width: 370px), (max-height: 760px) {
}

@media (prefers-reduced-motion: reduce) {
  .menu-lobby-panel .lobby-side-actions button {
    transition: none !important;
  }
}

/* V7 optical layout: each painted control owns its own position and scale. */
.menu-lobby-panel .lobby-status-grid {
  top: max(2px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  width: 258px !important;
  height: 84px !important;
  padding: 23px 16px 13px !important;
  background-image: url("assets/generated/lobby_top_hud_v7_20260903/status-quiet-v7.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  transform: translateX(-50%) !important;
}

.menu-lobby-panel .lobby-status-grid > div {
  height: 48px !important;
}

.menu-lobby-panel .lobby-status-grid > div > img {
  left: 16px !important;
  top: 48% !important;
  width: 18px !important;
  height: 18px !important;
}

.menu-lobby-panel .lobby-status-grid > div > span,
.menu-lobby-panel .lobby-status-grid > div > strong {
  right: 4px !important;
  left: 29px !important;
}

.menu-lobby-panel .lobby-status-grid > div > span {
  top: 4px !important;
  height: 10px !important;
  font-size: 6.7px !important;
  line-height: 9px !important;
}

.menu-lobby-panel .lobby-status-grid > div > strong {
  top: 17px !important;
  height: 17px !important;
  font-size: 11px !important;
  line-height: 15px !important;
}

.menu-lobby-panel .lobby-side-actions {
  top: max(82px, calc(env(safe-area-inset-top) + 80px)) !important;
  right: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 61px !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  display: block !important;
  pointer-events: auto !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer {
  right: 5px !important;
  left: auto !important;
  width: 150px !important;
  height: 50px !important;
  background-image: url("assets/generated/lobby_top_hud_v7_20260903/beginner-purchase-v7.png") !important;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  right: auto !important;
  left: 5px !important;
  width: 120px !important;
  height: 51px !important;
  background-image: url("assets/generated/lobby_top_hud_v7_20260903/attendance-compact-v7.png") !important;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .64)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
  left: 29px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  left: 25px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
  top: 9px !important;
  right: 42px !important;
  left: 44px !important;
  height: 31px !important;
  gap: 2px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer small {
  display: block !important;
  color: #ffd88c !important;
  font-size: 6.6px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
  font-size: 8.8px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > b {
  top: 50% !important;
  right: 5px !important;
  left: 111px !important;
  width: auto !important;
  height: 25px !important;
  display: grid !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  gap: 0 !important;
  color: #261200 !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > b > em,
.menu-lobby-panel .lobby-side-actions .lobby-first-offer > b > i {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > b > em {
  color: #2a1400 !important;
  font-size: 6.2px !important;
  font-weight: 1000 !important;
  text-shadow: 0 1px 0 rgba(255, 237, 166, .6) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > b > i {
  color: #221200 !important;
  font-size: 8.8px !important;
  font-weight: 1000 !important;
  text-shadow: 0 1px 0 rgba(255, 233, 154, .5) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
  top: 0 !important;
  right: 28px !important;
  left: 48px !important;
  height: 51px !important;
  display: grid !important;
  place-content: center !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut small {
  display: none !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut strong {
  color: #e9f7ff !important;
  font-size: 8.1px !important;
  line-height: 1 !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > b {
  top: 50% !important;
  right: 5px !important;
  left: 94px !important;
  width: auto !important;
  height: 14px !important;
  color: #dff9ff !important;
  font-size: 7.1px !important;
  line-height: 14px !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-status-grid {
    top: max(2px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    width: 248px !important;
    height: 80px !important;
    padding: 22px 15px 12px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div {
    height: 46px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > img {
    left: 15px !important;
    top: 49% !important;
    width: 17px !important;
    height: 17px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > span,
  .menu-lobby-panel .lobby-status-grid > div > strong {
    right: 3px !important;
    left: 27px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > span {
    top: 4px !important;
    font-size: 6.3px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > strong {
    top: 16px !important;
    font-size: 10.4px !important;
  }

  .menu-lobby-panel .lobby-side-actions {
    top: max(78px, calc(env(safe-area-inset-top) + 76px)) !important;
    right: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 58px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer {
    right: 3px !important;
    left: auto !important;
    width: 140px !important;
    height: 47px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
    right: auto !important;
    left: 4px !important;
    width: 112px !important;
    height: 48px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
    left: 27px !important;
    width: 19px !important;
    height: 19px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
    top: 8px !important;
    right: 39px !important;
    left: 42px !important;
    height: 29px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer small {
    font-size: 6.1px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
    font-size: 8.2px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > b {
    right: 5px !important;
    left: 104px !important;
    height: 23px !important;
    font-size: 8.5px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > b > em {
    font-size: 5.8px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > b > i {
    font-size: 8.4px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
    left: 23px !important;
    width: 19px !important;
    height: 19px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
    right: 26px !important;
    left: 45px !important;
    height: 48px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > b {
    right: 4px !important;
    left: 87px !important;
    font-size: 6.7px !important;
  }
}

/* Story and settings are a matched top-corner pair. */
body .menu-lobby-panel .lobby-story-link,
body .menu-lobby-panel .lobby-settings-button {
  top: max(10px, env(safe-area-inset-top)) !important;
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent url("assets/generated/settings_button_backplate_v13_1795555500009/settings-button-backplate-v13.png") center / 100% 100% no-repeat !important;
}

body .menu-lobby-panel .lobby-story-link {
  right: auto !important;
  left: 10px !important;
}

body .menu-lobby-panel .lobby-settings-button {
  right: 10px !important;
  left: auto !important;
}

body .menu-lobby-panel .lobby-story-link > img,
body .menu-lobby-panel .lobby-settings-button > img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  transform: translate(-50%, -50%) !important;
}

body .menu-lobby-panel .lobby-story-link::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 370px), (max-height: 760px) {
  body .menu-lobby-panel .lobby-story-link,
  body .menu-lobby-panel .lobby-settings-button {
    top: max(9px, env(safe-area-inset-top)) !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  body .menu-lobby-panel .lobby-story-link {
    left: 9px !important;
  }

  body .menu-lobby-panel .lobby-settings-button {
    right: 9px !important;
  }

  body .menu-lobby-panel .lobby-story-link > img,
  body .menu-lobby-panel .lobby-settings-button > img {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
}

/* V10 final cascade: judge every painted recess independently. */
.menu-lobby-panel .lobby-status-grid > div > img {
  top: 44% !important;
}

.menu-lobby-panel .lobby-status-grid > div > span {
  top: 10px !important;
  line-height: 9px !important;
}

.menu-lobby-panel .lobby-status-grid > div > strong {
  top: 19px !important;
  line-height: 15px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  top: 0 !important;
  width: 142px !important;
  height: 48px !important;
  background-image: url("assets/generated/lobby_top_hud_v10_20260903/lobby-shortcut-actionless-v10.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .68)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer {
  right: 5px !important;
  left: auto !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  right: auto !important;
  left: 5px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > img,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  top: 50% !important;
  left: 24px !important;
  width: 20px !important;
  height: 20px !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > span,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
  top: 7px !important;
  right: 7px !important;
  left: 43px !important;
  height: 34px !important;
  display: grid !important;
  place-content: center !important;
  gap: 2px !important;
  transform: none !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer strong,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut strong {
  font-size: 8.6px !important;
  line-height: 10px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer small {
  font-size: 6.6px !important;
  line-height: 8px !important;
}

body .menu-lobby-panel .lobby-story-link::after {
  content: attr(data-count) !important;
  position: absolute !important;
  z-index: 5 !important;
  right: 1px !important;
  bottom: 1px !important;
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  display: grid !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid #b99651 !important;
  border-radius: 50% !important;
  background: #101824 !important;
  color: #fff0b5 !important;
  font-size: 7px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .8) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-status-grid > div > img {
    top: 44% !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > span {
    top: 9px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > strong {
    top: 18px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
    width: 132px !important;
    height: 45px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer {
    right: 4px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
    left: 4px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > img,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
    left: 22px !important;
    width: 19px !important;
    height: 19px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > span,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
    top: 6px !important;
    right: 6px !important;
    left: 40px !important;
    height: 33px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer strong,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut strong {
    font-size: 8px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer small {
    font-size: 6.2px !important;
  }
}


/* SOURCE: ui/styles/menus/lobby-top-hud-v11.css */
/* Final lobby HUD optical override. Loaded after lobby-top-hud-v2.css. */
.menu-lobby-panel .lobby-status-grid > div > span {
  top: 6px !important;
  height: 10px !important;
  font-size: 7.2px !important;
  line-height: 9px !important;
}

.menu-lobby-panel .lobby-status-grid > div:first-child > span {
  top: 6px !important;
  font-size: 7.5px !important;
}

.menu-lobby-panel .lobby-status-grid > div > strong {
  top: 15px !important;
  height: 17px !important;
  font-size: 11.4px !important;
  line-height: 15px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer {
  right: 8px !important;
  width: 130px !important;
  height: 50px !important;
  background-image: url("assets/generated/lobby_top_hud_v11_20260903/beginner-offer-premium-v11.png") !important;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .72)) drop-shadow(0 0 4px rgba(224, 139, 24, .28)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  left: 8px !important;
  width: 128px !important;
  height: 48px !important;
  background-image: url("assets/generated/lobby_top_hud_v10_20260903/lobby-shortcut-actionless-v10.png") !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
  left: 27px !important;
  width: 21px !important;
  height: 21px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  left: 21px !important;
  width: 19px !important;
  height: 19px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
  top: 7px !important;
  right: 7px !important;
  left: 48px !important;
  height: 36px !important;
  gap: 1px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
  top: 7px !important;
  right: 7px !important;
  left: 37px !important;
  height: 34px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
  color: #fff0bd !important;
  font-size: 8.4px !important;
  line-height: 10px !important;
  text-shadow: 0 1px 2px #000, 0 0 3px rgba(255, 179, 54, .34) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer small {
  color: #ffd477 !important;
  font-size: 6.5px !important;
  line-height: 8px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut strong {
  font-size: 8.1px !important;
  line-height: 10px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-status-grid > div > span {
    top: 6px !important;
    font-size: 7px !important;
    line-height: 9px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div:first-child > span {
    top: 6px !important;
    font-size: 7.3px !important;
  }

  .menu-lobby-panel .lobby-status-grid > div > strong {
    top: 15px !important;
    font-size: 10.8px !important;
    line-height: 15px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer {
    right: 6px !important;
    width: 122px !important;
    height: 47px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
    left: 6px !important;
    width: 120px !important;
    height: 45px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
    left: 25px !important;
    width: 20px !important;
    height: 20px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
    left: 20px !important;
    width: 18px !important;
    height: 18px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
    top: 6px !important;
    right: 6px !important;
    left: 45px !important;
    height: 35px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
    top: 6px !important;
    right: 6px !important;
    left: 35px !important;
    height: 33px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
    font-size: 7.8px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut strong {
    font-size: 7.6px !important;
  }
}


/* SOURCE: ui/styles/menus/lobby-top-hud-v12.css */
/* Per-cell centering and compact, role-specific lobby shortcuts. */
.menu-lobby-panel .lobby-status-grid > div {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  justify-self: stretch !important;
}

.menu-lobby-panel .lobby-status-grid > div > span,
.menu-lobby-panel .lobby-status-grid > div > strong {
  text-align: center !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer {
  right: 8px !important;
  width: 118px !important;
  height: 49px !important;
  background-image: url("assets/generated/lobby_top_hud_v11_20260903/beginner-offer-premium-v11.png") !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  left: 8px !important;
  width: 116px !important;
  height: 48px !important;
  background-image: url("assets/generated/lobby_top_hud_v12_20260903/attendance-streak-v12.png") !important;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .7)) drop-shadow(0 0 4px rgba(69, 189, 255, .22)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > img,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  left: 25px !important;
  width: 20px !important;
  height: 20px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
  top: 7px !important;
  right: 6px !important;
  left: 42px !important;
  height: 35px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
  top: 7px !important;
  right: 6px !important;
  left: 42px !important;
  height: 34px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-side-actions .lobby-first-offer {
    right: 6px !important;
    width: 112px !important;
    height: 46px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
    left: 6px !important;
    width: 110px !important;
    height: 45px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > img,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
    left: 23px !important;
    width: 19px !important;
    height: 19px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > span,
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
    top: 6px !important;
    right: 5px !important;
    left: 39px !important;
    height: 33px !important;
  }
}


/* SOURCE: ui/styles/menus/lobby-top-hud-v13.css */
/* Final compact pass for the two role-specific lobby shortcuts. */
.menu-lobby-panel .lobby-side-actions .lobby-first-offer {
  right: 8px !important;
  width: 111px !important;
  height: 46px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  left: 8px !important;
  width: 106px !important;
  height: 44px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
  left: 23px !important;
  width: 18px !important;
  height: 18px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  left: 22px !important;
  width: 18px !important;
  height: 18px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
  top: 6px !important;
  right: 5px !important;
  left: 39px !important;
  height: 33px !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
  top: 6px !important;
  right: 5px !important;
  left: 37px !important;
  height: 32px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-side-actions .lobby-first-offer {
    right: 6px !important;
    width: 106px !important;
    height: 44px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
    left: 6px !important;
    width: 101px !important;
    height: 42px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
    left: 22px !important;
    width: 17px !important;
    height: 17px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
    left: 21px !important;
    width: 17px !important;
    height: 17px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
    top: 5px !important;
    right: 5px !important;
    left: 37px !important;
    height: 33px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
    top: 5px !important;
    right: 5px !important;
    left: 35px !important;
    height: 31px !important;
  }
}


/* SOURCE: ui/styles/menus/lobby-top-hud-v14.css */
/* Restore the compact right-side reward stack without touching the accepted HUD. */
.menu-lobby-panel .lobby-side-actions {
  position: absolute !important;
  z-index: 15 !important;
  top: max(82px, calc(env(safe-area-inset-top) + 80px)) !important;
  right: 4px !important;
  left: auto !important;
  width: 148px !important;
  height: 110px !important;
  display: grid !important;
  grid-template-columns: 148px !important;
  grid-template-rows: 54px 52px !important;
  justify-items: end !important;
  gap: 4px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  filter: none !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  justify-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer {
  right: auto !important;
  width: 148px !important;
  height: 54px !important;
  background-image: url("assets/generated/lobby_top_hud_v11_20260903/beginner-offer-premium-v11.png") !important;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .72)) drop-shadow(0 0 5px rgba(226, 143, 26, .25)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
  left: auto !important;
  width: 146px !important;
  height: 52px !important;
  background-image: url("assets/generated/lobby_top_hud_v12_20260903/attendance-streak-v12.png") !important;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .7)) drop-shadow(0 0 5px rgba(76, 189, 246, .22)) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer::before,
.menu-lobby-panel .lobby-side-actions .lobby-first-offer::after,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut::before,
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut::after {
  content: none !important;
  display: none !important;
}

/* Purchase plaque: its round icon well and three text lines are independent. */
.menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 25px !important;
  width: 27px !important;
  height: 27px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .74)) drop-shadow(0 0 5px rgba(255, 180, 47, .34)) !important;
  transform: translate(-50%, -50%) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
  position: absolute !important;
  z-index: 2 !important;
  top: 7px !important;
  right: 9px !important;
  left: 48px !important;
  height: 27px !important;
  display: grid !important;
  place-content: center !important;
  gap: 2px !important;
  padding: 0 !important;
  text-align: center !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer small {
  color: #ffd273 !important;
  font-size: 6.3px !important;
  font-weight: 950 !important;
  line-height: 7px !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
  color: #fff0b7 !important;
  font-size: 9.1px !important;
  font-weight: 1000 !important;
  line-height: 10px !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px #000 !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > b {
  position: absolute !important;
  z-index: 2 !important;
  top: auto !important;
  right: 10px !important;
  bottom: 6px !important;
  left: 49px !important;
  height: 10px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #ffd66f !important;
  font-size: 7.3px !important;
  font-weight: 1000 !important;
  line-height: 10px !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
}

/* Attendance plaque: no action word; center the two-line copy in its own well. */
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 27px !important;
  width: 29px !important;
  height: 29px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .76)) drop-shadow(0 0 6px rgba(100, 155, 255, .4)) !important;
  transform: translate(-50%, -50%) rotate(-4deg) !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  right: 9px !important;
  left: 50px !important;
  height: 52px !important;
  display: grid !important;
  place-content: center !important;
  gap: 3px !important;
  padding: 1px 0 0 !important;
  text-align: center !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut small {
  display: block !important;
  color: #8ee9ff !important;
  font-size: 6.4px !important;
  font-weight: 950 !important;
  line-height: 7px !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px #000 !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut strong {
  color: #eefaff !important;
  font-size: 9.3px !important;
  font-weight: 1000 !important;
  line-height: 10px !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px #000 !important;
}

.menu-lobby-panel .lobby-side-actions button:hover,
.menu-lobby-panel .lobby-side-actions button:focus-visible {
  transform: translateY(-1px) !important;
}

.menu-lobby-panel .lobby-side-actions button:active {
  transform: translateY(1px) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-side-actions {
    top: max(78px, calc(env(safe-area-inset-top) + 76px)) !important;
    right: 3px !important;
    width: 140px !important;
    height: 105px !important;
    grid-template-columns: 140px !important;
    grid-template-rows: 51px 50px !important;
    gap: 4px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer {
    width: 140px !important;
    height: 51px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut {
    width: 138px !important;
    height: 50px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
    left: 24px !important;
    width: 25px !important;
    height: 25px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
    top: 6px !important;
    right: 8px !important;
    left: 45px !important;
    height: 26px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer small { font-size: 6px !important; }
  .menu-lobby-panel .lobby-side-actions .lobby-first-offer strong { font-size: 8.6px !important; }
  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > b {
    right: 9px !important;
    bottom: 6px !important;
    left: 46px !important;
    height: 9px !important;
    font-size: 7px !important;
    line-height: 9px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
    left: 25px !important;
    width: 27px !important;
    height: 27px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > span {
    right: 8px !important;
    left: 47px !important;
    height: 50px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut small { font-size: 6px !important; }
  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut strong { font-size: 8.8px !important; }
}


/* SOURCE: ui/styles/menus/lobby-top-hud-v15.css */
/* Final optical correction for the two restored reward plaques. */

/* First offer: metadata and price share the upper line; title owns the lower line. */
.menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
  top: 14px !important;
  right: 10px !important;
  left: 53px !important;
  height: 28px !important;
  display: block !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer small {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 39px !important;
  height: 8px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
  position: absolute !important;
  top: 11px !important;
  right: 0 !important;
  left: 0 !important;
  height: 11px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

.menu-lobby-panel .lobby-side-actions .lobby-first-offer > b {
  top: 14px !important;
  right: 11px !important;
  bottom: auto !important;
  left: auto !important;
  width: 38px !important;
  height: 8px !important;
  line-height: 8px !important;
  text-align: center !important;
  transform: none !important;
}

/* The chest art has more transparent weight on its right/bottom, so its CSS box
   is moved separately to put the painted chest in the circular well. */
.menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
  top: calc(50% + 1.25px) !important;
  left: 30.5px !important;
  width: 30px !important;
  height: 30px !important;
}

/* The ticket art is already diagonal; remove the extra rotation and correct
   only its own optical centre inside the cool-metal well. */
.menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
  top: 50% !important;
  left: 29.75px !important;
  width: 29px !important;
  height: 29px !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > span {
    top: 13px !important;
    right: 9px !important;
    left: 50px !important;
    height: 27px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer small {
    width: 36px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer strong {
    top: 10px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > b {
    top: 13px !important;
    right: 10px !important;
    width: 35px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
    top: calc(50% + 1.25px) !important;
    left: 29.1px !important;
    width: 28px !important;
    height: 28px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-attendance-shortcut > img {
    top: 50% !important;
    left: 28.1px !important;
    width: 27px !important;
    height: 27px !important;
  }
}


/* SOURCE: ui/styles/menus/lobby-top-hud-v16.css */
/* Narrow visual corrections after inspecting the painted wells at both mobile sizes. */

/* The chest bitmap has transparent weight on its right and bottom. Correct only
   this bitmap; the card, copy and attendance reward remain untouched. */
.menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
  top: calc(50% + .25px) !important;
  left: 29.5px !important;
}

/* Raise only the current beginner objective inside its lower text line. */
#menuLobbyPanel .lobby-beginner-goal-row {
  position: relative !important;
  top: -2px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
    top: calc(50% + .25px) !important;
    left: 28.1px !important;
  }
}


/* SOURCE: ui/styles/menus/lobby-top-hud-v17.css */
/* Final per-cell correction from the real-size mobile render. */

/* Move the painted chest right inside its own circular well. */
.menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
  left: 31.5px !important;
}

/* Give the price breathing room from the right ornament and keep it legible at 1x. */
.menu-lobby-panel .lobby-side-actions .lobby-first-offer > b {
  right: 14px !important;
  width: 40px !important;
  font-size: 7.8px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > img {
    left: 30.1px !important;
  }

  .menu-lobby-panel .lobby-side-actions .lobby-first-offer > b {
    right: 13px !important;
    width: 38px !important;
    font-size: 7.5px !important;
  }
}


/* SOURCE: ui/styles/shared/design-cohesion-v1.css */
/* Review 2026-09-05. Scoped to reviewed surfaces; accepted lobby/store stay intact. */
:root {--review-close-art:url("assets/generated/loot_bag_controls_1790153000000/loot-close-button.png");}
#fusionPanel#fusionPanel #fusionResultStats > .fusion-stat-feature[data-stat-label="등급 특성"] {
  display:flex !important; flex-direction:column !important; justify-content:center !important;
  align-items:stretch !important; gap:4px !important; padding:8px 18px !important;
  background:url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
}
#fusionPanel#fusionPanel #fusionResultStats > .fusion-stat-feature[data-stat-label="등급 특성"] > :is(small,strong) {
  width:100% !important; position:static !important; transform:none !important;text-align:center !important;
}
#itemInfoPanel#itemInfoPanel #itemInfoStats > [data-layout="effect"] {
  height: auto !important; min-height: 60px !important; flex: 0 0 auto !important;
  padding: 14px 15px !important; gap: 5px !important;
}
#itemInfoPanel#itemInfoPanel #itemInfoStats > [data-layout="effect"] > .item-readable-values {
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
  gap: 9px !important; font-size: 11px !important; line-height: 1.5 !important;
  text-align: center !important; max-height: none !important; letter-spacing: 0 !important;
}
#itemInfoPanel#itemInfoPanel #itemInfoStats [data-layout="effect"] :is(.item-summary-part,.item-readable-group,.item-readable-group > span) {
  display: block !important; text-align: center !important; white-space: normal !important;
  font-size: inherit !important; line-height: inherit !important; width: 100% !important;
}
#itemInfoPanel#itemInfoPanel .item-info-scroll-body { bottom: 66px !important; padding-bottom: 15px !important; }

#menuRankingPanel#menuRankingPanel #gameRankingList {
  background: none !important; border: 0 !important; border-image: none !important;
  box-shadow: none !important; padding: 8px 9px 18px !important;
}
#menuRankingPanel#menuRankingPanel #gameRankingList::before,
#menuRankingPanel#menuRankingPanel #gameRankingList::after { content: none !important; display: none !important; }

#menuSettingsPanel#menuSettingsPanel.active { gap: 10px !important; padding-inline: 26px !important; }
#menuSettingsPanel#menuSettingsPanel.active {padding-bottom:32px !important;gap:4px !important;}
#menuSettingsPanel#menuSettingsPanel :is(.settings-gothic-group,.menu-game-home-box) {
  background: none !important; border: 0 !important; border-image: none !important;
  box-shadow: none !important; margin: 0 !important; padding: 6px 4px 8px !important;
}
#menuSettingsPanel#menuSettingsPanel :is(.settings-gothic-group,.menu-game-home-box)::before,
#menuSettingsPanel#menuSettingsPanel :is(.settings-gothic-group,.menu-game-home-box)::after { content:none !important; display:none !important; }
#menuSettingsPanel#menuSettingsPanel .settings-section-heading { margin: 0 0 8px !important; padding: 0 !important; min-height: 20px !important; }
#menuSettingsPanel#menuSettingsPanel .settings-section-heading strong { font-size: 14px !important; }
#menuSettingsPanel#menuSettingsPanel .settings-section-heading small { display: none !important; }
#menuSettingsPanel#menuSettingsPanel :is(.menu-small-button,.audio-toggle-button,.menu-policy-links a,.menu-policy-links button) {
  min-height: 32px !important; font-size: 11px !important; line-height: 1.1 !important;
  padding: 3px 9px !important;
}
#menuSettingsPanel#menuSettingsPanel .menu-policy-box { display: block !important; padding: 0 !important; }
#menuSettingsPanel#menuSettingsPanel .menu-policy-box > span { display:none !important; }
#menuSettingsPanel#menuSettingsPanel .menu-policy-links { width:100% !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:7px !important; }
#menuSettingsPanel#menuSettingsPanel .menu-tutorial-box { padding: 3px 0 !important; grid-template-columns:minmax(0,1fr) 82px !important; }
#menuSettingsPanel#menuSettingsPanel .menu-tutorial-box small { font-size:9.5px !important; line-height:1.4 !important; }

#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-portrait {
  width: 76px !important; height:76px !important; max-width:none !important; max-height:none !important;
  left: 2px !important; top: 24px !important; object-fit:contain !important; transform:none !important;
}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-portrait[src*="beyond3TideCapybara"] {left:3px !important; width:72px !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-portrait[src*="beyond3CloudChinchilla"] {left:4px !important; width:72px !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList :is(.enemy-entry-values,.enemy-entry-abilities) { margin-left:68px !important; }
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-values { margin-right: 14px !important; width:calc(100% - 82px) !important; }

/* Reuse the same painted shell and recesses as equipment completion. */
#pullRevealPanel#pullRevealPanel.high-rarity .pull-reveal-card {
  width:min(356px,calc(100vw - 24px)) !important; aspect-ratio:356 / 496 !important;
  background:transparent url("assets/generated/fusion_secret_frame_alpha_v7_1793710800000/fusion-secret-frame-alpha.png") center / 100% 100% no-repeat !important;
}
#pullRevealPanel#pullRevealPanel.high-rarity .panel-head.compact > div { inset:4.5% 18% auto !important; height:9% !important; }
#pullRevealPanel#pullRevealPanel.high-rarity #closeRevealButton {
  inset:3.5% 5% auto auto !important; width:34px !important; height:34px !important;
  background:var(--review-close-art) center / contain no-repeat !important;
}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-kicker {display:none !important;}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-item-focus::before,
#pullRevealPanel#pullRevealPanel.high-rarity .rare-item-focus::after {content:none !important;display:none !important;}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-item-focus .rare-grade {
  inset:39% 10% auto !important; height:5% !important; font-size:12px !important;
  color:#a7e8ff !important; text-shadow:0 1px 2px #000 !important;
}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-item-focus .rare-reveal-icon {
  inset:calc(18% + 8px) 0 auto !important; width:104px !important;height:104px !important;
  padding:4px !important; background:none !important; border:0 !important;
  filter:drop-shadow(0 0 12px #7274b155) !important;
}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-item-focus .name {
  inset:45% 11% auto !important; height:12% !important; font-size:20px !important;
  color:#fff0b5 !important; text-shadow:0 2px 2px #000 !important;
  padding:6px 16px !important;
  background:url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-showcase .stats {
  inset:60% 13% auto !important; height:21% !important; padding:4px 6px !important;
  background:none !important; border:0 !important; font-size:12px !important; line-height:1.45 !important;
}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-stat-scroll { scrollbar-width:none !important; font-size:12px !important; line-height:1.5 !important; }
#pullRevealPanel#pullRevealPanel.high-rarity .rare-stat-scroll::-webkit-scrollbar {display:none !important;}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-showcase .reveal-card-actions.single { inset:84% 23% auto !important; height:9% !important; }
#pullRevealPanel#pullRevealPanel.high-rarity .rare-showcase .reveal-card-actions.single .mini-button {
  padding:0 14px !important; font-size:13px !important; display:grid !important; place-items:center !important;
  background:url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / 100% 100% no-repeat !important;
}

#pullRevealPanel#pullRevealPanel.high-rarity .rare-reveal-fx {display:none !important;}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-showcase .stats {height:23% !important;inset:59% 13% auto !important;overflow:auto !important;scrollbar-width:none !important;}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-stat-scroll {max-height:none !important;height:auto !important;overflow:visible !important;}
#pullRevealPanel#pullRevealPanel.high-rarity .rare-stat-scroll-hint {display:none !important;}

#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row {padding:16px 18px 18px 87px !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-portrait {width:62px !important;height:62px !important;left:16px !important;top:42px !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-portrait[src*="beyond3TideCapybara"] {width:62px !important;left:16px !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-portrait[src*="beyond3CloudChinchilla"] {width:60px !important;left:17px !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-heading {margin:0 0 10px !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-name {font-size:13px !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList :is(.enemy-entry-values,.enemy-entry-abilities) {width:100% !important;margin:0 0 6px !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-abilities {margin-top:10px !important;}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats > .fusion-stat-feature[data-stat-label="등급 특성"] {
  display:flex !important;flex-direction:column !important;align-items:center !important;
  justify-content:center !important;padding:9px 16px !important;gap:4px !important;
}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats > .fusion-stat-feature[data-stat-label="등급 특성"] > :is(small,strong) {
  position:static !important;inset:auto !important;transform:none !important;width:100% !important;
  min-width:0 !important;max-width:none !important;height:auto !important;margin:0 !important;padding:0 !important;
  display:block !important;text-align:center !important;align-self:center !important;line-height:1.3 !important;
}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats > .fusion-stat-feature[data-stat-label="등급 특성"] .fusion-feature-line {display:block !important;width:100% !important;text-align:center !important;}
#menuSettingsPanel#menuSettingsPanel.active {height:min(744px,calc(100dvh - 28px)) !important;max-height:calc(100dvh - 28px) !important;min-height:0 !important;aspect-ratio:auto !important;}

#fusionPanel#fusionPanel#fusionPanel #fusionResultStats[data-core-count="2"][data-feature-count="2"]:has(> [data-stat-label="등급 특성"]) {grid-template-rows:50px 72px 60px !important;height:194px !important;gap:6px 0 !important;}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats > .fusion-stat-feature[data-stat-label="등급 특성"] {padding:6px 16px !important;gap:3px !important;}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats > .fusion-stat-feature[data-stat-label="등급 특성"] > :is(small,strong) {flex-shrink:0 !important;overflow:visible !important;}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats[data-core-count="2"][data-feature-count="2"]:has(> [data-stat-label="등급 특성"]) > .fusion-stat-ascent-power {min-height:60px !important;height:60px !important;padding:8px 24px !important;}
#mainMenu#mainMenu[data-panel="settings"] .menu-card {height:min(744px,calc(100dvh - 28px)) !important;top:50% !important;transform:translateY(-50%) !important;}

/* V2: respect the painted interior, not just the card's outer box. */
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats > [data-stat-label="등급 특성"] {
  background:transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  border:0 !important;box-shadow:none !important;padding:12px 18px !important;height:72px !important;min-height:72px !important;
}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats > [data-stat-label="등급 특성"]::before,
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats > [data-stat-label="등급 특성"]::after {content:none !important;display:none !important;}
#menuRankingPanel#menuRankingPanel .lobby-ranking-meta {height:40px !important;min-height:40px !important;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;}
#menuRankingPanel#menuRankingPanel .lobby-ranking-meta::before,
#menuRankingPanel#menuRankingPanel .lobby-ranking-meta::after {content:none !important;display:none !important;}
#menuRankingPanel#menuRankingPanel #gameRankingSummary {
  display:grid !important;place-items:center !important;position:static !important;transform:none !important;
  height:36px !important;min-height:36px !important;width:100% !important;margin:0 !important;padding:1px 18px 0 !important;
  background:transparent url("assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png") center / 100% 100% no-repeat !important;
  color:#c6d8df !important;font-size:10px !important;line-height:14px !important;text-align:center !important;
}
#menuSettingsPanel#menuSettingsPanel :is(.audio-setting-row,.menu-account-box,.menu-cloud-box,.menu-tutorial-box,.menu-policy-box) {border:0 !important;box-shadow:none !important;}
#menuSettingsPanel#menuSettingsPanel .settings-section-heading {
  position:relative !important;margin-bottom:10px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;flex-wrap:nowrap !important;
}
#menuSettingsPanel#menuSettingsPanel .settings-section-heading > :is(strong,label) {
  flex:0 1 auto;min-width:0;max-width:72%;color:#eedb9d;font-size:14px;font-weight:850;line-height:20px;
  text-align:center;overflow-wrap:anywhere;
}
#menuSettingsPanel#menuSettingsPanel .settings-section-heading::before,
#menuSettingsPanel#menuSettingsPanel .settings-section-heading::after {
  content:"" !important;display:block !important;position:static !important;pointer-events:none !important;
  flex:1 1 0 !important;min-width:22px !important;height:20px !important;
  background:url("assets/generated/unlock_showcase_item_v2_1792936800300/item-unlock-divider-alpha.png") right center / 280% auto no-repeat !important;
  opacity:.62 !important;border:0 !important;
  filter:grayscale(1) sepia(.85) saturate(.8) !important;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 94%,transparent);
}
#menuSettingsPanel#menuSettingsPanel .settings-section-heading::before {
  background-position:left center !important;text-shadow:none !important;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 82%,transparent);
}

/* Keep the total feature stack height unchanged: give the long trait 20px
   from the short ascent row, including multi-row core-stat variants. */
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats[data-feature-count="2"]:has(> [data-stat-label="등급 특성"]) {
  --review-core-rows:1;grid-template-rows:repeat(var(--review-core-rows),50px) 72px 60px !important;
  height:calc(var(--review-core-rows) * 56px + 138px) !important;gap:6px 0 !important;
}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats[data-core-row-count="2"] {--review-core-rows:2;}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats[data-core-row-count="3"] {--review-core-rows:3;}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats[data-core-row-count="4"] {--review-core-rows:4;}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats[data-core-row-count="5"] {--review-core-rows:5;}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats[data-feature-count="2"]:has(> [data-stat-label="등급 특성"]) > .fusion-stat-ascent-power {height:60px !important;min-height:60px !important;padding:8px 24px !important;}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats:has(> [data-stat-label="등급 특성"]) > .fusion-stat-ascent-power {display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:4px !important;}
#fusionPanel#fusionPanel#fusionPanel #fusionResultStats:has(> [data-stat-label="등급 특성"]) > .fusion-stat-ascent-power > :is(small,strong) {display:block !important;position:static !important;transform:none !important;margin:0 !important;padding:0 !important;width:100% !important;height:auto !important;min-height:0 !important;max-height:none !important;line-height:14px !important;flex:0 0 auto !important;text-align:center !important;overflow:visible !important;}
/* Grade upgrades use only the visible stats; never reserve attack/armor/HP slots. */
html body #fusionPanel#fusionPanel#fusionPanel[data-fusion-kind="upgrade"] #fusionResultStats[data-core-count][data-feature-count] {
  grid-template-columns: repeat(62, minmax(0, 1fr)) !important;
}
html body #fusionPanel#fusionPanel#fusionPanel[data-fusion-kind="upgrade"] #fusionResultStats > .fusion-stat-core[data-core-index] {
  grid-column: var(--fusion-core-column) / span var(--fusion-core-span) !important;
  grid-row: var(--fusion-core-row) !important;
}
#combatStatsDetailList .combat-growth-rule {
  padding: 12px 6px;
  color: #b6cbd2;
  font-size: 12px;
  line-height: 1.6;
}
#combatStatsDetailList .combat-growth-rule b { color: #f1db98; }
#combatStatsDetailList .combat-growth-rule p { margin: 5px 0 0; }


/* SOURCE: ui/styles/rewards/victory-shared-v3.css */
#endPanel.victory .end-card { background: none !important; }
#endPanel.victory .defeat-card-frame-art { display:block !important; }
#endPanel.victory .run-result-hero img { object-fit:contain !important; mix-blend-mode:screen; mask-image:radial-gradient(ellipse 53% 53% at center, #000 72%, transparent 100%); }
#endPanel.victory .end-actions { grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-template-rows:36px 42px 36px !important; row-gap:5px !important; }
#endPanel.victory .end-actions > [hidden] { display:none !important; }
#endPanel.victory .end-actions #endShardBonusButton:not([hidden]) {
 display:flex !important; grid-column:1/-1 !important; grid-row:1 !important; width:94% !important; height:36px !important; justify-self:center !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:0 18px !important; font-size:11px !important;
}
#endPanel.victory .end-actions #endDepthsButton:not([hidden]) {
 display:flex !important; grid-column:1/-1 !important; grid-row:2 !important; width:100% !important; height:42px !important; min-height:0 !important; margin:0 !important; padding:0 24px !important; align-items:center !important; justify-content:center !important;
 background:url("assets/generated/victory_depth_button_v10_1795555500003/button-depths-amethyst-final.png") center/100% 100% no-repeat !important; border:0 !important; box-shadow:none !important;
}
#endPanel.victory #endDepthsButton > span { font-size:15px !important; line-height:18px !important; color:#fff0ad; }
#endPanel.victory #endDepthsButton > small { display:none !important; }
#endPanel.victory .end-actions #endRestartButton,
#endPanel.victory .end-actions #endHomeButton {
 grid-row:3 !important; width:100% !important; height:36px !important; margin:0 !important; padding:0 16px !important; font-size:12px !important; justify-self:center !important;
 background-image:url("assets/generated/defeat_result_buttons_v14_1791552000340/defeat-button-compact-balanced-final.png") !important;
}
#endPanel.victory .end-actions #endRestartButton { grid-column:1 !important; }
#endPanel.victory .end-actions #endHomeButton { grid-column:2 !important; }
#endPanel.victory .end-actions .end-action-label { position:static !important; inset:auto !important; display:block !important; transform:none !important; width:auto !important; height:auto !important; line-height:16px !important; }
#endPanel.victory:not(.depths-choice) .end-actions #endRestartButton {
 grid-column:1/-1 !important; grid-row:2 !important; height:42px !important; background-image:url("assets/generated/defeat_result_buttons_v14_1791552000340/defeat-button-restart-balanced-final.png") !important; font-size:15px !important;
}
#endPanel.victory:not(.depths-choice) .end-actions #endHomeButton {
 grid-column:1/-1 !important; grid-row:3 !important; width:82% !important; background-image:url("assets/generated/defeat_result_buttons_v14_1791552000340/defeat-button-home-balanced-final.png") !important;
}


/* SOURCE: ui/styles/combat/hero-v7-production.css */
/* Approved 384px canvas, 220 logical pixels; foot anchor (192,312).
   Matches V7 game preview using the legacy 1.14 sprite scale and foot baseline.
   Keep transparent sword margins: never crop individual frames. */
#playerFighter #playerSprite.hero-v7 {
  position: absolute !important;
  width: 198.981818% !important;
  height: 198.981818% !important;
  max-width: none !important;
  left: -49.490909% !important;
  top: -65.409091% !important;
  transform: none !important;
  translate: none !important;
  object-fit: contain !important;
}


/* SOURCE: ui/styles/shared/designer-surface-fit-v1.css */
/* Targeted visual corrections. Preserve accepted painted frames and controls. */
body #menuCompanionPanel .companion-summon-card.common > .companion-mythic-pity-status {
  position: absolute !important;
  display: flex !important;
  bottom: 42px !important;
  left: 8% !important;
  width: 84% !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: 0 !important;
  color: #ede2b5 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  z-index: 5 !important;
}
body #menuCompanionPanel .companion-summon-card.common > .companion-mythic-pity-status :is(span,b) {
  font-size: 9px !important;
  white-space: nowrap !important;
  color: inherit !important;
}
#itemInfoElementBadge {
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 10 !important;
}
.main-menu:is([data-panel="store"], [data-panel="companions"]) {
  background: #050c14 !important;
}
.main-menu:is([data-panel="store"], [data-panel="companions"]) .menu-scene {
  background: #050c14 !important;
}
.main-menu:is([data-panel="store"], [data-panel="companions"]) .menu-scene::before,
.main-menu:is([data-panel="store"], [data-panel="companions"]) .menu-scene::after,
.main-menu:is([data-panel="store"], [data-panel="companions"]) .menu-characters {
  display: none !important;
}
body .beginner-context-guide p {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}


/* SOURCE: ui/styles/shared/designer-audit-fixes-v2.css */
/* Each painted cell retains its own content anchors. Item detail is excluded. */
html body #menuCompanionPanel .collection-party-position.filled {
  padding: 25px 12px 18px !important;
  grid-template-columns: 38px minmax(0,1fr) !important;
  grid-template-rows: 16px 32px 14px auto !important;
  row-gap: 3px !important;
  align-content: start !important;
}
html body #menuCompanionPanel .collection-party-position.filled > img {
  grid-row: 2 / 4 !important; width: 38px !important; height: 44px !important;
}
html body #menuCompanionPanel .collection-party-position.filled > p {
  grid-column: 1 / -1 !important; grid-row: 4 !important;
  margin: 3px 2px 0 !important; font-size: 10.5px !important; line-height: 15px !important;
  text-align: center !important; word-break: keep-all !important;
}
html body #menuCompanionPanel .collection-party-position.primary > .collection-party-role,
html body #menuCompanionPanel .collection-party-position.support > .collection-party-role { align-self:center !important; }

/* Mythic only: one width per independent recess, including the short stats. */
html body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] .fusion-card {
  height: 700px !important; aspect-ratio:auto !important;
}
html body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] .fusion-absorb,
html body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] .fusion-result {
  left: 12% !important; right:12% !important; width: 76% !important;
}
html body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats[data-core-count][data-feature-count] {
  top: calc(16% + 160px) !important;
  left: 12% !important; right:12% !important; width: 76% !important; padding: 0 0 8px !important;
  display: flex !important; flex-direction: column !important; gap: 7px !important;
}
html body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > span.fusion-stat-card {
  box-sizing: border-box !important; width: 100% !important; min-width: 0 !important;
  flex: 0 0 auto !important; min-height: 55px !important; height: auto !important;
  margin: 0 !important; padding: 11px 18px !important;
}
html body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > .fusion-stat-card.mythic-power-summary {
  min-height: 108px !important; display: flex !important; flex-direction:column !important; gap: 4px !important;
}
html body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item #fusionResultStats > .mythic-power-summary strong {
  display: block !important; height:auto !important; transform:none !important;
}
html body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats .mythic-power-summary strong em {
  display: block !important; margin-top: 5px !important; font-size: 11px !important; line-height: 16px !important;
}
html body #menuCompanionPanel .collection-party-position.filled { min-height: 190px !important; padding-bottom:24px !important; }

/* Quiet existing art: no second ornamental outline around the four actions. */
/* Purpose-drawn wide information plate. Sprite registration removes the
   generator's transparent top/bottom margin without distorting corner joints. */
html body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionResultStats > span.fusion-stat-card:not(.mythic-power-summary) {
  width:calc(100% - 8px) !important; margin-inline:4px !important;
  background-image:url('assets/generated/mythic_stat_recess_20260908/stat-plaque-rounded-v5.png') !important;
  background-size:101.5% 255.8% !important;
  background-position:center 49.8% !important;
  border-radius:10px !important;
  background-repeat:no-repeat !important;
}
html body #fusionPanel.fusion-panel.structured-fusion-result.mythic-item[data-fusion-kind][data-result-core-count][data-result-feature-count] #fusionCloseButton {
  bottom:44px !important;
}
html body #fusionPanel.mythic-item .mythic-fusion-scroll-hint { bottom:94px !important; }
html body #menuCompanionPanel .companion-summon-card:is(.common,.premium) .companion-summon-actions > button[data-companion-summon][data-count]::before {
  inset: 0 !important;
  background: transparent url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-wide-v5-final.png') center / 100% 100% no-repeat !important;
  filter: saturate(.35) !important;
}
html body #menuCompanionPanel .companion-summon-card:is(.common,.premium) .companion-summon-actions > button[data-companion-summon][data-count]::after { content:none !important; }
html body #menuCompanionPanel .companion-summon-card .companion-summon-actions > button {
  padding: 4px 6px !important; row-gap: 2px !important;
}

/* More vertical room in the same ten painted wells; no new card design. */
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-stage {
  height: min(740px, calc(100dvh - 28px)) !important; aspect-ratio: auto !important;
  max-height: none !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
  grid-template-columns: 37px minmax(0,1fr) !important; grid-template-rows: 13px 34px !important;
  column-gap: 4px !important; padding: 5px 4px !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-name {
  font-size: 11px !important; line-height: 15px !important; height:auto !important;
  letter-spacing: -.025em !important; color:#f6ead7 !important; transform:none !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] #companionSummonRevealResults .summon-reveal-card-name {
  white-space:normal !important; text-overflow:clip !important; overflow:visible !important;
  -webkit-line-clamp:unset !important; display:block !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-grade {
  font-size: 10px !important; line-height: 13px !important; transform:none !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-title {
  top: 7.85% !important; height:6.4% !important; padding:0 !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-type="premium"][data-count="10"] .companion-summon-reveal-title { top:7.4% !important; }
/* Summary plaque is independently seated, not moved with the title/cards. */
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-count {
  top:73.8% !important; bottom:auto !important; height:9.4% !important;
  padding:0 !important; margin:0 !important; display:flex !important;
  flex-direction:column !important; justify-content:center !important; gap:5px !important;
}
html body #combatStatsPanel .combat-effect-group { grid-template-columns:1fr !important; row-gap:7px !important; padding:12px 0 !important; }
html body #combatStatsPanel .combat-effect-group > strong { display:flex !important; gap:8px !important; }
html body #combatStatsPanel .combat-effect-group > div > span {
  display:block !important; font-size:12px !important; line-height:19px !important; margin-bottom:8px !important;
  word-break:keep-all !important;
}
html body #combatStatsPanel .combat-stat-detail > span { font-size:11px !important; line-height:16px !important; }
html body #unlockShowcase .effect-source-gear img {
  background: radial-gradient(ellipse, color-mix(in srgb,var(--source-grade) 7%,#0c1014),#080b10) !important;
  border-color:color-mix(in srgb,var(--source-grade) 24%,#645b48) !important;
  border-radius:3px !important;
}


/* SOURCE: ui/styles/shared/designer-audit-selected-v3.css */
/* Approved audit IDs: 1,2,8,10,11,12,13,14,15.
   6/7 reverted; 3,4,5,9 unchanged; 16 cancelled. */
:root { --audit-recess-art:url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png'); }
/* Fixed-size corners; never stretch a whole horizontal bitmap vertically. */
html body #menuCompanionPanel .collection-party-position::before {
  background:none !important; border:0 solid transparent !important;
  border-image:var(--audit-recess-art) 160 fill / 13px / 0 stretch !important;
  opacity:.9 !important;
}
html body #menuCompanionPanel .companion-odds-list > span {
  background:none !important; border:0 solid transparent !important;
  border-image:var(--audit-recess-art) 160 fill / 10px / 0 stretch !important;
  min-height:44px !important; padding:7px 20px !important; box-sizing:border-box !important;
}
html body #menuCompanionPanel .companion-odds-list { gap:7px !important; }
html body #menuCompanionPanel .companion-odds-list > span b,
html body #menuCompanionPanel .companion-odds-list > span em { font-size:14px !important; line-height:20px !important; }
html body #menuCompanionPanel #companionOddsPity {font-size:10.5px !important;line-height:16px !important;word-break:keep-all;}
html body #menuRankingPanel .ranking-scope-summary {
  background:none !important; border:0 solid transparent !important;
  border-image:var(--audit-recess-art) 160 fill / 9px / 0 stretch !important;
  padding:12px 17px !important; min-height:40px !important; box-sizing:border-box !important;
  font-size:11px !important;line-height:16px !important;
}
/* 6/7 reverted on request; preserve their original artwork. */
html body #menuSettingsPanel #cloudLogoutButton {
  width:100% !important; min-width:0 !important; max-width:100% !important;
  box-sizing:border-box !important; justify-self:center !important;
}
html body #menuAttendancePanel .attendance-reward-copy {
  bottom:12px !important;height:13px !important;left:7px !important;right:7px !important;
}
html body #menuAttendancePanel .attendance-reward-copy strong {font-size:8.5px !important;line-height:12px !important;}
html body #menuAttendancePanel .attendance-reward-copy small {font-size:9.5px !important;line-height:12px !important;}
html body #menuAttendancePanel .attendance-week-tabs button {font-size:10px !important;}
html body #menuAttendancePanel .attendance-note {font-size:9px !important;line-height:13px !important;padding:7px 15px !important;}
html body #menuCreditsPanel .credits-intro::before {content:none !important;}
html body :is(#menuRecipePanel,#menuElementPanel,#menuCodexPanel) .element-cycle-copy {height:auto !important;min-height:84px !important;padding:10px 13px !important;}
html body :is(#menuRecipePanel,#menuElementPanel,#menuCodexPanel) .element-cycle-copy > small {font-size:10px !important;line-height:15px !important;display:block;word-break:keep-all;}
html body :is(#menuRecipePanel,#menuElementPanel,#menuCodexPanel) .element-cycle-sequence {font-size:12px !important;line-height:18px !important;}
html body :is(#menuRecipePanel,#menuElementPanel,#menuCodexPanel) .element-pair-strip {height:auto !important;min-height:62px !important;padding:10px !important;}
html body :is(#menuRecipePanel,#menuElementPanel,#menuCodexPanel) .element-pair-strip > strong {font-size:10px !important;line-height:15px !important;display:flex !important;flex-direction:column !important;gap:5px !important;}
html body :is(#menuRecipePanel,#menuElementPanel,#menuCodexPanel) .element-pair-strip > strong > span {display:block !important;white-space:normal !important;}
html body :is(#menuRecipePanel,#menuElementPanel,#menuCodexPanel) .element-pair-strip > strong > small {font-size:9px !important;line-height:14px !important;white-space:normal !important;}
html body #unlockShowcase .effect-source-gear img {border:0 !important;background:transparent !important;box-shadow:none !important;}


/* SOURCE: ui/styles/combat/combat-hud-restore-v1.css */
/* Independently positioned portraits; approved artwork only. */
#playerFighter #combatCompanions { position:absolute; inset:0; pointer-events:none; z-index:8; }
#playerFighter #combatCompanions .combat-companion { position:absolute; width:30px; height:30px; }
#playerFighter #combatCompanions .primary { right:-3px; top:25px; }
#playerFighter #combatCompanions .support { left:-5px; bottom:23px; }
#playerFighter #combatCompanions .combat-companion img { position:static!important; display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:contain!important; transform:none!important; animation:none!important; filter:drop-shadow(0 1px 2px #000)!important; }
#combatCompanions small { position:absolute; bottom:-2px; right:0; color:#f6e4a4; font-size:8px; line-height:10px; text-shadow:0 1px 2px #000,1px 0 2px #000; }
#combatCompanions .combat-companion { pointer-events:auto; border:0; padding:0; margin:0; background:transparent; box-shadow:none; cursor:pointer; }
#combatCompanions .combat-companion:focus-visible { outline:1px solid #e0c77e; outline-offset:3px; }
#enemySkillReadiness { position:absolute; right:12px; top:7px; bottom:auto; z-index:9; display:flex; gap:3px; pointer-events:none; }
#enemySkillReadiness[hidden] { display:none; }
.enemy-skill-token { position:relative; display:block; width:22px; height:22px; background: url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png') center/100% 100% no-repeat; }
.enemy-skill-token img { width:100%; height:100%; object-fit:contain; }
.enemy-skill-token.used img { filter:grayscale(1); opacity:.3; }
.enemy-skill-token small { position:absolute; right:-1px; bottom:-2px; color:#fae6a7; font-size:9px; text-shadow:0 1px 2px #000; }
.enemy-skill-clock { display:none; position:absolute; inset:1px; border-radius:50%; background:conic-gradient(rgba(0,0,0,.78) var(--cooldown-turn), transparent 0); }
.enemy-skill-token.cooling .enemy-skill-clock { display:block; }
.enemy-skill-token.cooling small, .enemy-skill-token.queued small { inset:0; display:flex; align-items:center; justify-content:center; font-family:Arial,sans-serif; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; color:#fff3d0; text-shadow:0 1px 2px #000, 1px 0 2px #000, -1px 0 2px #000; }
.enemy-skill-token.queued small { font-family:inherit; font-size:8px; }
.enemy-skill-token.queued img { opacity:.55; }
/* Reserve the upper enemy row for clocks; casting labels use the row below. */
#fightStage:has(#enemySkillReadiness:not([hidden])) .skill-fx[data-cue-side="enemy"],
#fightStage:has(#enemySkillReadiness:not([hidden])) #enemySkillBanner { top:30px!important; }
#bagPanel > .panel-head > div:first-child { display:flex; align-items:center; gap:4px; width:auto; min-width:0; }
#bagPanel > .panel-head > div:first-child > h2 { white-space:nowrap; flex:none; width:auto; font-size:13px!important; }
#bagPanel #companionWorkshopEntry { margin:0!important; padding:0!important; flex:none; background:none!important; border:0!important; }
#bagPanel #companionWorkshopEntry > small { display:none; }
#bagPanel #companionWorkshopEntry > button { flex:none; width:70px; height:26px; min-height:0; padding:0 4px; border:0; color:#efdfa7; font-size:10px; line-height:26px; background:transparent url('assets/generated/settings_controls_v2_1793462400000/settings-action-button-v2-final.png') center/100% 100% no-repeat; }
body #menuSettingsPanel #cloudLogoutButton { width:104px!important; height:32px!important; padding:0 8px!important; border:0!important; border-radius:0!important; background:transparent url('assets/generated/settings_controls_v2_1793462400000/settings-danger-button-v2-final.png') center/100% 100% no-repeat!important; color:#f4dfb2!important; line-height:32px!important; box-shadow:none!important; text-shadow:0 1px 2px #000!important; }
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row { padding-top:28px!important; padding-bottom:28px!important; height:auto!important; min-height:min-content!important; }
#enemyInfoPanel#enemyInfoPanel #enemyInfoList { grid-auto-rows:max-content!important; align-content:start!important; overflow-y:auto!important; scrollbar-width:none; }
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-name { overflow-wrap:anywhere; }
/* Three ordinary opponents need less vertical padding than a long solo boss. */
#enemyInfoPanel#enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row {
  padding-top:20px!important;
  padding-bottom:20px!important;
}
#bagPanel #companionWorkshopEntry > button:disabled { opacity:.48; filter:grayscale(.75); }
/* Optional comparison only: do not replace the approved surrounding layout. */
.companion-inline-preview #combatCompanions { position:absolute; left:104px; bottom:10px; display:flex; gap:3px; pointer-events:none; }
.companion-inline-preview #combatCompanions .combat-companion { position:relative; display:block; width:21px; height:21px; }
.companion-inline-preview #combatCompanions img { width:100%; height:100%; object-fit:contain; }
.companion-inline-preview .player-stage-hud > .unit-name { max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#bagPanel .bag-effect-summary .effect-summary-list .effect-summary-chip {
  flex: 0 0 auto !important;
  height: 48px !important;
  min-height: 48px !important;
  overflow: visible !important;
  transform: none !important;
  width: 100% !important;
  margin: 0 !important;
}
#bagPanel .bag-effect-summary .effect-summary-list {
  grid-auto-rows: minmax(48px, auto) !important;
  box-sizing: border-box !important;
  padding: 0 2px !important;
  min-width: 0 !important;
}
#bagPanel .bag-effect-summary .effect-summary-scroll {
  scrollbar-width: none !important;
  position: relative !important;
  left: -3.5px !important;
}
#bagPanel .bag-effect-summary .effect-summary-scroll::-webkit-scrollbar {
  display: none !important;
}


/* SOURCE: ui/styles/menus/store-section-refine-v1.css */
/* Section headings: reuse the game's recessed metal artwork, with legible hierarchy. */
body #menuStorePanel .store-product-group-head {
  height: 58px !important;
  min-height: 58px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 14px !important;
  border: 0 !important;
  background: transparent url("assets/generated/bag_content_gothic_1790601600072/bag-section-header.png") center/100% 100% no-repeat !important;
}
body #menuStorePanel .store-product-group-head strong {
  font-size: 15px !important;
  line-height: 18px !important;
  margin: 0 !important;
  transform: none !important;
}
body #menuStorePanel .store-product-group-head small {
  font-size: 10px !important;
  line-height: 12px !important;
  text-align: center !important;
  margin: 0 !important;
}
/* Light stays behind the merchandise; the approved metal frames stay intact. */
body #menuStorePanel .store-ticket-visual {
  isolation: isolate;
}
body #menuStorePanel .store-ticket-visual::before {
  content: none;
  position: absolute;
  inset: -6px -4px -3px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 52%, rgba(171, 83, 255, .42), rgba(88, 35, 145, .18) 42%, transparent 72%);
}
body #menuStorePanel .store-ticket-visual[data-layers="1"]::before { opacity: .55; }
body #menuStorePanel .store-ticket-visual[data-layers="2"]::before { opacity: .7; }
body #menuStorePanel .store-ticket-visual[data-layers="5"]::before,
body #menuStorePanel .store-ticket-visual[data-layers="6"]::before {
  background: radial-gradient(ellipse at 50% 52%, rgba(255, 202, 118, .28), rgba(168, 72, 255, .4) 32%, transparent 73%);
}
body #menuStorePanel .store-ticket-leaf {
  filter: brightness(1.04) saturate(1.06) drop-shadow(0 2px 2px #080412);
}
body #menuStorePanel .store-ticket-leaf:last-child {
  filter: brightness(1.1) saturate(1.08) drop-shadow(0 1px 2px #080412);
}
body #menuStorePanel .store-bundle-contents {
  background: none;
}
body #menuStorePanel .store-bundle-resource > img {
  filter: brightness(1.08) saturate(1.05) drop-shadow(0 1px 1px #080412);
}
body #menuStorePanel .store-buy-button {
  filter: brightness(1.24);
}
body #menuStorePanel .store-buy-button b {
  color: #fff0be !important;
  text-shadow: 0 1px 2px #000, 0 0 5px #d9a64840 !important;
}


/* SOURCE: ui/styles/combat/combat-text-fit-v6.css */
/* Register text and icons independently to the existing painted recesses. */
#fightStage .fight-feedback-slot,
#fightStage .fight-feedback-slot:has(.clash-mark) { width:80px!important; height:26px!important; min-height:0!important; bottom:27px!important; }
#fightStage .clash-mark,
#fightStage .clash-mark:is(.entrance,.freeze,.reflect,.kill) { position:absolute!important; left:0!important; top:0!important; width:80px!important; height:26px!important; min-width:0!important; min-height:0!important; margin:0!important; transform:none!important; font-size:9px!important; padding:0 5px 0!important; line-height:1!important; white-space:nowrap!important; }
#fightStage .clash-mark.flash,
#fightStage .clash-mark:is(.entrance,.freeze,.reflect,.kill).flash { animation:combatTextFadeV6 1000ms ease-out both!important; }
#fightStage .critical-mark { width:80px!important; height:26px!important; top:0!important; padding:0!important; font-size:9px!important; }
@keyframes combatTextFadeV6 { 0%,100% { opacity:0; } 12%,80% { opacity:1; } }
#fightStage .skill-fx { width:var(--combat-cue-width,90px)!important; height:26px!important; }
#fightStage #skillFxIcon { width:20px!important; height:20px!important; top:5px!important; }
#fightStage #skillFxLabel,
#fightStage .skill-fx[data-cue-kind="seraph"] #skillFxLabel { left:19px!important; height:22px!important; top:4px!important; padding:0 6px 0!important; font-size:9px!important; white-space:nowrap!important; }
#fightStage .combat-unit-status { padding-top:0!important; padding-bottom:0!important; }
#fightStage .combat-unit-status[data-kind="stun"],
#fightStage .combat-unit-status[data-kind="sleep"],
#fightStage .combat-unit-status[data-kind="root"],
#fightStage .combat-unit-status[data-kind="bubble"],
#fightStage .combat-unit-status[data-kind="time"],
#fightStage .combat-unit-status[data-kind="seal"] { padding-top:0!important; padding-bottom:0!important; }
#fightStage .boss-cutin #bossCutinKind,
#fightStage .boss-cutin #bossCutinText { display:none!important; }
#fightStage .boss-cutin::before { content:""!important; display:block!important; position:absolute!important; left:12.2%!important; top:25.5%!important; width:14.2%!important; height:42.6%!important; background:#070d13!important; border:0!important; border-radius:50%!important; transform:none!important; }
#fightStage .boss-cutin #bossCutinIcon { left:13%!important; top:26%!important; width:12%!important; height:36%!important; z-index:1; }
#fightStage .boss-cutin #bossCutinTitle { left:29.5%!important; right:10.5%!important; top:32%!important; height:29%!important; padding-top:1px!important; font-size:13px!important; }
/* Shield HP continues the health fill in blue. */
/* Keep the enemy cue icon at the outer edge, away from the face. */
#fightStage .skill-fx[data-cue-side="enemy"] #skillFxIcon { left:auto!important; right:0!important; }
#fightStage .skill-fx[data-cue-side="enemy"] #skillFxLabel { left:0!important; right:19px!important; }
/* Dim only the existing painted frame; foreground glyphs stay unchanged. */
#fightStage .clash-mark:is(.entrance,.freeze,.reflect,.kill),
#fightStage .critical-mark,
#fightStage #skillFxLabel { isolation:isolate; background-size:0 0!important; }
#fightStage .clash-mark:is(.entrance,.freeze,.reflect,.kill)::before,
#fightStage .critical-mark::before,
#fightStage #skillFxLabel::before { content:""!important; display:block!important; position:absolute!important; inset:0!important; width:100%!important; height:100%!important; border:0!important; border-radius:0!important; background-image:inherit!important; background-position:center!important; background-repeat:no-repeat!important; background-size:100% 100%!important; filter:brightness(.78) saturate(.72)!important; transform:none!important; z-index:-1!important; pointer-events:none; }
#fightStage #playerDamageFloat.player-damage,
#fightStage #damageFloat.enemy-damage,
#fightStage .shield-damage-float { width:64px!important; min-width:64px!important; text-align:center!important; font-size:16px!important; font-style:normal!important; line-height:18px!important; }
#fightStage #playerDamageFloat.player-damage { left:calc(23% - 32px)!important; right:auto!important; top:48px!important; }
#fightStage #damageFloat.enemy-damage { left:calc(77% - 32px)!important; right:auto!important; top:48px!important; }
#fightStage #playerDamageFloat.player-damage.show,
#fightStage #damageFloat.enemy-damage.show { animation:shieldDamageRise 900ms ease-out both!important; }
#fightStage .shield-damage-float { top:48px!important; right:58px!important; color:#82d9ff!important; font-size:18px!important; font-weight:900!important; line-height:1!important; border:0!important; background:none!important; padding:0!important; min-width:0!important; text-shadow:0 2px 1px #001624,1px 0 1px #001624,-1px 0 1px #001624!important; z-index:32!important; }
#fightStage .shield-damage-float[data-side="player"] { left:calc(23% - 32px)!important; right:auto!important; font-size:16px!important; }
#fightStage .shield-damage-float[data-side="enemy"] { left:calc(77% - 32px)!important; right:auto!important; font-size:16px!important; }
#fightStage .shield-damage-float.with-hp-damage { top:71px!important; }
#fightStage .shield-damage-float.show { animation:shieldDamageRise 900ms ease-out both!important; }
@keyframes shieldDamageRise { 0%{opacity:0;transform:translateY(8px)} 18%,70%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-6px)} }
html[data-qa-combat-effects-hold="1"] #fightStage .shield-damage-float.show { animation:none!important; opacity:1!important; transform:none!important; }
#fightStage .hpbar { position:relative; }
#fightStage .hpbar > .combat-shield-fill { position:absolute!important; top:0!important; bottom:0!important; height:100%!important; background:linear-gradient(#a6eeff,#329de4)!important; border-radius:0 3px 3px 0!important; transition:width .12s linear,left .12s linear; }
#fightStage .hpbar > .combat-shield-fill[hidden] { display:none!important; }
#fightStage .stage-hp-text .combat-shield-value { display:inline!important; position:static!important; color:#82d9ff!important; font-size:9px!important; margin-left:3px; text-shadow:0 1px 2px #001624; }


/* SOURCE: ui/styles/companions/companion-summon-finish-v1.css */
/* Keep the original painted wells; move only the ten-pull grade/name copy. */
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"][data-type="common"] .companion-summon-reveal-title {
  transform: translateY(-6px) !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] #companionSummonRevealResults .summon-reveal-card-name,
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] #companionSummonRevealResults .summon-reveal-card-grade {
  transform: translateX(-4px) !important;
  width: 100% !important;
  max-width: 60px !important;
}
html body #companionSummonRevealConfirm:disabled {
  opacity: .45 !important;
  cursor: default !important;
  pointer-events: none !important;
}
html body .companion-summon-reveal > .summon-celebration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  pointer-events: none;
}


/* SOURCE: ui/styles/companions/companion-expedition-v1.css */
/* Independent audio copy corrections; switches, sliders and values stay put. */
html body #menuSettingsPanel .audio-setting-bgm .audio-setting-name { transform: translateX(8px); }
html body #menuSettingsPanel .audio-setting-sfx .audio-setting-name { transform: translateX(8px); }
html body #menuCompanionPanel .companion-grade-filters {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 3px;
  margin: 3px 18px 8px;
}
html body #menuCompanionPanel .companion-grade-filters button {
  min-width: 0; height: 30px; padding: 0; border: 0;
  background: var(--collection-button) center/100% 100% no-repeat;
  color: #b3aa94; font-size: 10px; filter: brightness(.7);
}
html body #menuCompanionPanel .companion-grade-filters button.active {
  color: #ffe6a1; filter: brightness(1);
}
html body #menuCompanionPanel .companion-grade-filters button:focus-visible { outline: 1px solid #d8b568; }


/* SOURCE: ui/styles/shared/game-i18n-layout.css */
/* Long Latin recipe names need their own row above placement instructions. */
html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #codexGuideBody .collection-recipe-card {
  aspect-ratio: auto !important;
  padding: 12px 16px !important;
}
html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #codexGuideBody .collection-recipe-card::before {
  background-size: 100% 100% !important;
  mask: none !important;
  clip-path: polygon(3.204% 2.992%, 96.685% 2.992%, 98.84% 7.48%, 98.84% 92.75%, 96.63% 97.353%, 3.204% 97.353%, 1.105% 92.75%, 1.105% 7.48%) !important;
}
html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #codexGuideBody .collection-recipe-card > header,
html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #codexGuideBody .collection-recipe-formula,
html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #codexGuideBody .collection-recipe-card > p,
html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #codexGuideBody .collection-recipe-source {
  position: static !important;
}
html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #codexGuideBody .collection-recipe-formula {
  margin: 6px 0 !important;
  align-items: stretch !important;
}
html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #codexGuideBody .collection-recipe-part {
  height: auto !important;
  justify-content: flex-start !important;
}

html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #codexGuideBody .collection-recipe-source { display: block !important; }

/* The Japanese Lion Oath recipe also wraps into the instruction row at 360px. */
html[lang="ja"] body #codexGuideBody .collection-recipe-card[data-recipe-record="lionOath"] {
  aspect-ratio: auto !important;
  padding: 12px 16px !important;
}
html[lang="ja"] body #codexGuideBody .collection-recipe-card[data-recipe-record="lionOath"]::before {
  background-size: 100% 100% !important;
  mask: none !important;
  clip-path: polygon(3.204% 2.992%, 96.685% 2.992%, 98.84% 7.48%, 98.84% 92.75%, 96.63% 97.353%, 3.204% 97.353%, 1.105% 92.75%, 1.105% 7.48%) !important;
}
html[lang="ja"] body #codexGuideBody .collection-recipe-card[data-recipe-record="lionOath"] > header,
html[lang="ja"] body #codexGuideBody .collection-recipe-card[data-recipe-record="lionOath"] .collection-recipe-formula,
html[lang="ja"] body #codexGuideBody .collection-recipe-card[data-recipe-record="lionOath"] > p,
html[lang="ja"] body #codexGuideBody .collection-recipe-card[data-recipe-record="lionOath"] .collection-recipe-source {
  position: static !important;
}
html[lang="ja"] body #codexGuideBody .collection-recipe-card[data-recipe-record="lionOath"] .collection-recipe-formula {
  margin: 6px 0 !important;
  align-items: stretch !important;
}
html[lang="ja"] body #codexGuideBody .collection-recipe-card[data-recipe-record="lionOath"] .collection-recipe-part {
  height: auto !important;
  justify-content: flex-start !important;
}

html[lang="ja"] body #codexGuideBody .collection-recipe-card[data-recipe-record="lionOath"] .collection-recipe-source { display: block !important; }

html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #codexGuideBody .collection-recipe-part strong,
html[lang="ja"] body #codexGuideBody .collection-recipe-card[data-recipe-record="lionOath"] .collection-recipe-part strong { flex: 1 !important; }

.settings-language-group { display: grid; gap: 8px; }
body #menuSettingsPanel#menuSettingsPanel.active { display: flex !important; flex-direction: column !important; }
body #menuSettingsPanel#menuSettingsPanel > .menu-panel-head { flex: 0 0 50px !important; }
body #menuSettingsPanel#menuSettingsPanel .settings-content-scroll { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; scrollbar-width: thin; overscroll-behavior: contain; }
body #menuSettingsPanel#menuSettingsPanel .settings-content-scroll > :is(.settings-gothic-group,.menu-game-home-box) { flex: 0 0 auto; }
.settings-language-select-frame { position: relative; width: 100%; }
#gameLanguageSelect { appearance: none; -webkit-appearance: none; width: 100%; height: 48px; min-height: 48px; box-sizing: border-box; color: #ead8af; background: transparent url("assets/generated/settings_controls_v2_1793462400000/settings-action-button-v2-final.png") center / 100% 100% no-repeat; border: 0; border-radius: 0; padding: 0 38px; font: inherit; font-size: 14px; font-weight: 700; text-align: center; text-align-last: center; cursor: pointer; }
.settings-language-select-frame > span { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: #d8c38b; font-size: 17px; line-height: 1; pointer-events: none; }
#gameLanguageSelect:focus-visible { outline: 1px solid #e6d499; outline-offset: 2px; }
#gameLanguageSelect option { color: #ead8af; background: #10191c; }
.settings-language-group > small { color: #c5b58f; line-height: 1.45; }
html:not([lang="ko"]) .settings-section-heading { flex-wrap: wrap; }
html:not([lang="ko"]) .audio-setting-name { min-width: 0; }
html:not([lang="ko"]) .audio-setting-name small { white-space: normal; }
html:not([lang="ko"]) body #menuCompanionPanel .companion-mythic-pity-status { flex-direction: column !important; gap: 2px !important; }
html:not([lang="ko"]) body #menuCompanionPanel .companion-mythic-pity-status > span { font-size: 8px !important; }
html:not([lang="ko"]) #menuAttendancePanel .attendance-summary-title strong { font-size: 12px !important; }
html:not([lang="ko"]) #menuAttendancePanel .attendance-reward-copy strong { font-size: 8px !important; }
html:not([lang="ko"]) #menuCodexPanel .codex-tab small { white-space: normal !important; line-height: 1.1 !important; }
html:not([lang="ko"]) #menuCompanionPanel .companion-common-payment button { font-size: 8px !important; }
html:not([lang="ko"]) .topbar h1 { font-size: 10px !important; }
html:not([lang="ko"]) #menuCompanionPanel .companion-payment-selector button { font-size: 7.3px !important; }
html:not([lang="ko"]) #menuCodexPanel .codex-tab > span { white-space: normal !important; }
html:not([lang="ko"]) #menuCompanionPanel .companion-summon-actions small { font-size: 8.5px !important; }
html:not([lang="ko"]) #menuAttendancePanel .attendance-summary-title strong { text-overflow: clip !important; }
html:not([lang="ko"]) body #menuCompanionPanel .companion-payment-selector button { font-size: 7px !important; }
html:not([lang="ko"]) body #menuCodexPanel .codex-tab small { font-size: 8px !important; }
/* Foreign names wrap only inside their own painted title recess. */
html:not([lang="ko"]) body #itemInfoPanel .item-info-card .item-info-head #itemInfoTitle { white-space: normal !important; overflow-wrap: anywhere !important; font-size: 11px !important; line-height: 12px !important; max-height: 36px !important; height: auto !important; transform: none !important; }
html:not([lang="ko"]) body #itemInfoPanel .item-info-card .item-info-meta-line { min-height: 12px !important; height: 12px !important; line-height: 12px !important; font-size: 7px !important; }
html:not([lang="ko"]) body #menuSettingsPanel#menuSettingsPanel .audio-setting-name > small { white-space: normal !important; line-height: 1.15 !important; }
html:not([lang="ko"]) body #itemInfoPanel .item-info-card .item-info-meta-line { min-height: 16px !important; height: 16px !important; }
/* Long descriptions extend their own original painted bay and scroll with the detail body. */
html:not([lang="ko"]) body #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] { height: auto !important; min-height: 70px !important; max-height: none !important; flex: 0 0 auto !important; padding: 12px 14px !important; }
html:not([lang="ko"]) body #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] > strong.item-readable-values { display: flex !important; flex-direction: column !important; font-size: 10px !important; line-height: 12px !important; letter-spacing: 0 !important; }
html:not([lang="ko"]) body #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout="effect"] .item-summary-part { white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; }
/* Keep the close action within the frame while long specialty rules scroll independently. */
html:not([lang="ko"]) body #menuCompanionPanel .companion-detail-dialog .companion-detail-growth { min-height: 0 !important; max-height: 132px !important; overflow-y: auto !important; font-size: 10px !important; line-height: 13px !important; overscroll-behavior: contain; }
@media (max-height:810px) { html:not([lang="ko"]) body #menuCompanionPanel .companion-detail-dialog .companion-detail-growth { max-height: 110px !important; } }
html:not([lang="ko"]) body #menuAttendancePanel .attendance-note { white-space: normal !important; height: auto !important; min-height: 30px !important; line-height: 11px !important; padding: 4px 17px !important; text-align: center !important; }
html[lang="ko"] body #menuAttendancePanel .attendance-note { white-space: normal !important; height: auto !important; min-height: 30px !important; line-height: 11px !important; padding: 4px 17px !important; text-align: center !important; }
html:not([lang="ko"]) body #menuGrowthPanel .meta-upgrade-heading strong { min-width: 0 !important; max-width: 72% !important; white-space: normal !important; font-size: 11px !important; line-height: 12px !important; }
html:not([lang="ko"]) body #menuGrowthPanel .meta-upgrade-level { font-size: 8px !important; }
html:not([lang="ko"]) body #menuStorePanel .store-product-group-head small { white-space: normal !important; line-height: 12px !important; font-size: 9px !important; overflow-wrap: anywhere !important; }
html:not([lang="ko"]) body #unlockShowcaseText { white-space: pre-line !important; max-height: none !important; font-size: 10px !important; line-height: 12px !important; }
html:not([lang="ko"]) body #boardPassiveRerollAdButton .board-passive-reroll-copy { min-width: 0 !important; }
html:not([lang="ko"]) body #boardPassiveRerollAdButton .board-passive-reroll-copy b { white-space: normal !important; font-size: 11px !important; line-height: 12px !important; }
html:not([lang="ko"]) body #boardPassiveRerollAdButton .board-passive-reroll-copy small { white-space: normal !important; font-size: 8px !important; line-height: 10px !important; }
html:not([lang="ko"]) body #boardClearSupplyPreview > span > strong { white-space: normal !important; font-size: 13px !important; line-height: 14px !important; }
html:not([lang="ko"]) body #itemInfoPanel .item-info-card .item-relation-row strong { white-space: normal !important; overflow-wrap: anywhere !important; font-size: 10px !important; line-height: 11px !important; }
/* Target-split effect bays were missed by the plain effect selector above. */
html:not([lang="ko"]) body #itemInfoPanel#itemInfoPanel .item-info-card #itemInfoStats .item-effect-detail-chip > .item-readable-values { font-size: 10px !important; line-height: 13px !important; }
html:not([lang="ko"]) body #itemInfoPanel#itemInfoPanel .item-info-card #itemInfoStats .item-effect-detail-chip .item-readable-group,
html:not([lang="ko"]) body #itemInfoPanel#itemInfoPanel .item-info-card #itemInfoStats .item-effect-detail-chip .item-summary-part { font-size: 10px !important; line-height: 13px !important; }
/* Preserve this authored bay when the CJK translation needs fewer lines. */
html:not([lang="ko"]) body #itemInfoPanel#itemInfoPanel[data-item-base-id="core"] .item-info-card #itemInfoStats .item-effect-detail-chip { min-height: 194px !important; }
/* German Dragon Vein effect only: keep the exclusions inside its painted bay. */
html[lang="de"] body #itemInfoPanel#itemInfoPanel[data-item-base-id="core"] .item-info-card #itemInfoStats .item-effect-detail-chip > .item-readable-values,
html[lang="de"] body #itemInfoPanel#itemInfoPanel[data-item-base-id="core"] .item-info-card #itemInfoStats .item-effect-detail-chip .item-summary-part {
  font-size: 9.7px !important;
  line-height: 12px !important;
}
/* Keep supply descriptions inside their painted text bay, apart from the ad action. */
html:not([lang="ko"]) body #supplyPanel .supply-action-copy strong { white-space: normal !important; overflow-wrap: anywhere; font-size: 10px; line-height: 12px; }
html:not([lang="ko"]) body #supplyPanel .supply-action-copy small { white-space: normal !important; font-size: 8px; line-height: 10px; }
html:not([lang="ko"]) body #supplyPanel .supply-action-state { white-space: normal !important; overflow-wrap: anywhere; font-size: 8px; line-height: 10px; }
html:not([lang="ko"]) body #boardPassiveChoicePanel .board-passive-choice-card > div:first-child > strong { white-space: normal !important; max-width: 100%; font-size: 18px !important; line-height: 20px !important; }
html:not([lang="ko"]) body #boardPassiveChoicePanel .board-passive-choice-card > div:first-child > small { white-space: normal !important; max-width: 100%; font-size: 9px !important; line-height: 11px !important; }

/* Indonesian clear-bag label: retain painted button size. */
html[lang=id] body #bagPanel#bagPanel #clearBagButton { font-size: 9px !important; letter-spacing: -0.2px !important; padding-inline: 3px !important; }

/* Keep the two-line shop explanation inside its own painted heading. */
html[lang=fr] body #menuStorePanel .store-product-group-head small { height: auto !important; min-height: 24px !important; max-height: none !important; }

/* End-screen translations stay inside each existing painted bay. */
/* Each translated guide tab retains its original painted 27px bay. */
html:not([lang=ko]) body #codexGuideBody .collection-guide-tabs button { white-space: normal !important; font-size: 9px !important; line-height: 10px !important; padding: 2px 4px !important; overflow-wrap: anywhere !important; }
html:not([lang=ko]) body #unlockShowcaseTitle { white-space: normal !important; overflow-wrap: anywhere !important; font-size: 18px !important; line-height: 20px !important; height: auto !important; max-height: none !important; }
html:not([lang=ko]) body :is(#menuRecipePanel,#menuElementPanel,#menuCodexPanel) .element-pair-strip > span { font-size: 8px !important; white-space: normal !important; overflow-wrap: anywhere !important; }
html:is([lang=de],[lang=id]) body #menuCodexPanel .element-pair-strip { grid-template-columns: 54px minmax(0, 1fr) 54px !important; }
html:is([lang=de],[lang=id]) body #menuCodexPanel .element-pair-strip > span { white-space: nowrap !important; overflow-wrap: normal !important; }
html[lang=ja][data-beginner-context-step="first-preparation"] body #beginnerContextText { word-break: normal !important; overflow-wrap: anywhere !important; }
html:not([lang=ko]) body :is(#menuRecipePanel,#menuElementPanel,#menuCodexPanel) .element-affinity-section > header > small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 9px !important; max-height: none !important; }
/* Full enemy names occupy their own line immediately above the unchanged HP row. */
html:not([lang=ko]) body .phone-shell > .combat-panel .enemy-stage-hud .stage-enemy-name { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 20px !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; white-space: normal !important; overflow-wrap: anywhere !important; line-height: 9px !important; }
html:not([lang=ko]) body .topbar h1 { max-width: 108px !important; white-space: normal !important; line-height: 11px !important; }
html[lang=fr] body #fightStage #battleButton { font-size: 15px !important; }
html:not([lang=ko]) body #menuLobbyPanel .lobby-side-actions button strong { white-space: normal !important; font-size: 9px !important; line-height: 10px !important; }
html:not([lang=ko]) body #menuLobbyPanel .lobby-side-actions button small { white-space: normal !important; font-size: 6.5px !important; line-height: 7px !important; }
html:not([lang=ko]) body #bagPanel #bagSellCount { font-size: 9px !important; }
html:not([lang=ko]) body #bagPanel#bagPanel #bagSellBar #bagSellCancelButton { padding-inline: 2px !important; font-size: 8px !important; }
html[lang=ja] body #rewardPanel.boss-reward .reward-card:not(.reward-ad-reroll) .reward-copy small { overflow-wrap: anywhere !important; word-break: normal !important; }
html:not([lang=ko]) body #rewardPanel.boss-reward .reward-ad-reroll .reward-copy strong { white-space: normal !important; font-size: 11px !important; line-height: 12px !important; max-height: none !important; }
/* Long item names stay readable; only the affected inventory row grows. */
html:not([lang=ko]) body #bagPanel .bag-tray-list { display: flex !important; flex-wrap: wrap !important; align-content: flex-start !important; align-items: stretch !important; gap: 5px !important; }
html:not([lang=ko]) body #bagPanel .tray-item[class*="rarity-"] { display: flex !important; flex: 0 0 calc((100% - 15px) / 4) !important; flex-direction: column !important; height: auto !important; min-height: 68px !important; max-height: none !important; gap: 1px !important; align-items: center !important; }
html:not([lang=ko]) body #bagPanel .tray-item .tray-name { display: block !important; -webkit-line-clamp: unset !important; white-space: normal !important; overflow-wrap: anywhere !important; overflow: visible !important; height: max-content !important; min-height: 20px !important; max-height: none !important; }
html:is([lang=fr],[lang=es]) body #storePurchaseConfirmPanel #storePurchaseConfirmName { font-size: 11px !important; line-height: 12px !important; }
html:is([lang=fr],[lang=es]) body #storePurchaseConfirmPanel #storePurchaseConfirmContents { font-size: 8px !important; line-height: 9px !important; }
html:not([lang=ko]) body #endPanel .run-result-hero > span { min-width: 0 !important; max-width: 100% !important; }
html:not([lang=ko]) body #endPanel .run-result-hero > span > b { white-space: normal !important; overflow-wrap: anywhere !important; font-size: 18px !important; line-height: 20px !important; }
html:not([lang=ko]) body #endPanel .run-result-hero .result-hero-note.first-companion-ticket-note { white-space: normal !important; overflow-wrap: anywhere !important; font-size: 9px !important; line-height: 11px !important; }
html:not([lang=ko]) body #endPanel:is(.defeat,.victory) .result-unlock-summary .result-unlock-heading { white-space: nowrap !important; font-size: 10px !important; line-height: 18px !important; }
html:not([lang=ko]) body #endPanel.end-panel:is(.defeat,.victory) .result-line > span[data-result-stat=power] > small { font-size: 8px !important; }

html:not([lang=ko]) body #bagPanel .tray-item .tray-name { width: 100% !important; max-width: none !important; }

html:not([lang=ko]) body #bagPanel #companionWorkshopEntry .specialty-button { white-space: nowrap !important; font-size: 9px !important; line-height: 12px !important; }
html:not([lang=ko]) body #runPrepPanel .run-prep-option > span small { display: block !important; -webkit-line-clamp: unset !important; font-size: 9px !important; line-height: 10px !important; }
html:not([lang=ko]) body .element-cycle-sequence { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 3px !important; white-space: normal !important; font-size: 10px !important; }
html:not([lang=ko]) body #rewardPanel .reward-card:not(.reward-ad-reroll) .reward-copy strong { font-size: 11px !important; line-height: 12px !important; white-space: normal !important; overflow-wrap: anywhere !important; }
html:not([lang=ko]) body #rewardPanel .reward-card:not(.reward-ad-reroll) .reward-copy small { font-size: 9px !important; line-height: 10px !important; white-space: normal !important; overflow-wrap: anywhere !important; }
html[lang=de] body #mainMenu .menu-title h1 { font-size: 29px !important; line-height: 34px !important; overflow-wrap: anywhere !important; }
html:is([lang=es],[lang=pt],[lang=fr],[lang=id]) body #bagPanel > .panel-head > div:first-child > h2 { font-size: 10px !important; }
html:not([lang=ko]) body #bagPanel .effect-summary-empty { white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; max-width: 100% !important; }
html:not([lang=ko]) body #bagPanel .bag-effect-summary.is-empty .effect-summary-empty { display: block !important; min-width: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; }
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionResultName { white-space: normal !important; overflow-wrap: anywhere !important; text-overflow: clip !important; font-size: 13px !important; line-height: 15px !important; }
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionResultStats .fusion-stat-feature strong,
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionResultStats .fusion-feature-line { white-space: normal !important; overflow-wrap: anywhere !important; font-size: 9px !important; line-height: 11px !important; }
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionResultName { height: auto !important; min-height: 0 !important; max-height: none !important; font-size: 11px !important; line-height: 12px !important; }
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionTitle { white-space: normal !important; font-size: 16px !important; line-height: 17px !important; }
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionResultStats .fusion-stat-core > small { white-space: normal !important; font-size: 7px !important; line-height: 8px !important; height: auto !important; }
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionResultStats .fusion-stat-core > strong { white-space: normal !important; overflow-wrap: anywhere !important; font-size: 9px !important; line-height: 10px !important; height: auto !important; }
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionResultStats .fusion-stat-feature > strong { grid-template-rows: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionResultStats .fusion-stat-core > small { overflow-wrap: anywhere !important; }
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionResultMeta { white-space: normal !important; overflow-wrap: anywhere !important; text-overflow: clip !important; height: auto !important; font-size: 7px !important; line-height: 8px !important; }
html:not([lang=ko]) body #fusionPanel#fusionPanel #fusionResultStats > .fusion-stat-core { grid-template-rows: auto auto !important; row-gap: 2px !important; }
html[lang=ko] body #fusionPanel#fusionPanel #fusionResultStats .fusion-stat-core > strong { white-space: normal !important; overflow-wrap: anywhere !important; font-size: 9px !important; line-height: 10px !important; height: auto !important; }
html[lang=ko] body #fusionPanel#fusionPanel #fusionResultStats > .fusion-stat-core { grid-template-rows: auto auto !important; row-gap: 2px !important; }
html[lang=ko] body .phone-shell > .combat-panel .enemy-stage-hud .stage-enemy-name { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 20px !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; white-space: normal !important; overflow-wrap: anywhere !important; line-height: 9px !important; }
/* Final nine-language review: fit only the affected painted title/metadata bays. */
html:is([lang=es],[lang=pt],[lang=fr]) body #itemInfoPanel .item-info-card .item-info-meta-line > #itemInfoMeta {
  min-width: 0 !important; width: auto !important; flex: 1 1 auto !important;
  white-space: normal !important; line-height: 8px !important; font-size: 7px !important;
}
html:is([lang=es],[lang=pt]) body #itemInfoPanel[data-item-base-id=exsboost23] .item-info-card .item-info-head #itemInfoTitle {
  font-size: 10px !important; line-height: 10px !important; flex-shrink: 0 !important;
}
html[lang=de] body #menuStorePanel .store-product-group-head small {
  height: 24px !important; min-height: 24px !important; max-height: 24px !important;
}
html:not([lang=ko]) body #itemInfoPanel#itemInfoPanel[data-item-base-id=seraphimCore] .item-info-card #itemInfoStats .item-effect-detail-chip {
  min-height: 204px !important;
}
html:not([lang=ko]) body #itemInfoPanel#itemInfoPanel[data-item-base-id=exsboost23] .item-info-card #itemInfoStats .item-effect-detail-chip {
  min-height: 114px !important;
}
/* A secret recipe may inherit a second feature; keep that bay above OK. */
html body #fusionPanel#fusionPanel.secret-fusion.structured-fusion-result[data-result-core-row-count="1"][data-result-feature-count="2"]:not(.mythic-item) .fusion-card {
  aspect-ratio: 356 / 560 !important;
}
html body #fusionPanel#fusionPanel.secret-fusion.structured-fusion-result[data-result-core-row-count="1"][data-result-feature-count="2"]:not(.mythic-item) .fusion-absorb {
  top: 66px !important;
}

html[lang=fr] body #fusionPanel#fusionPanel.secret-fusion[data-result-feature-count="2"] .fusion-stat-ascent-power > strong,
html[lang=fr] body #fusionPanel#fusionPanel.secret-fusion[data-result-feature-count="2"] .fusion-stat-ascent-power .fusion-feature-line { font-size: 8px !important; line-height: 10px !important; }
html:not([lang=ko]) body #menuGrowthPanel .meta-growth-effects { min-width: 0 !important; }
html:not([lang=ko]) body #menuGrowthPanel .meta-growth-effect-label { white-space: normal !important; overflow-wrap: anywhere !important; line-height: 12px !important; }
/* Keep only the translated summon headings that wrapped out of their 18px bay on one line. */
html:is([lang=es],[lang=fr]) body #menuCompanionPanel .companion-summon-card.premium > strong,
html[lang=de] body #menuCompanionPanel .companion-summon-card.common > strong {
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 18px !important;
}
/* The French attendance heading previously reached the painted right frame. */
html[lang=fr] body #menuAttendancePanel.menu-panel > .menu-panel-head > strong {
  font-size: 14px !important;
}

/* Keep translated names and archive summaries readable instead of ellipsizing.
   Preserve each existing card's artwork, icon and action column. */
html:not([lang="ko"]) body #menuCodexPanel #guideUnlockView .unlock-row {
  grid-template-columns: minmax(0, 1fr) !important;
}
html:not([lang="ko"]) body #menuCodexPanel #guideUnlockView .unlock-pill-copy b,
html:not([lang="ko"]) body #menuStoryArchivePanel .story-archive-copy strong,
html:not([lang="ko"]) body #menuStoryArchivePanel .story-archive-copy em {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* Long translated loot names wrap within each independently painted tray cell. */
html:not([lang="ko"]) body #capsulesPanel .inline-reveal-copy {
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}
html:not([lang="ko"]) body #capsulesPanel .inline-reveal-name {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto;
  text-wrap: balance;
  overflow: visible !important;
  text-overflow: clip !important;
}
html:is([lang=en],[lang=es],[lang=pt],[lang=fr],[lang=de],[lang=id]) body #capsulesPanel .pull-inline-panel {
  aspect-ratio: 1842 / 1140 !important;
}
html:is([lang=en],[lang=es],[lang=pt],[lang=fr],[lang=de],[lang=id]) body #capsulesPanel .inline-reveal-main {
  grid-template-columns: 22px minmax(0, auto) !important;
  gap: 4px !important;
}
html:is([lang=en],[lang=es],[lang=pt],[lang=fr],[lang=de],[lang=id]) body #capsulesPanel .inline-item-icon {
  width: 22px !important;
  height: 22px !important;
}
html:is([lang=en],[lang=es],[lang=pt],[lang=fr],[lang=de],[lang=id]) body #capsulesPanel .inline-reveal-item {
  padding: 1px 8px !important;
}
html:not([lang="ko"]) body #capsulesPanel.active {
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

html:is([lang=en],[lang=es],[lang=pt],[lang=fr],[lang=de],[lang=id]) body #capsulesPanel .inline-reveal-name {
  font-size: 8.8px !important;
  line-height: 1.05 !important;
}
/* Keep long workshop titles inside their own heading recess, clear of close. */
html:is([lang="es"], [lang="pt"], [lang="fr"]) body .companion-workshop-heading {
  padding-inline: 36px !important;
}
html:is([lang="es"], [lang="pt"], [lang="fr"]) body #companionWorkshopTitle {
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  font-size: 18px !important;
  line-height: 24px !important;
}
html:is([lang="en"], [lang="es"], [lang="pt"], [lang="fr"], [lang="de"], [lang="id"]) body #companionWorkshopPanel [data-specialty-action^="tailor-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  line-height: 16px;
}


/* SOURCE: ui/styles/shared/designer-audit-next-v1.css */
/* Approved follow-up audit. Existing artwork only; no gameplay changes. */
:root { --next-action:url('assets/generated/board_result_confirm_button_1790688000000/board-result-confirm-button-trimmed.png'); }
html body #rewardPanel:not(.boss-reward)[data-reward-count="3"] .reward-card:nth-child(1) > .reward-icon,
html body #rewardPanel:not(.boss-reward)[data-reward-count="3"] .reward-card:nth-child(1) > .reward-copy { translate:0 -12px; }
html body #rewardPanel:not(.boss-reward)[data-reward-count="3"] .reward-card:nth-child(2) > .reward-icon,
html body #rewardPanel:not(.boss-reward)[data-reward-count="3"] .reward-card:nth-child(2) > .reward-copy { translate:0 -12px; }
html body #rewardPanel:not(.boss-reward)[data-reward-count="3"] .reward-card:nth-child(3) > .reward-copy { translate:0 -10px; }
html body #rewardPanel:not(.boss-reward)[data-reward-count="3"] .reward-card.reward-healBig > .reward-icon { translate:0 0; }
html body #rewardPanel .reward-card small { word-break:keep-all !important; text-wrap:pretty; }
html body #rewardPanel .reward-bossTempoMark .reward-copy small { font-size:10.5px !important; line-height:14px !important; }
/* Only these third-pick cards need the same breathing room as the guard card. */
html body #rewardPanel.boss-reward .reward-modal-card .reward-card.reward-bossTempoMark[data-royal-focus-preview="true"],
html body #rewardPanel.boss-reward .reward-modal-card .reward-card.reward-bossVitalMark[data-royal-focus-preview="true"],
html body #rewardPanel.boss-reward .reward-modal-card .reward-card.reward-bossCriticalMark[data-royal-focus-preview="true"],
html body #rewardPanel.boss-reward .reward-modal-card .reward-card.reward-bossArcaneMark[data-royal-focus-preview="true"],
html body #rewardPanel.boss-reward .reward-modal-card .reward-card.reward-bossRecovery {
  flex-basis:90px !important;
  min-height:90px !important;
}
html body #rewardPanel.boss-reward .reward-grid:has(.reward-bossTempoMark[data-royal-focus-preview="true"]),
html body #rewardPanel.boss-reward .reward-grid:has(.reward-bossVitalMark[data-royal-focus-preview="true"]),
html body #rewardPanel.boss-reward .reward-grid:has(.reward-bossCriticalMark[data-royal-focus-preview="true"]),
html body #rewardPanel.boss-reward .reward-grid:has(.reward-bossArcaneMark[data-royal-focus-preview="true"]),
html body #rewardPanel.boss-reward .reward-grid:has(.reward-bossRecovery) {
  gap:2px !important;
}
html body #menuCompanionPanel .companion-summon-card button[data-companion-summon] {
  border:1px solid #76654b !important; border-radius:5px !important;
  background:linear-gradient(#121519,#080b0d) !important; box-shadow:inset 0 1px #ffffff0c !important;
}
html body #menuCompanionPanel .companion-summon-card:is(.common,.premium) .companion-summon-actions > button[data-companion-summon][data-count]::before,
html body #menuCompanionPanel .companion-summon-card:is(.common,.premium) .companion-summon-actions > button[data-companion-summon][data-count]::after { content:none !important; }
html body #menuCompanionPanel .companion-summon-card:is(.common,.premium) .companion-summon-actions > button[data-companion-summon][data-count] {
  border:0 solid transparent !important; background:none !important;
  border-image:url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png') 160 fill / 7px / 0 stretch !important;
  border-radius:5px !important;
}
html body #menuLoginPanel .menu-back-button {
  background:#080d14dd !important; border-radius:4px !important;
  padding:5px 10px !important; color:#e6d5a0 !important;
}
html body #supplyPanel.active {
  border-image:url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png') 160 / 10px / 0 stretch !important;
}
html body .combat-stats-card .combat-stat-detail > span {
  display:block !important;
}
html body .combat-stats-card .combat-stat-detail > span > b { display:block !important; }
html body .combat-stats-card .combat-stat-detail > span > small {
  display:block !important; font-size:10px !important; line-height:14px !important;
  margin-top:3px !important; word-break:keep-all !important;
}
html body .combat-stats-card .combat-stat-detail { padding-block:8px !important; }
html body .combat-stats-card .combat-stats-scroll-hint { opacity:.55 !important; }
html body #menuLoginPanel .login-choice > :is(#googleLoginButton,#appleLoginButton,#guestLoginButton) {
  background:transparent var(--next-action) center/100% 100% no-repeat !important;
  font-size:14px !important; border:0 !important; box-shadow:none !important;
}
html body #accountDeleteConfirmPanel .account-delete-confirm-card {
  height:auto !important; aspect-ratio:3 / 2 !important; box-sizing:border-box !important;
  grid-template-rows:1fr 38px !important;
  gap:8px !important; padding:27px 24px 33px !important;
  background:transparent url('assets/generated/account-confirm-frame-v2.png') center/100% 100% no-repeat !important;
  border-radius:0 !important;
}
html body #accountDeleteConfirmPanel .account-delete-confirm-message {
  height:auto !important; padding:0 !important; gap:10px !important;
  background:none !important;
}
html body #accountDeleteConfirmPanel .account-delete-confirm-message p { font-size:11px !important; line-height:16px !important; }
html body #accountDeleteConfirmPanel .account-delete-confirm-actions { height:38px !important; width:100% !important; }
html body #accountDeleteConfirmPanel .account-delete-confirm-actions button {
  background:transparent var(--next-action) center/100% 100% no-repeat !important;
  filter:none !important; color:#efdfa6 !important;
}
html body #accountDeleteConfirmPanel #accountDeleteConfirmAcceptButton { color:#edaaa0 !important; }


/* SOURCE: ui/styles/inventory/item-detail-auto-height-v1.css */
/* Text drives each recess independently. Outer frame and footer stay fixed. */
html body #itemInfoPanel#itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip.active-effect-chip[data-layout="effect"][data-density="dense"] {
  padding:24px 15px !important;
}
html body #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats {
  height:auto !important; min-height:0 !important;
  grid-template-rows:none !important; grid-auto-rows:max-content !important;
  align-content:start !important;
}
html body #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout] {
  height:auto !important; min-height:60px !important; max-height:none !important;
  flex:0 0 auto !important; box-sizing:border-box !important;
  padding:14px 15px !important; gap:5px !important;
}
html body #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout] > strong.item-readable-values {
  height:auto !important; min-height:0 !important; max-height:none !important;
  flex:0 0 auto !important; overflow:visible !important;
  font-size:11px !important; line-height:15px !important;
}
html body #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout] .item-summary-part,
html body #itemInfoPanel .item-info-card .item-info-scroll-body #itemInfoStats > .item-stat-chip[data-layout] .item-readable-group > span {
  white-space:normal !important; overflow:visible !important;
  line-height:15px !important; overflow-wrap:anywhere;
}


/* SOURCE: ui/styles/shared/growth-reset-v1.css */
/* Reuse the same painted gold/black control as growth upgrades. */
body #menuGrowthPanel .growth-reset-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin:0 8px 6px; min-height:40px;
  color:#b6c6cd; font-size:12px;
}
body #menuGrowthPanel .growth-reset-toolbar b {color:#f3d992; font-size:14px;}
body #menuGrowthPanel .growth-reset-toolbar button {
  width:126px; height:38px; min-height:38px; margin:0; padding:0 10px 1px;
  border:0; border-radius:0; box-shadow:none;
  background:transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center/contain no-repeat;
  color:#f8e5ad; font-family:inherit; font-size:12px; font-weight:800; line-height:18px; text-shadow:0 1px 1px #000;
}
body #menuGrowthPanel .growth-reset-toolbar button:disabled {opacity:.45;}
body #menuGrowthPanel .growth-reset-toolbar button:active:not(:disabled) {filter:brightness(.75);transform:scale(.98);}


/* SOURCE: ui/styles/menus/ranking-loadout-v1.css */
#rankingLoadoutDialog {box-sizing:border-box;width:calc(100% - 28px);max-width:410px;max-height:calc(100dvh - 40px);padding:20px 18px 12px;color:#eee4c6;background:#080f14;border:2px solid #897349;box-shadow:0 0 0 4px #121b22,0 16px 60px #000;font-family:inherit;overflow:hidden;}
#rankingLoadoutDialog::backdrop {background:#000c;}
#rankingLoadoutDialog {border:18px solid transparent;border-image:url('assets/generated/lobby_prep_refresh_1788102000000/prep-inventory-frame.png') 60 30 stretch;padding:10px 4px 0;box-shadow:0 16px 60px #000;}
#rankingLoadoutDialog header {text-align:center;border-bottom:1px solid #6c5b36;padding-bottom:10px;}
#rankingLoadoutDialog h2 {font-size:20px;line-height:28px;margin:0;color:#ffe7a3;overflow-wrap:anywhere;}
#rankingLoadoutDialog header p {font-size:12px;line-height:18px;margin:4px 0 0;color:#b8c8cc;}
#rankingLoadoutDialog .ranking-loadout-scroll {overflow:auto;max-height:calc(100dvh - 220px);padding:0 2px;}
#rankingLoadoutDialog .ranking-loadout-scroll:focus {outline:none;}
#rankingLoadoutDialog h3 {font-size:14px;line-height:20px;margin:14px 0 8px;color:#eed697;}
#rankingLoadoutDialog h3 small {font-size:12px;color:#afbdc1;}
.ranking-loadout-board {display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);aspect-ratio:var(--cols)/var(--rows);gap:2px;position:relative;background:#05090d;border:1px solid #72623f;padding:3px;}
.ranking-loadout-cell {width:auto;height:auto;grid-column:auto;grid-row:auto;}
.ranking-companion {display:grid;grid-template-columns:42px 44px minmax(0,1fr);gap:8px;align-items:center;}
.ranking-companion>b {font-size:12px;color:#eed697;text-align:center;}
.ranking-companion>img {width:44px;height:50px;object-fit:contain;}
.ranking-companion>div {min-width:0;}
.ranking-companion>span {grid-column:2 / -1;}
.ranking-companion span {white-space:pre-line;}
.ranking-companion .ranking-companion-grade { display:flex;align-items:center;gap:7px;margin:3px 0 5px;font-size:12px;color:#e4c475; }
.ranking-companion-grade[data-rarity="SSS"] b {color:#f29caa;}
.ranking-companion-grade[data-rarity="SS"] b {color:#e7cb76;}
.ranking-companion-grade[data-rarity="S"] b {color:#d3b2eb;}
#rankingLoadoutDialog .ranking-loadout-item {margin:0;min-width:0;min-height:0;z-index:1;position:relative;}
#rankingLoadoutDialog .ranking-loadout-item .item-icon {max-width:94%;max-height:94%;object-fit:contain;}
.ranking-loadout-item small {position:absolute;bottom:1px;right:3px;color:#ffe7ad;text-shadow:0 1px 3px #000;font-size:10px;}
#rankingLoadoutDialog .ranking-loadout-selected {font-size:13px;line-height:19px;min-height:38px;margin:8px 0;color:#e5d7b2;overflow-wrap:anywhere;}
#rankingLoadoutDialog ul {list-style:none;padding:0;margin:0;}
#rankingLoadoutDialog li {border-bottom:1px solid #3e3a2d;padding:9px 0;font-size:13px;line-height:19px;overflow-wrap:anywhere;}
#rankingLoadoutDialog li strong,#rankingLoadoutDialog li span {display:block;}
#rankingLoadoutDialog li span {color:#afc1c8;margin-top:3px;}
#rankingLoadoutDialog footer {text-align:center;padding-top:10px;}
#rankingLoadoutDialog .ranking-loadout-close {background:transparent url('assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png') center/100% 100% no-repeat;width:170px;height:44px;padding:0;border:0;box-shadow:none;color:#ffe7ad;font:700 15px/44px inherit;}
#rankingLoadoutDialog .ranking-loadout-close:active {filter:brightness(.7);}
#rankingLoadoutDialog .ranking-loadout-close {font-family:inherit;font-size:15px;font-weight:700;line-height:44px;}
.game-ranking-row[data-loadout-index],.ranking-row[data-loadout-index] {cursor:pointer;}
.ranking-loadout-empty {padding:30px 0;font-size:14px;line-height:24px;text-align:center;}
#rankingLoadoutDialog .ranking-passive {display:flex;align-items:center;gap:12px;}
.ranking-passive>img {width:38px;height:38px;object-fit:contain;flex:none;}
.ranking-passive>div {min-width:0;flex:1;}
#rankingLoadoutDialog [hidden] {display:none!important;}
.ranking-item-record {max-height:calc(100dvh - 220px);overflow:auto;}
.ranking-record-hero {text-align:center;padding:12px 4px;border-bottom:1px solid #6c5b36;}
.ranking-record-hero>img {width:100px;height:110px;object-fit:contain;}
#rankingLoadoutDialog .ranking-record-hero h3 {font-size:18px;line-height:25px;overflow-wrap:anywhere;}
.ranking-record-hero p {font-size:12px;color:#b8c8cc;}
#rankingLoadoutDialog .ranking-record-back {background:none;border:0;box-shadow:none;color:#ecd99e;font:inherit;font-size:14px;min-height:36px;padding:5px 0;}

/* Long translated role labels have a full row, keeping their words readable. */
html:not([lang="ko"]) .ranking-companion {grid-template-columns:44px minmax(0,1fr);}
html:not([lang="ko"]) .ranking-companion>b {grid-column:1 / -1;text-align:left;overflow-wrap:normal;}
html:not([lang="ko"]) .ranking-companion>span {grid-column:1 / -1;}


/* SOURCE: ui/styles/shared/release-odds-v1.css */
/* Keep the existing painted frame; only its information area scrolls. */
body #menuCompanionPanel .companion-odds-dialog {
  display: block !important;
  min-height: 0 !important;
  max-height: min(680px, 85dvh) !important;
  overflow: hidden !important;
}
body #menuCompanionPanel .companion-odds-scroll {
  display: grid;
  grid-template-rows: 64px auto auto auto auto;
  gap: 10px;
  max-height: min(608px, calc(85dvh - 72px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
body #menuCompanionPanel .companion-odds-scroll > img { width:100px; height:64px; object-fit:contain; justify-self:center; }
body #menuCompanionPanel .companion-odds-scroll > strong { font-size:15px; text-align:center; color:#fff0a7; }
body #menuCompanionPanel .companion-odds-scroll > p { margin:0; text-align:center; }
body #menuCompanionPanel .companion-odds-scroll > p,
body #menuCompanionPanel .companion-odds-details {
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: #c9d5da !important;
  overflow-wrap: anywhere;
}
body #menuCompanionPanel .companion-odds-details summary {
  cursor: pointer;
  color: #ead5a0;
  text-align: center;
  padding-block: 8px;
}
body #menuCompanionPanel .companion-odds-details p { margin: 10px 0; }


/* SOURCE: ui/styles/rewards/stage-reward-grade-v1.css */
/* Tint only the transparent icon silhouette; retain every painted card well. */
.reward-card[data-stage-grade="B"] { --stage-icon-glow: rgba(69,165,255,.64); }
.reward-card[data-stage-grade="A"] { --stage-icon-glow: rgba(187,104,255,.70); }
.reward-card[data-stage-grade="S"] { --stage-icon-glow: rgba(255,143,54,.72); }
.reward-card[data-stage-grade="SS"] { --stage-icon-glow: rgba(255,218,80,.78); }
.reward-card[data-stage-grade="SSS"] { --stage-icon-glow: rgba(255,64,101,.78); }
.reward-panel .reward-card[data-stage-grade] > .reward-icon {
  filter: drop-shadow(0 0 3px var(--stage-icon-glow)) drop-shadow(0 0 7px var(--stage-icon-glow)) !important;
}


/* SOURCE: ui/styles/rewards/showcase-fit-v3.css */
/* Preserve the painted frame; clip only its exterior black matte. */
#unlockShowcase:is(.boss-discovery,.board-clear) .unlock-card {
  clip-path: polygon(1.7% 1.3%, 44% 1.3%, 48% .4%, 50% 0, 53% 1.3%, 98.2% 1.3%, 98.2% 98.8%, 54% 98.8%, 51% 100%, 47% 98.8%, 1.7% 98.8%);
  filter: none !important;
}
#unlockShowcase.boss-discovery .unlock-icon { top: 36% !important; width: 100px !important; height: 100px !important; object-fit: contain !important; animation: none !important; }
#unlockShowcase.boss-discovery .unlock-card > strong { top: 53% !important; }
#unlockShowcase.boss-discovery .unlock-card > p { top: 64% !important; }
#unlockShowcase.boss-discovery .unlock-card > .label { top: 4% !important; padding: 0 !important; }
#unlockShowcase.board-clear .unlock-card {
  position: relative !important; display: block !important; box-sizing: border-box !important;
  width: min(350px,calc(100vw - 20px)) !important; height: 480px !important;
  min-height: 0 !important; max-height: calc(100dvh - 32px) !important;
  padding: 0 !important; margin: 0 !important; overflow: hidden !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent url('assets/generated/reward_attendance_v2_1790106000000/stage-reward-panel.png') center/100% 100% no-repeat !important;
}
#unlockShowcase.board-clear .unlock-card::before,#unlockShowcase.board-clear .unlock-card::after,
#unlockShowcase.board-clear :is(.unlock-portal,.unlock-chest,.unlock-showcase-divider-art) { display:none !important; }
#unlockShowcase.board-clear .unlock-card > .label {
  position:absolute !important; inset:5.3% 18% auto !important; height:9% !important;
  display:grid !important; place-items:center !important; margin:0 !important; padding:0 !important;
  font-size:14px !important; line-height:1.2 !important; text-align:center !important;
}
#unlockShowcase.board-clear .unlock-icon {
  position:absolute !important; left:50% !important; top:19% !important;
  width:90px !important; height:90px !important; max-width:none !important; max-height:none !important;
  margin:0 !important; padding:0 !important; object-fit:contain !important;
  transform:translateX(-50%) !important; animation:none !important; background:none !important; border:0 !important;
}
#unlockShowcase.board-clear .unlock-card > strong {
  position:absolute !important; inset:40% 12% auto !important; height:10% !important;
  display:grid !important; place-items:center !important; margin:0 !important; padding:0 !important;
  font-size:18px !important; line-height:1.3 !important; text-align:center !important;
}
#unlockShowcase.board-clear .unlock-card > p {
  position:absolute !important; inset:52% 13% auto !important; height:27% !important;
  min-height:0 !important; max-height:none !important; width:auto !important;
  display:block !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  font-size:12px !important; line-height:1.65 !important; text-align:center !important;
  white-space:pre-line !important; word-break:keep-all !important; overflow-wrap:break-word !important;
  text-wrap:balance; overflow:auto !important; scrollbar-width:none;
}
#unlockShowcase.board-clear .unlock-confirm-button {
  position:absolute !important; left:50% !important; top:auto !important; bottom:7% !important;
  width:188px !important; height:46px !important; min-height:0 !important; margin:0 !important; padding:0 !important;
  display:grid !important; place-items:center !important; transform:translateX(-50%) !important;
  background:transparent url('assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png') center/100% 100% no-repeat !important;
}
#unlockShowcase.board-clear .unlock-confirm-button:active { transform:translate(-50%,1px) scale(.98) !important; filter:brightness(.85) !important; }


/* SOURCE: ui/styles/rewards/showcase-single-frame-v5.css */
/* Three result modes only; retain the approved exterior artwork and control. */
#unlockShowcase:is(.boss-relic,.boss-cache,.boss-cache-jackpot,.deep-gate) .unlock-card {
  position:relative !important; display:block !important; box-sizing:border-box !important;
  width:min(350px,calc(100vw - 20px)) !important; height:460px !important;
  min-height:0 !important; max-height:calc(100dvh - 24px) !important; aspect-ratio:auto !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  overflow:hidden !important; box-shadow:none !important; filter:none !important;
  background:transparent url('assets/generated/reward_attendance_v2_1790106000000/stage-reward-panel.png') center/100% 100% no-repeat !important;
  clip-path:polygon(1.7% 1.3%,44% 1.3%,48% .4%,50% 0,53% 1.3%,98.2% 1.3%,98.2% 98.8%,54% 98.8%,51% 100%,47% 98.8%,1.7% 98.8%);
}
#unlockShowcase:is(.boss-relic,.boss-cache,.boss-cache-jackpot,.deep-gate) .unlock-card::before,
#unlockShowcase:is(.boss-relic,.boss-cache,.boss-cache-jackpot,.deep-gate) .unlock-card::after,
#unlockShowcase:is(.boss-relic,.boss-cache,.boss-cache-jackpot,.deep-gate) :is(.unlock-portal,.unlock-chest,.unlock-showcase-divider-art) {display:none !important;}
#unlockShowcase:is(.boss-relic,.boss-cache,.boss-cache-jackpot,.deep-gate) .unlock-card > .label {
  position:absolute !important; inset:4% 16% auto !important; height:9% !important;
  display:grid !important; place-items:center !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; font-size:16px !important; line-height:1.2 !important; text-align:center !important;
}
#unlockShowcase:is(.boss-relic,.boss-cache,.boss-cache-jackpot,.deep-gate) .unlock-icon {
  position:absolute !important; left:50% !important; top:20% !important;
  width:116px !important; height:116px !important; max-width:none !important; max-height:none !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; object-fit:contain !important; object-position:center !important;
  transform:translateX(-50%) !important; animation:none !important; filter:drop-shadow(0 3px 6px #0008) !important;
}
#unlockShowcase.deep-gate .unlock-icon {top:19% !important; height:124px !important;}
#unlockShowcase.boss-relic .unlock-card {height:370px !important;}
#unlockShowcase.boss-relic .unlock-icon {top:25% !important; width:106px !important; height:106px !important;}
#unlockShowcase:is(.boss-relic,.boss-cache,.boss-cache-jackpot,.deep-gate) .unlock-card > strong {
  position:absolute !important; inset:47% 12% auto !important; height:12% !important;
  display:grid !important; place-items:center !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  font-size:18px !important; line-height:1.3 !important; text-align:center !important; white-space:normal !important; word-break:keep-all !important;
}
#unlockShowcase:is(.boss-relic,.boss-cache,.boss-cache-jackpot,.deep-gate) .unlock-card > p {
  position:absolute !important; inset:61% 13% auto !important; height:18% !important;
  min-height:0 !important; max-height:none !important; width:auto !important;
  display:grid !important; place-items:center !important; margin:0 !important; padding:0 !important;
  border:0 !important; background:none !important; box-shadow:none !important;
  font-size:12px !important; line-height:1.5 !important; text-align:center !important; white-space:pre-line !important;
  word-break:keep-all !important; overflow:auto !important; scrollbar-width:none;
}
#unlockShowcase:is(.boss-relic,.boss-cache,.boss-cache-jackpot,.deep-gate) .unlock-confirm-button {
  position:absolute !important; left:50% !important; top:auto !important; bottom:7% !important;
  width:188px !important; min-width:188px !important; height:46px !important; min-height:0 !important;
  display:grid !important; place-items:center !important; margin:0 !important; padding:0 !important;
  border:0 !important; box-shadow:none !important; transform:translateX(-50%) !important;
  background:transparent url('assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png') center/100% 100% no-repeat !important;
}
#unlockShowcase:is(.boss-relic,.boss-cache,.boss-cache-jackpot,.deep-gate) .unlock-confirm-button:active {transform:translate(-50%,1px) scale(.98) !important; filter:brightness(.85) !important;}
#unlockShowcase.boss-relic .unlock-card > strong {top:58% !important;}
/* Optical registration to each painted title recess; other contents stay fixed. */
#unlockShowcase.boss-relic .unlock-card > .label {top:5.3% !important; left:16.2% !important; right:15.8% !important;}
#unlockShowcase.boss-cache .unlock-card > .label,
#unlockShowcase.boss-cache-jackpot .unlock-card > .label {top:5.3% !important; left:16.2% !important; right:15.8% !important;}
#unlockShowcase.deep-gate .unlock-card > .label {top:5.3% !important; left:16.2% !important; right:15.8% !important;}


/* SOURCE: ui/styles/combat/enemy-height-v1.css */
/* The stage-30 monarch's painted feet sit lower than the other sprite sets. */
#enemyFighter.enemy-stage30-king { bottom:11px !important; }


/* SOURCE: ui/styles/combat/enemy-info-fit-v2.css */
/* Solo detail: shorten the empty lower plate, keeping text-driven row height. */
#enemyInfoPanel#enemyInfoPanel .enemy-info-card[data-enemy-count="1"] {height:min(430px,calc(100dvh - 28px)) !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-element {top:26px !important; right:19px !important; width:22px !important; height:22px !important; transform:none !important;}
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-element img {width:22px !important;height:22px !important;}
/* Nine-slice the existing recess: corners no longer stretch with long copy. */
#enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row {
  box-sizing:border-box !important;
  border:8px solid transparent !important;
  border-image:url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png') 40 fill / 8px / 0 stretch !important;
  background:none !important;
  padding-top:16px !important; padding-bottom:16px !important;
}
#enemyInfoPanel#enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row {padding-top:8px !important;padding-bottom:8px !important;min-height:120px !important;}
#enemyInfoPanel#enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row .enemy-entry-element {top:15px !important;}


/* SOURCE: ui/styles/rewards/reward-cell-alignment-v1.css */
/* Reserve a description and optional current-HP line in each upper painted cell.
   Text length must not move that cell's icon or title relative to its neighbor. */
#rewardPanel:not(.boss-reward)[data-reward-count="3"] #rewardChoices > .reward-card:nth-child(-n+2) {
  grid-template-rows: 64px 62px !important;
}
#rewardPanel:not(.boss-reward)[data-reward-count="3"] #rewardChoices > .reward-card:nth-child(-n+2) .reward-copy {
  align-self: start !important;
  align-content: start !important;
}
#rewardPanel:not(.boss-reward)[data-reward-count="3"] #rewardChoices > .reward-card:nth-child(-n+2) .reward-copy small {
  min-height: 2.32em !important;
  align-self: start !important;
}

/* Each upper painted recess has its own payload anchor. The lower wide
   recess and the surrounding frame retain their existing positions. */
#rewardPanel:not(.boss-reward)[data-reward-count="3"] #rewardChoices > .reward-card:nth-child(1) > :is(.reward-icon, .reward-copy) {
  translate: 0 0 !important;
}
#rewardPanel:not(.boss-reward)[data-reward-count="3"] #rewardChoices > .reward-card:nth-child(2) > :is(.reward-icon, .reward-copy) {
  translate: 0 0 !important;
}


/* SOURCE: ui/styles/shared/board-clear-celebration-v1.css */
.board-clear-celebration{display:none;position:fixed;inset:0;z-index:300;place-items:center;overflow:hidden;background:rgba(3,7,12,.42);backdrop-filter:blur(8px);isolation:isolate}
.board-clear-celebration.active{display:grid}
.board-clear-fireworks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.board-clear-celebration-copy{position:relative;box-sizing:border-box;width:min(330px,calc(100vw - 28px));padding:24px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#ead8b2;animation:board-clear-arrive .35s ease-out both}
.board-clear-celebration-copy strong{display:block;margin:6px 0 2px;font-size:52px;line-height:1.18;letter-spacing:2px;color:#ffdf83;text-shadow:0 3px 0 #583b18,0 0 26px #cf8b3b88}
.board-clear-celebration-copy p{margin:6px 0 0;font-size:15px;line-height:1.55;font-weight:700;color:#f2e1bd}
@keyframes board-clear-arrive{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.board-clear-celebration-copy{animation:none}}

/* The badge painting sits left of its transparent canvas center. Correct
   only this artwork in each independently positioned circular opening. */
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(1)[data-board-passive-choice="kingsBadge"] > img{translate:5px 1px}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(2)[data-board-passive-choice="kingsBadge"] > img{translate:6px 1px}
#boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice:nth-child(3)[data-board-passive-choice="kingsBadge"] > img{translate:6px 1px}


/* SOURCE: ui/styles/shared/grade-visibility-v1.css */
/* Same grade palette as the bag and companion reveal; keep painted surfaces. */
#capsulesPanel .inline-reveal-item.rarity-F{--inline-grade:#eef1f4}
#capsulesPanel .inline-reveal-item.rarity-D{--inline-grade:#a5b7c8}
#capsulesPanel .inline-reveal-item.rarity-C{--inline-grade:#8dffb0}
#capsulesPanel .inline-reveal-item.rarity-B{--inline-grade:#79ddff}
#capsulesPanel .inline-reveal-item.rarity-A{--inline-grade:#c7a0ff}
#capsulesPanel .inline-reveal-item.rarity-S{--inline-grade:#ffc08b}
#capsulesPanel .inline-reveal-item.rarity-SS{--inline-grade:#fff18a}
#capsulesPanel .inline-reveal-item.rarity-SSS{--inline-grade:#ff6872}
#capsulesPanel .inline-reveal-item .inline-reveal-copy{display:grid!important;gap:2px!important;overflow:hidden!important;color:var(--inline-grade)!important}
#capsulesPanel .inline-reveal-item .inline-reveal-name{color:var(--inline-grade)!important}
#capsulesPanel .inline-reveal-grade{display:block;font-size:8.5px;line-height:10px;font-weight:900;color:var(--inline-grade)}

/* The +1 pull result is an item reveal, not a fixed blue/gold popup. Keep the
   accepted painted frame and positions; only its live type and icon glow use
   the same SS/SSS palette as the newly acquired item in the bag. */
#pullRevealPanel#pullRevealPanel.high-rarity:not(.sss-reveal):not(.mythic-reveal){
  --pull-grade-color:#fff18a;
  --pull-grade-glow:rgba(255,218,67,.52);
}
#pullRevealPanel#pullRevealPanel.high-rarity.sss-reveal:not(.mythic-reveal){
  --pull-grade-color:#ff6872;
  --pull-grade-glow:rgba(255,89,103,.55);
}
#pullRevealPanel#pullRevealPanel.high-rarity:not(.mythic-reveal) .rare-item-focus .rare-grade,
#pullRevealPanel#pullRevealPanel.high-rarity:not(.mythic-reveal) .rare-item-focus .name,
#pullRevealPanel#pullRevealPanel.high-rarity:not(.mythic-reveal) .rare-showcase .stats .rare-stat-heading,
#pullRevealPanel#pullRevealPanel.high-rarity:not(.mythic-reveal) .panel-head.compact h2{
  color:var(--pull-grade-color)!important;
  text-shadow:0 1px 2px #000,0 0 8px var(--pull-grade-glow)!important;
}
#pullRevealPanel#pullRevealPanel.high-rarity:not(.mythic-reveal) .rare-item-focus .rare-reveal-icon{
  filter:drop-shadow(0 0 11px var(--pull-grade-glow))!important;
}

body #menuCompanionPanel :is(.rarity-novice,[data-rarity="novice"]){--companion-frame-filter:hue-rotate(-65deg) saturate(.9)}
body #menuCompanionPanel :is(.rarity-common,[data-rarity="common"]){--companion-frame-filter:hue-rotate(0deg)}
body #menuCompanionPanel :is(.rarity-rare,[data-rarity="rare"]){--companion-frame-filter:hue-rotate(65deg) saturate(1.2)}
body #menuCompanionPanel :is(.rarity-hero,[data-rarity="hero"]){--companion-frame-filter:grayscale(1) sepia(1) saturate(5) hue-rotate(345deg)}
body #menuCompanionPanel :is(.rarity-legendary,[data-rarity="legendary"]){--companion-frame-filter:grayscale(1) sepia(1) saturate(3)}
body #menuCompanionPanel :is(.rarity-mythic,[data-rarity="mythic"]){--companion-frame-filter:grayscale(1) sepia(1) saturate(5) hue-rotate(310deg)}

body #menuCompanionPanel #companionPartyList .companion-party-card::before{filter:var(--companion-frame-filter)!important}
body #menuCompanionPanel .companion-detail-dialog[data-rarity]{isolation:isolate;background:none!important}
body #menuCompanionPanel .companion-detail-dialog[data-rarity]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:transparent url("assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png") center/100% 100% no-repeat;filter:var(--companion-frame-filter)}
body #menuCompanionPanel .companion-detail-dialog[data-rarity] .companion-detail-art{isolation:isolate;background:none!important;--companion-art-frame:url("assets/generated/companion_ui_v6/companion-card-common.png")}
body #menuCompanionPanel .companion-detail-dialog:is([data-rarity="hero"],[data-rarity="legendary"],[data-rarity="mythic"]) .companion-detail-art{--companion-art-frame:url("assets/generated/companion_ui_v6/companion-card-premium.png")}
body #menuCompanionPanel .companion-detail-art::before{content:none;display:none}


/* SOURCE: ui/styles/companions/companion-compact-grid-v1.css */
/* Compact collection tiles, using the existing painted recess and grade tint. */
body #menuCompanionPanel #companionPartyList{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
body #menuCompanionPanel #companionPartyList .companion-party-card{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:66px 42px!important;justify-items:center!important;align-content:center!important;gap:3px!important;min-height:146px!important;padding:16px 7px!important;text-align:center!important}
body #menuCompanionPanel #companionPartyList .companion-party-card::before{background-image:url("assets/generated/companion_ui_v6/companion-card-common.png")!important;opacity:1!important}
body #menuCompanionPanel #companionPartyList .companion-party-card > img{width:62px!important;height:62px!important}
body #menuCompanionPanel #companionPartyList .companion-party-card > span:not(.collection-party-status):not(.companion-party-card-actions){width:100%!important;max-width:calc(100% - 8px)!important;align-self:start!important;transform:translateY(-4px)!important}
body #menuCompanionPanel #companionPartyList .companion-party-card strong{font-size:10px!important;line-height:13px!important;height:26px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;overflow-wrap:anywhere!important}
body #menuCompanionPanel #companionPartyList .companion-party-card small{font-size:10px!important;line-height:13px!important;margin-top:0!important}
body #menuCompanionPanel #companionPartyList .collection-party-status{display:none!important}
body #menuCompanionPanel #companionPartyList .companion-party-card[data-unowned="true"] > img{opacity:.6!important}
body #menuCompanionPanel #companionPartyList .companion-party-empty-list{grid-column:1/-1}
/* Keep the actual first-companion registration buttons reachable. */
body #menuCompanionPanel #companionPartyList .companion-party-card.first-companion-guide-target{grid-column:1/-1;grid-template-columns:66px minmax(0,1fr) 62px!important;grid-template-rows:auto!important;min-height:90px!important;gap:8px!important}
body #menuCompanionPanel #companionPartyList .companion-party-card.first-companion-guide-target > span{align-self:center!important}

body #menuCompanionPanel #companionPartyList .companion-tile-stars{font-size:8px!important;letter-spacing:-.8px!important;color:#ffe79c!important;white-space:nowrap!important}


/* SOURCE: ui/styles/shared/ui-interaction-v1.css */
/* Preserve the 29px close artwork and its optical center; enlarge only the hit area. */
body #menuCompanionPanel .companion-odds-close {
  top: 14.5px !important;
  right: 15.5px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background-size: 29px 29px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  touch-action: manipulation;
}
body #menuCompanionPanel .companion-odds-close:active {
  filter: brightness(.7) !important;
}
body #menuCompanionPanel .companion-odds-close:focus-visible {
  outline: 1px solid #d4b975 !important;
  outline-offset: -6px !important;
}
/* Status labels and chevrons belong to the card, not to a separate action. */
body #menuCompanionPanel #companionPartyList .collection-party-status,
body #menuCompanionPanel #companionPartyList .collection-party-status * {
  pointer-events: none !important;
}


/* SOURCE: ui/styles/rewards/lobby-reward-size-v1.css */
/* Keep the approved recesses and optical icon anchors; give copy more weight. */
#lobbyFirstOfferButton { zoom:1.10; }
#lobbyAttendanceButton { zoom:1.10; }
#lobbyFirstOfferButton strong {font-size:10.5px !important;line-height:12px !important;}
#lobbyFirstOfferButton > b {font-size:8.4px !important;line-height:9px !important;}
#lobbyFirstOfferButton small {font-size:6.5px !important;}
#lobbyAttendanceButton strong {font-size:10.5px !important;line-height:12px !important;}


/* SOURCE: ui/styles/shared/ui-proportion-polish-v1.css */
/* Only the three reviewed surfaces; reuse all approved painted assets. */
html body #menuCompanionPanel #companionPartySlot {align-items:stretch !important;}
html body #menuCompanionPanel #companionPartySlot .collection-party-position.filled {
 min-height:150px !important;padding:17px 12px 17px !important;
}
html body #menuCompanionPanel #companionPartySlot .collection-party-position.empty {
 min-height:150px !important;padding:17px 12px 17px !important;
 grid-template-rows:16px 32px 14px auto !important;row-gap:3px !important;align-content:start !important;
}
html body #menuCompanionPanel #companionPartySlot .collection-empty-position {min-height:78px !important;}
#menuStorePanel [data-store-kind="summon"] .store-ticket-count b {font-size:25px !important;line-height:30px !important;}
#menuStorePanel [data-store-kind="summon"] .store-buy-button {height:32px !important;min-height:32px !important;width:124px !important;padding-inline:12px !important;}
#menuStorePanel [data-store-kind="summon"] .store-buy-button b {font-size:13px !important;line-height:16px !important;}
#gameRankingList > .menu-recipe-empty {font-size:14px !important;line-height:22px !important;color:#becbd0 !important;text-align:center !important;padding:0 18px !important;margin:72px 0 0 !important;}


/* SOURCE: ui/styles/inventory/tray-footprint-v1.css */
/* Actual current dimensions, including folding, share the grade line. */
html body #bagPanel .bag-tray-list { grid-auto-rows: 68px !important; }
html body #bagPanel .tray-item[class*="rarity-"] { height:68px!important; min-height:68px!important; padding:16px 3px 4px!important; }
html body #bagPanel .tray-item .tray-grade { left:5px!important; right:5px!important; max-width:none!important; gap:2px!important; align-items:baseline!important; line-height:10px!important; }
html body #bagPanel .tray-item .tray-size { position:static; margin-left:auto; color:#ddd3b9; font-size:8px; line-height:10px; font-weight:600; white-space:nowrap; }
html body #bagPanel .tray-item .tray-icon { width:30px!important; height:27px!important; max-width:30px!important; max-height:27px!important; padding:0!important; }
html body #bagPanel .tray-item .tray-name { font-size:9px!important; line-height:10px!important; }
/* Touch drags must not be cancelled by the browser's vertical panning. */
@media (pointer:coarse) {
 html body #bagPanel .tray-item { touch-action:none!important; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
}
/* Sale selection uses native panning; inventory dragging is inactive here. */
html body #bagPanel.sell-mode .bag-tray-list,
html body #bagPanel.sell-mode .tray-item {
  touch-action: pan-y !important;
}
/* Keep the scrolling viewport above the painted bottom rail. */
html body #bagPanel.active .bag-tray,
html body #bagPanel.active .bag-tray:not(.is-empty) {
  padding-bottom: 16px !important;
}
html body #bagPanel .bag-tray-list {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
}


/* SOURCE: ui/styles/shared/deep-ui-fixes-v2.css */
/* Specific audit corrections; approved artwork and gameplay remain intact. */
html body #fusionPanel#fusionPanel.mythic-item .fusion-card {height:680px !important;max-height:calc(100dvh - 24px) !important;}
html body #fusionPanel#fusionPanel.mythic-item .fusion-absorb {top:16% !important;height:100px !important;}
html body #fusionPanel#fusionPanel.mythic-item .fusion-result-pop > img {width:78px !important;height:78px !important;object-fit:contain !important;}
html body #fusionPanel#fusionPanel.mythic-item .fusion-result {top:32% !important;height:66px !important;min-height:66px !important;}
html body #fusionPanel#fusionPanel.mythic-item #fusionResultStats {
 top:43% !important;bottom:88px !important;height:auto !important;display:grid !important;
 grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:min-content !important;gap:8px !important;
 align-content:start !important;overflow-y:auto !important;scrollbar-width:none !important;
}
html body #fusionPanel#fusionPanel.mythic-item #fusionResultStats > .fusion-stat-card {
 grid-column:1 / -1 !important;grid-row:auto !important;width:100% !important;min-width:0 !important;min-height:56px !important;height:auto !important;
 padding:12px 16px !important;box-sizing:border-box !important;
}
html body #fusionPanel#fusionPanel.mythic-item #fusionResultStats > .fusion-stat-core {grid-column:auto !important;width:100% !important;margin:0 !important;}
html body #fusionPanel#fusionPanel.mythic-item .fusion-result-pop > span {display:none !important;}
html body #fusionPanel#fusionPanel.mythic-item #fusionResultStats > .mythic-power-summary {min-height:126px !important;}
html body #fusionPanel#fusionPanel.mythic-item #fusionResultStats .mythic-power-summary strong em {font-size:11px !important;line-height:16px !important;margin-top:7px !important;}
html body #fusionPanel#fusionPanel #fusionCloseButton {border:0 !important;outline:none !important;box-shadow:none !important;}
html body #fusionPanel#fusionPanel #fusionCloseButton:focus-visible {filter:brightness(1.22) drop-shadow(0 0 3px #e9cf80) !important;}
html body #itemInfoPanel#itemInfoPanel #itemInfoStats .item-effect-detail-chip .item-readable-values {gap:10px !important;}
html body #itemInfoPanel#itemInfoPanel #itemInfoStats .item-effect-detail-chip .item-summary-core {font-weight:600 !important;color:#c5d2d7 !important;line-height:1.55 !important;}
html body #itemInfoPanel#itemInfoPanel #itemInfoStats .item-effect-detail-chip .item-summary-lead {font-size:10px !important;font-weight:500 !important;color:#aebbc2 !important;}
/* The very large kirin only; do not move correctly registered other enemies. */
#enemyFighter:has(>img[src*="kingStage60StarwellKirin"]) {scale:.84;transform-origin:center bottom;}
#playerFighter #combatCompanions .combat-companion {width:34px;height:34px;}
.effect-summary-copy {min-width:0 !important;}
.effect-summary-copy > b {word-break:keep-all !important;overflow-wrap:normal !important;font-size:9px !important;line-height:12px !important;}
html body .main-menu[data-panel="attendance"] .menu-scene {background:#040914 !important;min-height:100dvh !important;height:100dvh !important;}
html body #menuAttendancePanel.active {
 position:fixed !important;inset:5px !important;width:calc(100% - 10px) !important;max-width:420px !important;
 height:calc(100dvh - 10px) !important;max-height:none !important;box-sizing:border-box !important;margin:0 auto !important;
 background:var(--menu-surface-panel) center/100% 100% no-repeat !important;border:0 !important;
 overflow-y:auto !important;scrollbar-width:none !important;padding:26px 16px !important;
}


/* SOURCE: ui/styles/inventory/fusion-support-v1.css */
#boardPassiveChoicePanel.fusion-support-picker .board-passive-choice-list {display:flex !important;flex-direction:column !important;overflow-y:auto !important;scrollbar-width:none !important;gap:8px !important;}
#boardPassiveChoicePanel.fusion-support-picker .board-passive-choice {flex:0 0 116px !important;min-height:116px !important;}


/* SOURCE: ui/styles/inventory/loot-help-v1.css */
#lootBoardHeading h2 { display: flex; align-items: center; gap: 5px; }
#lootBoardHelpButton { width: 21px; height: 21px; min-width: 21px; padding: 0; border: 1px solid #b99a57; border-radius: 50%; background: #111a20; color: #f1d998; font: bold 13px/19px inherit; }
#bagSellLowButton { color: #f0ddb5; padding: 0 8px; text-align: center; }
#bagSellLowButton option { background: #111a20; color: #f0ddb5; }
#lootBoardHelp { box-sizing: border-box; width: min(92vw,410px); max-height: 86dvh; padding: 25px 24px 20px; border: 0; color: #eddfbf; background: #09141c url('assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png') center/100% 100% no-repeat; }
#lootBoardHelp::backdrop { background: #000b; backdrop-filter: blur(3px); }
#lootBoardHelp h2 { margin: 0 0 14px; text-align: center; font-size: 18px; }
#lootBoardHelp h3 { margin: 15px 0 4px; color: #efd18c; font-size: 13px; }
#lootBoardHelp p { margin: 0; font-size: 12px; line-height: 1.65; }
#lootBoardHelp .loot-help-scroll { max-height: calc(86dvh - 135px); overflow-y: auto; }
#lootBoardHelp .loot-help-note { margin-top: 15px; color: #baa987; font-size: 11px; }
#lootBoardHelp form { margin-top: 12px; text-align: center; }
#lootBoardHelp form button { width: 100px; height: 34px; }
/* Four painted bays: their contents were shifted toward the right edge. */
html body #capsulesPanel .inline-reveal-item:nth-child(1) .inline-reveal-main { transform: translateX(-5px); }
html body #capsulesPanel .inline-reveal-item:nth-child(2) .inline-reveal-main { transform: translateX(-4px); }
html body #capsulesPanel .inline-reveal-item:nth-child(3) .inline-reveal-main { transform: translateX(-5px); }
html body #capsulesPanel .inline-reveal-item:nth-child(4) .inline-reveal-main { transform: translateX(-4px); }
html body #capsulesPanel .inline-reveal-copy { align-self: center; }

/* Match the existing close-X artwork; no separate footer button. */
#lootBoardHelp form { margin:0; }
#lootBoardHelp form .loot-help-close { position:absolute; top:18px; right:18px; width:28px; height:28px; padding:0; border:0; background:transparent url('assets/generated/loot_bag_controls_1790153000000/loot-close-button.png') center/contain no-repeat; cursor:pointer; }
#lootBoardHelp h2 { padding-right:24px; }
#lootBoardHelp .loot-help-scroll { max-height:calc(86dvh - 100px); }
#lootBoardHelp .loot-help-scroll { max-height:calc(86dvh - 130px); padding:0 5px 12px; scrollbar-width:thin; overflow-x:hidden; }
#lootBoardHelp h3 { margin:14px 0 6px; font-size:14px; line-height:1.5; }
#lootBoardHelp p { font-size:13px; line-height:1.65; word-break:keep-all; overflow-wrap:anywhere; color:#d8dce0; }
#lootBoardHelp .loot-help-group { padding-bottom:12px; border-bottom:1px solid #665632; }
#lootBoardHelp .loot-help-cost { display:block; margin-top:7px; color:#e2c784; font-size:12px; }
#lootBoardHelp dl { margin:8px 0 0; font-size:13px; line-height:1.7; }
#lootBoardHelp dt { color:#efd18c; margin-top:10px; font-weight:700; }
#lootBoardHelp dd { margin:2px 0 0; color:#d8dce0; word-break:keep-all; }
.sell-grade-picker { position:relative; display:block; width:74px; flex:0 0 74px; }
.sell-grade-picker::after { content:''; position:absolute; right:12px; top:50%; width:5px; height:5px; border-right:1.5px solid #d9cba5; border-bottom:1.5px solid #d9cba5; transform:translateY(-70%) rotate(45deg); pointer-events:none; }
html body #bagPanel #bagSellLowButton { appearance:none; width:100%!important; padding:0 19px 0 7px!important; text-align:center; }
/* Register each control inside its painted header bay. */
html body #bagPanel #bagSellBar { padding-right:11px!important; grid-template-columns:70px minmax(0,1fr)!important; }
html body #bagPanel #bagSellBar .bag-sell-actions { grid-template-columns:72px 78px 50px!important; gap:3px!important; }
html body #bagPanel .sell-grade-picker { width:72px; }
html body #bagPanel #bagSellBar .bag-sell-actions #bagSellLowButton { text-align-last:center; padding:0 18px 0 8px!important; }
html body #bagPanel .sell-grade-picker::after { right:19px; }

/* Near-clear cue: keep the original panel and capsule colors. */
#capsuleBoard .capsule.last-loot-ready { animation:last-loot-glow 2.4s ease-in-out infinite; }
@keyframes last-loot-glow { 0%,100% { box-shadow:0 0 0 1px #a78a4b66,0 0 3px #b6974922; } 50% { box-shadow:0 0 0 2px #c4a65fbb,0 0 9px #b6974966; } }
@media (prefers-reduced-motion:reduce) { #capsuleBoard .capsule.last-loot-ready { animation:none; box-shadow:0 0 0 1px #b69b61; } }
/* Use an outline so the capsule artwork's important shadows stay intact. */
#capsuleBoard .capsule.last-loot-ready { outline-offset:2px; }
@keyframes last-loot-glow { 0%,100% { outline:1px solid #a78a4b66; } 50% { outline:2px solid #c4a65fbb; } }
@media (prefers-reduced-motion:reduce) { #capsuleBoard .capsule.last-loot-ready { outline:1px solid #b69b61; } }


/* SOURCE: ui/styles/companions/companion-empty-hud-v1.css */
/* Keep the primary portrait in place. Reserve the lower-left bay for support. */
html body #playerFighter #combatCompanions .support { bottom:0px; }
html body #fightStage #boardClearPassiveBadges { width:38px!important; max-width:38px!important; grid-template-columns:repeat(2,18px)!important; grid-auto-rows:18px!important; gap:2px!important; }
#companionWorkshopPanel.empty-party .companion-workshop-dialog { min-height:370px; padding:28px 24px; gap:18px; }
#companionWorkshopPanel.empty-party #companionWorkshopMessage,
#companionWorkshopPanel.empty-party .companion-workshop-confirm { display:none; }
#companionWorkshopPanel.empty-party .companion-workshop-list { overflow:visible; padding:0; }
.specialty-empty { text-align:center; }
.specialty-empty-seats { display:flex; justify-content:center; gap:20px; margin:4px 0 22px; }
.specialty-empty-seat { position:relative; width:98px; height:140px; background:url('assets/generated/companion_ui_v6/companion-card-common.png') center/100% 100% no-repeat; }
.specialty-empty-seat img { position:absolute; width:74px; height:84px; left:12px; top:14px; object-fit:contain; filter:brightness(.25) grayscale(1); opacity:.7; }
.specialty-empty-seat > span { position:absolute; inset:40px 0 auto; color:#baa77c; font-size:25px; text-shadow:0 2px 4px #000; }
.specialty-empty-seat strong { position:absolute; bottom:17px; left:0; right:0; color:#cfbd94; font-size:12px; }
.specialty-empty h3 { margin:0 0 12px; color:#f1deb1; font-size:16px; line-height:1.5; }
.specialty-empty p { margin:0; color:#bdbaa9; font-size:12px; line-height:1.8; word-break:keep-all; }

html body #fightStage #boardClearPassiveBadges .board-passive-badge { width:18px!important; height:18px!important; min-width:0!important; }
html body #fightStage #boardClearPassiveBadges .board-passive-badge img { width:16px!important; height:16px!important; }
#combatSupportDock { position:absolute; left:8px; bottom:30px; width:26px; height:26px; z-index:9; }
#combatSupportDock:empty { display:none; }
#combatSupportDock button { position:relative; display:block; width:26px; height:26px; background:none; border:0; padding:0; cursor:pointer; }
#combatSupportDock img { display:block; width:100%; height:100%; object-fit:contain; }
#combatSupportDock small { position:absolute; bottom:-1px; right:-2px; color:#f6e4a4; font-size:8px; line-height:9px; text-shadow:0 1px 2px #000; }

/* SOURCE: ui/styles/shared/unified-game-shell-v1.css */
/* Original surfaces retained. Only the three-resource HUD is adjusted. */
@layer unifiedGameShell {
 /* Background rendering only: do not pause combat calculations or persistence. */
 html.visuals-suspended *, html.visuals-suspended *::before, html.visuals-suspended *::after { animation-play-state:paused!important; }
 .phone-shell #battleButton { padding-bottom:3px!important; }
 .phone-shell #skillButton:not(.control-status)::before { filter:brightness(.78) saturate(.65)!important; }
 .phone-shell #fightStage #skillButton:not(.control-status)::before { clip-path:polygon(6.8% 2%,93.2% 2%,96.2% 24%,96.2% 30%,99% 53%,93% 98%,6.3% 98%,1% 53%,3.8% 30%,3.8% 24%)!important; }
 .menu-back-button { text-decoration:none!important; }
 /* Stable skill face; enlarged transparent touch targets never change art. */
 .phone-shell #skillButton:not(.control-status) { isolation:isolate!important;background:none!important; }
 .phone-shell #skillButton:not(.control-status)::before { content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;background:url('./assets/generated/skill-button-matched-20260920.png') center 46%/101.5% 223% no-repeat!important;clip-path:polygon(6.4% 0,93.6% 0,96.8% 22%,96.8% 29%,100% 53%,93.4% 100%,5.8% 100%,0 53%,3.2% 30%,3.2% 22%)!important; }
 .phone-shell #skillButton:not(.control-status) { box-sizing:border-box!important;width:76px!important;min-width:76px!important;max-width:76px!important;height:17px!important;min-height:17px!important;max-height:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:9px!important;line-height:1!important;padding:0 7px 2px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;letter-spacing:0!important;text-shadow:none!important;color:#ddd6bc!important;filter:none!important;animation:none!important; }
 .phone-shell #battleButton.battle-running { background-image:url('./assets/generated/lobby_prep_refresh_1788102000000/prep-start.png')!important; }
 .phone-shell #skillButton.skill-absent:not(.control-status) { opacity:.65!important; }
 .phone-shell #skillButton.ready:not(.control-status) { color:#fff0b2!important;opacity:1!important;filter:brightness(1.15)!important; }
 .phone-shell #battleButton,
 .phone-shell #skillButton { overflow:visible!important; }
 .phone-shell #skillButton:disabled { pointer-events:none!important; }
 .phone-shell .stage-controls { pointer-events:none!important; }
 .phone-shell #skillButton { position:relative!important; }
 .phone-shell #skillButton:not(:disabled) { pointer-events:auto!important; }
 .phone-shell #battleButton:not(:disabled)::after { content:""!important;position:absolute!important;inset:-8px -10px!important;background:none!important;border:0!important;pointer-events:auto!important; }
 .phone-shell #fightStage.fighting #skillButton:not(:disabled)::after { content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:120px!important;height:48px!important;transform:translate(-50%,-50%)!important;background:none!important;border:0!important;pointer-events:auto!important; }
 /* Mobile navigation: retain the existing painted/link surfaces. */
 .menu-sub-panel .menu-panel-head>.menu-back-button,
 #menuSettingsPanel .menu-panel-head>.menu-back-button,
 #menuCompanionPanel .menu-panel-head>.menu-back-button { width:78px!important;min-width:78px!important;height:48px!important;min-height:48px!important;font-size:13px!important;line-height:48px!important;padding:0 5px!important;transform:translate(0,-22px)!important; }
 #enemyInfoPanel { padding:0!important;justify-items:center!important;align-items:center!important; }
 /* Inset only headers whose back label touched the painted left bevel. */
 #menuCompanionPanel .menu-panel-head>.menu-back-button,
 #menuRankingPanel .menu-panel-head>.menu-back-button,
 #menuStorePanel .menu-panel-head>.menu-back-button,
 #menuGrowthPanel .menu-panel-head>.menu-back-button,
 #menuCodexPanel .menu-panel-head>.menu-back-button,
 #menuStoryArchivePanel .menu-panel-head>.menu-back-button { transform:translate(12px,-22px)!important; }
 #enemyInfoPanel .enemy-info-card { margin-inline:auto!important;max-width:calc(100vw - 14px)!important; }
 #enemyInfoPanel .enemy-info-card::after { content:""!important;position:absolute!important;inset:0!important;background:url('./assets/generated/enemy_info_frame_portrait_1791724800000/enemy-info-no-socket-v2.png') center/contain no-repeat!important;mask:url('./assets/generated/enemy_info_frame_portrait_1791724800000/enemy-info-frame-multi-portrait.png') center/contain no-repeat!important;clip-path:inset(6% 4% 82% 81%)!important;pointer-events:none!important;z-index:0!important; }
 #enemyInfoPanel .enemy-info-card #enemyInfoCloseButton { left:89.3%!important;right:auto!important;top:11.7%!important;transform:translate(-50%,-50%)!important;width:36px!important;height:36px!important;background:transparent url('./assets/generated/loot_bag_controls_1790153000000/loot-close-button.png') center/contain no-repeat!important;border:0!important;box-shadow:none!important;color:transparent!important;font-size:0!important;line-height:36px!important;text-align:center!important;padding:0!important;text-shadow:none!important; }
 #enemyInfoPanel .enemy-info-card #enemyInfoCloseButton::before,
 #enemyInfoPanel .enemy-info-card #enemyInfoCloseButton::after { content:none!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row:not(:last-child) { padding-bottom:9px!important;margin-bottom:0!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row { min-height:0!important;padding-top:9px!important;padding-bottom:9px!important;border-top-width:0!important;border-left-width:0!important;border-right-width:0!important;margin-bottom:0!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-entry-heading { margin-bottom:4px!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-entry-abilities { margin-top:4px!important;margin-bottom:0!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-entry-portrait { top:27px!important;width:64px!important;height:64px!important; }
 #enemyInfoPanel .enemy-info-card { width:min(382px,calc(100vw - 14px))!important;height:auto!important;aspect-ratio:3 / 4!important;background:transparent url('./assets/generated/enemy_info_frame_portrait_1791724800000/enemy-info-frame-multi-portrait.png') center/contain no-repeat!important; }
 #enemyInfoPanel .enemy-info-card>.panel-head.compact { top:0!important;height:25%!important; }
 #enemyInfoPanel .enemy-info-card>.panel-head.compact h2 { top:58%!important; }
 #enemyInfoPanel .enemy-info-card #enemyInfoCloseButton { top:11.7%!important; }
 #enemyInfoPanel .enemy-info-card #enemyInfoList { top:27%!important;bottom:9%!important;grid-auto-rows:max-content!important;gap:0!important;padding-top:0!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="1"] #enemyInfoList { padding-top:14px!important; }
 #enemyInfoPanel #enemyInfoList .enemy-info-row:not(:first-child) { padding-top:6px!important; }
 #enemyInfoPanel #enemyInfoList .enemy-info-row:not(:last-child) { margin-bottom:6px!important; }
 #enemyInfoPanel #enemyInfoList .enemy-info-row:not(:first-child) .enemy-entry-element { top:4px!important; }
 #enemyInfoPanel #enemyInfoList .enemy-info-row:not(:first-child) .enemy-entry-portrait { top:30px!important; }
 #enemyInfoPanel #enemyInfoList .enemy-entry-portrait[src*="extraLanternSnail"] { filter:saturate(.65) brightness(.96) drop-shadow(0 2px 2px #000)!important;image-rendering:auto!important; }
 #enemyInfoPanel #enemyInfoList .enemy-info-row { border-image:none!important;background:none!important;box-shadow:none!important; }
 #enemyInfoPanel #enemyInfoList .enemy-info-row:not(:last-child) { border-bottom-color:rgba(166,143,98,.35)!important;border-bottom-width:1px!important;margin-bottom:12px!important; }
 #enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-element { top:14px!important;right:19px!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="1"] #enemyInfoList { padding-top:20px!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="1"][data-has-abilities="true"] #enemyInfoList { padding-top:0!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row .enemy-entry-element { top:-1px!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList { translate:0 5px!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="2"] #enemyInfoList { top:25.5%!important;bottom:6.5%!important;grid-auto-rows:minmax(0,1fr)!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="2"] #enemyInfoList .enemy-info-row { min-height:0!important;padding:0 8px!important;border-width:0!important;margin:0!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="2"] #enemyInfoList .enemy-info-row:not(:first-child) { padding-top:0!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="2"] #enemyInfoList .enemy-info-row:not(:last-child),
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row:not(:last-child) { border-bottom-width:0!important;margin-bottom:0!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="2"] #enemyInfoList .enemy-info-row:not(:last-child)::after,
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row:not(:last-child)::after {
  content:""!important;position:absolute!important;left:50%!important;bottom:-7px!important;
  width:min(250px,calc(100% - 36px))!important;height:14px!important;
  transform:translateX(-50%)!important;pointer-events:none!important;z-index:2!important;
  background:url('./assets/generated/unlock_showcase_item_v2_1792936800300/item-unlock-divider-alpha.png') center/100% auto no-repeat!important;
  opacity:.76!important;filter:saturate(.65) brightness(.85)!important;
 }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row:not(:last-child)::after { bottom:-5px!important; }
 #enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row:last-child { border-bottom-width:0!important; }
 .phone-shell #enemyFighter:has(>img[src*="kingStage60StarwellKirin"]) { scale:.70!important;translate:0 -12px!important;transform-origin:center bottom!important; }
 .phone-shell .combat-panel #fightStage { background-image:none!important;isolation:isolate!important; }
 .phone-shell .combat-panel #fightStage::after { content:""!important;display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;background:url('./assets/generated/unified-shell-20260917/battle-backdrop.webp') center/100% 100% no-repeat!important;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)!important;z-index:-1!important;pointer-events:none!important; }
 .phone-shell .combat-panel #fightStage::before { clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)!important; }
 /* These pseudo-elements are now static frame/backdrop art, not the old boss rift
    or victory particles. Never inherit their transform/animation state. */
 .phone-shell .combat-panel #fightStage::before,
 .phone-shell .combat-panel #fightStage::after {
  animation:none!important;transform:none!important;translate:none!important;scale:none!important;
  opacity:1!important;filter:none!important;border-radius:0!important;
 }
 /* Trim only the outside of the painted bevel; no opaque corner triangles. */
 .phone-shell .status-strip>.status-resource,
 .phone-shell .combat-panel #combatStatsMini>span,
 .phone-shell>.tabs>.tab-button {
  clip-path:polygon(4% 0,96% 0,100% 15%,100% 85%,96% 100%,4% 100%,0 85%,0 15%)!important;
 }
 .phone-shell #fightStage { background-image:url('./assets/generated/unified-shell-20260917/battle-backdrop.webp')!important;border-radius:8px!important; }
 .phone-shell #fightStage::before { content:""!important;display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;border:0!important;border-image:url('./assets/generated/unified-shell-20260917/button.webp') 80 / 6px / 0 stretch!important;background:none!important;pointer-events:none!important;z-index:1!important; }
 .phone-shell #enemySkillReadiness { top:13px!important;right:16px!important; }
 .phone-shell { --hud-smooth-plate:url('./assets/generated/unified-shell-20260917/button.webp'); }
 /* Full painted faces, not an enlarged crop of the grainy panel centre. */
 .phone-shell .status-strip>.status-resource,
 .phone-shell .combat-panel #combatStatsMini>span { border-image:none!important;background:var(--hud-smooth-plate) center/100% 100% no-repeat!important; }
 .phone-shell>.tabs { padding-left:0!important;padding-right:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:5px!important; }
 .phone-shell>.tabs>#capsulesTab,
 .phone-shell>.tabs>#bagTab,
 .phone-shell>.tabs>#supplyTab { width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;border:0!important;border-image:none!important;background:var(--hud-smooth-plate) center/100% 100% no-repeat!important; }
 .phone-shell .status-resource { background:none!important;border-image:url('./assets/generated/loot_header_buttons_subdued_1790601600071/button-header-subdued.png') 120 fill / 5px / 0 stretch!important; }
 .phone-shell>.combat-panel { padding-left:0!important;padding-right:0!important;border-left-width:0!important;border-right-width:0!important; }
 .phone-shell #combatStatsMini { display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;background:none!important;padding:0!important;gap:2px!important; }
 .phone-shell #combatStatsMini>span { position:relative!important;background:none!important;border:0!important;border-image:url('./assets/generated/loot_header_buttons_subdued_1790601600071/button-header-subdued.png') 120 fill / 4px / 0 stretch!important;padding:0!important;transform:none!important; }
 .phone-shell #combatStatsMini>span small { position:absolute!important;left:0!important;right:0!important;top:4px!important;text-align:center!important;font-size:9px!important;line-height:10px!important;white-space:nowrap!important; }
 .phone-shell #combatStatsMini>span strong { position:absolute!important;left:0!important;right:0!important;top:15px!important;text-align:center!important;font-size:10px!important;line-height:11px!important; }
 .phone-shell #capsulesPanel { border-image-source:none!important;isolation:isolate!important;overflow:visible!important; }
 .phone-shell #capsulesPanel::before { content:""!important;display:block!important;position:absolute!important;inset:-12px!important;border:0!important;border-image:url('./assets/generated/loot_bag_shell_clean_1790860800002/panel-frame-9slice-quiet-sides.png') 170 / 13px / 0 stretch!important;filter:sepia(.72) saturate(.55)!important;pointer-events:none!important;z-index:0!important; }
 .phone-shell .status-strip { grid-template-columns:repeat(3,minmax(0,1fr))!important;background-image:none!important; }
 .phone-shell .status-resource { position:relative!important;background: url('./assets/generated/loot_header_buttons_subdued_1790601600071/button-header-subdued.png') center/100% 100% no-repeat!important; }
 .phone-shell .status-resource-abyss { display:none!important; }
 .phone-shell .status-resource .status-resource-icon { position:absolute!important;width:22px!important;height:22px!important;transform:none!important; }
 .phone-shell .status-resource .status-resource-copy { position:absolute!important;width:52px!important;transform:none!important;text-align:center!important;justify-items:center!important; }
 .phone-shell .status-resource-supply .status-resource-icon { left:calc(50% - 34px)!important;top:5px!important; }
 .phone-shell .status-resource-supply .status-resource-copy { left:calc(50% - 9px)!important;top:5px!important; }
 .phone-shell .status-resource-shard .status-resource-icon { left:calc(50% - 35px)!important;top:5px!important; }
 .phone-shell .status-resource-shard .status-resource-copy { left:calc(50% - 9px)!important;top:5px!important; }
 .phone-shell .status-resource-power .status-resource-icon { left:calc(50% - 34px)!important;top:5px!important; }
 .phone-shell .status-resource-power .status-resource-copy { left:calc(50% - 9px)!important;top:5px!important; }
 .phone-shell .inline-reveal-grade { display:flex!important;align-items:baseline!important;gap:3px!important; }
 .phone-shell .inline-reveal-grade em { font-style:normal;font-size:inherit; }
 #lootBoardHelpButton,.loot-help-close { transition:filter 80ms ease,scale 80ms ease!important;touch-action:manipulation; }
 #lootBoardHelpButton:active,.loot-help-close:active { scale:.88!important;filter:brightness(.68)!important; }
 @media(prefers-reduced-motion:reduce) { #lootBoardHelpButton,.loot-help-close { transition:none!important; } }
}

/* Title rests in the upper sky, clear of the screen edge and lower artwork. */
/* Original, unmodified NEOPLE font; copyright notice is bundled in index.html. */
@font-face {
  font-family: 'AbyssTitleBlade';
  src: url('assets/fonts/DNFForgedBlade-Bold.otf') format('opentype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.menu-title h1 {
  font-family: 'AbyssTitleBlade', serif !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  letter-spacing: 1px !important;
  /* Keep the selected blade letterforms, without the old embossed gold glow. */
  color: #f3ead3;
  text-shadow: 0 2px 3px rgba(4, 9, 18, .9), 0 6px 16px rgba(0, 0, 0, .42);
}
.main-menu:not([data-panel]) .menu-title,
.main-menu[data-panel="home"] .menu-title {
  top: max(calc(env(safe-area-inset-top) + 24px), clamp(92px, 14svh, 132px));
  padding-top: 0;
}


/* SOURCE: ui/styles/companions/mimic-companion-v1.css */
.mimic-record { margin-top:12px; padding-top:10px; border-top:1px solid #79683e; color:#dbc99d; text-align:center; font-size:12px; }
.mimic-record-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:10px; }
.mimic-record-pair > div { display:flex; flex-direction:column; align-items:center; gap:4px; }
.mimic-record-pair img { width:40px; height:40px; object-fit:contain; }
.mimic-record-pair small { color:#aaa38e; font-size:10px; }
.mimic-record-pair span { font-size:11px; line-height:1.4; }
#companionWorkshopPanel .specialty-card[data-specialty-kind="gluttonMimic"] .specialty-help { white-space:pre-line; font-size:11px; line-height:1.65; }

/* Keep the long Korean exchange rules inside their own well at five stars. */
html[lang="ko"] body #menuCompanionPanel .companion-detail-dialog[data-specialty-kind="gluttonMimic"][data-max-stars="true"] #companionDetailGrowth {
  min-height: 0 !important;
  max-height: 100px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

#mimicMealDialog { box-sizing:border-box; width:min(340px,94vw); max-height:90dvh; overflow:auto; padding:30px 26px; border:0; color:#e7d7b0; background:#080f15 url('assets/generated/ui_controls_purpose_1788505000000/menu-content-panel.png') center/100% 100% no-repeat; text-align:center; }
#mimicMealDialog::backdrop { background:#000b; backdrop-filter:blur(3px); }
#mimicMealDialog form { margin:0; }
#mimicMealDialog .mimic-meal-close { position:absolute; right:18px; top:18px; width:28px; height:28px; border:0; background:url('assets/generated/loot_bag_controls_1790153000000/loot-close-button.png') center/contain no-repeat; cursor:pointer; }
#mimicMealDialog .mimic-meal-art { width:100px; height:100px; object-fit:contain; }
#mimicMealDialog h2 { font-size:18px; margin:12px 0; }
#mimicMealDialog p { font-size:12px; line-height:1.7; margin:8px 0; }
#mimicMealDialog .mimic-record > strong { display:none; }
#mimicMealDialog .mimic-record-pair img { width:56px; height:56px; }
#mimicMealDialog .mimic-meal-note { margin-top:18px; color:#b9ad94; }
/* Independent painted art bays; labels remain in their existing lower bays. */
#fusionPanel #fusionAbsorb[data-event-fusion] { display:block !important; }
#fusionPanel #fusionAbsorb[data-event-fusion] > img { position:absolute !important; top:50% !important; object-fit:contain !important; margin:0 !important; transform:translate(-50%,-50%); filter:none !important; }
#fusionPanel #fusionAbsorb[data-event-fusion] .event-fusion-material { width:48px !important; height:48px !important; opacity:1; }
#fusionPanel #fusionAbsorb[data-event-fusion] .event-fusion-result { left:50% !important; width:80px !important; height:80px !important; opacity:0; }
#mimicMealDialog .mimic-meal-art { width:96px; height:96px; }
#mimicMealDialog .mimic-meal-scene { grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr); gap:3px; margin-top:18px; }
#mimicMealDialog .mimic-meal-scene > div { gap:5px; }
#mimicMealDialog .mimic-meal-scene img { width:40px; height:40px; }
#mimicMealDialog .mimic-motion { width:104px; height:94px; align-self:start; margin-top:-7px; }
#mimicMealDialog .mimic-meal-scene span { min-height:31px; overflow-wrap:anywhere; }
#mimicMealDialog:has(.mimic-meal-scene) h2 { margin-top:23px; font-size:17px; }
#mimicMealDialog:has(.mimic-meal-scene) { padding-top:25px; padding-bottom:30px; }
#mimicMealDialog .mimic-meal-close:focus-visible { outline:1px solid #d8bf7d; outline-offset:2px; border-radius:50%; }


/* SOURCE: ui/styles/shared/painted-cell-center-audit-v1.css */
/* Individually reviewed painted recesses; keep the artwork and hit boxes. */
html body #menuHomePanel #menuStartButton,
html body #menuHomePanel #menuSettingsButton,
html body #menuHomePanel #menuCreditsButton {
  padding-top: 2px !important;
  padding-bottom: 0 !important;
}
/* This confirmation plate shares the story plate's asymmetric transparent margin. */
html body #fusionPanel #fusionCloseButton {
  padding-top: 2px !important;
  padding-bottom: 0 !important;
}

/* Each bundle resource owns its label/amount center; long labels must not
   borrow space from the neighbouring icon or resource column. */
html body #menuStorePanel .store-bundle-label {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
html:not([lang=ko]) body #menuStorePanel .store-bundle-contents:not([data-count="1"]) .store-bundle-resource {
  grid-template-rows: 20px 27px 17px;
  align-items: center;
}
html:not([lang=ko]) body #menuStorePanel .store-bundle-contents:not([data-count="1"]) .store-bundle-resource > img {
  height: 20px;
}
html:not([lang=ko]) body #menuStorePanel .store-bundle-contents:not([data-count="1"]) .store-bundle-label {
  font-size: 8px;
  line-height: 9px;
}
html:not([lang=ko]) body #menuStorePanel .store-bundle-contents[data-count="1"] .store-bundle-resource {
  grid-template-columns: 64px minmax(0, 132px);
  grid-template-rows: 28px 32px;
}
html:not([lang=ko]) body #menuStorePanel .store-bundle-contents[data-count="1"] .store-bundle-label {
  align-self: center;
  font-size: 10px;
  line-height: 12px;
}
html:not([lang=ko]) body #menuStorePanel .store-bundle-heading > strong {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 11px;
}
/* Compact translated controls retain the existing painted button and hit area. */
html body #menuCompanionPanel #companionPartyList .companion-party-card-actions > button {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  text-indent: 0 !important;
}
html:not([lang=ko]) body #menuCompanionPanel .companion-party-card-actions > button {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-size: 8px !important;
  line-height: 9px !important;
  padding: 1px 5px 0 !important;
  text-align: center !important;
}
html:not([lang=ko]) body #menuCompanionPanel [data-companion-filter],
html:not([lang=ko]) body #menuCompanionPanel [data-companion-sort] {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.05 !important;
}
html:not([lang=ko]) body #bagPanel .effect-summary-chip b {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
html:is([lang=en],[lang=es],[lang=pt],[lang=fr],[lang=de],[lang=id]) body .phone-shell > .combat-panel #fightStage .stage-controls #skillButton:not(.control-status) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-size: 7px !important;
  line-height: 7px !important;
  padding: 0 6px !important;
}
html:not([lang=ko]) body #boardPassiveChoicePanel .board-passive-choice-list > .board-passive-choice strong {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-size: 13px !important;
  line-height: 14px !important;
}


/* SOURCE: ui/styles/shared/hallung-review-20260922.css */
/* Hallung report: preserve approved artwork, align each painted recess. */
html body .topbar > div:first-child > h1 { translate:0 3px!important; }
html body .status-resource-supply .status-resource-copy { gap:3px!important; }
html body .status-resource-shard .status-resource-copy { gap:3px!important; }
html body .status-resource-power .status-resource-copy { gap:3px!important; }
html body #lootBoardHelpButton { width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; font-size:11px!important; line-height:18px!important; padding:0!important; }
html body #pullInlinePanel > .panel-head { padding-inline:12px!important; }
html body #enemyInfoPanel .panel-head h2 { translate:0 5px!important; }
html body #battleButton { scale:1.1; transform-origin:center; }
html body #rewardPanel.boss-reward .reward-card:nth-child(1) > .reward-icon { translate:6px 0!important; }
html body #rewardPanel.boss-reward .reward-card:nth-child(2) > .reward-icon { translate:6px 0!important; }
html body #rewardPanel.boss-reward .reward-card:nth-child(3) > .reward-icon { translate:6px 0!important; }
html body #rewardPanel.boss-reward .reward-card:nth-child(4) > .reward-icon { translate:6px 0!important; }
html body #rewardPanel.boss-reward .boss-reroll-action > .reward-copy { translate:0 2px!important; }
html body #rewardPanel.boss-reward .boss-reroll-action:not(:disabled) { filter:drop-shadow(0 0 4px #c79b4b88)!important; }
html body #boardPassiveRerollAdButton .board-passive-reroll-state { display:none!important; }
html body #boardPassiveRerollAdButton { grid-template-columns:30px minmax(0,1fr)!important; padding-inline:18px!important; }
html body .combat-stats-card .combat-power-hero > img { translate:0 -3px!important; }
html body .combat-stats-card .combat-power-hero > span { translate:0 -3px!important; }
html body #menuSettingsPanel#menuSettingsPanel.active { height:calc(100dvh - 12px)!important; max-height:calc(100dvh - 12px)!important; padding-top:6px!important; padding-bottom:22px!important; }
html body #menuSettingsPanel#menuSettingsPanel .settings-gothic-group { padding-block:3px!important; }
html body #menuSettingsPanel#menuSettingsPanel .settings-content-scroll { gap:0!important; }
html body #menuSettingsPanel#menuSettingsPanel .settings-section-heading { margin-block:4px!important; }
html body #menuAccountIdentity { display:block; font-size:9px!important; line-height:13px!important; color:#c9d1d0; overflow-wrap:anywhere; grid-column:1 / -1; }
html body #menuAccountIdentity:empty { display:none; }
html body #rewardedAdPanel.loading-request { z-index:20000!important; background:#02070bbb!important; backdrop-filter:blur(5px); }
html body #rewardedAdPanel.loading-request .rewarded-ad-card { width:min(320px,90vw)!important; min-height:150px!important; height:auto!important; padding:38px 24px!important; background:transparent!important; border-image:url('assets/generated/fusion_result_recess_v5_1793712600000/fusion-recess-deep-v5-final.png') 160 fill / 14px / 0 stretch!important; text-align:center!important; }
html body #rewardedAdPanel.loading-request .rewarded-ad-card > :is(.label,.rewarded-ad-visual,#rewardedAdTime,#rewardedAdCancelButton) { display:none!important; }
html body #rewardedAdPanel.loading-request #rewardedAdTitle { display:block!important; font-size:17px!important; color:#f0dea2!important; margin:0 0 12px!important; }
html body #rewardedAdPanel.loading-request #rewardedAdText { font-size:12px!important; margin:0!important; }
/* Grade vocabulary is identical to inventory items. */
[data-rarity="C"],[data-stage-grade="C"] { --review-grade:#4ade80; }
[data-rarity="B"],[data-stage-grade="B"] { --review-grade:#35c8ff; }
[data-rarity="A"],[data-stage-grade="A"] { --review-grade:#a970ff; }
[data-rarity="S"],[data-stage-grade="S"] { --review-grade:#ff873b; }
[data-rarity="SS"],[data-stage-grade="SS"] { --review-grade:#ffe052; }
[data-rarity="SSS"],[data-stage-grade="SSS"] { --review-grade:#ff4d59; }
html body #boardPassiveChoiceList .board-passive-choice > span > :is(b,strong),
html body #rewardPanel .reward-card[data-stage-grade] .reward-copy > strong,
html body #unlockShowcase[data-rarity] :is(#unlockShowcaseMeta,#unlockShowcaseTitle) { color:var(--review-grade,#ead8af)!important; }
html body #menuSettingsPanel#menuSettingsPanel.active { translate:0 -22px!important; }
@media (min-width:371px) {
  html body #menuSettingsPanel#menuSettingsPanel.active { translate:0 -44px!important; }
}
html body #bagPanel .bag-tray > .tray-head { padding-left:14px!important; }
html body #rewardPanel.boss-reward #rewardPanelTitle { translate:0 5px!important; }
html body #pullInlineList .inline-reveal-main { align-items:center!important; }
html body #pullInlineList .inline-reveal-copy { display:flex!important; flex-direction:column!important; justify-content:center!important; gap:4px!important; min-height:50px!important; }
html body #pullInlineList .inline-item-icon { object-fit:contain!important; align-self:center!important; }
html body #pullInlineList .inline-reveal-grade { margin:0!important; line-height:1.2!important; }
html body #pullInlineList .inline-reveal-name { margin:0!important; line-height:1.25!important; }
html body #pullInlineList .inline-reveal-copy { min-height:0!important; height:auto!important; gap:3px!important; }
html body #capsulesPanel #pullInlineList .inline-reveal-item .inline-reveal-main { width:100%!important; height:100%!important; grid-template-columns:28px minmax(0,1fr)!important; transform:none!important; }
html body #pullInlineList .inline-reveal-name { text-align:left!important; }
html body #pullInlineList .inline-reveal-grade { justify-content:flex-start!important; }

html body #fusionPanel.rarity-upgrade #fusionTitle { translate:0 3px!important; }
html body #fusionPanel.rarity-upgrade #fusionResultIcon { translate:0 3px!important; }


/* SOURCE: ui/styles/shared/tutorial-enemy-v24.css */
/* Each enemy has one portrait bay and one aligned text column. */
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row {
  display:grid!important;grid-template-columns:60px minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;column-gap:10px!important;row-gap:5px!important;
  padding:8px 14px!important;min-height:102px!important;align-content:center!important;
}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row > .enemy-entry-portrait {
  position:static!important;inset:auto!important;grid-column:1!important;grid-row:1 / 4!important;
  width:60px!important;height:60px!important;max-width:60px!important;margin:0!important;
  align-self:start!important;justify-self:center!important;transform:none!important;object-fit:contain!important;
}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-heading {
  grid-column:2!important;grid-row:1!important;display:grid!important;
  grid-template-columns:minmax(0,max-content) 20px!important;gap:6px!important;align-items:center!important;justify-content:start!important;
  padding:0!important;margin:0!important;position:static!important;
}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-name {
  text-align:left!important;font-size:15px!important;line-height:19px!important;margin:0!important;
  width:auto!important;min-width:0!important;position:static!important;transform:none!important;
  grid-column:1!important;grid-row:1!important;
}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-element {
  position:static!important;inset:auto!important;width:20px!important;height:20px!important;
  transform:none!important;justify-self:center!important;align-self:center!important;
  grid-column:2!important;grid-row:1!important;
}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-element img {width:20px!important;height:20px!important;}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-stage {grid-column:1 / -1!important;margin:0!important;text-align:left!important;}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values {
  grid-column:2!important;grid-row:2!important;grid-template-columns:1fr 1fr 1.2fr!important;
  width:100%!important;margin:0!important;gap:5px!important;position:static!important;transform:none!important;
}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-values > span {text-align:left!important;}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-values > span > :is(small,b) {text-align:left!important;}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values small {
  font-size:10.5px!important;line-height:13px!important;
}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-values b {
  font-size:12.5px!important;line-height:15px!important;
}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-info-row .enemy-entry-abilities {
  grid-column:2!important;grid-row:3!important;width:100%!important;margin:0!important;
  display:grid!important;gap:8px!important;text-align:left!important;position:static!important;transform:none!important;
}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-ability {margin:0!important;display:grid!important;gap:3px!important;}
html body #enemyInfoPanel#enemyInfoPanel #enemyInfoList .enemy-entry-ability :is(small,strong) {margin:0!important;position:static!important;transform:none!important;text-align:left!important;line-height:1.35!important;}
html body #enemyInfoPanel#enemyInfoPanel .enemy-info-card[data-enemy-count="1"] {height:min(380px,calc(100dvh - 28px))!important;min-height:0!important;}
html body #enemyInfoPanel#enemyInfoPanel .enemy-info-card[data-enemy-count="1"] #enemyInfoList {align-content:center!important;}
html body #boardPassiveChoicePanel #boardPassiveRerollAdButton .board-passive-reroll-icon {
  width:28px!important;height:28px!important;line-height:28px!important;
  top:calc(50% - 3px)!important;transform:translate(-50%,-50%)!important;
}
/* Keep words intact at mobile widths; allow long foreign words as a last resort. */
html body :is(#enemyInfoList,.tutorial-coachmark,.beginner-context-coachmark,#boardPassiveChoiceList,#rewardChoices) :is(strong,small,em,p) {
  word-break:normal!important;overflow-wrap:break-word!important;text-wrap:pretty;
}
html[lang="ko"] body :is(#enemyInfoList,.tutorial-coachmark,.beginner-context-coachmark,#boardPassiveChoiceList,#rewardChoices) :is(strong,small,em,p) {word-break:keep-all!important;}
html body #boardPassiveChoiceList .board-passive-choice > span > em {order:3!important;}
html body #boardPassiveChoiceList .board-passive-choice > span > small {order:4!important;color:#a9c59a!important;}
html body #boardPassiveChoiceList .board-passive-choice > span > b {order:1!important;}
html body #boardPassiveChoiceList .board-passive-choice > span > strong {order:2!important;}
html body #rewardPanel .reward-card .reward-copy > strong {order:1!important;}
html body #rewardPanel .reward-card .reward-copy > small {order:2!important;}
html body #rewardPanel .reward-card .reward-copy > em {order:3!important;}
html body #rewardPanel .reward-card .reward-copy > .reward-current-health {order:4!important;}
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice > span {
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  height:86px!important;gap:3px!important;overflow:visible!important;
}
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice > span > small {
  display:block!important;font-size:9px!important;line-height:12px!important;margin:0!important;
}
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice > span > em {
  display:block!important;height:auto!important;min-height:0!important;max-height:none!important;
  font-size:11px!important;line-height:13px!important;-webkit-line-clamp:unset!important;
}
html body #enemyInfoPanel#enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-info-row {
  grid-template-columns:60px minmax(0,1fr)!important;column-gap:8px!important;
  padding-inline:8px!important;min-height:100px!important;row-gap:4px!important;
}
html body #enemyInfoPanel#enemyInfoPanel .enemy-info-card[data-enemy-count="3"] #enemyInfoList .enemy-entry-portrait {max-width:64px!important;}
/* Per-slot optical corrections against the painted recess, not the outer card. */
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice > span {
  right:18%!important;width:auto!important;left:35.5%!important;
  height:auto!important;transform:translateY(-50%)!important;
  text-align:left!important;align-items:flex-start!important;
}
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice > span > :is(b,strong,small,em) {text-align:left!important;width:100%!important;margin-left:0!important;padding-left:0!important;}
html body #enemyInfoPanel#enemyInfoPanel .enemy-info-card[data-enemy-count="3"] .panel-head h2 {translate:0 6px!important;}
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice:nth-child(1) > span {translate:0 5px!important;}
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice:nth-child(2) > span {translate:0 4px!important;}
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice:nth-child(3) > span {translate:0 3px!important;}
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice:nth-child(1) > img {translate:0 0px!important;}
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice:nth-child(2) > img {translate:0 0px!important;}
html body #boardPassiveChoicePanel #boardPassiveChoiceList .board-passive-choice:nth-child(3) > img {translate:0 0px!important;}
html body :is(#tutorialText,#beginnerContextText,#tutorialTitle,#beginnerContextTitle) {
  word-break:keep-all!important;overflow-wrap:break-word!important;text-wrap:pretty;
}
@media(max-width:370px) {
  html body :is(#tutorialText,#beginnerContextText) {font-size:12px!important;line-height:1.45!important;}
}
/* Recipe materials stay legible above rarity surfaces and the tutorial scrim. */
html body #bagPanel :is(#bagTrayList,#bagGrid) .tutorial-material-highlight {
  outline:3px solid #ffe2a0!important;outline-offset:-3px!important;
  box-shadow:inset 0 0 0 5px #291b0a,inset 0 0 18px #d1a14555,0 0 7px #dfb44d!important;
  opacity:1!important;filter:none!important;touch-action:none!important;
}
html body #bagPanel .tutorial-material-number {
  position:absolute!important;left:5px!important;top:26px!important;right:auto!important;bottom:auto!important;
  width:20px!important;height:20px!important;display:grid!important;place-items:center!important;
  background:#21180d!important;border:1px solid #ffe2a0!important;border-radius:50%!important;
  color:#ffe2a0!important;font-size:14px!important;font-weight:900!important;line-height:20px!important;
  z-index:8!important;pointer-events:none!important;text-shadow:none!important;
}
html body #bagGrid .tutorial-placement-cell[data-lesson-number]::after {
  position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;
  color:#ffe2a0!important;font-size:18px!important;z-index:4!important;
}
html body.tutorial-locked .pointer-ghost {z-index:10050!important;opacity:1!important;filter:none!important;}
html body #bagPanel.tutorial-recipe-materials #bagTrayList .tray-item:not(.tutorial-material-highlight) {opacity:.38!important;filter:saturate(.35)!important;}



/* SOURCE: ui/styles/shared/loot-combat-end-20260923.css */
/* Preserve the painted surfaces; align the content inside each independent bay. */
html body #capsulesPanel #pullInlineList .inline-reveal-item .inline-reveal-main {
  display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;
  justify-content:stretch!important;gap:6px!important;margin:0!important;width:100%!important;
}
html body #capsulesPanel #pullInlineList .inline-reveal-copy {
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  justify-content:center!important;width:100%!important;min-width:0!important;gap:2px!important;
  text-align:left!important;margin:0!important;padding:0!important;transform:none!important;
}
html body #capsulesPanel #pullInlineList :is(.inline-reveal-grade,.inline-reveal-name) {
  width:100%!important;max-width:100%!important;min-width:0!important;text-align:left!important;
  justify-content:flex-start!important;align-self:flex-start!important;margin:0!important;padding:0!important;
  transform:none!important;translate:none!important;text-indent:0!important;
}
html body #lootBoardHelpButton {
  position:relative!important;width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;
  padding:0!important;border:0!important;background:none!important;box-shadow:none!important;font-size:0!important;
}
html body #lootBoardHelpButton::before {
  content:'?'!important;position:absolute!important;left:2px!important;top:2px!important;
  width:14px!important;height:14px!important;box-sizing:border-box!important;
  border:1px solid #b99a57!important;border-radius:50%!important;background:#111a20!important;
  color:#f1d998!important;font:700 10px/12px sans-serif!important;text-align:center!important;
}
html body #lootBoardHelpButton::after {content:''!important;position:absolute!important;inset:-7px!important;}
html body #fightStage #battleButton {font-size:13px!important;line-height:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:2px 14px 0!important;min-width:104px!important;}
html body #enemyFighter,html body #enemyFighter * {pointer-events:none!important;}
html body #enemyInfoHitTarget {position:absolute!important;padding:0!important;margin:0!important;min-width:0!important;min-height:0!important;background:none!important;border:0!important;box-shadow:none!important;transform:none!important;z-index:9!important;}
html body #enemyInfoHitTarget:disabled {pointer-events:none!important;}
html body #fightStage #enemyFighter::after {display:none!important;}
html body #fightStage:not(.fighting):has(#enemyInfoHitTarget:not(:disabled):is(:hover,:focus-visible,:active)) #enemyFighter::after {display:block!important;opacity:1!important;}
html body #lootBoardHelp[open] {
  display:grid!important;grid-template-rows:48px minmax(0,1fr) 0!important;gap:8px!important;
  height:min(700px,calc(100dvh - 60px))!important;max-height:calc(100dvh - 60px)!important;
  padding:30px 24px 34px!important;overflow:hidden!important;
}
html body #lootBoardHelp #lootBoardHelpTitle {display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:0!important;margin:0!important;line-height:23px!important;}
html body #lootBoardHelp .loot-help-scroll {height:100%!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain;box-sizing:border-box!important;padding:0 5px 14px!important;}
html body #endPanel.defeat {align-items:flex-start!important;padding:8px 0!important;overflow:hidden!important;}
html body #endPanel.defeat .end-card {height:min(810px,calc(100dvh - 16px))!important;max-height:calc(100dvh - 16px)!important;margin:0!important;transform:none!important;}
html body #endPanel.defeat .end-actions {
  top:79.5%!important;bottom:1.5%!important;left:6%!important;right:6%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:44px 44px 48px!important;
  gap:4px 6px!important;align-content:center!important;
}
html body #endPanel.defeat .end-actions > .mini-button {
  width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin:0!important;padding:3px 10px!important;font-size:10px!important;line-height:13px!important;
  background-image:url('assets/generated/defeat_result_buttons_v14_1791552000340/defeat-button-compact-balanced-final.png')!important;
  background-size:100% 100%!important;
}
html body #endPanel.defeat .end-actions > [hidden] {display:none!important;}
html body #endPanel.defeat #endRestartButton {grid-column:1!important;grid-row:3!important;font-size:15px!important;}
html body #endPanel.defeat #endHomeButton {grid-column:2!important;grid-row:3!important;font-size:13px!important;}
html body #endPanel.defeat .end-action-label {position:static!important;transform:none!important;translate:none!important;width:auto!important;height:auto!important;line-height:18px!important;}
/* Reward descriptions wrap within the painted panel, never sideways. */
#pullRevealPanel#pullRevealPanel.high-rarity .rare-showcase .stats {
  inset: 57% 13% auto !important;
  height: 27% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 4px 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  gap: 3px !important;
}
#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .stats .rare-stat-line,
#pullRevealPanel.pull-reveal.high-rarity .rare-showcase .stats .rare-stat-values {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
  line-height: 1.3 !important;
}
/* Optical sprite bounds, rather than transparent canvas, center the king. */
html body #rewardPanel.boss-reward .reward-boss-portrait {
  left:var(--reward-portrait-left, 50%)!important;top:var(--reward-portrait-top, 16%)!important;
  width:var(--reward-portrait-width, 148px)!important;height:var(--reward-portrait-height, 126px)!important;
  transform:none!important;translate:none!important;pointer-events:none!important;
}
html body #rewardPanel.boss-reward[data-reward-count="4"] .reward-grid {top:40%!important;gap:6px!important;}
html body #rewardPanel.boss-reward[data-reward-count="5"] .reward-grid {top:28%!important;gap:6px!important;}
html body #rewardPanel.boss-reward[data-reward-count] .reward-modal-card .reward-card:not(.reward-ad-reroll) {
  flex:1 0 68px!important;min-height:68px!important;
}
/* Keep the existing painted controls, with distinct primary and optional actions. */
html body #endPanel.defeat #endRestartButton {
  background-image:url('assets/generated/board_result_confirm_button_1790688000000/board-result-confirm-button-trimmed.png')!important;
  color:#fff0bb!important;filter:drop-shadow(0 0 3px #be934c99)!important;
}
html body #endPanel.defeat #endHomeButton {filter:none!important;}
html body #endPanel.defeat :is(#endMenuButton,#endShardBonusButton):not(:disabled) {
  filter:none!important;
}
html body #endPanel.defeat :is(#endShardReviveButton,#endStoneReviveButton):not(:disabled) {
  animation:none!important;
}

/* Three-line rewards reserve room for the copy instead of shrinking its letters. */
html body #rewardPanel.boss-reward[data-reward-count] .reward-modal-card .reward-card:has(.reward-current-health) {
  flex:1.35 0 92px!important;min-height:92px!important;
}
html body #rewardPanel.boss-reward .reward-card .reward-copy {line-height:1.3!important;}
/* Remove scale + translateX interaction that shifted only the battle button left. */
html body #fightStage #battleButton {
  scale:none!important;width:120px!important;min-width:120px!important;height:36px!important;
  left:50%!important;right:auto!important;transform:translateX(-50%)!important;
  font-size:12px!important;line-height:16px!important;padding:0 14px 3px!important;
}
html body #fightStage .stage-controls {
  left:50%!important;right:auto!important;top:52px!important;width:120px!important;transform:translateX(-50%)!important;
  display:flex!important;justify-content:center!important;align-items:center!important;
}
html body #fightStage .stage-controls #skillButton {flex-shrink:0!important;margin-inline:0!important;}
html body #endPanel.defeat .end-actions > .mini-button {color:#fff0bb!important;position:relative!important;isolation:isolate;}
/* Glows live behind the lettering. All action text uses the same warm ivory. */
html body #endPanel.defeat :is(#endMenuButton,#endShardBonusButton,#endShardReviveButton,#endStoneReviveButton):not(:disabled)::after {
  content:''!important;display:block!important;position:absolute!important;inset:3px 2px!important;
  pointer-events:none!important;z-index:-1!important;background:inherit!important;background-size:100% 100%!important;
  opacity:.8!important;filter:drop-shadow(0 0 3px #668da9)!important;
}
html body #endPanel.defeat :is(#endShardReviveButton,#endStoneReviveButton):not(:disabled)::after {
  filter:drop-shadow(0 0 4px #a280cc)!important;animation:reviveRimPulse 2.4s ease-in-out infinite!important;
}
@keyframes reviveRimPulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){html body #endPanel.defeat .end-actions > .mini-button::after{animation:none!important;}}


/* SOURCE: ui/styles/shared/title-audit-20260923.css */
/* Optical corrections are scoped to the individual painted title wells. */
html body #menuCompanionPanel .companion-summon-reveal[data-type="premium"] .companion-summon-reveal-title {
  padding: 0 !important;
  transform: translateY(-3px) !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .companion-summon-reveal-card {
  grid-template-columns: 29px minmax(0, 1fr) !important;
  grid-template-rows: 11px 15px 12px !important;
  align-content: center !important;
  column-gap: 2px !important;
  row-gap: 0 !important;
  padding: 4px !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art {
  grid-row: 1 / 4 !important;
  width: 29px !important;
  height: 36px !important;
  align-self: center !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] .summon-reveal-card-art img {
  width: 29px !important;
  height: 33px !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] #companionSummonRevealResults .summon-reveal-card-name,
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] #companionSummonRevealResults .summon-reveal-card-grade {
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: center !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="10"] #companionSummonRevealResults .summon-reveal-card-name {
  grid-row: 2 !important;
  font-size: var(--summon-name-size, 9px) !important;
  line-height: 15px !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
html body #menuCompanionPanel .summon-reveal-card-stars {
  display: block;
  grid-column: 2;
  grid-row: 3;
  color: #eed086;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: .5px;
  text-align: left;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-count > strong {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  font-size: var(--summon-name-size, 16px) !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-count > .summon-reveal-card-stars {
  display: block !important;
  text-align: center !important;
  margin-top: 6px !important;
  font-size: 15px !important;
  line-height: 18px !important;
}
.summon-stars-upgraded { animation: summon-stars-name-pulse 900ms ease-out; }
@keyframes summon-stars-name-pulse {
  25% { color: #fff4c4; text-shadow: 0 0 8px #eec76c; }
  100% { color: #eed086; }
}
@media (prefers-reduced-motion: reduce) { .summon-stars-upgraded { animation: none; } }
/* Single-pull copy uses one vertical stack, not the ten-pull card columns. */
html body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-count {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-align: center !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-count > .summon-reveal-card-stars {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  width: 100% !important;
  flex: none !important;
}
html body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-type="premium"] .companion-summon-reveal-title { transform: translateY(-1px) !important; }
html body #menuCompanionPanel .companion-summon-reveal[data-count="1"][data-type="common"] .companion-summon-reveal-title { transform: translateY(-2px) !important; }
html body #menuCompanionPanel .companion-summon-reveal[data-count="1"] .companion-summon-reveal-count > .summon-reveal-card-stars { color: #eed086 !important; text-shadow: 0 1px 2px #000 !important; }
/* The retained result list follows the same name -> stars reading order. */
html body #menuCompanionPanel .summon-result-copy {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 17px 12px 13px !important;
  gap: 2px !important;
}
html body #menuCompanionPanel .summon-result-copy > b {
  width: 100% !important;
  white-space: nowrap !important;
  font-size: var(--summon-name-size, 12px) !important;
  line-height: 17px !important;
}
html body #menuCompanionPanel .summon-result-copy > .summon-reveal-card-stars {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
html body #menuCompanionPanel .summon-result-copy > .summon-result-meta { grid-row: 3 !important; }
/* The web reward-ad frame has a separate crest well above its content. */
html body #rewardedAdPanel:not(.loading-request) .rewarded-ad-card > .label { translate: 0 -25px; }
html body #rewardedAdPanel:not(.loading-request) #rewardedAdTitle { translate: 0 -37px; }
/* Fusion result heading: optical glyph centre in the curved title recess. */
html body #fusionPanel #fusionTitle { translate: 0 2px; }
/* Companion ability copy uses the established two-line type size for every ability. */
html body #menuCompanionPanel .companion-detail-dialog .companion-detail-effects b {
  font-size: 11.5px !important;
  line-height: 16px !important;
  white-space: pre-line !important;
}

/* Individual painted wells: optical corrections, without moving the artwork. */
html body #fusionPanel.fusion-panel.structured-fusion-result #fusionTitle {
  translate: 0 0 !important;
}
html body #fusionPanel.fusion-panel.structured-fusion-result #fusionCloseButton {
  padding-top: 0 !important;
  padding-bottom: 6px !important;
}
html body #companionSummonReveal #companionSummonRevealConfirm {
  padding-top: 0 !important;
  padding-bottom: 4px !important;
}
html body #itemSaleConfirmPanel #itemSaleConfirmTitle {
  translate: 0 -3px !important;
}
html body #rewardedAdPanel:not(.loading-request) #rewardedAdCancelButton {
  width: 240px !important;
  max-width: 100% !important;
  height: 48px !important;
  justify-self: center;
  display: grid !important;
  place-items: center !important;
  padding: 0 22px 4px !important;
  line-height: 14px !important;
  font-size: 11px !important;
  background: transparent url("assets/generated/boss_discovery_showcase_v2_1793691000000/boss-discovery-confirm-v2-alpha.png") center / 100% 100% no-repeat !important;
}
/* Unowned readable specialties have one ability well, not two. */
html body #menuCompanionPanel .companion-detail-dialog[data-readable-effects="true"][data-max-stars="false"]:not(:has(.collection-detail-party-actions:not(:empty))) {
  height: 713px !important;
  grid-template-rows: 220px auto auto 18px 80px auto 104px 44px !important;
}

html body #fusionPanel#fusionPanel #fusionCloseButton#fusionCloseButton {
  padding: 2px 0 0 !important;
}


/* The ten-pull artwork has its button baked in. Compress only its bottom
   section; preserve the title and all ten portrait wells at their old size. */
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .companion-summon-reveal-stage {
  background: none !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .companion-summon-reveal-stage::before,
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .companion-summon-reveal-stage::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: url("assets/generated/companion_summon_reveal_v12_20260831/ten-pull-frame-one-button-alpha.png") center / 100% 100% no-repeat !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .companion-summon-reveal-stage::before {
  clip-path: inset(0 0 16% 0);
  transform: none !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .companion-summon-reveal-stage::after {
  clip-path: inset(84% 0 0 0);
  transform-origin: 50% 84% !important;
  transform: scaleY(.72) !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .companion-summon-reveal-actions {
  bottom: 8.9% !important;
  height: 5.5% !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] #companionSummonRevealConfirm {
  height: 100% !important;
  min-height: 0 !important;
  padding: 2px 0 0 !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="1"] #companionSummonRevealConfirm {
  padding: 4px 0 0 !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .companion-summon-reveal-stage::before,
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .companion-summon-reveal-stage::after {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mix-blend-mode: normal !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] #companionSummonRevealConfirm {
  padding: 0 0 4px !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .companion-summon-reveal-stage::before {
  clip-path: inset(0 0 15.9% 0);
}
html body #menuCompanionPanel #companionSummonReveal[data-count="1"] #companionSummonRevealConfirm {
  padding: 0 0 2px !important;
}

/* Follow-up: center the glyphs in each painted home and balance ten-pull cells. */
html body #menuCompanionPanel #companionSummonReveal[data-type="premium"][data-count="1"] .companion-summon-reveal-title {
  transform: translateY(-3px) !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-type="premium"][data-count="10"] .companion-summon-reveal-title {
  transform: translateY(-5px) !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="1"] #companionSummonRevealConfirm { padding: 0 0 6px !important; }
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] #companionSummonRevealConfirm { padding: 0 0 8px !important; }
html body #menuCompanionPanel .companion-menu-tabs > button[data-companion-tab] { padding: 0 12px 3px !important; }
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .companion-summon-reveal-card {
  grid-template-columns: 36px minmax(0, 50px) !important;
  justify-content: center !important;
  column-gap: 4px !important;
  padding: 4px 3px !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .summon-reveal-card-art,
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] .summon-reveal-card-art img {
  width: 36px !important;
  height: 40px !important;
  object-fit: contain !important;
}
html body #menuCompanionPanel #companionSummonReveal[data-count="10"] #companionSummonRevealResults :is(.summon-reveal-card-name, .summon-reveal-card-grade, .summon-reveal-card-stars) {
  text-align: center !important;
  justify-self: stretch !important;
}
/* Entry buttons: painted inner wells sit above the former text baseline. */
html body #menuHomePanel #menuStartButton.menu-button { padding: 0 30px 4px !important; }
html body #menuHomePanel #menuSettingsButton.menu-button { padding: 0 30px 4px !important; }
html body #menuHomePanel #menuCreditsButton.menu-button { padding: 0 30px 4px !important; }



/* SOURCE: ui/styles/shared/rewards-review-20260923.css */
/* Each adjustment below targets a painted bay, not the entire screen. */
html body #menuSettingsPanel .menu-panel-head > strong { margin-top: 8px !important; }
html body #menuSettingsPanel#menuSettingsPanel .menu-panel-head > strong {translate:0 8px!important;}
html body #menuSettingsPanel #menuSettingsBackButton { translate: 0 8px !important; }
html body #menuSettingsPanel #menuAccountIdentity { color:#d9d6c9!important; font-size:11px!important; }
html body #menuLobbyPanel .lobby-status-grid > div:nth-child(1) > img { top:40%!important; }
html body #menuLobbyPanel .lobby-status-grid > div:nth-child(2) > img { top:40%!important; }
html body #menuLobbyPanel .lobby-status-grid > div:nth-child(3) > img { top:40%!important; }
html body #menuLobbyPanel .lobby-status-grid > div > span { top:7px!important; }
html body #menuLobbyPanel .lobby-status-grid > div > strong { top:18px!important; }
html body #menuCodexPanel .codex-tab { padding:3px 4px!important; transform:none!important; translate:none!important; }
html body #menuCodexPanel .codex-tab > span,html body #menuCodexPanel .codex-tab > strong { transform:none!important; translate:none!important; margin:0!important; text-shadow:0 1px 1px #000!important; }
html body #menuCodexPanel .codex-tab > span > b { text-shadow:0 1px 1px #000!important; }
html body #bossCodexBody .codex-row.boss .codex-row-art { width:48px!important;height:48px!important;align-self:center!important;transform:none!important; }
html body #bossCodexBody .codex-row.boss .codex-row-art img {width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;transform:none!important; }
html body #itemCodexBody :is(strong,span,small,p) {text-shadow:none!important;filter:none!important;}
html body .item-info-panel button:active,html body .codex-detail-confirm:active {filter:brightness(1.3)!important;scale:.97;}
html body #codexGuideBody .collection-recipe-card { aspect-ratio:auto!important;min-height:154px!important; }
html body #codexGuideBody .collection-recipe-card::before {background-size:100% 100%!important;mask-size:100% 100%!important;}
html body #codexGuideBody .collection-recipe-card::before {mask-image:url("assets/generated/store_card_native_v3_20260828/store-card-wide-mask-stretch.svg")!important;}
html body #codexGuideBody .collection-recipe-card > header {top:17px!important;left:17px!important;right:17px!important;justify-content:flex-start!important;gap:7px!important;}
html body #codexGuideBody .collection-recipe-formula {top:40px!important;bottom:42px!important;}
html body #codexGuideBody .collection-recipe-card > p {bottom:28px!important;}
html body #codexGuideBody .collection-recipe-source {bottom:16px!important;}
html body #codexGuideBody [data-rarity="F"] {--recipe-grade:#aab2bb;}
html body #codexGuideBody [data-rarity="D"] {--recipe-grade:#c6cbd0;}
html body #codexGuideBody [data-rarity="C"] {--recipe-grade:#87d8a0;}
html body #codexGuideBody [data-rarity="B"] {--recipe-grade:#83cce7;}
html body #codexGuideBody [data-rarity="A"] {--recipe-grade:#c498f3;}
html body #codexGuideBody [data-rarity="S"] {--recipe-grade:#f5bc7b;}
html body #codexGuideBody [data-rarity="SS"] {--recipe-grade:#f2df8c;}
html body #codexGuideBody [data-rarity="SSS"] {--recipe-grade:#fa9aa9;}
html body #codexGuideBody .collection-recipe-part :is(strong,small),html body #codexGuideBody .collection-recipe-card > header :is(h3,span) {color:var(--recipe-grade,#e8d69d)!important;}
html body #codexGuideBody .unlock-pill {height:auto!important;min-height:60px!important;overflow:visible!important;}
html body #codexGuideBody .unlock-pill-copy {min-width:0!important;}
html body #codexGuideBody .unlock-pill-copy :is(strong,small,span) {white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;line-height:1.4!important;}
html body #menuAttendancePanel .attendance-week-tabs {background:none!important;filter:none!important;gap:3px!important;}
html body #menuAttendancePanel .attendance-week-tabs button {background:transparent url("assets/generated/ui/tab-button-active.png") center/100% 100% no-repeat!important;opacity:.7;}
html body #menuAttendancePanel .attendance-week-tabs button.active {opacity:1;}
html body #menuAttendancePanel .attendance-week-tabs button::after {display:none!important;}
html body #menuAttendancePanel .attendance-day > b {left:15px!important;top:9px!important;}
html body #attendanceClaimButton {display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:0 18px 2px!important;}
html body #attendanceClaimButton > img {position:static!important;transform:none!important;translate:none!important;width:22px!important;height:22px!important;object-fit:contain!important;}
html body #lootBoardHelpButton {vertical-align:middle!important;align-self:center!important;translate:0 -1px!important;margin:0 0 0 3px!important;}
html body #combatStatsMini > span {padding-top:4px!important;padding-bottom:3px!important;}
html body .ability-spent {filter:grayscale(1)!important;opacity:.42!important;}
html body #combatSupportDock .combat-companion.support > img {animation:support-breathe 2.4s ease-in-out infinite!important;transform-origin:50% 90%;}
@keyframes support-breathe {0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){html body #combatSupportDock .combat-companion.support > img {animation:none!important;}}
html body #menuRewardsPanel.menu-panel.active {position:relative!important;box-sizing:border-box!important;width:100%!important;height:min(830px,calc(100dvh - 10px))!important;display:grid!important;grid-template-rows:62px 42px minmax(0,1fr)!important;gap:10px!important;padding:18px 25px 32px!important;border:0!important;background:transparent var(--menu-surface-panel) center/100% 100% no-repeat!important;overflow:hidden!important;}
html body .main-menu[data-panel="rewards"] {padding:0!important;}
html body .main-menu[data-panel="rewards"] .menu-scene {width:min(100%,430px)!important;height:100dvh!important;max-height:none!important;background:#040914!important;}
html body .main-menu[data-panel="rewards"] .menu-scene::before,html body .main-menu[data-panel="rewards"] .menu-title {display:none!important;}
html body .main-menu[data-panel="rewards"] .menu-card {top:5px!important;right:5px!important;bottom:auto!important;left:5px!important;width:auto!important;height:auto!important;transform:none!important;}
html body #menuRewardsPanel .menu-panel-head {position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:0!important;padding:0!important;margin:0!important;background:none!important;border:0!important;}
html body #menuRewardsPanel .menu-panel-head > strong {font-size:22px!important;color:#ecda9b!important;}
html:not([lang="ko"]) body #menuRewardsPanel .menu-panel-head > strong {width:calc(100% - 74px)!important;max-width:none!important;font-size:17px!important;line-height:1.2!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;}
html body #menuRewardsPanel .menu-back-button {position:absolute!important;left:2px!important;top:50%!important;transform:translateY(-50%)!important;font-size:12px!important;}
html body #menuRewardsPanel .reward-hub-tabs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;}
html body #menuRewardsPanel .reward-hub-tabs button {min-width:0;padding:0 4px 2px;border:0;background:transparent url("assets/generated/ui/tab-button-active.png") center/100% 100% no-repeat;color:#b7c2c8;font-size:12px;}
html body #menuRewardsPanel .reward-hub-tabs button.active {color:#ffe6a3;}
html body #rewardHubBody {overflow-y:auto;overflow-x:hidden;min-height:0;}
html body #menuRewardsPanel.menu-panel.active {max-height:calc(100dvh - 10px)!important;}
html body .main-menu[data-panel="rewards"] .menu-characters {display:none!important;}
html body #bossCodexBody .codex-row.boss .codex-row-art {position:relative!important;overflow:hidden!important;flex:none!important;}
html body #bossCodexBody .codex-row.boss .codex-row-art img {position:absolute!important;max-width:none!important;max-height:none!important;}
html body #itemInfoPanel.codex-preview #itemRemoveButton:active {filter:brightness(1.35)!important;transform:scale(.96)!important;}
html body #menuAttendancePanel#menuAttendancePanel #attendanceClaimButton {padding:0 16px 1px!important;}
html body .phone-shell > .topbar > div:first-child h1 {translate:0 2px!important;}
html body .reward-hub-note {font-size:12px;line-height:1.5;color:#b8c3c9;margin:8px 8px 16px;}
html body .reward-hub-card {position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 8px;padding:20px 18px;margin-bottom:12px;background:transparent var(--menu-surface-product) center/100% 100% no-repeat;}
html body .reward-hub-card > strong {font-size:14px;color:#eddb9b;line-height:1.4;}
html body .reward-hub-card > span {font-size:12px;color:#b6cbd7;}
html body .reward-hub-card > p {grid-column:1/-1;font-size:12px;line-height:1.5;color:#d2dfda;margin:0;}
html body .reward-hub-card > button {grid-column:1/-1;justify-self:center;width:160px;height:36px;padding:0 16px 2px;border:0;background:transparent url("assets/generated/item_detail_refresh_1790256000256/fusion-confirm-quiet.png") center/100% 100% no-repeat;color:#f5df9d;}
html body #lobbyAttendanceButton.reward-ready {filter:drop-shadow(0 0 4px #d6b66d)!important;}


/* SOURCE: ui/styles/shared/individual-center-20260923.css */
/* Visually checked at 360x800 and 390x844. Keep the original art and layout.
   The daily completion label was in the content stack, leaving its painted
   crest empty. Relative translation preserves every neighbouring position. */
html body #unlockShowcase.daily #unlockShowcaseMeta {
  translate: 0 -114px !important;
}

/* Non-mythic three-item promotion uses a taller title recess: text was 4px
   high. Mythic's own artwork is already centred and must remain untouched. */
html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionTitle {
  translate: 0 4px !important;
}

/* Keep the title at the same authored viewport height on entry, login, and
   nickname screens. The home panel already uses this exact safe-area rule. */
body #mainMenu.main-menu[data-panel="login"] .menu-title {
  top: max(calc(env(safe-area-inset-top) + 24px), clamp(92px, 14svh, 132px)) !important;
}

/* The three codex categories use the same individual painted selector art as
   the ranking period tabs. Center each label and its progress inside its own
   tab, including the unselected King Records tab. */
html body #menuCodexPanel.active .codex-tabbar {
  width: calc(100% - 16px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 0 !important;
  background: none !important;
  filter: none !important;
}
html body #menuCodexPanel.active .codex-tabbar::before {
  content: none !important;
  display: none !important;
}
html body #menuCodexPanel.active .codex-tab,
html body #menuCodexPanel.active .codex-tab.open {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 3px !important;
  background: transparent url("assets/generated/codex_ranking_surface_v10_1793476800000/ranking-period-neutral-v10.png") center / 100% 100% no-repeat !important;
  color: #c7d8df !important;
  text-align: center !important;
  transform: none !important;
  translate: none !important;
}
html body #menuCodexPanel.active .codex-tab.open {
  background-image: url("assets/generated/codex_ranking_surface_v10_1793476800000/ranking-period-active-v10.png") !important;
  color: #fff0ad !important;
  text-shadow: 0 1px 2px #000, 0 0 3px rgba(255, 214, 105, .3) !important;
}
html body #menuCodexPanel.active .codex-tab::after {
  content: none !important;
  display: none !important;
}
html body #menuCodexPanel.active .codex-tab > img,
html body #menuCodexPanel.active .codex-tab > span > small {
  display: none !important;
}
html body #menuCodexPanel.active .codex-tab > span {
  display: contents !important;
}
html body #menuCodexPanel.active .codex-tab > span > b {
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-overflow: clip !important;
  text-shadow: 0 1px 2px #000 !important;
  white-space: nowrap !important;
}
html body #menuCodexPanel.active .codex-tab > strong {
  grid-row: 2 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #74bfe7 !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
html body #menuCodexPanel.active .codex-tab.open > strong {
  color: #f7d97b !important;
}


/* SOURCE: ui/styles/shared/rewards-separation-20260923.css */
/* The attendance book and the expedition goals are independent destinations. */
html body #menuRewardsPanel.menu-panel.active {
  grid-template-rows: 59px 39px minmax(0, 1fr) !important;
  gap: 4px !important;
  padding: 18px 29px 34px !important;
}
html body #menuRewardsPanel .reward-hub-tabs {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 1px 3px !important;
  overflow: hidden !important;
}
html body #menuRewardsPanel .reward-hub-tabs button {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 35px !important;
  min-width: 0 !important;
  padding: 0 5px 1px !important;
  border: 11px solid transparent !important;
  border-image: url("assets/generated/ui/tab-button-active.png") 17 31 17 31 fill / 11px 15px 11px 15px / 0 stretch !important;
  background: none !important;
  color: #aebac1 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px #000 !important;
  filter: brightness(.67) !important;
}
html body #menuRewardsPanel .reward-hub-tabs button.active {
  color: #ffe5a2 !important;
  filter: none !important;
}
html body #rewardHubBody {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 5px 6px 20px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  overscroll-behavior: contain !important;
}
html body #rewardHubBody::-webkit-scrollbar { display: none !important; }
html body #menuRewardsPanel .reward-hub-note {
  margin: 6px 7px 12px !important;
  color: #c1cbd0 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  word-break: keep-all !important;
}
html body #menuRewardsPanel .reward-hub-card {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 3px 9px !important;
  width: 100% !important;
  min-height: 104px !important;
  margin: 0 !important;
  padding: 15px 10px 17px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(174, 142, 82, .52) !important;
  background: none !important;
  box-shadow: none !important;
}
html body #menuRewardsPanel .reward-hub-card:last-child { border-bottom: 0 !important; }
html body #menuRewardsPanel .reward-hub-card > strong {
  min-width: 0 !important;
  color: #f3e2ae !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}
html body #menuRewardsPanel .reward-hub-card > span {
  color: #b6c7d1 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}
html body #menuRewardsPanel .reward-hub-card > p {
  grid-column: 1 / -1 !important;
  margin: 0 0 5px !important;
  color: #d1dad4 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
}
html body #menuRewardsPanel .reward-hub-card > button {
  grid-column: 1 / -1 !important;
  justify-self: end !important;
  width: 108px !important;
  height: 29px !important;
  padding: 0 5px 1px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  background-size: 100% 100% !important;
}
html body #menuRewardsPanel .reward-hub-card > button:disabled { opacity: .72 !important; }

/* Use the source-resolution painted plaques and give each line its own recess. */
html body #menuLobbyPanel .lobby-status-grid {
  width: 282px !important;
  height: 94px !important;
  padding: 25px 17px 10px !important;
  background-size: 100% 100% !important;
}
html body #menuLobbyPanel .lobby-status-grid > div { height: 55px !important; }
html body #menuLobbyPanel .lobby-status-grid > div > img { top: 31% !important; left: 17px !important; width: 18px !important; height: 18px !important; }
html body #menuLobbyPanel .lobby-status-grid > div > span { top: 3px !important; left: 30px !important; font-size: 7px !important; }
html body #menuLobbyPanel .lobby-status-grid > div > strong { top: 18px !important; left: 30px !important; font-size: 12px !important; }

html body #menuLobbyPanel .lobby-side-actions {
  top: max(91px, calc(env(safe-area-inset-top) + 89px)) !important;
  right: 3px !important;
  width: 170px !important;
  height: 204px !important;
  grid-template-columns: 170px !important;
  grid-template-rows: 70px 70px 56px !important;
  gap: 4px !important;
}
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer { width: 170px !important; height: 70px !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-attendance-shortcut { width: 168px !important; height: 70px !important; }
html body #menuLobbyPanel .lobby-side-actions :is(.lobby-first-offer,.lobby-attendance-shortcut) { zoom: 1 !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer > img { left: 30px !important; width: 34px !important; height: 34px !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer > span { left: 60px !important; right: 11px !important; top: 13px !important; height: 27px !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer small { font-size: 8px !important; line-height:10px !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer strong { font-size: 10.5px !important; line-height:12px !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer small { position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; height:10px !important; text-align:center !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer strong { position:absolute !important; top:13px !important; left:0 !important; right:0 !important; width:100% !important; height:12px !important; text-align:center !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer > b { top:43px !important; left:60px !important; right:11px !important; bottom:auto !important; width:auto !important; height:11px !important; font-size:9px !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-attendance-shortcut > img { left: 30px !important; width: 34px !important; height: 34px !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-attendance-shortcut > span { left: 60px !important; right: 11px !important; height: 70px !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-attendance-shortcut small { font-size: 8px !important; line-height:10px !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-attendance-shortcut strong { font-size: 10.5px !important; line-height:12px !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-rewards-shortcut {
  position: relative !important;
  box-sizing: border-box !important;
  display: block !important;
  justify-self: end !important;
  width: 168px !important;
  height: 56px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent url("assets/generated/lobby_top_hud_v10_20260903/lobby-shortcut-actionless-v10.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .7)) !important;
}
html body #menuLobbyPanel .lobby-side-actions .lobby-rewards-shortcut > img { position:absolute !important; top:50% !important; left:30px !important; width:31px !important; height:31px !important; object-fit:contain !important; transform:translate(-50%,-50%) !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-rewards-shortcut > span { position:absolute !important; top:0 !important; right:11px !important; bottom:auto !important; left:60px !important; width:auto !important; height:56px !important; display:grid !important; place-content:center !important; gap:2px !important; text-align:center !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-rewards-shortcut small { color:#99d5e8 !important; font-size:8px !important; line-height:10px !important; white-space:nowrap !important; }
html body #menuLobbyPanel .lobby-side-actions .lobby-rewards-shortcut strong { color:#f5e2ad !important; font-size:11px !important; line-height:13px !important; white-space:nowrap !important; }
html body #lobbyRewardsButton.reward-ready { filter:drop-shadow(0 0 6px #d6b66d) !important; }

/* The closed-state helper is unrelated to the always-open recipe record. */
html body #codexGuideBody #menuRecipeToggle::after { content:none !important; display:none !important; }

/* Downsampled native button art, with its corners preserved instead of enlarging a tiny bitmap. */
html body #itemCodexBody .collection-codex-filters > button {
  box-sizing:border-box !important;
  height:31px !important;
  padding:0 5px 1px !important;
  border:10px solid transparent !important;
  border-image:url("assets/generated/ui/tab-button-active.png") 17 31 17 31 fill / 10px 13px 10px 13px / 0 stretch !important;
  background:none !important;
  color:#bbcbd0 !important;
  font-size:10px !important;
  line-height:1 !important;
  text-shadow:0 1px 2px #000 !important;
  filter:brightness(.68) !important;
}
html body #itemCodexBody .collection-codex-filters > button.active { color:#ffe2a2 !important; filter:none !important; }
html body #itemCodexBody .collection-codex-filters { scrollbar-width:none !important; }
html body #itemCodexBody .collection-codex-filters::-webkit-scrollbar { display:none !important; }

/* Unlocks belong on the same dark engraved page as the recipe records. */
html body #codexGuideBody #guideUnlockView .unlock-overview { background:none !important; border:0 !important; box-shadow:none !important; }
html body #codexGuideBody #guideUnlockView .unlock-scroll { background:none !important; border:0 !important; box-shadow:none !important; }
html body #codexGuideBody #menuUnlockList { padding:8px 4px !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; }
html body #codexGuideBody #guideUnlockView .unlock-group { display:block !important; margin:0 0 14px !important; padding:0 !important; }
html body #codexGuideBody #guideUnlockView .unlock-group > strong { display:flex !important; align-items:center !important; gap:8px !important; padding:5px 9px 9px !important; color:#f0d697 !important; font-size:12px !important; text-align:left !important; }
html body #codexGuideBody #guideUnlockView .unlock-row { display:grid !important; grid-template-columns:1fr !important; gap:0 !important; padding:0 8px !important; }
html body #codexGuideBody #guideUnlockView .unlock-pill,
html body #codexGuideBody #guideUnlockView button.unlock-pill {
  box-sizing:border-box !important;
  min-height:54px !important;
  padding:7px 10px !important;
  border:0 !important;
  border-bottom:1px solid rgba(166,133,77,.5) !important;
  border-radius:0 !important;
  background:rgba(5,14,22,.52) !important;
  box-shadow:none !important;
  filter:none !important;
}
html body #codexGuideBody #guideUnlockView .unlock-pill.locked { opacity:.72 !important; }
html body #codexGuideBody #guideUnlockView .unlock-pill-copy b { color:#e8d8ae !important; font-size:10px !important; }
html body #codexGuideBody #guideUnlockView .unlock-pill-copy small { color:#b6c4c8 !important; font-size:9px !important; line-height:1.25 !important; }
html body #codexGuideBody #guideUnlockView .unlock-pill-icon { border:0 !important; border-radius:0 !important; background:none !important; }
@media (max-width:370px) {
  html body #menuLobbyPanel .lobby-status-grid { width:270px !important; height:90px !important; }
  html body #menuLobbyPanel .lobby-side-actions { right:2px !important; width:158px !important; grid-template-columns:158px !important; }
  html body #menuLobbyPanel .lobby-side-actions :is(.lobby-first-offer,.lobby-attendance-shortcut,.lobby-rewards-shortcut) { width:158px !important; }
}


/* SOURCE: ui/styles/shared/painted-recess-recheck-20260923.css */
/* Recheck the painted inner wells at both phone widths. */
html body #menuLobbyPanel .lobby-status-grid {
  width:282px !important;
  height:92px !important;
  padding:24px 17px 10px !important;
  background-size:100% 100% !important;
}
html body #menuLobbyPanel .lobby-status-grid > div { height:49px !important; }
html body #menuLobbyPanel .lobby-status-grid > div > img { top:40% !important; left:19px !important; width:16px !important; height:16px !important; }
html body #menuLobbyPanel .lobby-status-grid > div > span {
  top:7px !important;
  left:32px !important;
  right:auto !important;
  width:40px !important;
  height:9px !important;
  color:#c3dce7 !important;
  font-size:7.7px !important;
  line-height:9px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  text-align:center !important;
}
html body #menuLobbyPanel .lobby-status-grid > div > strong {
  top:18px !important;
  left:32px !important;
  right:auto !important;
  width:40px !important;
  height:14px !important;
  font-size:11.2px !important;
  line-height:14px !important;
  text-align:center !important;
}
@media (min-width:371px) {
  html body #menuLobbyPanel .lobby-status-grid > div > span {top:10px !important;}
}
html body #menuLobbyPanel .lobby-story-link {
  border-radius:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Align against the art, not the button boxes: the circle centers are
   x=416/1950 (offer) and x=421.5/1942 (the other two), while the copy
   recesses center at x=1225.5/1950 and x=1239/1942 respectively. */
html body #menuLobbyPanel .lobby-side-actions {
  top:max(91px,calc(env(safe-area-inset-top) + 89px)) !important;
  right:3px !important;
  width:190px !important;
  height:242px !important;
  grid-template-columns:190px !important;
  grid-template-rows:78px 78px 78px !important;
  gap:4px !important;
  display:grid !important;
}
html body #menuLobbyPanel .lobby-side-actions :is(.lobby-first-offer,.lobby-attendance-shortcut,.lobby-rewards-shortcut) {
  box-sizing:border-box !important;
  justify-self:end !important;
  width:190px !important;
  height:78px !important;
  zoom:1 !important;
  background-position:center !important;
  background-size:100% 100% !important;
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  pointer-events:auto !important;
}
html body #menuLobbyPanel .lobby-side-actions .lobby-rewards-shortcut {
  background-image:url("assets/generated/lobby_top_hud_v12_20260903/attendance-streak-v12.png") !important;
}
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer {
  height:78px !important;
  background-image:url("assets/generated/lobby_top_hud_v11_20260903/beginner-offer-premium-v17.svg?v=2") !important;
  background-position:center !important;
  background-size:100% 100% !important;
}
html body #menuLobbyPanel .lobby-side-actions :is(.lobby-first-offer,.lobby-attendance-shortcut,.lobby-rewards-shortcut) > img {
  top:50% !important;
  left:21.6% !important;
  width:35px !important;
  height:35px !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
}
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer > img {left:21.6% !important;top:39px !important;}
html body #menuLobbyPanel .lobby-side-actions .lobby-attendance-shortcut > img {left:21.2% !important;}
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer > span {
  top:0 !important;
  left:36.2% !important;
  right:8.5% !important;
  width:auto !important;
  height:78px !important;
}
html body #menuLobbyPanel .lobby-side-actions .lobby-first-offer > img {
  top:39px !important;
}
html body #menuLobbyPanel .lobby-side-actions #lobbyFirstOfferButton small {
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip-path:inset(50%) !important;
}
html body #menuLobbyPanel .lobby-side-actions #lobbyFirstOfferButton strong {
  position:absolute !important;
  top:24px !important;
  right:0 !important;
  left:0 !important;
  width:100% !important;
  height:14px !important;
  font-size:11px !important;
  line-height:14px !important;
  white-space:nowrap !important;
  text-align:center !important;
}
html body #menuLobbyPanel .lobby-side-actions #lobbyFirstOfferButton > b {
  box-sizing:border-box !important;
  z-index:1 !important;
  top:41px !important;
  left:36.2% !important;
  right:8.5% !important;
  width:auto !important;
  height:12px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#ffe3a0 !important;
  font-size:8.7px !important;
  font-weight:950 !important;
  line-height:12px !important;
  white-space:nowrap !important;
  text-align:center !important;
}
html body #menuLobbyPanel .lobby-side-actions :is(.lobby-attendance-shortcut,.lobby-rewards-shortcut) > span {
  position:absolute !important;
  top:-1px !important;
  right:8.5% !important;
  bottom:auto !important;
  left:36.2% !important;
  width:auto !important;
  height:78px !important;
  display:grid !important;
  place-content:center !important;
  gap:3px !important;
  text-align:center !important;
}
html body #menuLobbyPanel .lobby-side-actions :is(.lobby-attendance-shortcut,.lobby-rewards-shortcut) small {
  position:static !important;
  width:auto !important;
  height:auto !important;
  font-size:8.7px !important;
  line-height:12px !important;
  white-space:nowrap !important;
}
html body #menuLobbyPanel .lobby-side-actions :is(.lobby-attendance-shortcut,.lobby-rewards-shortcut) strong {
  position:static !important;
  width:auto !important;
  height:auto !important;
  font-size:11px !important;
  line-height:14px !important;
  white-space:nowrap !important;
}
html body #menuLobbyPanel .lobby-side-actions #lobbyRewardsButton > span {
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  gap:3px !important;
  min-width:0 !important;
}
html body #menuLobbyPanel .lobby-side-actions #lobbyRewardsButton strong {
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  text-align:center !important;
}
/* Keep the reward title at the same scale as the other painted shortcuts. */
html body #menuLobbyPanel .lobby-side-actions #lobbyAttendanceButton small {
  font-size:8.7px !important;
  line-height:12px !important;
}
html body #menuLobbyPanel .lobby-side-actions #lobbyAttendanceButton strong,
html body #menuLobbyPanel .lobby-side-actions #lobbyRewardsButton strong {
  font-size:11px !important;
  line-height:14px !important;
}
html body #menuLobbyPanel .lobby-side-actions #lobbyAttendanceButton > span {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
}
html body #menuLobbyPanel .lobby-side-actions #lobbyAttendanceButton small,
html body #menuLobbyPanel .lobby-side-actions #lobbyAttendanceButton strong {
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  white-space:normal !important;
  text-align:center !important;
}
@media(max-width:370px){
  html body #menuLobbyPanel .lobby-status-grid {width:258px !important;height:84px !important;padding:23px 16px 10px !important;}
  html body #menuLobbyPanel .lobby-status-grid > div {height:45px !important;}
  html body #menuLobbyPanel .lobby-status-grid > div > img {left:15px !important;width:15px !important;height:15px !important;}
  html body #menuLobbyPanel .lobby-status-grid > div > span,
  html body #menuLobbyPanel .lobby-status-grid > div > strong {left:28px !important;right:auto !important;width:40px !important;}
  html body #menuLobbyPanel .lobby-status-grid > div > span {font-size:7px !important;line-height:9px !important;}
  html body #menuLobbyPanel .lobby-status-grid > div > strong {top:15px !important;font-size:10.5px !important;line-height:13px !important;}
  html body #menuLobbyPanel .lobby-side-actions {right:2px !important;width:184px !important;grid-template-columns:184px !important;}
  html body #menuLobbyPanel .lobby-side-actions :is(.lobby-first-offer,.lobby-attendance-shortcut,.lobby-rewards-shortcut){width:184px !important;}
}

/* The icon and the claim copy form one centered group in the painted button. */
html body #menuAttendancePanel #attendanceClaimButton {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:0 10px 1px !important;
}
html body #menuAttendancePanel #attendanceClaimButton > img {
  position:static !important;
  flex:0 0 21px !important;
  width:21px !important;
  height:21px !important;
  transform:none !important;
}
html body #menuAttendancePanel #attendanceClaimButton > .attendance-claim-copy {
  flex:0 0 auto !important;
  display:block !important;
  grid-area:auto !important;
  width:auto !important;
  min-width:0 !important;
  text-align:center !important;
}

/* Record tabs: one title, in the center of each painted recess. */
html body #menuCodexPanel.active .codex-tab,
html body #menuCodexPanel.active .codex-tab.open {
  grid-template-rows:1fr !important;
  align-content:stretch !important;
  justify-items:center !important;
  gap:0 !important;
}
html body #menuCodexPanel.active .codex-tab > strong {display:none !important;}
html body #menuCodexPanel.active .codex-tab > span {display:block !important;grid-row:1 !important;align-self:center !important;width:100% !important;}
html body #menuCodexPanel.active .codex-tab > span > b {
  display:block !important;
  width:100% !important;
  font-size:11.5px !important;
  line-height:15px !important;
  text-align:center !important;
  transform:none !important;
}

/* Reward rows have one useful illustration and an engraved progress line,
   retaining the quiet continuous-page layout. */
html body #menuRewardsPanel .reward-hub-card {
  grid-template-columns:34px minmax(0,1fr) auto !important;
  gap:3px 8px !important;
  min-height:116px !important;
  padding:14px 10px 17px !important;
}
html body #menuRewardsPanel .reward-hub-note {
  box-sizing:border-box !important;
  display:grid !important;
  place-items:center !important;
  min-height:48px !important;
  margin:5px 0 11px !important;
  padding:8px 18px !important;
  background:transparent url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-tab-button.png") center / 100% 100% no-repeat !important;
  color:#d9d7c9 !important;
  font-size:10.5px !important;
  line-height:1.4 !important;
  text-align:center !important;
}
html body #menuRewardsPanel .reward-hub-card > .reward-hub-icon {
  grid-column:1 !important;
  grid-row:1 / 4 !important;
  align-self:center !important;
  width:30px !important;
  height:30px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 2px 3px #000) !important;
}
html body #menuRewardsPanel .reward-hub-card > strong {grid-column:2 !important;grid-row:1 !important;}
html body #menuRewardsPanel .reward-hub-card > span {grid-column:3 !important;grid-row:1 !important;}
html body #menuRewardsPanel .reward-hub-card > p {grid-column:2 / 4 !important;grid-row:2 !important;}
html body #menuRewardsPanel .reward-hub-progress {
  grid-column:2 / 4 !important;
  grid-row:3 !important;
  height:5px !important;
  overflow:hidden !important;
  border:1px solid rgba(177,140,78,.52) !important;
  background:rgba(1,8,16,.7) !important;
}
html body #menuRewardsPanel .reward-hub-progress > i {
  display:block !important;
  height:100% !important;
  background:linear-gradient(90deg,#357793,#7ac2cc) !important;
}
html body #menuRewardsPanel .reward-hub-card > button {grid-column:2 / 4 !important;grid-row:4 !important;}

/* Unlock conditions use the game's engraved row art and a legible single column. */
html body #codexGuideBody #guideUnlockView .unlock-group > strong {
  margin:0 8px 4px !important;
  padding:6px 7px !important;
  border-bottom:1px solid rgba(202,165,93,.58) !important;
  color:#f1d99c !important;
  font-size:12px !important;
}
html body #codexGuideBody #guideUnlockView .unlock-row {gap:4px !important;}
html body #codexGuideBody #guideUnlockView .unlock-pill,
html body #codexGuideBody #guideUnlockView button.unlock-pill {
  min-height:56px !important;
  margin:0 !important;
  padding:7px 17px !important;
  border:0 !important;
  background:transparent url("assets/generated/recipe_affinity_refresh_v1_1793750400000/recipe-tab-button.png") center / 100% 100% no-repeat !important;
  box-shadow:none !important;
  opacity:1 !important;
}
html body #codexGuideBody #guideUnlockView .unlock-pill.locked {opacity:.72 !important;}
html body #codexGuideBody #guideUnlockView .unlock-pill-copy b {font-size:10px !important;line-height:13px !important;}
html body #codexGuideBody #guideUnlockView .unlock-pill-copy small {font-size:9px !important;line-height:12px !important;}
html body #codexGuideBody #guideUnlockView .unlock-pill.locked .unlock-pill-copy small {color:#b6c4c8 !important;text-shadow:0 1px 2px #000 !important;}
html body #codexGuideBody #guideUnlockView .unlock-pill.discovered .unlock-pill-copy small {color:#9ad6c3 !important;text-shadow:0 1px 2px #000 !important;}

/* Center the icon and the two-line copy together inside each painted well. */
html body #menuLobbyPanel .lobby-status-grid > div {
  display:grid !important;
  grid-template-columns:16px 40px !important;
  grid-template-rows:9px 14px !important;
  column-gap:5px !important;
  justify-content:center !important;
  align-content:start !important;
  padding:10px 0 0 !important;
}
html body #menuLobbyPanel .lobby-status-grid > div:first-child {translate:-3px 0 !important;}
html body #menuLobbyPanel .lobby-status-grid > div:last-child {translate:3px 0 !important;}
html body #menuLobbyPanel .lobby-status-grid > div > img {
  position:static !important;
  grid-column:1 !important;
  grid-row:1 / 3 !important;
  align-self:center !important;
  justify-self:center !important;
  translate:2px 0 !important;
  transform:none !important;
}
html body #menuLobbyPanel .lobby-status-grid > div > span,
html body #menuLobbyPanel .lobby-status-grid > div > strong {
  position:static !important;
  grid-column:2 !important;
  width:40px !important;
  justify-self:center !important;
  text-align:center !important;
  translate:2px 0 !important;
}
html body #menuLobbyPanel .lobby-status-grid > div > span {grid-row:1 !important;}
html body #menuLobbyPanel .lobby-status-grid > div > strong {grid-row:2 !important;}
@media(max-width:370px) {
  html body #menuLobbyPanel .lobby-status-grid > div {
    grid-template-columns:15px 40px !important;
    grid-template-rows:8px 13px !important;
    padding-top:7px !important;
  }
  html body #menuLobbyPanel .lobby-status-grid > div > img {transform:none !important;}
  html body #menuLobbyPanel .lobby-status-grid > div > span,
  html body #menuLobbyPanel .lobby-status-grid > div > strong {translate:2px 1px !important;}
}


/* SOURCE: ui/styles/shared/button-press-feedback-v1.css */
/* Clear press feedback for every enabled game button, while preserving each
   button's authored transform and black, gold, and blue-black artwork. */
html body :is(button, a, [role="button"], [tabindex]) {
  -webkit-tap-highlight-color: transparent !important;
}

@media (hover: none) and (pointer: coarse) {
  html body :is(button, a, [role="button"]):focus:not(:focus-visible) {
    outline: none !important;
  }
}

html body button:not(:disabled):not([aria-disabled="true"]):is(:active, .ui-pressing),
html body [role="button"]:not([aria-disabled="true"]):is(:active, .ui-pressing) {
  filter: brightness(.72) saturate(1.12) !important;
  transition: filter 70ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html body button:not(:disabled):not([aria-disabled="true"]):is(:active, .ui-pressing),
  html body [role="button"]:not([aria-disabled="true"]):is(:active, .ui-pressing) {
    transition-duration: 0ms !important;
  }
}

/* The fusion cascade includes triple-ID corrections. Match that specificity
   so the short, two-feature result keeps its copy and button inside their
   separately painted wells at both supported phone widths. */
html body #fusionPanel#fusionPanel#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats:has(> [data-stat-label="등급 특성"])[data-core-row-count="1"][data-feature-count="2"] {
  grid-template-rows: 50px 60px 60px !important;
}

html body #fusionPanel#fusionPanel#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats:has(> [data-stat-label="등급 특성"])[data-core-row-count="1"][data-feature-count="2"] > .fusion-stat-feature-two-lines {
  height: 60px !important;
  min-height: 60px !important;
}

html body #fusionPanel#fusionPanel#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionResultStats:has(> [data-stat-label="등급 특성"]) > .fusion-stat-ascent-power > :is(small, strong) {
  transform: translateY(-2px) !important;
}

html body #fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion)[data-fusion-kind="standard"][data-result-core-row-count="1"][data-result-feature-count="2"]:not(.mythic-item) {
  --fusion-confirm-bottom: 9px !important;
}

html body #fusionPanel#fusionPanel#fusionPanel.fusion-panel.structured-fusion-result.fusion-three:not(.secret-fusion):not(.mythic-item) #fusionCloseButton#fusionCloseButton {
  padding: 1px 0 0 !important;
}

html body #fusionPanel#fusionPanel#fusionPanel #fusionCloseButton#fusionCloseButton:is(:active, .ui-pressing) {
  scale: none !important;
  transform: translateX(-50%) scale(.96) !important;
  filter: brightness(.66) saturate(1.1) drop-shadow(0 3px 4px rgba(0, 0, 0, .72)) !important;
}

/* The battle button already uses translateX(-50%) and a stronger rule cancels
   its scale. Compose the transforms so the painted button stays centered. */
html body #fightStage #battleButton:is(:active, .ui-pressing) {
  scale: none !important;
  transform: translateX(-50%) scale(.96) !important;
  filter: brightness(.68) saturate(1.08) drop-shadow(0 2px 2px rgba(0, 0, 0, .64)) !important;
}

html body #fightStage #skillButton:not(:disabled):is(:active, .ui-pressing) {
  scale: .96 !important;
  filter: brightness(.68) saturate(1.08) !important;
}


/* SOURCE: ui/styles/menus/ranking-summary-cleanup-v1.css */
/* The period buttons already name the ranking scope. Put records directly
   below them after removing the redundant source/count summary. */
html body #menuRankingPanel.menu-panel.active {
  grid-template-rows: auto var(--ranking-period-height) minmax(0, 1fr) !important;
}

html body #menuRankingPanel.menu-panel.active #gameRankingList {
  padding-top: 8px !important;
}


/* SOURCE: ui/styles/menus/growth-companion-trial-20260923.css */
/* Reversible growth and summon readability trial. Keep the painted surfaces. */
body #menuGrowthPanel .meta-upgrade-details {
  margin: 0 14px 7px;
  color: #c4cbd0;
}

body #menuGrowthPanel .meta-upgrade-details > summary {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 3px;
  list-style: none;
  color: #c7dbe1;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  cursor: pointer;
}

body #menuGrowthPanel .meta-upgrade-details > summary::-webkit-details-marker {
  display: none;
}

body #menuGrowthPanel .meta-upgrade-details > summary::after {
  content: "⌄";
  color: #bfa66e;
  font-size: 15px;
  line-height: 12px;
  transform: translateY(-2px);
}

body #menuGrowthPanel .meta-upgrade-details[open] > summary::after {
  transform: rotate(180deg) translateY(-2px);
}

body #menuGrowthPanel .meta-upgrade-details > summary:focus-visible {
  outline: 1px solid #d8bd76;
  outline-offset: 1px;
}

body #menuGrowthPanel .meta-upgrade-details > .meta-upgrade-explanation {
  margin: 2px 3px 7px;
}

body #menuGrowthPanel .menu-meta-box {
  margin-bottom: 26px !important;
}

body #menuCompanionPanel .companion-currency-bar .companion-currency-item em {
  font-size: 8px !important;
}

body #menuCompanionPanel .companion-currency-bar .companion-currency-item b {
  font-size: 12px !important;
}

body #menuCompanionPanel .companion-summon-actions button > b {
  font-size: 11px !important;
}

body #menuCompanionPanel .companion-summon-actions button > small {
  font-size: 8px !important;
  line-height: 1.12 !important;
}

@media (max-width: 375px) {
  body #menuCompanionPanel .companion-currency-bar .companion-currency-item em {
    font-size: 7.5px !important;
  }
  body #menuCompanionPanel .companion-summon-actions button > small {
    font-size: 7.5px !important;
  }
}

body #menuCompanionPanel .companion-odds-row > .companion-odds-link::before {
  content: none !important;
  display: none !important;
}

body #menuCompanionPanel .companion-odds-row > .companion-odds-link {
  width: calc(100% - 16px) !important;
  justify-self: center !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 2px 1px !important;
  background: transparent url("assets/generated/ui/tab-button.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #e8d9b8 !important;
  transform-origin: center center !important;
  transition: transform 90ms ease, filter 90ms ease !important;
  text-decoration: none !important;
}

body #menuCompanionPanel .companion-odds-row > .companion-odds-link:hover,
body #menuCompanionPanel .companion-odds-row > .companion-odds-link:focus-visible {
  color: #fff2cb !important;
  filter: brightness(1.08) !important;
  text-decoration: none !important;
}

body #menuCompanionPanel .companion-odds-row > .companion-odds-link:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow: none !important;
  color: #fff1c7 !important;
  filter: brightness(.78) !important;
}


/* SOURCE: ui/styles/companions/companion-resource-quad-alignment-20260924.css */
/* The painted tray wells are inset from the four equal layout quarters.
   Align each item's center to its own well, then place icon and copy from
   that painted center instead of accumulating per-item left margins. */
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-shards {
  --resource-well-offset: 7px;
  --resource-icon-size: 24px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-common {
  --resource-well-offset: 2px;
  --resource-icon-size: 24px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-premium {
  --resource-well-offset: -3px;
  --resource-icon-size: 26px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-dust {
  --resource-well-offset: -8px;
  --resource-icon-size: 28px;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:first-child,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item:last-child {
  transform: translateX(var(--resource-well-offset)) !important;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item > img {
  left: calc(50% - 17px) !important;
  width: var(--resource-icon-size) !important;
  height: var(--resource-icon-size) !important;
  transform: translate(-50%, -50%) !important;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item > .companion-currency-copy {
  left: calc(50% + 15px) !important;
  right: auto !important;
  width: 40px !important;
  justify-items: center !important;
  transform: translate(-50%, -50%) !important;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item .companion-currency-copy > em,
body #menuCompanionPanel .companion-currency-bar > .companion-currency-item .companion-currency-copy > b {
  justify-self: stretch !important;
  text-align: center !important;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item .companion-currency-copy > em {
  box-sizing: border-box !important;
  height: 9px !important;
  padding: 0 !important;
  line-height: 9px !important;
}

body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-premium .companion-currency-copy > em {
  font-size: 7.6px !important;
  letter-spacing: -.06em !important;
}

@media (max-width: 375px), (max-height: 820px) {
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-shards {
    --resource-well-offset: 7px;
    --resource-icon-size: 22px;
  }
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-common {
    --resource-well-offset: 2px;
    --resource-icon-size: 22px;
  }
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-premium {
    --resource-well-offset: -2px;
    --resource-icon-size: 24px;
  }
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item.currency-dust {
    --resource-well-offset: -7px;
    --resource-icon-size: 26px;
  }
  body #menuCompanionPanel .companion-currency-bar > .companion-currency-item > .companion-currency-copy {
    width: 38px !important;
  }
}


/* SOURCE: ui/styles/shared/fate-companion-ad-20260925.css */
/* Keep the familiar's tier legible in the in-run workshop without repainting its card. */
#companionWorkshopPanel .specialty-card[data-rarity="novice"] { --workshop-grade: #8dffb0; }
#companionWorkshopPanel .specialty-card[data-rarity="common"] { --workshop-grade: #79ddff; }
#companionWorkshopPanel .specialty-card[data-rarity="rare"] { --workshop-grade: #d7b9ff; }
#companionWorkshopPanel .specialty-card[data-rarity="hero"] { --workshop-grade: #ffc08b; }
#companionWorkshopPanel .specialty-card[data-rarity="legendary"] { --workshop-grade: #fff18a; }
#companionWorkshopPanel .specialty-card[data-rarity="mythic"] { --workshop-grade: #ff858d; }
#companionWorkshopPanel .specialty-card > header small {
  white-space: nowrap;
}
#companionWorkshopPanel .specialty-card .specialty-grade,
#companionWorkshopPanel .specialty-card h3 {
  color: var(--workshop-grade, #efe2ac);
  text-shadow: 0 1px 2px #000, 0 0 5px color-mix(in srgb, var(--workshop-grade, #efe2ac) 26%, transparent);
}

/* Give the optional victory ad its own painted button and breathing room below the stats. */
html body #endPanel.victory .end-actions {
  translate: 0 6px !important;
}
html body #endPanel.victory .end-actions #endShardBonusButton:not([hidden]) {
  position: relative !important;
  isolation: isolate !important;
  background: none !important;
  color: #fff1c3 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 #080808 !important;
  filter: none !important;
  animation: none !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 3px !important;
  cursor: pointer !important;
  padding-inline: 24px !important;
}
html body #endPanel.victory .end-actions #endShardBonusButton:not([hidden])::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: url("assets/generated/victory_ad_amber_20260925/victory-ad-amber-flat-clean-alpha.png") center / 100% 235% no-repeat !important;
}
html body #endPanel.victory .end-actions #endShardBonusButton:not([hidden]):not(:disabled) {
  animation: none !important;
}
html body #endPanel.victory .end-actions #endShardBonusButton:not([hidden]):not(:disabled)::before {
  animation: victoryShardAdGlow 2.4s ease-in-out infinite !important;
}
html body #endPanel.victory .end-actions #endShardBonusButton:not([hidden]):not(:disabled):active {
  transform: translateY(2px) !important;
}
html body #endPanel.victory .end-actions #endShardBonusButton:not([hidden]):not(:disabled):active::before {
  filter: brightness(.86) !important;
}
html body #endPanel.victory .end-actions #endShardBonusButton:not([hidden]):disabled::before {
  animation: none !important;
}
@keyframes victoryShardAdGlow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 2px rgba(197, 129, 37, .24)); }
  50% { filter: brightness(1.08) drop-shadow(0 0 5px rgba(230, 160, 55, .48)); }
}
@media (prefers-reduced-motion: reduce) {
  html body #endPanel.victory .end-actions #endShardBonusButton:not([hidden])::before { animation: none !important; }
}

/* The three final actions share one painted width, height, and text scale. */
html body #endPanel.victory:not(.depths-choice) .end-actions {
  grid-template-rows: repeat(3, 36px) !important;
  row-gap: 8px !important;
}
html body #endPanel.victory:not(.depths-choice) .end-actions :is(#endShardBonusButton, #endRestartButton, #endHomeButton):not([hidden]) {
  width: 94% !important;
  height: 36px !important;
  justify-self: center !important;
  font-size: 12px !important;
}
html body #endPanel.victory:not(.depths-choice) .end-actions :is(#endRestartButton, #endHomeButton) .end-action-label {
  font-size: 12px !important;
}
html body #endPanel.victory:not(.depths-choice) .end-actions :is(#endRestartButton, #endHomeButton):not([hidden]) {
  position: relative !important;
  isolation: isolate !important;
  background: none !important;
  color: #f0e8d5 !important;
  text-shadow: 0 1px 0 #080808 !important;
  filter: none !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 3px !important;
}
html body #endPanel.victory:not(.depths-choice) .end-actions :is(#endRestartButton, #endHomeButton):not([hidden])::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: url("assets/generated/victory_ad_amber_20260925/victory-ad-amber-flat-clean-alpha.png") center / 100% 235% no-repeat !important;
  filter: saturate(.4) brightness(.68) !important;
}
html body #endPanel.victory:not(.depths-choice) .end-actions :is(#endRestartButton, #endHomeButton):not([hidden])::after {
  content: none !important;
  display: none !important;
}
html body #endPanel.victory:not(.depths-choice) .end-actions :is(#endRestartButton, #endHomeButton):not([hidden]):active {
  transform: translateY(2px) !important;
}

/* Rewarded-ad actions on defeat reuse the same amber painted material. */
html body #endPanel.defeat .end-actions :is(#endMenuButton, #endShardBonusButton):not([hidden]):not(:disabled) {
  position: relative !important;
  isolation: isolate !important;
  background: none !important;
  color: #fff1c3 !important;
  text-shadow: 0 1px 0 #080808 !important;
  filter: none !important;
  animation: none !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-inline: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
html body #endPanel.defeat .end-actions :is(#endMenuButton, #endShardBonusButton):not([hidden]):not(:disabled)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: url("assets/generated/victory_ad_amber_20260925/defeat-ad-amber-compact.png") center / 100% 210% no-repeat !important;
  animation: victoryShardAdGlow 2.4s ease-in-out infinite !important;
}
html body #endPanel.defeat .end-actions :is(#endMenuButton, #endShardBonusButton):not([hidden]):not(:disabled)::after {
  content: none !important;
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #endPanel.defeat .end-actions :is(#endMenuButton, #endShardBonusButton):not([hidden])::before { animation: none !important; }
}

/* Center the result title in the painted space between its emblem and right edge. */
html body #endPanel:is(.victory, .defeat) .run-result-hero > span {
  width: 100% !important;
  justify-items: center !important;
  text-align: center !important;
  transform: translateX(-8px) !important;
}

/* Give long royal rewards the same painted breathing room as the chest. */
html body #rewardPanel.boss-reward #rewardChoices > .reward-card:has(.reward-current-health) {
  min-height: 106px !important;
}

/* This frame's amethyst recess sits below the rectangular button centre. */
html body #endPanel.victory.depths-choice #endDepthsButton > span {
  transform: translateY(3px) !important;
}


/* SOURCE: ui/styles/shared/element-name-tip-v1.css */
/* A quiet annotation above element icons, not another action button. */
.element-name-tip {
  position: fixed;
  z-index: 200;
  box-sizing: border-box;
  max-width: min(160px, calc(100vw - 24px));
  min-height: 20px;
  padding: 0 3px;
  background: none;
  border: 0;
  color: #eee2c6;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
  white-space: normal;
  text-wrap: balance;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 120ms ease;
}
.element-name-tip.visible {
  opacity: 1;
}
.element-name-tip.below {
  transform: translate(-50%, 0);
}
.enemy-entry-element[role="button"],
#itemInfoElementBadge[role="button"] {
  cursor: pointer;
}
.element-name-accessible {
  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;
}