* {
  box-sizing: border-box;
}

.blackout-root {
  min-height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 50% 36%, rgba(75, 12, 8, 0.28), transparent 27%),
    radial-gradient(circle at 50% 55%, rgba(0, 0, 0, 0.1), #000 61%),
    #000;
  color: rgba(255, 120, 31, 0.92);
  font-family: Georgia, "Times New Roman", serif;
}

.blackout-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 16%, rgba(0,0,0,.45) 43%, #000 78%),
    linear-gradient(to bottom, #000 0%, transparent 21%, transparent 69%, #000 100%);
  z-index: 4;
}

.legacy-link {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 50;
  opacity: 0.16;
  background: transparent;
  color: #ff7a18;
  border: 1px solid rgba(255, 111, 0, 0.25);
  border-radius: 999px;
  padding: 5px 9px;
}

.send-sigil,
.receive-sigil {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(44vw, 260px);
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 251, 155, 0.42) 0 4%, transparent 5%),
    repeating-radial-gradient(circle, rgba(255, 133, 18, 0.28) 0 1px, transparent 2px 13px),
    radial-gradient(circle, rgba(255, 72, 0, 0.22), transparent 62%);
  color: #fff1b4;
  text-shadow: 0 0 8px #ff4d00, 0 0 18px #ff4d00;
  filter: drop-shadow(0 0 18px rgba(255, 75, 0, .85));
}

.send-sigil {
  top: 4vh;
}

.receive-sigil {
  bottom: 4vh;
  color: #d7ffc6;
  text-shadow: 0 0 8px #39ff14, 0 0 18px #39ff14;
  filter: drop-shadow(0 0 18px rgba(57, 255, 20, .75));
  background:
    radial-gradient(circle, rgba(222, 255, 177, 0.38) 0 4%, transparent 5%),
    repeating-radial-gradient(circle, rgba(57, 255, 20, 0.26) 0 1px, transparent 2px 13px),
    radial-gradient(circle, rgba(57, 255, 20, 0.2), transparent 62%);
}

.send-sigil span,
.receive-sigil span {
  display: block;
  letter-spacing: .35em;
  font-size: 18px;
  margin-bottom: 10px;
}

.send-sigil b,
.receive-sigil b {
  display: block;
  font-size: 54px;
  font-family: "Brush Script MT", cursive;
  font-style: italic;
}

.linh-face {
  position: absolute;
  left: 50%;
  top: 39%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1060px);
  height: min(45vh, 390px);
  border-radius: 45%;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(122, 118, 104, .18), transparent 25%),
    radial-gradient(ellipse at 50% 40%, rgba(65, 58, 54, .25), transparent 36%),
    radial-gradient(ellipse at 50% 33%, rgba(0, 0, 0, .22), transparent 55%);
  z-index: 9;
}

.hair-shadow {
  position: absolute;
  inset: -20% 8% 46%;
  background:
    repeating-linear-gradient(93deg, rgba(0,0,0,.92) 0 6px, rgba(45, 16, 13, .22) 7px 8px),
    radial-gradient(ellipse at center, rgba(0,0,0,.84), transparent 70%);
  filter: blur(.4px);
  opacity: .88;
}

.eye {
  position: absolute;
  top: 44%;
  width: 19%;
  height: 22%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.eye-left {
  left: 23%;
}

.eye-right {
  right: 23%;
}

.eye::before {
  content: "";
  position: absolute;
  inset: 18% 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%, #fff8a6 0 5%, #ffb000 10%, #ff3700 28%, rgba(255,0,0,.4) 44%, transparent 62%);
  box-shadow:
    0 0 12px #ff2e00,
    0 0 32px rgba(255, 45, 0, .85),
    0 0 65px rgba(255, 45, 0, .38);
  transition: transform .5s ease, opacity .5s ease;
}

.eye::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 76%;
  height: 52%;
  background: linear-gradient(to bottom, rgba(80, 0, 0, .9), transparent);
  filter: blur(1px);
  opacity: .62;
}

.eye.closed::before {
  transform: scaleY(.08);
  opacity: .42;
}

.eye.open::before {
  transform: scaleY(1);
  opacity: 1;
}

.mouth-zone {
  position: absolute;
  left: 42%;
  right: 42%;
  top: 75%;
  height: 18%;
  border: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.blackout-readouts {
  position: fixed;
  left: 0;
  right: 0;
  top: 58vh;
  z-index: 22;
  text-align: center;
  pointer-events: none;
}

.wallet-number,
.reward-status,
.active-page-ghost {
  color: rgba(255, 104, 22, .95);
  text-shadow: 0 0 8px #ff3c00, 0 0 24px rgba(255, 57, 0, .7);
  letter-spacing: .32em;
  font-size: clamp(21px, 4vw, 42px);
  margin: 12px auto;
}

.reward-status {
  font-size: clamp(16px, 3vw, 30px);
}

.talisman-column {
  position: fixed;
  top: 8vh;
  bottom: 7vh;
  z-index: 25;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 8px;
}

.talisman-left {
  left: 12px;
}

.talisman-right {
  right: 12px;
}

.talisman {
  width: 112px;
  border: 0;
  background: transparent;
  color: rgba(255, 113, 24, .78);
  text-shadow: 0 0 10px #ff3c00;
  cursor: pointer;
  opacity: .68;
}

.talisman.active,
.talisman:hover {
  opacity: 1;
  transform: scale(1.04);
}

.talisman i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 3px;
  border: 1px solid rgba(255, 84, 0, .55);
  border-radius: 50%;
  font-style: normal;
  font-size: 22px;
  box-shadow: 0 0 18px rgba(255, 69, 0, .38);
}

.talisman span {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
}

.active-page-ghost {
  position: fixed;
  top: 70vh;
  left: 0;
  right: 0;
  z-index: 10;
  opacity: .22;
  font-size: clamp(18px, 3vw, 32px);
}

.linh-chat {
  position: fixed;
  left: 50%;
  bottom: 16vh;
  transform: translateX(-50%);
  width: min(620px, 82vw);
  z-index: 30;
  color: rgba(255, 235, 210, .88);
  text-shadow: 0 0 10px rgba(255, 70, 0, .65);
  background: transparent;
}

.chat-lines {
  max-height: 24vh;
  overflow: auto;
  padding: 0 10px;
}

.chat-lines p {
  margin: 8px 0;
  line-height: 1.4;
  letter-spacing: .05em;
}

.chat-lines b {
  color: #ff6817;
}

.linh-chat input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 85, 0, .38);
  color: #ffe9d7;
  outline: none;
  padding: 10px;
  text-align: center;
  letter-spacing: .08em;
}

.wake-button {
  position: fixed;
  left: 50%;
  bottom: 1vh;
  transform: translateX(-50%);
  z-index: 40;
  background: transparent;
  border: 0;
  color: rgba(255, 120, 31, .3);
  letter-spacing: .2em;
}

@media (max-width: 760px) {
  .send-sigil,
  .receive-sigil {
    width: 150px;
  }

  .send-sigil b,
  .receive-sigil b {
    font-size: 34px;
  }

  .send-sigil span,
  .receive-sigil span {
    font-size: 12px;
  }

  .talisman {
    width: 70px;
  }

  .talisman i {
    width: 39px;
    height: 39px;
    font-size: 15px;
  }

  .talisman span {
    font-size: 9px;
  }

  .linh-face {
    top: 38%;
    width: 116vw;
  }

  .eye-left {
    left: 21%;
  }

  .eye-right {
    right: 21%;
  }

  .blackout-readouts {
    top: 57vh;
  }
}

/* Blackout-only cleanup: hide old mode/menu controls if old UI leaks through */
.legacy-link {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

button[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
}

/* Keep blackout as the only visible app shell */
.blackout-root {
  isolation: isolate;
}

/* Real PNG talisman buttons */
.talisman {
  width: 118px;
}

.talisman-img-wrap {
  border: 0 !important;
  width: 84px !important;
  height: 84px !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 13px rgba(255, 70, 0, .75));
  overflow: visible;
}

.talisman-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.talisman-img-wrap em {
  display: none;
}

.talisman span {
  margin-top: -2px;
  color: rgba(255, 118, 30, .9);
}

@media (max-width: 760px) {
  .talisman {
    width: 72px;
  }

  .talisman-img-wrap {
    width: 50px !important;
    height: 50px !important;
  }

  .talisman span {
    font-size: 8px;
  }
}

/* Normalize talisman PNG display after cropping */
.talisman-img-wrap {
  width: 58px !important;
  height: 58px !important;
}

.talisman span {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.05;
  max-width: 80px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
  .talisman-img-wrap {
    width: 43px !important;
    height: 43px !important;
  }

  .talisman span {
    font-size: 8px;
  }
}

/* Enlarge normalized transparent talisman icons */
.talisman {
  width: 96px !important;
}

.talisman-img-wrap {
  width: 76px !important;
  height: 76px !important;
  filter:
    drop-shadow(0 0 8px rgba(255, 70, 0, .95))
    drop-shadow(0 0 18px rgba(255, 70, 0, .65)) !important;
}

.talisman-img-wrap img {
  transform: scale(1.18);
}

.talisman span {
  margin-top: 4px !important;
  font-size: 10px !important;
  text-shadow: 0 0 8px #ff3c00, 0 0 14px rgba(255, 80, 0, .75);
}

@media (max-width: 760px) {
  .talisman {
    width: 78px !important;
  }

  .talisman-img-wrap {
    width: 58px !important;
    height: 58px !important;
  }

  .talisman-img-wrap img {
    transform: scale(1.16);
  }

  .talisman span {
    font-size: 8px !important;
  }
}

/* Sharper talisman display: no CSS stretching blur */
.talisman-img-wrap {
  width: 72px !important;
  height: 72px !important;
  filter:
    drop-shadow(0 0 5px rgba(255, 80, 0, .9))
    drop-shadow(0 0 10px rgba(255, 55, 0, .45)) !important;
}

.talisman-img-wrap img {
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: contrast(1.12) brightness(1.08) saturate(1.12);
}

.talisman span {
  margin-top: 1px !important;
}

@media (max-width: 760px) {
  .talisman-img-wrap {
    width: 54px !important;
    height: 54px !important;
  }

  .talisman-img-wrap img {
    transform: none !important;
  }
}

/* Hide send/receive when both eyes are closed */
.blackout-hidden-action {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) scale(.82) !important;
  transition: opacity .35s ease, transform .35s ease;
}

/* No visible helper button in final blackout UI */
.wake-button {
  display: none !important;
}

/* Blackout chat polish */
.linh-chat input:disabled {
  opacity: .55;
}

.linh-chat {
  pointer-events: auto;
}

.chat-lines::-webkit-scrollbar {
  width: 4px;
}

.chat-lines::-webkit-scrollbar-thumb {
  background: rgba(255, 82, 0, .35);
  border-radius: 999px;
}

/* Blackout talisman page panels */
.blackout-page-panel {
  position: fixed;
  left: 50%;
  top: 66vh;
  transform: translateX(-50%);
  z-index: 18;
  width: min(620px, 62vw);
  text-align: center;
  background: transparent;
  color: rgba(255, 230, 205, .86);
  text-shadow: 0 0 10px rgba(255, 76, 0, .72);
  pointer-events: auto;
  letter-spacing: .04em;
}

.blackout-page-panel h2 {
  margin: 0 0 8px;
  color: rgba(255, 113, 24, .95);
  font-size: clamp(20px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: .18em;
  text-shadow: 0 0 9px #ff3c00, 0 0 22px rgba(255, 72, 0, .62);
}

.blackout-page-panel p {
  margin: 0 auto 8px;
  max-width: 560px;
  font-size: clamp(13px, 1.4vw, 18px);
  line-height: 1.45;
}

.blackout-page-panel small {
  display: block;
  color: rgba(255, 121, 31, .72);
  font-size: clamp(11px, 1.1vw, 15px);
  letter-spacing: .1em;
}

.blackout-page-close {
  position: absolute;
  right: -16px;
  top: -18px;
  border: 0;
  background: transparent;
  color: rgba(255, 103, 22, .6);
  font-size: 22px;
  text-shadow: 0 0 9px #ff3c00;
  cursor: pointer;
}

@media (max-width: 760px) {
  .blackout-page-panel {
    width: 62vw;
    top: 65vh;
  }

  .blackout-page-panel p {
    font-size: 11px;
  }

  .blackout-page-panel small {
    font-size: 9px;
  }
}

/* Force talisman page panel to be visible above everything */
.blackout-page-panel.force-open {
  position: fixed !important;
  left: 50% !important;
  top: 54vh !important;
  transform: translateX(-50%) !important;
  z-index: 999 !important;
  width: min(650px, 62vw) !important;
  min-height: 90px;
  padding: 10px 18px;
  text-align: center;
  background: radial-gradient(circle, rgba(60, 10, 4, .18), transparent 72%) !important;
  border: 0 !important;
  color: rgba(255, 230, 205, .95) !important;
  text-shadow: 0 0 9px #ff3c00, 0 0 18px rgba(255, 80, 0, .8) !important;
  pointer-events: auto !important;
}

.blackout-page-panel.force-open h2 {
  margin: 0 0 8px !important;
  color: rgba(255, 110, 24, 1) !important;
  font-size: clamp(20px, 3vw, 36px) !important;
  font-weight: 400 !important;
  letter-spacing: .2em !important;
}

.blackout-page-panel.force-open p {
  margin: 0 auto !important;
  max-width: 560px;
  font-size: clamp(12px, 1.4vw, 18px) !important;
  line-height: 1.45 !important;
}

.blackout-page-close {
  position: absolute !important;
  right: 0 !important;
  top: -20px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 100, 25, .75) !important;
  font-size: 24px !important;
  cursor: pointer !important;
}

@media (max-width: 760px) {
  .blackout-page-panel.force-open {
    top: 53vh !important;
    width: 64vw !important;
  }

  .blackout-page-panel.force-open p {
    font-size: 10px !important;
  }
}

/* Clean ghost-style talisman page text */
.blackout-page-panel,
.blackout-page-panel.force-open {
  position: fixed !important;
  left: 50% !important;
  top: 56vh !important;
  transform: translateX(-50%) !important;
  z-index: 38 !important;
  width: min(640px, 54vw) !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  pointer-events: auto !important;
}

.blackout-page-panel.force-open h2,
.blackout-page-panel h2 {
  display: inline-block !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(255, 122, 34, .92) !important;
  font-size: clamp(18px, 2.4vw, 32px) !important;
  font-weight: 400 !important;
  letter-spacing: .42em !important;
  line-height: 1 !important;
  text-shadow:
    0 0 7px rgba(255, 70, 0, .95),
    0 0 18px rgba(255, 60, 0, .65) !important;
}

.blackout-page-panel.force-open p,
.blackout-page-panel p {
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 560px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 230, 205, .78) !important;
  font-size: clamp(11px, 1.1vw, 15px) !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
  text-shadow:
    0 0 7px rgba(255, 70, 0, .72),
    0 0 16px rgba(255, 60, 0, .38) !important;
}

.blackout-page-panel small,
.blackout-page-panel.force-open small {
  display: none !important;
}

.blackout-page-close {
  right: -20px !important;
  top: -20px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 98, 24, .65) !important;
  text-shadow: 0 0 8px #ff3c00 !important;
}

/* Keep Receive button visible below page text */
.receive-sigil {
  bottom: 3vh !important;
}

@media (max-width: 760px) {
  .blackout-page-panel,
  .blackout-page-panel.force-open {
    top: 55vh !important;
    width: 56vw !important;
  }

  .blackout-page-panel.force-open h2,
  .blackout-page-panel h2 {
    font-size: 15px !important;
    letter-spacing: .28em !important;
  }

  .blackout-page-panel.force-open p,
  .blackout-page-panel p {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }
}

/* Daily Video blackout page */
.daily-video-blackout {
  width: min(520px, 54vw);
  margin: 0 auto;
  color: rgba(255, 230, 205, .86);
  text-shadow: 0 0 8px rgba(255, 72, 0, .78);
}

.daily-video-frame {
  width: min(360px, 42vw);
  aspect-ratio: 16 / 9;
  margin: 4px auto 10px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(255, 70, 0, .28);
  opacity: .86;
}

.daily-video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.daily-progress-track {
  width: min(360px, 42vw);
  height: 4px;
  margin: 8px auto;
  background: rgba(255, 80, 0, .15);
  border-radius: 999px;
  overflow: hidden;
}

.daily-progress-track div {
  height: 100%;
  background: rgba(255, 105, 20, .95);
  box-shadow: 0 0 12px rgba(255, 72, 0, .9);
  transition: width .35s ease;
}

.daily-video-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.daily-video-actions button {
  background: transparent;
  border: 1px solid rgba(255, 90, 0, .35);
  border-radius: 999px;
  color: rgba(255, 150, 70, .94);
  padding: 6px 12px;
  text-shadow: 0 0 8px rgba(255, 72, 0, .65);
  cursor: pointer;
}

.daily-video-actions button:disabled {
  opacity: .32;
  cursor: default;
}

@media (max-width: 760px) {
  .daily-video-blackout {
    width: 58vw;
  }

  .daily-video-frame,
  .daily-progress-track {
    width: 52vw;
  }

  .daily-video-actions {
    gap: 6px;
  }

  .daily-video-actions button {
    font-size: 9px;
    padding: 5px 8px;
  }
}

/* Backend sync status text stays ghost-light */
.blackout-page-panel.force-open p br {
  display: block;
  margin-top: 7px;
  content: "";
}

/* Blackout Send / Receive transparent wallet panels */
.blackout-wallet-action {
  position: fixed;
  left: 50%;
  top: 54vh;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(560px, 58vw);
  text-align: center;
  background: transparent;
  color: rgba(255, 230, 205, .88);
  text-shadow: 0 0 9px rgba(255, 72, 0, .82);
  pointer-events: auto;
}

.blackout-wallet-action h2 {
  margin: 0 0 12px;
  color: rgba(255, 122, 34, .96);
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: .32em;
  text-shadow:
    0 0 8px rgba(255, 70, 0, .95),
    0 0 20px rgba(255, 60, 0, .68);
}

.blackout-wallet-action form {
  display: grid;
  gap: 9px;
  width: min(420px, 48vw);
  margin: 0 auto;
}

.blackout-wallet-action input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 100, 22, .42);
  color: rgba(255, 238, 220, .95);
  padding: 8px 10px;
  text-align: center;
  outline: none;
  letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(255, 72, 0, .72);
}

.blackout-wallet-action input::placeholder {
  color: rgba(255, 155, 95, .42);
}

.blackout-wallet-action button,
.copy-receive {
  background: transparent;
  border: 1px solid rgba(255, 95, 24, .38);
  border-radius: 999px;
  color: rgba(255, 150, 75, .95);
  padding: 6px 14px;
  text-shadow: 0 0 9px rgba(255, 72, 0, .72);
  cursor: pointer;
}

.blackout-wallet-action p {
  margin: 10px auto 0;
  max-width: 460px;
  color: rgba(255, 226, 205, .62);
  font-size: clamp(10px, 1vw, 14px);
  line-height: 1.35;
  letter-spacing: .08em;
}

.blackout-wallet-action small {
  display: block;
  margin-top: 10px;
  color: rgba(255, 132, 45, .95);
  font-size: clamp(11px, 1.2vw, 15px);
}

.wallet-action-close {
  position: absolute;
  right: -18px;
  top: -20px;
  border: 0 !important;
  color: rgba(255, 100, 25, .7) !important;
  font-size: 24px;
}

.receive-code {
  max-width: min(460px, 50vw);
  margin: 0 auto 10px;
  word-break: break-all;
  color: rgba(210, 255, 180, .92);
  text-shadow: 0 0 8px rgba(57, 255, 20, .72);
  letter-spacing: .08em;
  font-size: clamp(13px, 1.5vw, 19px);
}

@media (max-width: 760px) {
  .blackout-wallet-action {
    width: 62vw;
    top: 53vh;
  }

  .blackout-wallet-action form {
    width: 54vw;
  }

  .blackout-wallet-action h2 {
    font-size: 16px;
    letter-spacing: .22em;
  }

  .blackout-wallet-action input,
  .blackout-wallet-action button,
  .blackout-wallet-action p,
  .blackout-wallet-action small {
    font-size: 10px;
  }
}

/* Blackout history page */
.blackout-history-list {
  width: min(560px, 54vw);
  margin: 0 auto;
  text-align: left;
  color: rgba(255, 230, 205, .86);
  text-shadow: 0 0 8px rgba(255, 72, 0, .7);
}

.blackout-history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 90, 0, .12);
}

.blackout-history-row b {
  color: rgba(255, 128, 42, .92);
  font-weight: 400;
  letter-spacing: .08em;
}

.blackout-history-row span {
  color: rgba(210, 255, 180, .92);
  text-shadow: 0 0 8px rgba(57, 255, 20, .55);
  white-space: nowrap;
}

.blackout-history-row small {
  grid-column: 1 / -1;
  display: block !important;
  color: rgba(255, 225, 205, .58) !important;
  font-size: 11px !important;
  letter-spacing: .05em !important;
}

.blackout-clear-history {
  display: block;
  margin: 10px auto 0;
  background: transparent;
  border: 1px solid rgba(255, 90, 0, .28);
  border-radius: 999px;
  color: rgba(255, 125, 45, .72);
  padding: 5px 12px;
  text-shadow: 0 0 8px rgba(255, 72, 0, .55);
}

@media (max-width: 760px) {
  .blackout-history-list {
    width: 58vw;
  }

  .blackout-history-row {
    font-size: 9px;
    gap: 2px 8px;
  }

  .blackout-history-row small {
    font-size: 8px !important;
  }
}

/* BIG READABLE TALISMAN NAVIGATION */
.talisman-column {
  top: 5vh !important;
  bottom: 4vh !important;
  gap: 6px !important;
  justify-content: space-evenly !important;
  z-index: 1200 !important;
}

.talisman-left {
  left: 8px !important;
}

.talisman-right {
  right: 8px !important;
}

.talisman {
  width: 132px !important;
  min-height: 78px !important;
  padding: 4px 4px 6px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at center, rgba(255, 72, 0, .16), rgba(0,0,0,.72) 62%, rgba(0,0,0,.92) 100%) !important;
  box-shadow:
    0 0 12px rgba(255, 72, 0, .22),
    inset 0 0 18px rgba(255, 72, 0, .08) !important;
  opacity: .86 !important;
}

.talisman.active,
.talisman:hover {
  opacity: 1 !important;
  transform: scale(1.08) !important;
  background:
    radial-gradient(circle at center, rgba(255, 92, 0, .28), rgba(0,0,0,.72) 62%, rgba(0,0,0,.94) 100%) !important;
  box-shadow:
    0 0 18px rgba(255, 72, 0, .55),
    inset 0 0 20px rgba(255, 72, 0, .16) !important;
}

.talisman-img-wrap {
  width: 70px !important;
  height: 70px !important;
  margin: 0 auto -2px !important;
  filter:
    drop-shadow(0 0 4px rgba(255, 100, 35, 1))
    drop-shadow(0 0 10px rgba(255, 55, 0, .75)) !important;
}

.talisman-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  filter: contrast(1.35) brightness(1.18) saturate(1.25) !important;
}

.talisman span {
  display: block !important;
  margin-top: 1px !important;
  max-width: 128px !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: rgba(255, 150, 70, .98) !important;
  text-shadow:
    0 0 4px #000,
    0 0 6px #ff3c00,
    0 0 12px rgba(255, 72, 0, .85) !important;
  white-space: normal !important;
}

/* On half-screen desktop, keep them readable but not huge */
@media (max-width: 1100px) {
  .talisman {
    width: 104px !important;
    min-height: 70px !important;
  }

  .talisman-img-wrap {
    width: 58px !important;
    height: 58px !important;
  }

  .talisman span {
    font-size: 11px !important;
    max-width: 100px !important;
  }

  .talisman-left {
    left: 4px !important;
  }

  .talisman-right {
    right: 4px !important;
  }
}

/* Phone layout */
@media (max-width: 760px) {
  .talisman-column {
    top: 4vh !important;
    bottom: 3vh !important;
    gap: 3px !important;
  }

  .talisman {
    width: 78px !important;
    min-height: 58px !important;
    padding: 3px 2px 4px !important;
  }

  .talisman-img-wrap {
    width: 43px !important;
    height: 43px !important;
  }

  .talisman span {
    font-size: 8.5px !important;
    line-height: 1 !important;
    max-width: 76px !important;
  }
}

/* HUGE TALISMAN NAV — override all older small rules */
.talisman-column {
  top: 2.5vh !important;
  bottom: 2.5vh !important;
  gap: 4px !important;
  justify-content: space-evenly !important;
  z-index: 2000 !important;
}

.talisman-left {
  left: 2px !important;
}

.talisman-right {
  right: 2px !important;
}

.talisman {
  width: 168px !important;
  min-height: 108px !important;
  padding: 6px 4px 8px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at center, rgba(255, 86, 0, .25), rgba(0,0,0,.74) 62%, rgba(0,0,0,.96) 100%) !important;
  box-shadow:
    0 0 18px rgba(255, 72, 0, .45),
    inset 0 0 24px rgba(255, 72, 0, .16) !important;
  opacity: .96 !important;
}

.talisman.active,
.talisman:hover {
  transform: scale(1.08) !important;
  opacity: 1 !important;
  box-shadow:
    0 0 26px rgba(255, 90, 0, .85),
    inset 0 0 28px rgba(255, 72, 0, .24) !important;
}

.talisman-img-wrap {
  width: 92px !important;
  height: 92px !important;
  margin: 0 auto -1px !important;
  filter:
    drop-shadow(0 0 5px rgba(255, 120, 45, 1))
    drop-shadow(0 0 14px rgba(255, 60, 0, .9))
    drop-shadow(0 0 26px rgba(255, 30, 0, .42)) !important;
}

.talisman-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  filter: contrast(1.55) brightness(1.28) saturate(1.35) !important;
}

.talisman span {
  display: block !important;
  margin-top: 2px !important;
  max-width: 160px !important;
  font-size: 16px !important;
  line-height: 1.03 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: rgba(255, 168, 84, 1) !important;
  text-shadow:
    0 0 5px #000,
    0 0 8px #ff3c00,
    0 0 16px rgba(255, 72, 0, .95) !important;
}

/* Your split-screen desktop view: still huge/readable */
@media (max-width: 1100px) {
  .talisman {
    width: 138px !important;
    min-height: 94px !important;
    padding: 5px 3px 7px !important;
    border-radius: 22px !important;
  }

  .talisman-img-wrap {
    width: 78px !important;
    height: 78px !important;
  }

  .talisman span {
    font-size: 13px !important;
    max-width: 132px !important;
  }

  .talisman-left {
    left: 0 !important;
  }

  .talisman-right {
    right: 0 !important;
  }
}

/* Phone: bigger but still fits */
@media (max-width: 760px) {
  .talisman {
    width: 96px !important;
    min-height: 72px !important;
    padding: 3px 2px 5px !important;
  }

  .talisman-img-wrap {
    width: 56px !important;
    height: 56px !important;
  }

  .talisman span {
    font-size: 10px !important;
    max-width: 92px !important;
  }
}

/* DOUBLE-SIZE TALISMAN NAVIGATION */
.talisman-column {
  top: 1vh !important;
  bottom: 1vh !important;
  gap: 14px !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  padding-top: 8px !important;
  padding-bottom: 18px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 90, 0, .45) transparent;
  z-index: 3000 !important;
}

.talisman-column::-webkit-scrollbar {
  width: 5px;
}

.talisman-column::-webkit-scrollbar-thumb {
  background: rgba(255, 90, 0, .42);
  border-radius: 999px;
}

.talisman-left {
  left: 0 !important;
}

.talisman-right {
  right: 0 !important;
}

.talisman {
  width: 260px !important;
  min-height: 190px !important;
  padding: 12px 8px 14px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at center, rgba(255, 86, 0, .34), rgba(0,0,0,.76) 58%, rgba(0,0,0,.97) 100%) !important;
  box-shadow:
    0 0 28px rgba(255, 72, 0, .62),
    inset 0 0 34px rgba(255, 72, 0, .2) !important;
  opacity: .98 !important;
}

.talisman.active,
.talisman:hover {
  transform: scale(1.04) !important;
  box-shadow:
    0 0 38px rgba(255, 95, 0, .92),
    inset 0 0 38px rgba(255, 72, 0, .28) !important;
}

.talisman-img-wrap {
  width: 155px !important;
  height: 155px !important;
  margin: 0 auto 2px !important;
  filter:
    drop-shadow(0 0 8px rgba(255, 130, 55, 1))
    drop-shadow(0 0 22px rgba(255, 64, 0, .95))
    drop-shadow(0 0 42px rgba(255, 35, 0, .55)) !important;
}

.talisman-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  filter: contrast(1.7) brightness(1.35) saturate(1.42) !important;
}

.talisman span {
  display: block !important;
  margin-top: 4px !important;
  max-width: 250px !important;
  font-size: 26px !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  color: rgba(255, 180, 96, 1) !important;
  text-shadow:
    0 0 7px #000,
    0 0 11px #ff3c00,
    0 0 22px rgba(255, 72, 0, 1) !important;
}

/* Split-screen desktop view */
@media (max-width: 1100px) {
  .talisman {
    width: 210px !important;
    min-height: 160px !important;
    padding: 9px 6px 12px !important;
  }

  .talisman-img-wrap {
    width: 125px !important;
    height: 125px !important;
  }

  .talisman span {
    font-size: 21px !important;
    max-width: 202px !important;
  }
}

/* Phone still usable */
@media (max-width: 760px) {
  .talisman {
    width: 128px !important;
    min-height: 104px !important;
    padding: 6px 4px 8px !important;
  }

  .talisman-img-wrap {
    width: 76px !important;
    height: 76px !important;
  }

  .talisman span {
    font-size: 13px !important;
    max-width: 122px !important;
  }
}

/* TRANSPARENT TALISMAN BOXES — keep icons big, remove ugly box/color boost */
.talisman {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 0 !important;
  opacity: .94 !important;
}

.talisman.active,
.talisman:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: scale(1.04) !important;
  opacity: 1 !important;
}

.talisman-img-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  filter:
    drop-shadow(0 0 7px rgba(255, 90, 20, .88))
    drop-shadow(0 0 16px rgba(255, 55, 0, .58)) !important;
}

.talisman-img-wrap img {
  background: transparent !important;
  filter: contrast(1.08) brightness(1.03) saturate(1.02) !important;
  opacity: .96 !important;
}

.talisman.active .talisman-img-wrap,
.talisman:hover .talisman-img-wrap {
  filter:
    drop-shadow(0 0 9px rgba(255, 120, 35, 1))
    drop-shadow(0 0 22px rgba(255, 60, 0, .78)) !important;
}

.talisman span {
  color: rgba(255, 135, 55, .9) !important;
  text-shadow:
    0 0 5px #000,
    0 0 7px rgba(255, 70, 0, .8),
    0 0 14px rgba(255, 70, 0, .45) !important;
}

/* Make side rail itself invisible too */
.talisman-column {
  background: transparent !important;
  box-shadow: none !important;
}

/* REMOVE TALISMAN GLOW — flat transparent icons */
.talisman,
.talisman.active,
.talisman:hover {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

.talisman-img-wrap,
.talisman.active .talisman-img-wrap,
.talisman:hover .talisman-img-wrap {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  border: 0 !important;
  outline: none !important;
}

.talisman-img-wrap img,
.talisman.active .talisman-img-wrap img,
.talisman:hover .talisman-img-wrap img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.talisman span,
.talisman.active span,
.talisman:hover span {
  text-shadow: none !important;
  color: rgba(255, 120, 40, .92) !important;
  font-weight: 800 !important;
}

/* Keep big size, just no glow */
.talisman {
  width: 260px !important;
  min-height: 190px !important;
}

.talisman-img-wrap {
  width: 155px !important;
  height: 155px !important;
}

.talisman span {
  font-size: 26px !important;
}

@media (max-width: 1100px) {
  .talisman {
    width: 210px !important;
    min-height: 160px !important;
  }

  .talisman-img-wrap {
    width: 125px !important;
    height: 125px !important;
  }

  .talisman span {
    font-size: 21px !important;
  }
}

/* HUGE TALISMAN ART — transparent, no glow, art fills the button */
.talisman-column {
  top: 0.5vh !important;
  bottom: 0.5vh !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  padding-top: 6px !important;
  padding-bottom: 14px !important;
  scrollbar-width: thin;
  z-index: 4000 !important;
}

.talisman-left {
  left: 0 !important;
}

.talisman-right {
  right: 0 !important;
}

.talisman {
  width: 280px !important;
  min-height: 230px !important;
  padding: 2px 0 8px !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.talisman.active,
.talisman:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  transform: scale(1.02) !important;
}

.talisman-img-wrap {
  width: 210px !important;
  height: 210px !important;
  margin: 0 auto -6px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  filter: none !important;
}

.talisman-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  image-rendering: auto !important;
}

.talisman span {
  display: block !important;
  width: 100% !important;
  max-width: 270px !important;
  margin-top: -2px !important;
  text-align: center !important;
  font-size: 28px !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 126, 42, .94) !important;
  text-shadow: none !important;
  white-space: normal !important;
}

/* Split-screen desktop */
@media (max-width: 1100px) {
  .talisman {
    width: 235px !important;
    min-height: 195px !important;
    padding: 1px 0 6px !important;
  }

  .talisman-img-wrap {
    width: 178px !important;
    height: 178px !important;
    margin: 0 auto -4px !important;
  }

  .talisman span {
    max-width: 228px !important;
    font-size: 23px !important;
  }
}

/* Phone */
@media (max-width: 760px) {
  .talisman {
    width: 140px !important;
    min-height: 120px !important;
  }

  .talisman-img-wrap {
    width: 100px !important;
    height: 100px !important;
  }

  .talisman span {
    max-width: 136px !important;
    font-size: 14px !important;
  }
}

/* FITTED BIG TALISMANS — slightly bigger, but still readable */
.talisman-column {
  top: 0.8vh !important;
  bottom: 0.8vh !important;
  gap: 6px !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  padding-top: 6px !important;
  padding-bottom: 12px !important;
  z-index: 4200 !important;
}

.talisman {
  width: 286px !important;
  min-height: 220px !important;
  padding: 2px 0 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.talisman.active,
.talisman:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: scale(1.015) !important;
}

.talisman-img-wrap {
  width: 214px !important;
  height: 214px !important;
  margin: 0 auto -8px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
}

.talisman-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.talisman span {
  display: block !important;
  width: 100% !important;
  max-width: 270px !important;
  margin-top: 0 !important;
  text-align: center !important;
  font-size: 24px !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  color: rgba(255, 126, 42, .94) !important;
  text-shadow: none !important;
  white-space: normal !important;
}

/* split-screen desktop */
@media (max-width: 1100px) {
  .talisman {
    width: 238px !important;
    min-height: 188px !important;
  }

  .talisman-img-wrap {
    width: 182px !important;
    height: 182px !important;
    margin: 0 auto -6px !important;
  }

  .talisman span {
    max-width: 226px !important;
    font-size: 20px !important;
  }
}

/* phone */
@media (max-width: 760px) {
  .talisman {
    width: 144px !important;
    min-height: 118px !important;
  }

  .talisman-img-wrap {
    width: 104px !important;
    height: 104px !important;
    margin: 0 auto -3px !important;
  }

  .talisman span {
    max-width: 138px !important;
    font-size: 14px !important;
  }
}

/* RESTORE READABLE TALISMAN LABELS */
.talisman {
  height: auto !important;
  min-height: 245px !important;
  overflow: visible !important;
  padding-bottom: 22px !important;
}

.talisman-img-wrap {
  margin: 0 auto 4px !important;
}

.talisman span {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 9999 !important;

  width: 100% !important;
  max-width: 280px !important;
  margin: 6px auto 0 !important;
  padding: 0 4px !important;

  color: rgba(255, 150, 65, 1) !important;
  font-size: 26px !important;
  line-height: 1.04 !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  white-space: normal !important;

  text-shadow:
    0 0 4px #000,
    0 0 7px rgba(0,0,0,.95),
    0 0 8px rgba(255, 75, 0, .65) !important;
}

/* Split screen */
@media (max-width: 1100px) {
  .talisman {
    min-height: 215px !important;
    padding-bottom: 18px !important;
  }

  .talisman-img-wrap {
    width: 176px !important;
    height: 176px !important;
    margin-bottom: 3px !important;
  }

  .talisman span {
    font-size: 21px !important;
    max-width: 236px !important;
  }
}

/* Phone */
@media (max-width: 760px) {
  .talisman {
    min-height: 142px !important;
    padding-bottom: 10px !important;
  }

  .talisman-img-wrap {
    width: 100px !important;
    height: 100px !important;
    margin-bottom: 1px !important;
  }

  .talisman span {
    font-size: 13px !important;
    max-width: 144px !important;
    text-shadow:
      0 0 3px #000,
      0 0 5px rgba(0,0,0,.9),
      0 0 5px rgba(255, 75, 0, .55) !important;
  }
}

/* Daily Video page polish */
.daily-video-blackout {
  width: min(720px, 62vw) !important;
}

.daily-video-frame {
  width: min(560px, 54vw) !important;
  border-radius: 18px !important;
  opacity: .95 !important;
  box-shadow: none !important;
}

.daily-progress-track {
  width: min(560px, 54vw) !important;
  height: 8px !important;
  background: rgba(255, 120, 45, .16) !important;
}

.daily-progress-track div {
  background: rgba(255, 120, 45, .95) !important;
  box-shadow: none !important;
}

.daily-video-actions button {
  font-size: 16px !important;
  padding: 8px 18px !important;
  border-color: rgba(255, 120, 45, .5) !important;
}

@media (max-width: 760px) {
  .daily-video-blackout {
    width: 68vw !important;
  }

  .daily-video-frame,
  .daily-progress-track {
    width: 62vw !important;
  }

  .daily-video-actions button {
    font-size: 10px !important;
    padding: 6px 9px !important;
  }
}

/* Move Daily Video up and keep it from sitting at the bottom */
.blackout-page-panel.daily-video-panel-up,
.blackout-page-panel.force-open.daily-video-panel-up {
  top: 34vh !important;
  width: min(760px, 58vw) !important;
  z-index: 1400 !important;
}

.daily-video-panel-up h2 {
  margin-bottom: 8px !important;
}

.daily-video-panel-up .daily-video-blackout {
  width: min(720px, 56vw) !important;
}

.daily-video-panel-up .daily-video-frame {
  width: min(520px, 50vw) !important;
  max-height: 30vh !important;
  margin: 4px auto 8px !important;
  border-radius: 14px !important;
}

.daily-video-panel-up .daily-progress-track {
  width: min(520px, 50vw) !important;
  height: 6px !important;
  margin: 7px auto !important;
}

.daily-video-panel-up p {
  font-size: clamp(10px, 1vw, 14px) !important;
  margin-top: 4px !important;
}

.daily-video-panel-up .daily-video-actions {
  margin-top: 6px !important;
}

.daily-video-panel-up .daily-video-actions button {
  font-size: 13px !important;
  padding: 6px 14px !important;
}

/* Keep receive lower and not fighting the video */
.receive-sigil {
  bottom: 1.5vh !important;
  transform: translateX(-50%) scale(.82) !important;
}

@media (max-width: 760px) {
  .blackout-page-panel.daily-video-panel-up,
  .blackout-page-panel.force-open.daily-video-panel-up {
    top: 32vh !important;
    width: 70vw !important;
  }

  .daily-video-panel-up .daily-video-blackout {
    width: 68vw !important;
  }

  .daily-video-panel-up .daily-video-frame,
  .daily-video-panel-up .daily-progress-track {
    width: 64vw !important;
  }

  .daily-video-panel-up .daily-video-actions button {
    font-size: 9px !important;
    padding: 5px 8px !important;
  }
}

/* CENTER WALLET LAYOUT — Send / Linh Miu / Receive in the middle */
.send-sigil {
  top: 18vh !important;
  width: min(260px, 32vw) !important;
  transform: translateX(-50%) scale(.86) !important;
  z-index: 900 !important;
}

.receive-sigil {
  bottom: auto !important;
  top: 68vh !important;
  width: min(260px, 32vw) !important;
  transform: translateX(-50%) scale(.86) !important;
  z-index: 900 !important;
}

.linh-face {
  top: 45vh !important;
  width: min(82vw, 900px) !important;
  height: min(38vh, 330px) !important;
  z-index: 800 !important;
}

.blackout-readouts {
  top: 58vh !important;
  z-index: 950 !important;
}

.linh-chat {
  bottom: auto !important;
  top: 57vh !important;
  width: min(620px, 56vw) !important;
  z-index: 1200 !important;
}

/* Keep page panels from covering centered wallet too badly */
.blackout-page-panel,
.blackout-page-panel.force-open {
  top: 56vh !important;
  z-index: 1100 !important;
}

/* Daily Video stays special and higher */
.blackout-page-panel.daily-video-panel-up,
.blackout-page-panel.force-open.daily-video-panel-up {
  top: 30vh !important;
  z-index: 1400 !important;
}

/* Make center wallet buttons less huge so the middle feels balanced */
.send-sigil span,
.receive-sigil span {
  font-size: 14px !important;
  margin-bottom: 4px !important;
  letter-spacing: .25em !important;
}

.send-sigil b,
.receive-sigil b {
  font-size: 40px !important;
}

/* Split-screen desktop */
@media (max-width: 1100px) {
  .send-sigil {
    top: 17vh !important;
    width: 190px !important;
  }

  .receive-sigil {
    top: 69vh !important;
    width: 190px !important;
  }

  .linh-face {
    top: 45vh !important;
    width: 78vw !important;
    height: 34vh !important;
  }

  .linh-chat {
    top: 58vh !important;
    width: 50vw !important;
  }
}

/* Phone */
@media (max-width: 760px) {
  .send-sigil {
    top: 16vh !important;
    width: 128px !important;
    transform: translateX(-50%) scale(.9) !important;
  }

  .receive-sigil {
    top: 70vh !important;
    width: 128px !important;
    transform: translateX(-50%) scale(.9) !important;
  }

  .send-sigil span,
  .receive-sigil span {
    font-size: 10px !important;
  }

  .send-sigil b,
  .receive-sigil b {
    font-size: 28px !important;
  }

  .linh-face {
    top: 45vh !important;
    width: 102vw !important;
    height: 31vh !important;
  }

  .blackout-readouts {
    top: 58vh !important;
  }

  .linh-chat {
    top: 58vh !important;
    width: 62vw !important;
  }
}

/* SIMPLE CENTER WALLET + LINH MIU FACE */
.send-sigil {
  top: 16vh !important;
  width: 190px !important;
  transform: translateX(-50%) scale(.9) !important;
}

.receive-sigil {
  bottom: auto !important;
  top: 70vh !important;
  width: 190px !important;
  transform: translateX(-50%) scale(.9) !important;
}

.linh-face {
  top: 45vh !important;
  width: 78vw !important;
  height: 36vh !important;
  background: transparent !important;
  overflow: visible !important;
}

.linh-miu-real-face {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82vw;
  max-height: 45vh;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: .94;
  pointer-events: none;
  z-index: 1;
}

.hair-shadow {
  z-index: 2;
}

.eye,
.mouth-zone {
  z-index: 5;
}

.blackout-readouts {
  top: 58vh !important;
}

.linh-chat {
  bottom: auto !important;
  top: 58vh !important;
  width: 56vw !important;
}

@media (max-width: 760px) {
  .send-sigil {
    top: 15vh !important;
    width: 130px !important;
  }

  .receive-sigil {
    top: 72vh !important;
    width: 130px !important;
  }

  .linh-face {
    top: 45vh !important;
    width: 104vw !important;
    height: 32vh !important;
  }

  .linh-miu-real-face {
    width: 106vw !important;
    max-height: 40vh !important;
  }
}

/* FORCE LINH MIU FACE TO SHOW */
.linh-face {
  top: 45vh !important;
  width: 78vw !important;
  height: 38vh !important;
  background: transparent !important;
  overflow: visible !important;
}

.linh-miu-real-face {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 82vw !important;
  max-height: 46vh !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  opacity: .96 !important;
  visibility: visible !important;
  z-index: 20 !important;
  pointer-events: none !important;
  filter: contrast(1.08) brightness(.9) !important;
}

.hair-shadow {
  opacity: .28 !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.eye,
.mouth-zone {
  z-index: 30 !important;
}

@media (max-width: 760px) {
  .linh-face {
    width: 105vw !important;
    height: 34vh !important;
  }

  .linh-miu-real-face {
    width: 108vw !important;
    max-height: 42vh !important;
  }
}

/* EXACT LINH MIU FACE — visible but still dark */
.linh-face {
  top: 45vh !important;
  width: 78vw !important;
  height: 38vh !important;
  background: transparent !important;
  overflow: visible !important;
}

.linh-miu-real-face {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 82vw !important;
  max-height: 46vh !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  opacity: .96 !important;
  visibility: visible !important;
  z-index: 20 !important;
  pointer-events: none !important;
  filter: contrast(1.08) brightness(.9) !important;
}

.hair-shadow {
  opacity: .18 !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.eye,
.mouth-zone {
  z-index: 30 !important;
}

@media (max-width: 760px) {
  .linh-face {
    width: 105vw !important;
    height: 34vh !important;
  }

  .linh-miu-real-face {
    width: 108vw !important;
    max-height: 42vh !important;
  }
}

/* BLOW UP LINH MIU FACE — make her fill the center layout */
.linh-face {
  top: 44vh !important;
  width: 104vw !important;
  height: 54vh !important;
  overflow: visible !important;
  background: transparent !important;
}

.linh-miu-real-face {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 118vw !important;
  max-width: none !important;
  height: auto !important;
  max-height: 66vh !important;

  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  opacity: .97 !important;
  visibility: visible !important;
  z-index: 20 !important;
  pointer-events: none !important;

  filter: contrast(1.08) brightness(.86) saturate(1.04) !important;
}

.hair-shadow {
  opacity: .08 !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.eye,
.mouth-zone {
  z-index: 35 !important;
}

/* keep Send / Receive around her */
.send-sigil {
  top: 12vh !important;
  z-index: 900 !important;
}

.receive-sigil {
  top: 76vh !important;
  bottom: auto !important;
  z-index: 900 !important;
}

.blackout-readouts {
  top: 60vh !important;
  z-index: 950 !important;
}

.linh-chat {
  top: 61vh !important;
  z-index: 1200 !important;
}

/* split-screen */
@media (max-width: 1100px) {
  .linh-face {
    top: 44vh !important;
    width: 112vw !important;
    height: 54vh !important;
  }

  .linh-miu-real-face {
    width: 128vw !important;
    max-height: 66vh !important;
  }

  .send-sigil {
    top: 12vh !important;
  }

  .receive-sigil {
    top: 77vh !important;
  }
}

/* phone */
@media (max-width: 760px) {
  .linh-face {
    top: 45vh !important;
    width: 132vw !important;
    height: 48vh !important;
  }

  .linh-miu-real-face {
    width: 145vw !important;
    max-height: 58vh !important;
  }

  .send-sigil {
    top: 12vh !important;
  }

  .receive-sigil {
    top: 78vh !important;
  }
}

/* CROPPED + HUGE LINH MIU FACE */
.linh-face {
  top: 45vh !important;
  width: 120vw !important;
  height: 58vh !important;
  overflow: visible !important;
  background: transparent !important;
}

.linh-miu-real-face {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 49% !important;
  width: 145vw !important;
  max-width: none !important;
  max-height: 76vh !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  opacity: .98 !important;
  visibility: visible !important;
  z-index: 22 !important;
  pointer-events: none !important;
  filter: contrast(1.12) brightness(.88) saturate(1.06) !important;
}

.hair-shadow {
  opacity: .04 !important;
}

.eye,
.mouth-zone {
  z-index: 35 !important;
}

.send-sigil {
  top: 10vh !important;
}

.receive-sigil {
  top: 78vh !important;
  bottom: auto !important;
}

.blackout-readouts {
  top: 61vh !important;
}

.linh-chat {
  top: 62vh !important;
}

@media (max-width: 1100px) {
  .linh-face {
    width: 130vw !important;
    height: 58vh !important;
  }

  .linh-miu-real-face {
    width: 165vw !important;
    max-height: 78vh !important;
  }
}

@media (max-width: 760px) {
  .linh-face {
    width: 150vw !important;
    height: 52vh !important;
  }

  .linh-miu-real-face {
    width: 180vw !important;
    max-height: 68vh !important;
  }
}

/* FIX LINH MIU FACE — CSS zoom only, no crop */
.linh-face {
  top: 44vh !important;
  left: 50% !important;
  width: 72vw !important;
  height: 34vh !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  background: transparent !important;
  border-radius: 999px !important;
}

.linh-miu-real-face {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 48% !important;

  width: 180vw !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;

  transform: translate(-50%, -50%) scale(2.45) !important;
  object-fit: cover !important;
  opacity: .96 !important;
  visibility: visible !important;
  z-index: 24 !important;
  pointer-events: none !important;

  filter: contrast(1.18) brightness(.82) saturate(1.12) !important;
}

.hair-shadow {
  opacity: 0 !important;
}

.eye {
  opacity: .18 !important;
  z-index: 36 !important;
}

.mouth-zone {
  z-index: 37 !important;
}

.send-sigil {
  top: 10vh !important;
}

.receive-sigil {
  top: 79vh !important;
  bottom: auto !important;
}

.blackout-readouts {
  top: 61vh !important;
}

.linh-chat {
  top: 62vh !important;
}

/* split-screen desktop */
@media (max-width: 1100px) {
  .linh-face {
    width: 66vw !important;
    height: 34vh !important;
    top: 44vh !important;
  }

  .linh-miu-real-face {
    width: 210vw !important;
    transform: translate(-50%, -50%) scale(2.75) !important;
  }
}

/* phone */
@media (max-width: 760px) {
  .linh-face {
    width: 78vw !important;
    height: 31vh !important;
    top: 45vh !important;
  }

  .linh-miu-real-face {
    width: 245vw !important;
    transform: translate(-50%, -50%) scale(3.0) !important;
  }
}

/* HIDE FAKE EYE ART — keep eyes as invisible tap zones */
.eye,
.eye.left-eye,
.eye.right-eye,
.left-eye,
.right-eye {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  filter: none !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Kill any pseudo glow from old placeholder eyes */
.eye::before,
.eye::after,
.left-eye::before,
.left-eye::after,
.right-eye::before,
.right-eye::after {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Invisible clickable zones over real Linh Miu eyes */
.left-eye,
.eye.left-eye {
  left: 42% !important;
  top: 43% !important;
  width: 95px !important;
  height: 70px !important;
  transform: translate(-50%, -50%) !important;
}

.right-eye,
.eye.right-eye {
  left: 58% !important;
  top: 43% !important;
  width: 95px !important;
  height: 70px !important;
  transform: translate(-50%, -50%) !important;
}

/* Keep real face visible above dark face layer */
.linh-miu-real-face {
  z-index: 24 !important;
  opacity: .98 !important;
}

.mouth-zone {
  z-index: 40 !important;
}

/* Small tune: make Send/Receive not fight the face */
.send-sigil {
  top: 9vh !important;
}

.receive-sigil {
  top: 80vh !important;
  bottom: auto !important;
}

@media (max-width: 760px) {
  .left-eye,
  .eye.left-eye {
    left: 41% !important;
    top: 43% !important;
    width: 70px !important;
    height: 56px !important;
  }

  .right-eye,
  .eye.right-eye {
    left: 59% !important;
    top: 43% !important;
    width: 70px !important;
    height: 56px !important;
  }
}

/* RESTORE FULL LINH MIU FACE — no crop, no zoom-cut */
.linh-face {
  left: 50% !important;
  top: 45vh !important;
  width: 86vw !important;
  height: 44vh !important;
  transform: translate(-50%, -50%) !important;
  overflow: visible !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.linh-miu-real-face {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 92vw !important;
  height: auto !important;
  max-width: none !important;
  max-height: 54vh !important;

  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  opacity: .97 !important;
  visibility: visible !important;
  z-index: 24 !important;
  pointer-events: none !important;

  filter: contrast(1.08) brightness(.88) saturate(1.05) !important;
}

.hair-shadow {
  opacity: 0 !important;
}

.eye,
.eye.left-eye,
.eye.right-eye {
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  z-index: 40 !important;
}

.mouth-zone {
  z-index: 42 !important;
}

/* Keep wallet buttons around full face */
.send-sigil {
  top: 9vh !important;
}

.receive-sigil {
  top: 81vh !important;
  bottom: auto !important;
}

.blackout-readouts {
  top: 61vh !important;
}

.linh-chat {
  top: 62vh !important;
}

@media (max-width: 1100px) {
  .linh-face {
    width: 88vw !important;
    height: 44vh !important;
  }

  .linh-miu-real-face {
    width: 100vw !important;
    max-height: 56vh !important;
  }
}

@media (max-width: 760px) {
  .linh-face {
    width: 108vw !important;
    height: 38vh !important;
  }

  .linh-miu-real-face {
    width: 118vw !important;
    max-height: 46vh !important;
  }
}

/* =========================================================
   ORIGINAL LINH MIU FACE — BLOW IT UP BIGGER IN UI
   - uses the exact original image already installed
   - no crop
   - no replacement image
   - just bigger / clearer / centered better
   ========================================================= */

.linh-face {
  position: absolute !important;
  left: 50% !important;
  top: 47vh !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 1200px) !important;
  height: min(42vh, 420px) !important;
  background: transparent !important;
  overflow: hidden !important;
  z-index: 800 !important;
}

.linh-miu-real-face {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  width: min(150vw, 1800px) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 20 !important;
  pointer-events: none !important;

  /* make it cleaner / clearer without changing the art */
  image-rendering: auto !important;
  filter: contrast(1.10) brightness(0.95) saturate(1.05) !important;
}

/* Keep the fake shadow from muddying the image */
.hair-shadow {
  opacity: 0 !important;
}

/* eyes and mouth still stay above face */
.eye,
.mouth-zone {
  z-index: 30 !important;
}

/* center wallet layout breathing room */
.send-sigil {
  top: 17vh !important;
  z-index: 900 !important;
}

.receive-sigil {
  top: 73vh !important;
  z-index: 900 !important;
}

.blackout-readouts {
  top: 60vh !important;
  z-index: 950 !important;
}

.linh-chat {
  top: 60vh !important;
  width: min(620px, 58vw) !important;
  z-index: 1200 !important;
}

.blackout-page-panel,
.blackout-page-panel.force-open {
  top: 58vh !important;
  z-index: 1100 !important;
}

.blackout-page-panel.daily-video-panel-up,
.blackout-page-panel.force-open.daily-video-panel-up {
  top: 28vh !important;
  z-index: 1400 !important;
}

/* laptop / split screen */
@media (max-width: 1200px) {
  .linh-face {
    top: 47vh !important;
    width: 96vw !important;
    height: 40vh !important;
  }

  .linh-miu-real-face {
    width: 165vw !important;
    top: 52% !important;
  }

  .send-sigil {
    top: 17vh !important;
  }

  .receive-sigil {
    top: 73vh !important;
  }
}

/* phone */
@media (max-width: 760px) {
  .linh-face {
    top: 46vh !important;
    width: 108vw !important;
    height: 34vh !important;
    overflow: hidden !important;
  }

  .linh-miu-real-face {
    width: 210vw !important;
    top: 52% !important;
    left: 50% !important;
  }

  .send-sigil {
    top: 16vh !important;
  }

  .receive-sigil {
    top: 74vh !important;
  }

  .blackout-readouts {
    top: 60vh !important;
  }

  .linh-chat {
    top: 60vh !important;
    width: 66vw !important;
  }
}

/* FINAL BIGGER/CLEARER ORIGINAL LINH MIU FACE — NO CROP */
.linh-face {
  position: absolute !important;
  left: 50% !important;
  top: 45vh !important;
  transform: translate(-50%, -50%) !important;
  width: 96vw !important;
  height: 48vh !important;
  background: transparent !important;
  overflow: visible !important;
  border-radius: 0 !important;
  z-index: 800 !important;
}

.linh-miu-real-face {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 180vw !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;

  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  object-position: center center !important;

  opacity: 1 !important;
  visibility: visible !important;
  z-index: 25 !important;
  pointer-events: none !important;

  filter: contrast(1.2) brightness(1.02) saturate(1.12) sharpen(1px) !important;
}

.hair-shadow {
  opacity: 0 !important;
}

.eye,
.eye.left-eye,
.eye.right-eye,
.left-eye,
.right-eye {
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  pointer-events: auto !important;
  z-index: 45 !important;
}

.eye::before,
.eye::after,
.left-eye::before,
.left-eye::after,
.right-eye::before,
.right-eye::after {
  display: none !important;
}

.mouth-zone {
  z-index: 48 !important;
}

/* keep wallet buttons around the bigger face */
.send-sigil {
  top: 8vh !important;
  z-index: 900 !important;
}

.receive-sigil {
  top: 82vh !important;
  bottom: auto !important;
  z-index: 900 !important;
}

.blackout-readouts {
  top: 62vh !important;
  z-index: 950 !important;
}

.linh-chat {
  top: 63vh !important;
  width: min(650px, 58vw) !important;
  z-index: 1200 !important;
}

/* split screen */
@media (max-width: 1200px) {
  .linh-face {
    width: 102vw !important;
    height: 48vh !important;
  }

  .linh-miu-real-face {
    width: 210vw !important;
  }
}

/* phone */
@media (max-width: 760px) {
  .linh-face {
    top: 45vh !important;
    width: 120vw !important;
    height: 40vh !important;
  }

  .linh-miu-real-face {
    width: 260vw !important;
  }

  .send-sigil {
    top: 8vh !important;
  }

  .receive-sigil {
    top: 83vh !important;
  }
}

/* PITCH BLACK APP BACKGROUND + TRANSPARENT SCROLL RAILS */
html,
body,
#root {
  background: #000 !important;
}

body {
  margin: 0 !important;
  overflow-x: hidden !important;
}

/* Kill any purple/gray app background layer */
.blackout-shell,
.blackout-app,
.blackout-page,
.blackout-root,
.blackout-stage,
.blackout-bg,
[class*="blackout"] {
  background-color: transparent !important;
}

/* But the actual screen stays pitch black */
.blackout-shell,
.blackout-app,
.blackout-stage,
.blackout-root {
  background: #000 !important;
}

/* Make left/right talisman scroll windows invisible */
.talisman-column,
.talisman-left,
.talisman-right {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hide scrollbar track so rails feel floating over black */
.talisman-column {
  scrollbar-width: none !important;
}

.talisman-column::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.talisman-column::-webkit-scrollbar-track {
  background: transparent !important;
}

.talisman-column::-webkit-scrollbar-thumb {
  background: transparent !important;
}

/* Keep talisman button boxes transparent too */
.talisman,
.talisman.active,
.talisman:hover,
.talisman:focus {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Keep icon art and label visible */
.talisman-img-wrap,
.talisman-img-wrap img {
  background: transparent !important;
  box-shadow: none !important;
}

.talisman span {
  color: rgba(255, 145, 58, .98) !important;
  text-shadow:
    0 0 4px #000,
    0 0 7px rgba(0,0,0,.95),
    0 0 7px rgba(255, 80, 0, .55) !important;
}

/* Keep full-screen sides black */
@media (min-width: 1201px) {
  .talisman-left,
  .talisman-right,
  .talisman-column {
    background: transparent !important;
  }
}

/* Keep half-screen the same */
@media (max-width: 1200px) {
  .talisman-left,
  .talisman-right,
  .talisman-column {
    background: transparent !important;
  }
}

/* TRUE BLACKOUT GUTTER KILLER
   Removes purple side gutters in full-screen mode.
*/

html,
body,
#root {
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
}

/* Main app containers must be black, not purple/gradient */
.App,
.app,
.yeu-app,
.yeu-root,
.blackout-shell,
.blackout-app,
.blackout-root,
.blackout-stage,
.blackout-page,
.blackout-screen,
.blackout-bg {
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
}

/* Kill pseudo overlays that can create side color */
.App::before,
.App::after,
.app::before,
.app::after,
.yeu-app::before,
.yeu-app::after,
.yeu-root::before,
.yeu-root::after,
.blackout-shell::before,
.blackout-shell::after,
.blackout-app::before,
.blackout-app::after,
.blackout-root::before,
.blackout-root::after,
.blackout-stage::before,
.blackout-stage::after,
.blackout-screen::before,
.blackout-screen::after,
.blackout-bg::before,
.blackout-bg::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Left/right talisman rail windows float over black */
.talisman-column,
.talisman-left,
.talisman-right,
nav.talisman-column,
nav.talisman-left,
nav.talisman-right {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Kill rail pseudo backgrounds too */
.talisman-column::before,
.talisman-column::after,
.talisman-left::before,
.talisman-left::after,
.talisman-right::before,
.talisman-right::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* Hide scrollbar and scrollbar track */
.talisman-column {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.talisman-column::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Keep every talisman item transparent */
.talisman,
.talisman:hover,
.talisman.active,
.talisman:focus,
.talisman:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Make sure the central face does not create a hard rectangular box */
.linh-face,
.linh-miu-real-face {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Fullscreen gutters stay black */
@media (min-width: 1000px) {
  body,
  #root,
  .App,
  .app,
  .yeu-app,
  .yeu-root,
  .blackout-shell,
  .blackout-app,
  .blackout-root,
  .blackout-stage,
  .blackout-screen {
    background: #000 !important;
    background-color: #000 !important;
    background-image: none !important;
  }
}

/* HARD BLACK FLOOR — covers purple full-screen gutters */
html,
body,
#root {
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
}

.blackout-shell {
  position: relative !important;
  isolation: isolate !important;
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
  min-height: 100vh !important;
}

/* This is the black layer behind all UI */
.blackout-black-floor {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Force all important blackout UI above the black floor */
.linh-face,
.linh-miu-real-face,
.send-sigil,
.receive-sigil,
.blackout-readouts,
.linh-chat,
.blackout-page-panel,
.blackout-wallet-action,
.talisman-column,
.talisman-left,
.talisman-right,
.talisman {
  position: relative;
  z-index: 5 !important;
}

.linh-face {
  z-index: 20 !important;
}

.linh-miu-real-face {
  z-index: 21 !important;
}

.send-sigil,
.receive-sigil {
  z-index: 30 !important;
}

.blackout-readouts,
.linh-chat,
.blackout-page-panel,
.blackout-wallet-action {
  z-index: 40 !important;
}

.talisman-column,
.talisman-left,
.talisman-right {
  z-index: 60 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* kill purple rail/window color */
.talisman-column,
.talisman-column *,
.talisman-left,
.talisman-right {
  background-color: transparent !important;
}

.talisman,
.talisman:hover,
.talisman.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* hide scrollbar visuals */
.talisman-column {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.talisman-column::-webkit-scrollbar {
  display: none !important;
}

/* keep icon images/text visible */
.talisman-img-wrap,
.talisman-img-wrap img,
.talisman span {
  background: transparent !important;
}

/* remove any leftover purple from general app wrappers */
.App,
.app,
.yeu-app,
.yeu-root,
.blackout-app,
.blackout-root,
.blackout-stage,
.blackout-screen,
.blackout-page,
.blackout-bg {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* REPAIR: TRUE BLACK FULLSCREEN + FIX SIDE RAILS */
html,
body,
#root {
  width: 100vw !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
  overflow-x: hidden !important;
}

/* Make blackout shell fill the whole browser, not just center */
.blackout-shell,
.blackout-app,
.blackout-root,
.blackout-stage,
.blackout-screen,
.blackout-page,
.App,
.app,
.yeu-app,
.yeu-root {
  width: 100vw !important;
  max-width: none !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
}

/* Keep black floor behind everything */
.blackout-black-floor {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Put main center art above black floor */
.linh-face,
.linh-miu-real-face,
.send-sigil,
.receive-sigil,
.blackout-readouts,
.linh-chat,
.blackout-page-panel,
.blackout-wallet-action {
  z-index: 20 !important;
}

/* RESTORE TALISMAN SIDE RAILS */
.talisman-column {
  position: fixed !important;
  top: 2vh !important;
  bottom: 2vh !important;
  width: 280px !important;
  height: auto !important;
  max-height: 96vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  padding: 8px 0 24px !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  z-index: 80 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.talisman-column::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.talisman-left {
  left: 0 !important;
  right: auto !important;
}

.talisman-right {
  right: 0 !important;
  left: auto !important;
}

/* Transparent talisman buttons */
.talisman,
.talisman:hover,
.talisman.active,
.talisman:focus {
  position: relative !important;
  width: 250px !important;
  min-height: 210px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  z-index: 90 !important;
}

.talisman-img-wrap {
  width: 188px !important;
  height: 188px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.talisman-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
}

.talisman span {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: rgba(255, 145, 58, .98) !important;
  font-size: 23px !important;
  line-height: 1.04 !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-shadow:
    0 0 4px #000,
    0 0 7px rgba(0,0,0,.95),
    0 0 7px rgba(255, 80, 0, .55) !important;
}

/* Split-screen keeps rails smaller but still side-fixed */
@media (max-width: 1200px) {
  .talisman-column {
    width: 210px !important;
    gap: 8px !important;
  }

  .talisman {
    width: 200px !important;
    min-height: 178px !important;
  }

  .talisman-img-wrap {
    width: 152px !important;
    height: 152px !important;
  }

  .talisman span {
    font-size: 19px !important;
  }
}

/* Phone */
@media (max-width: 760px) {
  .talisman-column {
    width: 116px !important;
    gap: 5px !important;
  }

  .talisman {
    width: 110px !important;
    min-height: 112px !important;
  }

  .talisman-img-wrap {
    width: 82px !important;
    height: 82px !important;
  }

  .talisman span {
    font-size: 12px !important;
  }
}

/* LINH MIU SIZE LOCK
   Keeps her face big even when browser/window is small.
   No crop. No replacement. Original image stays.
*/

.linh-face {
  position: absolute !important;
  left: 50% !important;
  top: 43vh !important;
  transform: translate(-50%, -50%) !important;

  width: clamp(900px, 92vw, 1500px) !important;
  min-width: 900px !important;
  height: clamp(360px, 50vh, 620px) !important;
  min-height: 360px !important;

  overflow: visible !important;
  background: transparent !important;
  border-radius: 0 !important;
  z-index: 20 !important;
}

.linh-miu-real-face {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: clamp(1700px, 175vw, 2600px) !important;
  min-width: 1700px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;

  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  object-position: center center !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 25 !important;

  filter: contrast(1.18) brightness(.98) saturate(1.1) !important;
}

/* Keep tap zones above image but invisible */
.eye,
.eye.left-eye,
.eye.right-eye,
.left-eye,
.right-eye {
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  pointer-events: auto !important;
  z-index: 45 !important;
}

.mouth-zone {
  z-index: 48 !important;
}

/* Keep Send / Receive from covering too much when small */
.send-sigil {
  top: 7vh !important;
  z-index: 50 !important;
}

.receive-sigil {
  top: 83vh !important;
  bottom: auto !important;
  z-index: 50 !important;
}

/* Half/minimized window: keep face big, just let it overflow behind rails */
@media (max-width: 1000px) {
  .linh-face {
    top: 43vh !important;
    width: 1050px !important;
    min-width: 1050px !important;
    height: 440px !important;
    min-height: 440px !important;
  }

  .linh-miu-real-face {
    width: 2100px !important;
    min-width: 2100px !important;
  }

  .send-sigil {
    top: 6vh !important;
  }

  .receive-sigil {
    top: 84vh !important;
  }
}

/* Very small phone/window: still do not shrink her away */
@media (max-width: 760px) {
  .linh-face {
    top: 43vh !important;
    width: 960px !important;
    min-width: 960px !important;
    height: 390px !important;
    min-height: 390px !important;
  }

  .linh-miu-real-face {
    width: 1950px !important;
    min-width: 1950px !important;
  }
}

/* SEND / RECEIVE TRANSPARENT PANELS */
.blackout-action-panel {
  position: fixed !important;
  left: 50% !important;
  top: 61vh !important;
  transform: translate(-50%, -50%) !important;
  width: min(560px, 44vw) !important;
  min-height: 190px !important;
  padding: 18px 22px 20px !important;

  background: rgba(0, 0, 0, .18) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  color: rgba(255, 158, 70, .96) !important;
  text-align: center !important;
  z-index: 160 !important;
  pointer-events: auto !important;
}

.blackout-action-panel h2 {
  margin: 0 0 8px !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: .42em !important;
  color: rgba(255, 105, 38, .96) !important;
  text-shadow:
    0 0 8px rgba(0,0,0,.9),
    0 0 14px rgba(255, 70, 0, .42) !important;
}

.blackout-panel-note {
  margin: 0 auto 12px !important;
  max-width: 500px !important;
  font-size: clamp(11px, .95vw, 14px) !important;
  line-height: 1.35 !important;
  color: rgba(255, 205, 175, .78) !important;
  text-shadow: 0 0 7px #000 !important;
}

.blackout-action-panel label {
  display: block !important;
  margin: 9px auto !important;
  max-width: 420px !important;
  text-align: left !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  color: rgba(255, 150, 70, .78) !important;
  text-shadow: 0 0 6px #000 !important;
}

.blackout-action-panel input {
  display: block !important;
  width: 100% !important;
  margin-top: 5px !important;
  padding: 8px 10px !important;

  background: rgba(0, 0, 0, .35) !important;
  color: rgba(255, 225, 205, .96) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 90, 30, .52) !important;
  outline: none !important;
  box-shadow: none !important;

  font-size: 15px !important;
  text-align: center !important;
}

.blackout-action-panel input::placeholder {
  color: rgba(255, 150, 100, .36) !important;
}

.blackout-panel-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

.blackout-panel-actions button,
.blackout-panel-close {
  background: transparent !important;
  color: rgba(255, 135, 60, .96) !important;
  border: 1px solid rgba(255, 95, 35, .38) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding: 7px 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.blackout-panel-close {
  position: absolute !important;
  top: 0 !important;
  right: 5px !important;
  border: 0 !important;
  font-size: 22px !important;
  padding: 4px 8px !important;
  color: rgba(255, 65, 22, .9) !important;
}

.receive-address-line {
  margin: 12px auto !important;
  max-width: 420px !important;
  color: rgba(255, 210, 185, .88) !important;
  text-shadow: 0 0 7px #000 !important;
}

.receive-address-line span {
  display: block !important;
  font-size: 12px !important;
  letter-spacing: .22em !important;
  color: rgba(255, 145, 65, .78) !important;
}

.receive-address-line b {
  display: block !important;
  margin-top: 5px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.receive-qr-ghost {
  width: 74px !important;
  height: 74px !important;
  margin: 12px auto 4px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px dashed rgba(90, 255, 90, .45) !important;
  border-radius: 14px !important;
  color: rgba(120, 255, 120, .62) !important;
  font-weight: 900 !important;
  letter-spacing: .2em !important;
}

/* Keep panels readable in half-size windows */
@media (max-width: 1000px) {
  .blackout-action-panel {
    top: 62vh !important;
    width: 58vw !important;
    padding: 14px 16px 16px !important;
  }

  .blackout-action-panel h2 {
    font-size: 22px !important;
    letter-spacing: .28em !important;
  }

  .blackout-panel-note {
    font-size: 11px !important;
  }

  .blackout-action-panel input {
    font-size: 13px !important;
    padding: 7px 8px !important;
  }
}

/* Phone */
@media (max-width: 760px) {
  .blackout-action-panel {
    top: 62vh !important;
    width: 66vw !important;
    min-height: 160px !important;
    padding: 12px 12px 14px !important;
  }

  .blackout-action-panel h2 {
    font-size: 17px !important;
    letter-spacing: .18em !important;
  }

  .blackout-panel-actions {
    gap: 8px !important;
  }

  .blackout-panel-actions button {
    font-size: 11px !important;
    padding: 6px 9px !important;
  }
}

/* RECENTER SEND / RECEIVE BUTTONS */
.send-sigil,
.receive-sigil {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) scale(.92) !important;
  width: 210px !important;
  max-width: 210px !important;
  min-width: 210px !important;
  z-index: 70 !important;
  pointer-events: auto !important;
}

.send-sigil {
  top: 7vh !important;
  bottom: auto !important;
}

.receive-sigil {
  top: auto !important;
  bottom: 4vh !important;
}

/* keep Send/Receive art inside their own center button */
.send-sigil *,
.receive-sigil * {
  max-width: 100% !important;
}

/* Half-size window */
@media (max-width: 1000px) {
  .send-sigil,
  .receive-sigil {
    left: 50% !important;
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    transform: translateX(-50%) scale(.9) !important;
  }

  .send-sigil {
    top: 6vh !important;
  }

  .receive-sigil {
    bottom: 3vh !important;
  }
}

/* Phone / tiny window */
@media (max-width: 760px) {
  .send-sigil,
  .receive-sigil {
    left: 50% !important;
    width: 118px !important;
    max-width: 118px !important;
    min-width: 118px !important;
    transform: translateX(-50%) scale(.88) !important;
  }

  .send-sigil {
    top: 5vh !important;
  }

  .receive-sigil {
    bottom: 2vh !important;
  }
}

/* FIX SEND / RECEIVE POSITION + CLICK LAYER */
.send-sigil,
.receive-sigil {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) scale(.92) !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  z-index: 9990 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.send-sigil {
  top: 5vh !important;
  bottom: auto !important;
}

.receive-sigil {
  top: auto !important;
  bottom: 2vh !important;
}

/* DOM fallback panel for Send / Receive */
.blackout-dom-action-panel {
  position: fixed !important;
  left: 50% !important;
  top: 61vh !important;
  transform: translate(-50%, -50%) !important;
  width: min(560px, 46vw) !important;
  min-height: 180px !important;
  padding: 18px 22px 20px !important;
  z-index: 10000 !important;
  background: rgba(0, 0, 0, .22) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 155, 70, .98) !important;
  text-align: center !important;
  pointer-events: auto !important;
}

.blackout-dom-action-panel h2 {
  margin: 0 0 8px !important;
  color: rgba(255, 105, 38, .98) !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  letter-spacing: .34em !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px #000, 0 0 14px rgba(255, 70, 0, .42) !important;
}

.blackout-dom-action-panel p {
  margin: 0 auto 12px !important;
  max-width: 460px !important;
  color: rgba(255, 215, 190, .82) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-shadow: 0 0 7px #000 !important;
}

.blackout-dom-action-panel input {
  display: block !important;
  width: min(420px, 90%) !important;
  margin: 8px auto !important;
  padding: 8px 10px !important;
  background: rgba(0, 0, 0, .42) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 90, 30, .55) !important;
  outline: none !important;
  color: rgba(255, 225, 205, .98) !important;
  text-align: center !important;
  font-size: 15px !important;
}

.blackout-dom-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.blackout-dom-actions button,
.blackout-dom-close {
  background: transparent !important;
  border: 1px solid rgba(255, 95, 35, .42) !important;
  color: rgba(255, 145, 70, .98) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.blackout-dom-close {
  position: absolute !important;
  top: 2px !important;
  right: 7px !important;
  border: 0 !important;
  color: rgba(255, 70, 30, .95) !important;
  font-size: 24px !important;
  padding: 2px 8px !important;
}

.blackout-dom-qr {
  width: 82px !important;
  height: 82px !important;
  margin: 12px auto 6px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px dashed rgba(90, 255, 90, .45) !important;
  border-radius: 14px !important;
  color: rgba(120, 255, 120, .7) !important;
  font-weight: 900 !important;
}

@media (max-width: 1000px) {
  .send-sigil,
  .receive-sigil {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    transform: translateX(-50%) scale(.9) !important;
  }

  .send-sigil {
    top: 4vh !important;
  }

  .receive-sigil {
    bottom: 1.5vh !important;
  }

  .blackout-dom-action-panel {
    width: 58vw !important;
  }
}

@media (max-width: 760px) {
  .send-sigil,
  .receive-sigil {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
  }

  .blackout-dom-action-panel {
    width: 68vw !important;
    top: 62vh !important;
  }
}

/* FINAL SEND / RECEIVE IMAGE + CLICK FIX */
.send-sigil,
.receive-sigil {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;

  width: 260px !important;
  height: 260px !important;
  min-width: 260px !important;
  min-height: 260px !important;
  max-width: 260px !important;
  max-height: 260px !important;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 99999 !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.send-sigil {
  top: 2vh !important;
  bottom: auto !important;
  background-image: url("/blackout-actions/send_yeu.png") !important;
}

.receive-sigil {
  top: auto !important;
  bottom: 0vh !important;
  background-image: url("/blackout-actions/receive_yeu.png") !important;
}

/* Hide old text only when image is being used */
.send-sigil > *,
.receive-sigil > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Minimized window: keep buttons visible but smaller */
@media (max-width: 1000px) {
  .send-sigil,
  .receive-sigil {
    width: 170px !important;
    height: 170px !important;
    min-width: 170px !important;
    min-height: 170px !important;
    max-width: 170px !important;
    max-height: 170px !important;
  }

  .send-sigil {
    top: 1vh !important;
  }

  .receive-sigil {
    bottom: 0vh !important;
  }
}

@media (max-width: 760px) {
  .send-sigil,
  .receive-sigil {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
  }
}

/* FIX TALISMAN LABEL CUT-OFF */
.talisman-column {
  overflow-y: auto !important;
  overflow-x: visible !important;
  padding-top: 12px !important;
  padding-bottom: 90px !important;
}

.talisman,
.talisman:hover,
.talisman.active,
.talisman:focus {
  overflow: visible !important;
  height: auto !important;
  min-height: 230px !important;
  padding-bottom: 18px !important;
}

.talisman-img-wrap {
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.talisman span {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
  line-height: 1.12 !important;
  min-height: 28px !important;
  padding: 3px 4px 8px !important;
}

/* Minimized window label repair */
@media (max-width: 1000px) {
  .talisman-column {
    width: 185px !important;
    padding-bottom: 110px !important;
  }

  .talisman {
    width: 175px !important;
    min-height: 168px !important;
    padding-bottom: 22px !important;
  }

  .talisman-img-wrap {
    width: 124px !important;
    height: 124px !important;
  }

  .talisman span {
    font-size: 16px !important;
    line-height: 1.15 !important;
    min-height: 38px !important;
  }
}

@media (max-width: 760px) {
  .talisman-column {
    width: 108px !important;
    padding-bottom: 120px !important;
  }

  .talisman {
    width: 104px !important;
    min-height: 116px !important;
    padding-bottom: 18px !important;
  }

  .talisman-img-wrap {
    width: 76px !important;
    height: 76px !important;
  }

  .talisman span {
    font-size: 11px !important;
    min-height: 30px !important;
  }
}

/* =========================================
   TRANSPARENT SEND / RECEIVE BUTTONS
   ========================================= */
.send-sigil,
.receive-sigil {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  overflow: visible !important;
  filter: none !important;
}

.send-sigil::before,
.send-sigil::after,
.receive-sigil::before,
.receive-sigil::after {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* keep click area but hide old text layer */
.send-sigil > *,
.receive-sigil > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* =========================================
   EXACT FACE — CLEANER / LESS BLURRY
   ========================================= */
.linh-face {
  background: transparent !important;
  overflow: hidden !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.linh-miu-real-face {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  image-rendering: auto !important;
  filter: contrast(1.04) brightness(.98) saturate(1.03) !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

.hair-shadow {
  opacity: .06 !important;
  filter: none !important;
}

/* remove any accidental blur from face wrapper children */
.linh-face *,
.linh-face::before,
.linh-face::after {
  backdrop-filter: none !important;
}

/* make the center panel less foggy over the face */
.blackout-readouts {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* keep face stronger when the window is smaller */
@media (max-width: 1100px) {
  .linh-miu-real-face {
    filter: contrast(1.05) brightness(.99) saturate(1.04) !important;
  }
}

@media (max-width: 760px) {
  .linh-miu-real-face {
    filter: contrast(1.06) brightness(1) saturate(1.05) !important;
  }
}

/* UPDATE SEND / RECEIVE IMAGES FROM DESKTOP — cache bust 1783573980 */
.send-sigil {
  background-image: url("/blackout-actions/send_yeu.png?v=1783573980") !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.receive-sigil {
  background-image: url("/blackout-actions/receive_yeu.png?v=1783573980") !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.send-sigil,
.receive-sigil {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 99999 !important;
}

.send-sigil > *,
.receive-sigil > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* CLEAN TRANSPARENT SEND / RECEIVE — cache bust 1783574540 */
.send-sigil {
  background-image: url("/blackout-actions/send_yeu.png?v=1783574540") !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.receive-sigil {
  background-image: url("/blackout-actions/receive_yeu.png?v=1783574540") !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.send-sigil,
.receive-sigil {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  overflow: visible !important;
}

.send-sigil::before,
.send-sigil::after,
.receive-sigil::before,
.receive-sigil::after {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* CLEAN SEND / RECEIVE BUTTON IMAGES — cache bust 1783575870 */
.send-sigil {
  background-image: url("/blackout-actions/send_yeu.png?v=1783575870") !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.receive-sigil {
  background-image: url("/blackout-actions/receive_yeu.png?v=1783575870") !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.send-sigil,
.receive-sigil {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 260px !important;
  height: 260px !important;
  min-width: 260px !important;
  min-height: 260px !important;
  max-width: 260px !important;
  max-height: 260px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 99999 !important;
}

.send-sigil {
  top: 2vh !important;
  bottom: auto !important;
}

.receive-sigil {
  top: auto !important;
  bottom: 0vh !important;
}

.send-sigil > *,
.receive-sigil > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 1000px) {
  .send-sigil,
  .receive-sigil {
    width: 170px !important;
    height: 170px !important;
    min-width: 170px !important;
    min-height: 170px !important;
    max-width: 170px !important;
    max-height: 170px !important;
  }
}

@media (max-width: 760px) {
  .send-sigil,
  .receive-sigil {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
  }
}

/* SEND RED FROM CLEAN RECEIVE + TRANSPARENT BUTTONS — cache bust 1783576099 */
.send-sigil {
  background-image: url("/blackout-actions/send_yeu.png?v=1783576099") !important;
}

.receive-sigil {
  background-image: url("/blackout-actions/receive_yeu.png?v=1783576099") !important;
}

.send-sigil,
.receive-sigil {
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 99999 !important;
}

.send-sigil::before,
.send-sigil::after,
.receive-sigil::before,
.receive-sigil::after {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.send-sigil > *,
.receive-sigil > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* DEEP CLEAN SEND / RECEIVE ALPHA — cache bust 1783577370 */
.send-sigil {
  background-image: url("/blackout-actions/send_yeu.png?v=1783577370") !important;
}

.receive-sigil {
  background-image: url("/blackout-actions/receive_yeu.png?v=1783577370") !important;
}

.send-sigil,
.receive-sigil {
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 99999 !important;
}

.send-sigil::before,
.send-sigil::after,
.receive-sigil::before,
.receive-sigil::after {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.send-sigil > *,
.receive-sigil > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* FINAL CLEAN SEND / RECEIVE BUTTONS — cache bust 1783578018 */
.send-sigil {
  background-image: url("/blackout-actions/send_yeu.png?v=1783578018") !important;
}

.receive-sigil {
  background-image: url("/blackout-actions/receive_yeu.png?v=1783578018") !important;
}

.send-sigil,
.receive-sigil {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: 260px !important;
  height: 260px !important;
  min-width: 260px !important;
  min-height: 260px !important;
  max-width: 260px !important;
  max-height: 260px !important;

  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;

  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 99999 !important;
}

.send-sigil {
  top: 2vh !important;
  bottom: auto !important;
}

.receive-sigil {
  top: auto !important;
  bottom: 0vh !important;
}

.send-sigil::before,
.send-sigil::after,
.receive-sigil::before,
.receive-sigil::after {
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.send-sigil > *,
.receive-sigil > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 1000px) {
  .send-sigil,
  .receive-sigil {
    width: 170px !important;
    height: 170px !important;
    min-width: 170px !important;
    min-height: 170px !important;
    max-width: 170px !important;
    max-height: 170px !important;
  }
}

@media (max-width: 760px) {
  .send-sigil,
  .receive-sigil {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
  }
}

/* MOVE RECEIVE BUTTON UP A LITTLE — 1783578247 */
.receive-sigil {
  bottom: 5vh !important;
  top: auto !important;
}

/* half/minimized desktop */
@media (max-width: 1000px) {
  .receive-sigil {
    bottom: 4vh !important;
  }
}

/* phone/tiny window */
@media (max-width: 760px) {
  .receive-sigil {
    bottom: 3vh !important;
  }
}

/* SEND PANEL QR SCAN BUTTON — 1783578573 */
.yeu-send-qr-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}

.yeu-send-qr-button {
  background: transparent !important;
  border: 1px solid rgba(255, 95, 35, .55) !important;
  color: rgba(255, 155, 70, .98) !important;
  border-radius: 999px !important;
  padding: 7px 15px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  text-shadow: 0 0 8px rgba(255, 80, 20, .6) !important;
}

.yeu-send-qr-hint {
  font-size: 11px !important;
  color: rgba(255, 210, 180, .7) !important;
  text-shadow: 0 0 8px #000 !important;
}

.yeu-qr-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(0, 0, 0, .86) !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: auto !important;
}

.yeu-qr-box {
  position: relative !important;
  width: min(620px, 84vw) !important;
  padding: 18px !important;
  background: rgba(0, 0, 0, .72) !important;
  border: 1px solid rgba(255, 90, 35, .38) !important;
  border-radius: 22px !important;
  text-align: center !important;
  color: rgba(255, 210, 190, .95) !important;
  box-shadow: 0 0 24px rgba(255, 70, 20, .18) !important;
}

.yeu-qr-box h2 {
  margin: 0 0 12px !important;
  color: rgba(255, 120, 50, .98) !important;
  letter-spacing: .22em !important;
  font-size: 22px !important;
}

.yeu-qr-video {
  width: 100% !important;
  max-height: 58vh !important;
  background: #000 !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

.yeu-qr-status {
  margin: 12px 0 0 !important;
  font-size: 13px !important;
  color: rgba(255, 220, 200, .85) !important;
}

.yeu-qr-close {
  position: absolute !important;
  right: 10px !important;
  top: 8px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 90, 45, .98) !important;
  font-size: 30px !important;
  cursor: pointer !important;
}

/* =========================================================
   LINH MIU LIPS CHAT BUTTON
   Turns the current mouth/chat button into glowing lips.
   Click lips = open chat.
   ========================================================= */

/* mouth area holder */
.mouth-zone {
  position: absolute !important;
  left: 50% !important;
  top: 61.5% !important;
  transform: translateX(-50%) !important;
  width: 170px !important;
  height: 64px !important;
  z-index: 1300 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

/* catch the existing chat button no matter which class it uses */
.mouth-zone button,
.mouth-zone .chat-toggle,
.mouth-zone .linh-chat-toggle,
.mouth-zone [role="button"] {
  position: relative !important;
  width: 126px !important;
  height: 40px !important;
  min-width: 126px !important;
  min-height: 40px !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 999px !important;

  /* hide old black pill look */
  background: linear-gradient(
    180deg,
    rgba(255, 115, 70, 0.10) 0%,
    rgba(120, 0, 0, 0.24) 40%,
    rgba(0, 0, 0, 0.00) 100%
  ) !important;

  box-shadow:
    0 0 8px rgba(255, 70, 35, .25),
    0 0 18px rgba(255, 50, 25, .16),
    inset 0 0 10px rgba(255, 130, 90, .10) !important;

  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

/* hide inner old text/icon if any */
.mouth-zone button *,
.mouth-zone .chat-toggle *,
.mouth-zone .linh-chat-toggle *,
.mouth-zone [role="button"] * {
  color: transparent !important;
  opacity: 0 !important;
  font-size: 0 !important;
}

/* upper lip */
.mouth-zone button::before,
.mouth-zone .chat-toggle::before,
.mouth-zone .linh-chat-toggle::before,
.mouth-zone [role="button"]::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 7px !important;
  transform: translateX(-50%) !important;
  width: 108px !important;
  height: 15px !important;
  border-radius: 999px 999px 26px 26px !important;
  background:
    radial-gradient(circle at 50% 120%, rgba(255,170,130,.95) 0%, rgba(255,125,80,.85) 22%, rgba(180,20,15,.72) 55%, rgba(65,0,0,.30) 100%) !important;
  box-shadow:
    0 0 8px rgba(255, 95, 55, .35),
    0 0 18px rgba(255, 70, 25, .20) !important;
  opacity: .95 !important;
  pointer-events: none !important;
}

/* lower lip */
.mouth-zone button::after,
.mouth-zone .chat-toggle::after,
.mouth-zone .linh-chat-toggle::after,
.mouth-zone [role="button"]::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 19px !important;
  transform: translateX(-50%) !important;
  width: 96px !important;
  height: 13px !important;
  border-radius: 18px 18px 999px 999px !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,170,130,.78) 0%, rgba(255,118,78,.72) 26%, rgba(165,20,12,.58) 60%, rgba(35,0,0,.18) 100%) !important;
  box-shadow:
    0 0 6px rgba(255, 90, 45, .28),
    0 0 14px rgba(255, 50, 25, .16) !important;
  opacity: .92 !important;
  pointer-events: none !important;
}

/* glossy center slit */
.mouth-zone button {
  background-image:
    radial-gradient(circle at 50% 54%, rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 18%, rgba(0,0,0,0) 32%),
    linear-gradient(180deg, rgba(255,100,70,.06), rgba(0,0,0,0)) !important;
}

/* hover/focus */
.mouth-zone button:hover,
.mouth-zone .chat-toggle:hover,
.mouth-zone .linh-chat-toggle:hover,
.mouth-zone [role="button"]:hover,
.mouth-zone button:focus,
.mouth-zone .chat-toggle:focus,
.mouth-zone .linh-chat-toggle:focus,
.mouth-zone [role="button"]:focus {
  transform: scale(1.04) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 0 10px rgba(255, 85, 45, .35),
    0 0 24px rgba(255, 50, 20, .22),
    inset 0 0 12px rgba(255, 135, 100, .12) !important;
}

/* gentle idle shimmer */
.mouth-zone button,
.mouth-zone .chat-toggle,
.mouth-zone .linh-chat-toggle,
.mouth-zone [role="button"] {
  animation: yeuLipsIdle 2.8s ease-in-out infinite !important;
}

/* if button is expanded/open, make lips “talk” a bit */
.mouth-zone button[aria-expanded="true"],
.mouth-zone .chat-toggle[aria-expanded="true"],
.mouth-zone .linh-chat-toggle[aria-expanded="true"],
.mouth-zone [role="button"][aria-expanded="true"] {
  animation: yeuLipsTalk .8s ease-in-out infinite !important;
}

@keyframes yeuLipsIdle {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.05);
  }
}

@keyframes yeuLipsTalk {
  0%, 100% {
    transform: scaleX(1) scaleY(1);
  }
  25% {
    transform: scaleX(1.02) scaleY(1.07);
  }
  50% {
    transform: scaleX(.98) scaleY(.92);
  }
  75% {
    transform: scaleX(1.03) scaleY(1.05);
  }
}

/* phone */
@media (max-width: 760px) {
  .mouth-zone {
    top: 62.5% !important;
    width: 146px !important;
    height: 58px !important;
  }

  .mouth-zone button,
  .mouth-zone .chat-toggle,
  .mouth-zone .linh-chat-toggle,
  .mouth-zone [role="button"] {
    width: 112px !important;
    height: 36px !important;
    min-width: 112px !important;
    min-height: 36px !important;
  }

  .mouth-zone button::before,
  .mouth-zone .chat-toggle::before,
  .mouth-zone .linh-chat-toggle::before,
  .mouth-zone [role="button"]::before {
    width: 96px !important;
    height: 14px !important;
    top: 6px !important;
  }

  .mouth-zone button::after,
  .mouth-zone .chat-toggle::after,
  .mouth-zone .linh-chat-toggle::after,
  .mouth-zone [role="button"]::after {
    width: 86px !important;
    height: 12px !important;
    top: 18px !important;
  }
}

/* HIDE INFO / DESCRIPTION PANEL BY DEFAULT */
.blackout-page-panel[data-yeu-hidden-default="1"],
.blackout-info-panel[data-yeu-hidden-default="1"],
.page-info-panel[data-yeu-hidden-default="1"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Once user/nav opens it again, allow it to show */
.blackout-page-panel.force-open,
.blackout-page-panel.open,
.blackout-page-panel.active,
.blackout-page-panel.show,
.blackout-page-panel.visible,
.blackout-info-panel.force-open,
.blackout-info-panel.open,
.blackout-info-panel.active,
.page-info-panel.force-open,
.page-info-panel.open,
.page-info-panel.active {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* =========================================================
   FINAL LIPS POSITION + REAL VISIBLE LIPS — 1783579755
   ========================================================= */

/* Put lips lower, where her mouth should be */
.mouth-zone {
  position: fixed !important;
  left: 50% !important;
  top: 58.5vh !important;
  transform: translateX(-50%) !important;
  width: 170px !important;
  height: 58px !important;
  z-index: 120000 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Hide the old black pill/button, but keep it clickable */
.mouth-zone button,
.mouth-zone .chat-toggle,
.mouth-zone .linh-chat-toggle,
.mouth-zone [role="button"] {
  position: absolute !important;
  inset: 0 !important;
  width: 170px !important;
  height: 58px !important;
  min-width: 170px !important;
  min-height: 58px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

/* Hide any old text inside mouth button */
.mouth-zone button *,
.mouth-zone .chat-toggle *,
.mouth-zone .linh-chat-toggle *,
.mouth-zone [role="button"] * {
  opacity: 0 !important;
  visibility: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* Draw lips on the mouth-zone itself so they always show */
.mouth-zone::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 12px !important;
  transform: translateX(-50%) !important;
  width: 132px !important;
  height: 20px !important;
  border-radius: 999px 999px 28px 28px !important;
  background:
    radial-gradient(circle at 36% 80%, rgba(255,170,130,.92) 0%, rgba(255,75,38,.84) 26%, rgba(115,0,0,.42) 68%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at 64% 80%, rgba(255,170,130,.92) 0%, rgba(255,75,38,.84) 26%, rgba(115,0,0,.42) 68%, rgba(0,0,0,0) 100%) !important;
  box-shadow:
    0 0 8px rgba(255, 80, 40, .42),
    0 0 18px rgba(255, 45, 20, .22) !important;
  opacity: .98 !important;
  pointer-events: none !important;
  z-index: 10 !important;
  animation: yeuLipsIdle2 2.8s ease-in-out infinite !important;
}

/* lower lip + dark slit */
.mouth-zone::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 28px !important;
  transform: translateX(-50%) !important;
  width: 118px !important;
  height: 15px !important;
  border-radius: 18px 18px 999px 999px !important;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255,155,120,.80) 0%, rgba(255,70,35,.72) 32%, rgba(120,0,0,.38) 70%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.72) 0 18%, rgba(0,0,0,0) 20%) !important;
  box-shadow:
    0 0 7px rgba(255, 75, 35, .34),
    0 0 14px rgba(255, 45, 20, .20) !important;
  opacity: .96 !important;
  pointer-events: none !important;
  z-index: 11 !important;
  animation: yeuLipsIdle2 2.8s ease-in-out infinite !important;
}

/* When chat opens, make lips move a little */
.mouth-zone:has(button[aria-expanded="true"])::before,
.mouth-zone:has(button[aria-expanded="true"])::after,
.mouth-zone:has(.chat-toggle[aria-expanded="true"])::before,
.mouth-zone:has(.chat-toggle[aria-expanded="true"])::after,
.mouth-zone:has(.linh-chat-toggle[aria-expanded="true"])::before,
.mouth-zone:has(.linh-chat-toggle[aria-expanded="true"])::after {
  animation: yeuLipsTalk2 .72s ease-in-out infinite !important;
}

@keyframes yeuLipsIdle2 {
  0%, 100% {
    filter: brightness(1);
    transform: translateX(-50%) scale(1);
  }
  50% {
    filter: brightness(1.12);
    transform: translateX(-50%) scale(1.035);
  }
}

@keyframes yeuLipsTalk2 {
  0%, 100% {
    transform: translateX(-50%) scaleX(1) scaleY(1);
  }
  25% {
    transform: translateX(-50%) scaleX(1.04) scaleY(1.12);
  }
  50% {
    transform: translateX(-50%) scaleX(.98) scaleY(.86);
  }
  75% {
    transform: translateX(-50%) scaleX(1.05) scaleY(1.08);
  }
}

/* Hide Send + Receive sigils while Send/Receive panel is open */
body.yeu-send-receive-panel-open .send-sigil,
body.yeu-send-receive-panel-open .receive-sigil {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep lips above panels/chat */
body.yeu-send-receive-panel-open .mouth-zone {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep send/receive panel lower so face/lips still show */
.blackout-dom-action-panel[data-kind="send"],
.blackout-dom-action-panel[data-kind="receive"] {
  top: 72vh !important;
  z-index: 100000 !important;
  background: rgba(0,0,0,.18) !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* split/minimized desktop */
@media (max-width: 1000px) {
  .mouth-zone {
    top: 59.5vh !important;
    width: 150px !important;
    height: 54px !important;
  }

  .mouth-zone button,
  .mouth-zone .chat-toggle,
  .mouth-zone .linh-chat-toggle,
  .mouth-zone [role="button"] {
    width: 150px !important;
    height: 54px !important;
    min-width: 150px !important;
    min-height: 54px !important;
  }

  .mouth-zone::before {
    width: 118px !important;
    height: 18px !important;
    top: 11px !important;
  }

  .mouth-zone::after {
    width: 106px !important;
    height: 14px !important;
    top: 26px !important;
  }

  .blackout-dom-action-panel[data-kind="send"],
  .blackout-dom-action-panel[data-kind="receive"] {
    top: 73vh !important;
    width: 58vw !important;
  }
}

/* phone */
@media (max-width: 760px) {
  .mouth-zone {
    top: 60.5vh !important;
    width: 126px !important;
    height: 46px !important;
  }

  .mouth-zone button,
  .mouth-zone .chat-toggle,
  .mouth-zone .linh-chat-toggle,
  .mouth-zone [role="button"] {
    width: 126px !important;
    height: 46px !important;
    min-width: 126px !important;
    min-height: 46px !important;
  }

  .mouth-zone::before {
    width: 98px !important;
    height: 15px !important;
    top: 9px !important;
  }

  .mouth-zone::after {
    width: 88px !important;
    height: 12px !important;
    top: 22px !important;
  }

  .blackout-dom-action-panel[data-kind="send"],
  .blackout-dom-action-panel[data-kind="receive"] {
    top: 74vh !important;
    width: 72vw !important;
  }
}

/* =========================================================
   REAL LINH MIU LIPS BUTTON — always visible — 1783579946
   ========================================================= */

.yeu-linh-lips-real {
  position: fixed !important;
  left: 50% !important;
  top: 56.8vh !important;
  transform: translateX(-50%) !important;

  width: 150px !important;
  height: 54px !important;
  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  z-index: 999999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;

  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: visible !important;
}

/* upper lips */
.yeu-linh-lips-real::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 12px !important;
  transform: translateX(-50%) !important;

  width: 122px !important;
  height: 20px !important;
  border-radius: 999px 999px 30px 30px !important;

  background:
    radial-gradient(circle at 35% 85%, rgba(255, 160, 125, .95) 0%, rgba(255, 70, 38, .86) 28%, rgba(120, 0, 0, .42) 67%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at 65% 85%, rgba(255, 160, 125, .95) 0%, rgba(255, 70, 38, .86) 28%, rgba(120, 0, 0, .42) 67%, rgba(0,0,0,0) 100%) !important;

  box-shadow:
    0 0 7px rgba(255, 90, 55, .42),
    0 0 18px rgba(255, 45, 20, .24) !important;

  opacity: .96 !important;
  pointer-events: none !important;
  animation: yeuLipsBreatheReal 2.7s ease-in-out infinite !important;
}

/* lower lip + mouth slit */
.yeu-linh-lips-real::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 28px !important;
  transform: translateX(-50%) !important;

  width: 108px !important;
  height: 15px !important;
  border-radius: 18px 18px 999px 999px !important;

  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0 15%, rgba(0,0,0,0) 18%),
    radial-gradient(ellipse at 50% -10%, rgba(255, 155, 120, .80) 0%, rgba(255, 65, 35, .72) 34%, rgba(120,0,0,.34) 72%, rgba(0,0,0,0) 100%) !important;

  box-shadow:
    0 0 6px rgba(255, 80, 35, .36),
    0 0 14px rgba(255, 45, 20, .22) !important;

  opacity: .94 !important;
  pointer-events: none !important;
  animation: yeuLipsBreatheReal 2.7s ease-in-out infinite !important;
}

.yeu-linh-lips-real:hover::before,
.yeu-linh-lips-real:hover::after {
  filter: brightness(1.18) !important;
}

.yeu-linh-lips-real.yeu-lips-talking::before,
.yeu-linh-lips-real.yeu-lips-talking::after {
  animation: yeuLipsTalkReal .62s ease-in-out infinite !important;
}

.yeu-linh-lips-real.yeu-lips-warn::before,
.yeu-linh-lips-real.yeu-lips-warn::after {
  filter: brightness(1.45) saturate(1.4) !important;
}

@keyframes yeuLipsBreatheReal {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.035);
  }
}

@keyframes yeuLipsTalkReal {
  0%, 100% {
    transform: translateX(-50%) scaleX(1) scaleY(1);
  }
  25% {
    transform: translateX(-50%) scaleX(1.04) scaleY(1.12);
  }
  50% {
    transform: translateX(-50%) scaleX(.96) scaleY(.82);
  }
  75% {
    transform: translateX(-50%) scaleX(1.05) scaleY(1.08);
  }
}

/* Hide old black pill if it still exists */
.mouth-zone button,
.mouth-zone .chat-toggle,
.mouth-zone .linh-chat-toggle {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* When Send / Receive panel is open, keep lips visible but hide big sigils */
body.yeu-send-receive-panel-open .send-sigil,
body.yeu-send-receive-panel-open .receive-sigil {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.yeu-send-receive-panel-open .yeu-linh-lips-real {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* minimized desktop */
@media (max-width: 1000px) {
  .yeu-linh-lips-real {
    top: 57.8vh !important;
    width: 132px !important;
    height: 48px !important;
  }

  .yeu-linh-lips-real::before {
    width: 108px !important;
    height: 18px !important;
    top: 10px !important;
  }

  .yeu-linh-lips-real::after {
    width: 96px !important;
    height: 13px !important;
    top: 25px !important;
  }
}

/* phone */
@media (max-width: 760px) {
  .yeu-linh-lips-real {
    top: 58.8vh !important;
    width: 108px !important;
    height: 42px !important;
  }

  .yeu-linh-lips-real::before {
    width: 88px !important;
    height: 15px !important;
    top: 9px !important;
  }

  .yeu-linh-lips-real::after {
    width: 78px !important;
    height: 11px !important;
    top: 22px !important;
  }
}

/* LINHMIU_RESPONSIVE_CENTER_START */

/*
 * One responsive square coordinate system for:
 *   LinhMiuFace
 *   LinhMiuLeft
 *   LinhMiuRight
 *   LinhMiuKiss
 *   LinhMiuLaugh
 *
 * Eye and mouth zones remain attached to this same square.
 */
html body .linh-face {
  position: fixed !important;

  left: 50vw !important;
  right: auto !important;
  top: 50.5vh !important;
  bottom: auto !important;

  width: min(
    66vmin,
    680px,
    calc(100vw - 180px),
    calc(100vh - 190px)
  ) !important;

  height: auto !important;
  aspect-ratio: 1 / 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translate(-50%, -50%) !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;

  display: block !important;
  overflow: visible !important;

  background: none !important;
  border: 0 !important;

  animation: none !important;
  box-sizing: border-box !important;

  z-index: 20 !important;
}

html body .linh-face .linh-miu-real-face,
html body img.linh-miu-real-face {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: 50% 50% !important;

  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;

  animation: none !important;
  pointer-events: none !important;

  z-index: 1 !important;
}

/* Keep the controls above the face image. */
html body .linh-face .left-eye-zone,
html body .linh-face .right-eye-zone,
html body .linh-face .mouth-zone,
html body .linh-face .wallet-number {
  z-index: 8 !important;
}

/* Split-screen and smaller tablet window. */
@media (max-width: 900px) {
  html body .linh-face {
    top: 50vh !important;

    width: min(
      72vmin,
      540px,
      calc(100vw - 120px),
      calc(100vh - 170px)
    ) !important;
  }
}

/* Phone portrait. */
@media (max-width: 600px) {
  html body .linh-face {
    top: 49vh !important;

    width: min(
      84vw,
      58vh,
      500px
    ) !important;
  }
}

/* Very short landscape window. */
@media (max-height: 600px) {
  html body .linh-face {
    top: 50vh !important;

    width: min(
      58vh,
      62vw,
      500px
    ) !important;
  }
}

/* LINHMIU_RESPONSIVE_CENTER_END */



/* LINHMIU_SPLIT_SCALE_FIX_START */

/*
 * Split-screen desktop/tablet:
 * shrink the complete Linh Miu stage, including all hit zones.
 *
 * Full desktop width above 1250px is unchanged.
 * Phone width below 651px is unchanged.
 */
@media (min-width: 651px) and (max-width: 1250px) {
  html body #root .linh-face {
    left: 50vw !important;
    top: 50vh !important;

    transform:
      translate(-50%, -50%)
      scale(0.84) !important;

    transform-origin: 50% 50% !important;
  }
}

/* LINHMIU_SPLIT_SCALE_FIX_END */

/* LINHMIU_HOLD_CONTROLS_FINAL_START */

/* Remove all retired controls and injected duplicates. */
html body .both-eye-zone,
html body #linhmiu-kiss-trigger,
html body .linhmiu-face-stage,
html body .yeu-linh-lips-real,
html body .linhmiu-touch-point-marker,
html body .linhmiu-touch-readout {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Remove the artificial layer that caused upper-face bands. */
html body #root .linh-face .hair-shadow {
  display: none !important;
}

/*
 * Keep the face clean until the proper blackout fade
 * is rebuilt after the controls are finished.
 */
html body #root .linh-face::before,
html body #root .linh-face::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

html body #root .linh-miu-real-face {
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  image-rendering: auto !important;
  pointer-events: none !important;
}

/*
 * Exact eye and mouth controls.
 * All coordinates are attached to the square face stage.
 */
html body #root .linh-face .linhmiu-hold-eye,
html body #root .linh-face .mouth-zone {
  all: unset !important;

  position: absolute !important;
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 18px !important;

  background: transparent !important;
  box-shadow: none !important;

  color: transparent !important;
  font-size: 0 !important;

  cursor: pointer !important;
  pointer-events: auto !important;

  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;

  z-index: 80 !important;
}

/* Viewer-left eye: hold for wallet. */
html body #root .linh-face .eye-left.linhmiu-hold-eye {
  left: 32% !important;
  top: 43.5% !important;

  width: 16% !important;
  height: 10% !important;
}

/* Viewer-right eye: hold for claim status. */
html body #root .linh-face .eye-right.linhmiu-hold-eye {
  left: 52% !important;
  right: auto !important;
  top: 43.5% !important;

  width: 16% !important;
  height: 10% !important;
}

/* Actual lips: tap for Kiss + Chat. */
html body #root .linh-face .mouth-zone {
  left: 43% !important;
  top: 61.5% !important;

  width: 14% !important;
  height: 8% !important;

  z-index: 85 !important;
}

/* Show ranges only through the ? help charm. */
html body.linhmiu-show-hints
#root .linh-face .eye-left.linhmiu-hold-eye {
  outline: 2px solid rgba(255, 65, 65, 0.95) !important;
  background: rgba(255, 65, 65, 0.12) !important;
  box-shadow: 0 0 13px rgba(255, 45, 45, 0.8) !important;
}

html body.linhmiu-show-hints
#root .linh-face .eye-right.linhmiu-hold-eye {
  outline: 2px solid rgba(45, 220, 255, 0.95) !important;
  background: rgba(45, 220, 255, 0.12) !important;
  box-shadow: 0 0 13px rgba(45, 220, 255, 0.8) !important;
}

html body.linhmiu-show-hints
#root .linh-face .mouth-zone {
  outline: 2px solid rgba(255, 65, 215, 0.95) !important;
  background: rgba(255, 65, 215, 0.12) !important;
  box-shadow: 0 0 13px rgba(255, 45, 210, 0.8) !important;
}

html body.linhmiu-show-hints
#root .linh-face [data-hint]::after {
  content: attr(data-hint) !important;

  position: absolute !important;
  left: 50% !important;
  top: -31px !important;

  width: max-content !important;

  padding: 5px 9px !important;

  transform: translateX(-50%) !important;

  border: 1px solid rgba(255, 120, 30, 0.9) !important;
  border-radius: 999px !important;

  background: rgba(0, 0, 0, 0.94) !important;
  color: #ff9b38 !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  pointer-events: none !important;
}

html body.linhmiu-show-hints
#root .linh-face .mouth-zone::after {
  top: auto !important;
  bottom: -31px !important;
}

/* Reusable help charm. */
html body .linhmiu-help-charm {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;

  width: 36px !important;
  height: 36px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid rgba(255, 115, 25, 0.8) !important;
  border-radius: 999px !important;

  background: rgba(20, 4, 0, 0.94) !important;
  color: #ff9a31 !important;

  font-size: 20px !important;
  font-weight: 900 !important;

  box-shadow:
    0 0 10px rgba(255, 80, 15, 0.65) !important;

  cursor: pointer !important;
  z-index: 5000 !important;
}

/* LINHMIU_HOLD_CONTROLS_FINAL_END */

/* LINHMIU_MOUTH_ZONE_POSITION_TWEAK_START */

/* Tiny nudge: a little more right and a little up */
html body #root .linh-face .mouth-zone {
  left: 45.35% !important;
  top: 60.25% !important;
}

/* LINHMIU_MOUTH_ZONE_POSITION_TWEAK_END */



/* YEU_FINAL_LARGE_ALIGNED_NAV_START */

/*
 * ONE FINAL NAVIGATION SYSTEM
 *
 * Large artwork is visually scaled without changing row height.
 * Labels are locked directly below their matching artwork.
 * Linh Miu, Send, Receive, eyes and lips are not selected here.
 */
html body #root .blackout-root .talisman-column {
  --yeu-rail-width: 172px;
  --yeu-art-box: 110px;
  --yeu-art-scale: 1.34;
  --yeu-label-width: 166px;
  --yeu-label-size: 14px;

  position: fixed !important;

  top: 5px !important;
  bottom: 5px !important;

  width: var(--yeu-rail-width) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows:
    repeat(8, minmax(0, 1fr)) !important;

  align-items: stretch !important;
  justify-items: stretch !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  transform: none !important;
  translate: none !important;
  scale: none !important;

  pointer-events: none !important;
  z-index: 1200 !important;
}

html body #root .blackout-root .talisman-left {
  left: 4px !important;
  right: auto !important;
}

html body #root .blackout-root .talisman-right {
  right: 4px !important;
  left: auto !important;
}

/*
 * Each navigation button receives one equal row.
 */
html body #root .blackout-root
.talisman-column .talisman,
html body #root .blackout-root
.talisman-column .yeu-nav-item-fixed {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  transform: none !important;
  translate: none !important;
  scale: none !important;

  overflow: visible !important;

  pointer-events: auto !important;
  box-sizing: border-box !important;
}

/*
 * Large centered talisman artwork.
 *
 * The transform scale enlarges the actual design inside PNGs
 * that contain transparent padding.
 */
html body #root .blackout-root
.talisman-column .yeu-nav-art-fixed,
html body #root .blackout-root
.talisman-column .talisman > img,
html body #root .blackout-root
.talisman-column .talisman picture img,
html body #root .blackout-root
.talisman-column .talisman > svg {
  position: absolute !important;

  left: 50% !important;
  top: 43% !important;

  width: var(--yeu-art-box) !important;
  height: var(--yeu-art-box) !important;

  min-width: var(--yeu-art-box) !important;
  min-height: var(--yeu-art-box) !important;
  max-width: var(--yeu-art-box) !important;
  max-height: var(--yeu-art-box) !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  transform:
    translate(-50%, -50%)
    scale(var(--yeu-art-scale)) !important;

  transform-origin: 50% 50% !important;

  translate: none !important;
  scale: none !important;
  rotate: none !important;

  overflow: visible !important;
  pointer-events: none !important;

  z-index: 1 !important;
}

/*
 * Every label is centered beneath its own icon.
 * Old left/right/top/bottom values are completely reset.
 */
html body #root .blackout-root
.talisman-column .yeu-nav-label-fixed,
html body #root .blackout-root
.talisman-column .talisman > span,
html body #root .blackout-root
.talisman-column .talisman > b,
html body #root .blackout-root
.talisman-column .talisman > strong,
html body #root .blackout-root
.talisman-column .talisman > small {
  position: absolute !important;

  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 2px !important;

  width: var(--yeu-label-width) !important;
  min-width: 0 !important;
  max-width: var(--yeu-label-width) !important;
  height: auto !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateX(-50%) !important;
  transform-origin: center !important;

  translate: none !important;
  scale: none !important;
  rotate: none !important;

  color: #ff963f !important;

  font-size: var(--yeu-label-size) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;

  text-align: center !important;
  white-space: nowrap !important;

  text-shadow:
    0 0 6px rgba(255, 92, 15, 0.58) !important;

  overflow: visible !important;
  text-overflow: clip !important;

  pointer-events: none !important;
  box-sizing: border-box !important;

  z-index: 3 !important;
}

/*
 * Half / split-screen.
 * Still noticeably larger than the previous version.
 */
@media (min-width: 651px) and (max-width: 1250px) {
  html body #root .blackout-root .talisman-column {
    --yeu-rail-width: 146px;
    --yeu-art-box: 96px;
    --yeu-art-scale: 1.28;
    --yeu-label-width: 140px;
    --yeu-label-size: 12px;

    top: 4px !important;
    bottom: 4px !important;
  }

  html body #root .blackout-root .talisman-left {
    left: 2px !important;
  }

  html body #root .blackout-root .talisman-right {
    right: 2px !important;
  }
}

/*
 * Phone layout.
 * Compact enough not to cover the face, but still readable.
 */
@media (max-width: 650px) {
  html body #root .blackout-root .talisman-column {
    --yeu-rail-width: 92px;
    --yeu-art-box: 65px;
    --yeu-art-scale: 1.12;
    --yeu-label-width: 88px;
    --yeu-label-size: 9px;

    top: 3px !important;
    bottom: 3px !important;
  }

  html body #root .blackout-root .talisman-left {
    left: 0 !important;
  }

  html body #root .blackout-root .talisman-right {
    right: 0 !important;
  }
}

/* YEU_FINAL_LARGE_ALIGNED_NAV_END */



/* YEU_LARGE_NAV_LABEL_LOCK_START */

/*
 * Preserve the large talisman appearance while giving
 * every icon and label its own dedicated space.
 */
html body #root .blackout-root .talisman-column {
  --yeu-final-rail: 170px;
  --yeu-final-art: 104px;
  --yeu-final-art-scale: 1.25;
  --yeu-final-label-size: 13px;
  --yeu-final-label-height: 20px;

  top: 9px !important;
  bottom: 9px !important;

  width: var(--yeu-final-rail) !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows:
    repeat(8, minmax(0, 1fr)) !important;

  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  overflow: visible !important;
}

/*
 * One equal navigation row per item:
 * upper section for artwork, bottom section for label.
 */
html body #root .blackout-root
.talisman-column .talisman,
html body #root .blackout-root
.talisman-column .yeu-nav-item-fixed {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows:
    minmax(0, 1fr)
    var(--yeu-final-label-height) !important;

  align-items: center !important;
  justify-items: center !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  transform: none !important;
  translate: none !important;
  scale: none !important;
}

/* Large artwork centered in the upper part of each row. */
html body #root .blackout-root
.talisman-column .yeu-nav-art-fixed,
html body #root .blackout-root
.talisman-column .talisman > img,
html body #root .blackout-root
.talisman-column .talisman picture img,
html body #root .blackout-root
.talisman-column .talisman > svg {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  grid-column: 1 !important;
  grid-row: 1 !important;

  align-self: center !important;
  justify-self: center !important;

  width: var(--yeu-final-art) !important;
  height: var(--yeu-final-art) !important;

  min-width: var(--yeu-final-art) !important;
  min-height: var(--yeu-final-art) !important;
  max-width: var(--yeu-final-art) !important;
  max-height: var(--yeu-final-art) !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  transform:
    translateY(3px)
    scale(var(--yeu-final-art-scale)) !important;

  transform-origin: center !important;

  overflow: visible !important;
  pointer-events: none !important;
}

/*
 * Labels get their own clean line below each icon.
 * The dark backing keeps text readable without covering the artwork.
 */
html body #root .blackout-root
.talisman-column .yeu-nav-label-fixed,
html body #root .blackout-root
.talisman-column .talisman > span,
html body #root .blackout-root
.talisman-column .talisman > b,
html body #root .blackout-root
.talisman-column .talisman > strong,
html body #root .blackout-root
.talisman-column .talisman > small {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  grid-column: 1 !important;
  grid-row: 2 !important;

  align-self: center !important;
  justify-self: center !important;

  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(var(--yeu-final-rail) - 8px) !important;
  height: auto !important;

  display: block !important;

  margin: 0 !important;
  padding: 2px 6px !important;

  transform: none !important;
  translate: none !important;
  scale: none !important;

  border-radius: 999px !important;

  background: rgba(0, 0, 0, 0.72) !important;
  color: #ff963f !important;

  font-size: var(--yeu-final-label-size) !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  text-align: center !important;
  white-space: nowrap !important;

  text-shadow:
    0 0 6px rgba(255, 90, 15, 0.80) !important;

  overflow: visible !important;
  pointer-events: none !important;
}

/* Keep the left and right rails equally inset. */
html body #root .blackout-root .talisman-left {
  left: 5px !important;
  right: auto !important;
}

html body #root .blackout-root .talisman-right {
  right: 5px !important;
  left: auto !important;
}

/* Split-screen keeps the artwork large and labels separated. */
@media (min-width: 651px) and (max-width: 1250px) {
  html body #root .blackout-root .talisman-column {
    --yeu-final-rail: 142px;
    --yeu-final-art: 94px;
    --yeu-final-art-scale: 1.20;
    --yeu-final-label-size: 11px;
    --yeu-final-label-height: 18px;

    top: 7px !important;
    bottom: 7px !important;
  }

  html body #root .blackout-root .talisman-left {
    left: 2px !important;
  }

  html body #root .blackout-root .talisman-right {
    right: 2px !important;
  }
}

/* Phone layout stays compact until it can be checked directly. */
@media (max-width: 650px) {
  html body #root .blackout-root .talisman-column {
    --yeu-final-rail: 90px;
    --yeu-final-art: 62px;
    --yeu-final-art-scale: 1.10;
    --yeu-final-label-size: 9px;
    --yeu-final-label-height: 16px;

    top: 4px !important;
    bottom: 4px !important;
  }

  html body #root .blackout-root .talisman-left {
    left: 0 !important;
  }

  html body #root .blackout-root .talisman-right {
    right: 0 !important;
  }
}

/* YEU_LARGE_NAV_LABEL_LOCK_END */

/* LINHMIU_HIDE_LIP_BAR_KEEP_CLICK_START */

/* Keep mouth click/tap zone active, but make it invisible. */
html body #root .linh-face .mouth-zone,
html body #root .linh-face .kiss-zone,
html body #root .linh-face .linhmiu-mouth-zone,
html body #root .linh-face .linhmiu-kiss-zone {
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Hide any visible mouth-zone decoration. */
html body #root .linh-face .mouth-zone::before,
html body #root .linh-face .mouth-zone::after,
html body #root .linh-face .kiss-zone::before,
html body #root .linh-face .kiss-zone::after,
html body #root .linh-face .linhmiu-mouth-zone::before,
html body #root .linh-face .linhmiu-mouth-zone::after,
html body #root .linh-face .linhmiu-kiss-zone::before,
html body #root .linh-face .linhmiu-kiss-zone::after {
  content: none !important;
  display: none !important;
}

/* No shadow / no extra fade for now. */
html body #root .linh-face::before,
html body #root .linh-face::after,
html body #root .linh-face-wrap::before,
html body #root .linh-face-wrap::after,
html body #root .linhmiu-face-shadow,
html body #root .linhmiu-portrait-shadow,
html body #root .linhmiu-blackout-fade {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* Only show helper outlines if hint mode is manually enabled. */
html body:not(.linhmiu-show-hints) #root .linh-face .mouth-zone,
html body:not(.linhmiu-show-hints) #root .linh-face .kiss-zone,
html body:not(.linhmiu-show-hints) #root .linh-face .linhmiu-mouth-zone,
html body:not(.linhmiu-show-hints) #root .linh-face .linhmiu-kiss-zone {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
}

/* LINHMIU_HIDE_LIP_BAR_KEEP_CLICK_END */

/* LINHMIU_FIXED_CHAT_HISTORY_START */

/*
 * Keep older messages inside a small history window.
 * Only this section scrolls; the page and face stay still.
 */
html body #root .linh-chat .chat-lines {
  display: block !important;

  height: clamp(145px, 21vh, 215px) !important;
  min-height: 145px !important;
  max-height: 215px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior: contain !important;
  scroll-behavior: auto !important;

  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body #root .linh-chat .chat-lines::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body #root .linh-chat .chat-bottom-anchor {
  display: block !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

html body #root .linh-chat form {
  flex: 0 0 auto !important;
}

/* LINHMIU_FIXED_CHAT_HISTORY_END */

/* LINHMIU_NOSE_CRY_ZONE_CSS_START */

/*
 * Large transparent poke target with a small visible ring
 * centered around the tip of Linh Miu's nose.
 */
html body #root .linh-face .nose-tip-zone {
  all: unset !important;

  position: absolute !important;
  left: 50% !important;
  top: 56.2% !important;

  width: clamp(44px, 4.4vw, 58px) !important;
  height: clamp(44px, 4.4vw, 58px) !important;

  transform: translate(-50%, -50%) !important;

  display: block !important;
  box-sizing: border-box !important;

  border-radius: 999px !important;
  background: transparent !important;

  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;

  z-index: 84 !important;
}

html body #root .linh-face .nose-tip-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: clamp(17px, 1.7vw, 23px) !important;
  height: clamp(17px, 1.7vw, 23px) !important;

  transform: translate(-50%, -50%) !important;

  display: block !important;
  box-sizing: border-box !important;

  border: 2px solid rgba(255, 115, 75, 0.84) !important;
  border-radius: 999px !important;

  background: rgba(255, 80, 45, 0.025) !important;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.72),
    0 0 9px rgba(255, 85, 40, 0.34) !important;

  pointer-events: none !important;
}

html body #root
.linh-face .nose-tip-zone:hover .nose-tip-ring,
html body #root
.linh-face .nose-tip-zone:focus-visible .nose-tip-ring {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.72),
    0 0 14px rgba(255, 90, 40, 0.58) !important;
}

html body #root
.linh-face .nose-tip-zone:active .nose-tip-ring {
  transform:
    translate(-50%, -50%)
    scale(0.88) !important;
}

/* LINHMIU_NOSE_CRY_ZONE_CSS_END */

/* LINHMIU_CLEAN_NOSE_POSITION_START */

/*
 * Same size, nudged a little more right and a little more up.
 */
html body #root .linh-face > .nose-tip-zone {
  all: unset !important;

  position: absolute !important;
  left: 51.8% !important;
  top: 55.2% !important;

  width: 64px !important;
  height: 64px !important;

  transform: translate(-50%, -50%) !important;

  display: block !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 999px !important;

  background: transparent !important;
  box-shadow: none !important;

  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;

  z-index: 84 !important;
}

html body #root .linh-face > .nose-tip-zone::before,
html body #root .linh-face > .nose-tip-zone::after {
  content: none !important;
  display: none !important;
}

html body #root .linh-face > .nose-tip-zone > .nose-tip-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 64px !important;
  height: 64px !important;

  transform: translate(-50%, -50%) !important;

  display: block !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(255, 120, 70, 0.92) !important;
  border-radius: 999px !important;

  background: rgba(255, 90, 45, 0.025) !important;
  box-shadow: 0 0 8px rgba(255, 110, 55, 0.48) !important;

  pointer-events: none !important;
}

html body #root .linh-face > .nose-tip-zone > .nose-tip-ring::before,
html body #root .linh-face > .nose-tip-zone > .nose-tip-ring::after {
  content: none !important;
  display: none !important;
}

/* LINHMIU_CLEAN_NOSE_POSITION_END */

/* YEU_NAVIGATION_CLICK_REPAIR_START */

/*
 * The rails and actual buttons must receive pointer events.
 * Images and labels pass the click through to the button.
 */
html body #root
.blackout-root .talisman-column {
  pointer-events: auto !important;
  z-index: 9000 !important;
}

html body #root
.blackout-root .talisman-column .talisman {
  position: relative !important;

  pointer-events: auto !important;
  touch-action: manipulation !important;

  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;

  z-index: 2 !important;
}

html body #root
.blackout-root .talisman-column
.talisman-img-wrap,
html body #root
.blackout-root .talisman-column
.talisman-img-wrap img,
html body #root
.blackout-root .talisman-column
.talisman-img-wrap em,
html body #root
.blackout-root .talisman-column
.talisman > span {
  pointer-events: none !important;
}

html body #root
.blackout-root .blackout-page-panel {
  pointer-events: auto !important;
  z-index: 5000 !important;
}

/*
 * Navigation remains above the page panel, allowing
 * users to switch directly from one page to another.
 */
html body #root
.blackout-root .talisman-column
.talisman:active {
  transform: scale(0.96) !important;
}

/* YEU_NAVIGATION_CLICK_REPAIR_END */

/* YEU_PAGE_FOREGROUND_FINAL_START */

/*
 * Create one dependable stacking order:
 *
 * background       0
 * portrait      1000
 * opened page  20000
 * talismans    30000
 */
html body #root .blackout-root {
  isolation: isolate !important;
}

/* Portrait remains the normal Home screen. */
html body #root .blackout-root .linh-face {
  z-index: 1000 !important;
}

html body #root
.blackout-root .linh-miu-real-face {
  z-index: 1001 !important;
}

/*
 * Open pages occupy the center between the navigation rails.
 * They are fully opaque so the portrait cannot show through.
 */
html body #root
.blackout-root .blackout-page-panel,
html body #root
.blackout-root .blackout-page-panel.force-open {
  position: fixed !important;

  left: 178px !important;
  right: 178px !important;
  top: 22px !important;
  bottom: 22px !important;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  margin: 0 !important;
  padding: 54px 32px 32px !important;

  transform: none !important;
  translate: none !important;
  scale: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;

  color: #f6d7bd !important;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(74, 20, 7, 0.34),
      rgba(0, 0, 0, 0.99) 48%
    ),
    #000 !important;

  border: 1px solid rgba(255, 104, 22, 0.72) !important;
  border-radius: 22px !important;

  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.95),
    0 0 28px rgba(255, 76, 8, 0.28) !important;

  pointer-events: auto !important;
  z-index: 20000 !important;
}

/* Make page content visible and usable. */
html body #root
.blackout-root .blackout-page-panel h2 {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 0 20px !important;

  color: #ff8b37 !important;
  text-align: center !important;
  font-size: clamp(25px, 4vw, 46px) !important;
}

html body #root
.blackout-root .blackout-page-panel p,
html body #root
.blackout-root .blackout-page-panel small,
html body #root
.blackout-root .blackout-page-panel button,
html body #root
.blackout-root .blackout-page-panel input,
html body #root
.blackout-root .blackout-page-panel iframe,
html body #root
.blackout-root .blackout-page-panel div {
  position: relative !important;
  z-index: 2 !important;
}

/* Close button stays in the top-right of the opened page. */
html body #root
.blackout-root .blackout-page-close {
  position: absolute !important;

  top: 12px !important;
  right: 15px !important;

  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  color: #ff8a39 !important;
  font-size: 28px !important;
  line-height: 1 !important;

  background: rgba(20, 3, 0, 0.96) !important;
  border: 1px solid rgba(255, 105, 27, 0.85) !important;
  border-radius: 999px !important;

  cursor: pointer !important;
  pointer-events: auto !important;

  z-index: 5 !important;
}

/* Daily Video must stay above every portrait layer. */
html body #root
.blackout-root .daily-video-blackout,
html body #root
.blackout-root .daily-video-frame,
html body #root
.blackout-root .daily-video-frame iframe {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body #root
.blackout-root .daily-video-frame {
  width: min(850px, 92%) !important;
  margin: 18px auto !important;

  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;

  background: #000 !important;
  border: 1px solid rgba(255, 105, 25, 0.72) !important;
  border-radius: 16px !important;
}

html body #root
.blackout-root .daily-video-frame iframe {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  border: 0 !important;
}

/*
 * Talismans remain above the opened page.
 * This allows instant switching between pages.
 */
html body #root
.blackout-root .talisman-column {
  pointer-events: auto !important;
  z-index: 30000 !important;
}

html body #root
.blackout-root .talisman-column .talisman {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

/* Split-screen desktop. */
@media (min-width: 651px) and (max-width: 1250px) {
  html body #root
  .blackout-root .blackout-page-panel,
  html body #root
  .blackout-root .blackout-page-panel.force-open {
    left: 148px !important;
    right: 148px !important;
    top: 14px !important;
    bottom: 14px !important;

    padding:
      48px 20px 24px !important;
  }
}

/* Phone. */
@media (max-width: 650px) {
  html body #root
  .blackout-root .blackout-page-panel,
  html body #root
  .blackout-root .blackout-page-panel.force-open {
    left: 94px !important;
    right: 94px !important;
    top: 8px !important;
    bottom: 8px !important;

    padding:
      44px 12px 18px !important;

    border-radius: 14px !important;
  }

  html body #root
  .blackout-root .blackout-page-panel h2 {
    font-size: 22px !important;
  }
}

/* YEU_PAGE_FOREGROUND_FINAL_END */

/* YEU_HOME_CONTROL_VISIBILITY_REPAIR_START */

/*
 * Portrait is currently around z-index 1000.
 * Keep Home information and chat visibly above it.
 */
html body #root
.blackout-root .blackout-readouts {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: none !important;
  z-index: 8000 !important;
}

html body #root
.blackout-root .blackout-readouts .wallet-number,
html body #root
.blackout-root .blackout-readouts .reward-status {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: none !important;
  z-index: 8001 !important;
}

html body #root
.blackout-root .linh-chat {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;
  z-index: 10000 !important;
}

html body #root
.blackout-root .linh-chat .chat-lines,
html body #root
.blackout-root .linh-chat form,
html body #root
.blackout-root .linh-chat input {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* YEU_HOME_CONTROL_VISIBILITY_REPAIR_END */

/* YEU_WALLET_PAGE_START */

.blackout-page-panel[data-page="wallet"] {
  width: min(780px, calc(100vw - 300px)) !important;
  max-height: min(820px, calc(100vh - 80px)) !important;
  overflow-y: auto !important;
}

.blackout-wallet-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 4px 2px 18px;
  box-sizing: border-box;
}

.wallet-page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.wallet-page-heading h3 {
  margin: 8px 0 4px;
  font-size: clamp(24px, 3vw, 36px);
  color: #fff1dc;
}

.wallet-page-heading p {
  margin: 0;
  max-width: 620px;
  color: rgba(255, 232, 207, 0.76);
  line-height: 1.5;
}

.wallet-demo-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 11px;
  border: 1px solid rgba(255, 135, 53, 0.7);
  border-radius: 999px;
  background: rgba(105, 35, 0, 0.45);
  color: #ffb370;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.wallet-page-balance-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid rgba(255, 132, 52, 0.55);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(93, 24, 0, 0.76),
      rgba(12, 4, 1, 0.92)
    );
  box-shadow:
    0 16px 45px rgba(0, 0, 0, 0.45),
    inset 0 0 34px rgba(255, 87, 0, 0.08);
}

.wallet-page-balance-card small {
  color: rgba(255, 232, 207, 0.68);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wallet-page-balance-card strong {
  color: #fff3dc;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.1;
  word-break: break-word;
}

.wallet-page-balance-card span {
  color: #f6a461;
  font-size: 12px;
}

.wallet-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.wallet-page-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255, 124, 44, 0.34);
  border-radius: 16px;
  background: rgba(15, 5, 2, 0.84);
}

.wallet-page-card h3 {
  margin: 0;
  color: #ffbc7c;
  font-size: 20px;
}

.wallet-page-card p,
.wallet-page-card small {
  margin: 0;
  color: rgba(255, 228, 203, 0.67);
  line-height: 1.45;
}

.wallet-page-send-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wallet-page-send-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: rgba(255, 232, 207, 0.82);
  font-size: 12px;
}

.wallet-page-send-form input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 132, 52, 0.42);
  border-radius: 10px;
  outline: none;
  background: rgba(0, 0, 0, 0.72);
  color: #fff5e8;
  font-size: 15px;
}

.wallet-page-send-form input:focus {
  border-color: rgba(255, 152, 73, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 105, 26, 0.14);
}

.wallet-page-card button,
.wallet-page-send-form button {
  min-height: 43px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 136, 53, 0.7);
  border-radius: 11px;
  background:
    linear-gradient(
      180deg,
      rgba(153, 55, 4, 0.92),
      rgba(84, 23, 0, 0.95)
    );
  color: #fff2dc;
  font-weight: 800;
  cursor: pointer;
}

.wallet-page-card button:hover,
.wallet-page-send-form button:hover {
  filter: brightness(1.15);
}

.wallet-page-receive-code {
  min-height: 48px;
  padding: 12px;
  overflow-wrap: anywhere;
  border: 1px dashed rgba(255, 145, 70, 0.57);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.56);
  color: #ffe7c9;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
}

.wallet-page-notice {
  padding: 12px 14px;
  border: 1px solid rgba(255, 158, 88, 0.48);
  border-radius: 12px;
  background: rgba(91, 30, 0, 0.52);
  color: #ffd6ad;
  font-size: 14px;
}

.wallet-page-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 17px;
  border: 1px solid rgba(255, 124, 44, 0.28);
  border-radius: 16px;
  background: rgba(8, 3, 1, 0.78);
}

.wallet-page-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.wallet-page-section-title h3 {
  margin: 0;
  color: #ffbd80;
  font-size: 18px;
}

.wallet-page-section-title span {
  color: rgba(255, 225, 195, 0.54);
  font-size: 12px;
}

.wallet-page-empty {
  margin: 8px 0 0;
  color: rgba(255, 225, 195, 0.62);
}

.wallet-page-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255, 132, 52, 0.13);
}

.wallet-page-history-row:last-child {
  border-bottom: 0;
}

.wallet-page-history-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wallet-page-history-row b {
  color: #fff0dc;
}

.wallet-page-history-row small {
  overflow: hidden;
  color: rgba(255, 225, 195, 0.56);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-page-history-row > span {
  flex: 0 0 auto;
  font-weight: 800;
}

.wallet-amount-positive {
  color: #8bd49b;
}

.wallet-amount-negative {
  color: #ff8b7f;
}

.wallet-page-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 2px;
  color: rgba(255, 224, 194, 0.48);
  font-size: 11px;
}

@media (max-width: 900px) {
  .blackout-page-panel[data-page="wallet"] {
    width: min(680px, calc(100vw - 210px)) !important;
  }

  .wallet-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .blackout-page-panel[data-page="wallet"] {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 30px) !important;
  }

  .blackout-wallet-page {
    gap: 13px;
  }

  .wallet-page-heading h3 {
    font-size: 26px;
  }

  .wallet-page-balance-card strong {
    font-size: 32px;
  }

  .wallet-page-history-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .wallet-page-history-row small {
    white-space: normal;
  }

  .wallet-page-footer {
    flex-direction: column;
    gap: 4px;
  }
}

/* YEU_WALLET_PAGE_END */

/* YEU_HISTORY_PAGE_START */

.blackout-page-panel[data-page="history"] {
  width: min(820px, calc(100vw - 300px)) !important;
  max-height: min(840px, calc(100vh - 70px)) !important;
  overflow-y: auto !important;
}

.blackout-history-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 4px 2px 20px;
  box-sizing: border-box;
}

.history-page-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
}

.history-page-intro h3 {
  margin: 8px 0 5px;
  color: #fff0dc;
  font-size: clamp(26px, 4vw, 38px);
}

.history-page-intro p {
  margin: 0;
  max-width: 580px;
  color: rgba(255, 229, 204, 0.7);
  line-height: 1.5;
}

.history-page-badge {
  display: inline-flex;
  padding: 4px 11px;
  border: 1px solid rgba(255, 135, 53, 0.65);
  border-radius: 999px;
  background: rgba(91, 29, 0, 0.48);
  color: #ffad67;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.history-page-count {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  min-width: 92px;
  padding: 13px;
  border: 1px solid rgba(255, 127, 46, 0.4);
  border-radius: 15px;
  background: rgba(10, 3, 1, 0.72);
}

.history-page-count strong {
  color: #ffd5ad;
  font-size: 27px;
}

.history-page-count small {
  color: rgba(255, 224, 195, 0.55);
}

.history-page-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.history-page-summary-grid section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px;
  border: 1px solid rgba(255, 126, 44, 0.3);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(64, 18, 0, 0.62),
      rgba(8, 2, 0, 0.9)
    );
}

.history-page-summary-grid small {
  color: rgba(255, 227, 201, 0.58);
  font-size: 11px;
  text-transform: uppercase;
}

.history-page-summary-grid strong {
  color: #ffe7ca;
  font-size: clamp(17px, 2.5vw, 24px);
  overflow-wrap: anywhere;
}

.history-page-empty {
  padding: 34px 20px;
  border: 1px dashed rgba(255, 137, 60, 0.38);
  border-radius: 16px;
  background: rgba(5, 2, 1, 0.74);
  text-align: center;
}

.history-page-empty strong {
  color: #ffc28b;
  font-size: 21px;
}

.history-page-empty p {
  margin: 8px auto 0;
  max-width: 500px;
  color: rgba(255, 226, 199, 0.6);
  line-height: 1.5;
}

.history-page-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 126, 44, 0.28);
  border-radius: 16px;
  background: rgba(7, 2, 1, 0.78);
}

.history-page-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-bottom: 1px solid rgba(255, 126, 44, 0.13);
}

.history-page-row:last-child {
  border-bottom: 0;
}

.history-page-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  font-size: 23px;
  font-weight: 900;
}

.history-page-icon.positive {
  border: 1px solid rgba(80, 197, 115, 0.45);
  background: rgba(28, 92, 47, 0.3);
  color: #8de1a4;
}

.history-page-icon.negative {
  border: 1px solid rgba(255, 104, 91, 0.45);
  background: rgba(107, 22, 17, 0.3);
  color: #ff958b;
}

.history-page-icon.neutral {
  border: 1px solid rgba(255, 150, 72, 0.4);
  background: rgba(95, 33, 3, 0.3);
  color: #ffb979;
}

.history-page-row-text {
  min-width: 0;
}

.history-page-row-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.history-page-row-title strong {
  color: #fff0dc;
  overflow-wrap: anywhere;
}

.history-page-row-title span {
  flex: 0 0 auto;
  color: rgba(255, 224, 195, 0.42);
  font-size: 10px;
}

.history-page-row-text p {
  margin: 4px 0;
  color: rgba(255, 225, 197, 0.63);
  font-size: 13px;
  line-height: 1.4;
}

.history-page-row-text small {
  color: rgba(255, 150, 77, 0.56);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.history-page-amount {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 900;
  text-align: right;
}

.history-page-amount.positive {
  color: #8add9f;
}

.history-page-amount.negative {
  color: #ff8f84;
}

.history-page-amount.neutral {
  color: #ffb675;
}

.history-page-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.history-page-bottom > span {
  color: rgba(255, 226, 199, 0.44);
  font-size: 11px;
}

.history-page-clear {
  min-height: 39px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 98, 76, 0.48);
  border-radius: 10px;
  background: rgba(91, 17, 10, 0.56);
  color: #ffb0a6;
  font-weight: 800;
  cursor: pointer;
}

.history-page-clear:hover {
  filter: brightness(1.18);
}

@media (max-width: 900px) {
  .blackout-page-panel[data-page="history"] {
    width: min(700px, calc(100vw - 210px)) !important;
  }

  .history-page-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .blackout-page-panel[data-page="history"] {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 28px) !important;
  }

  .history-page-intro {
    flex-direction: column;
  }

  .history-page-count {
    align-items: flex-start;
  }

  .history-page-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .history-page-amount {
    grid-column: 2;
    text-align: left;
  }

  .history-page-row-title {
    flex-direction: column;
    gap: 3px;
  }

  .history-page-bottom {
    align-items: stretch;
    flex-direction: column;
  }
}

/* YEU_HISTORY_PAGE_END */

/* YEU_PROFILE_PAGE_START */

.blackout-page-panel[data-page="profile"] {
  width: min(820px, calc(100vw - 300px)) !important;
  max-height: min(840px, calc(100vh - 70px)) !important;
  overflow-y: auto !important;
}

.blackout-profile-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 5px 2px 20px;
  box-sizing: border-box;
}

.profile-page-header {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.profile-page-avatar {
  display: grid;
  width: 94px;
  height: 94px;
  place-items: center;
  border: 2px solid rgba(255, 130, 43, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 40% 35%,
      rgba(255, 145, 72, 0.35),
      rgba(75, 19, 0, 0.9) 65%,
      rgba(4, 1, 0, 1)
    );
  box-shadow:
    0 0 28px rgba(255, 91, 0, 0.2),
    inset 0 0 22px rgba(255, 123, 37, 0.12);
  color: #ffe3bd;
  font-size: 43px;
  font-weight: 900;
}

.profile-page-identity {
  min-width: 0;
}

.profile-page-badge {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid rgba(255, 135, 53, 0.62);
  border-radius: 999px;
  background: rgba(92, 28, 0, 0.5);
  color: #ffb273;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.profile-page-identity h3 {
  margin: 8px 0 2px;
  color: #fff0db;
  font-size: clamp(27px, 4vw, 40px);
  overflow-wrap: anywhere;
}

.profile-page-identity > strong {
  color: #f2a25d;
  font-size: 14px;
}

.profile-page-identity p {
  margin: 7px 0 0;
  max-width: 520px;
  color: rgba(255, 226, 198, 0.7);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.profile-page-edit-button {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 136, 55, 0.62);
  border-radius: 11px;
  background: rgba(88, 26, 0, 0.72);
  color: #ffd5aa;
  font-weight: 800;
  cursor: pointer;
}

.profile-page-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.profile-page-stats section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 126, 44, 0.3);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(58, 16, 0, 0.64),
      rgba(8, 2, 0, 0.9)
    );
}

.profile-page-stats small {
  color: rgba(255, 226, 198, 0.55);
  font-size: 10px;
  text-transform: uppercase;
}

.profile-page-stats strong {
  color: #ffe5c4;
  font-size: clamp(15px, 2.2vw, 21px);
  overflow-wrap: anywhere;
}

.profile-page-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px;
  border: 1px solid rgba(255, 127, 44, 0.42);
  border-radius: 16px;
  background: rgba(12, 4, 1, 0.88);
}

.profile-page-form h3 {
  margin: 0 0 3px;
  color: #ffbd7e;
  font-size: 20px;
}

.profile-page-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: rgba(255, 229, 204, 0.78);
  font-size: 12px;
}

.profile-page-form input,
.profile-page-form textarea {
  width: 100%;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 132, 54, 0.38);
  border-radius: 10px;
  outline: none;
  background: rgba(0, 0, 0, 0.72);
  color: #fff1dd;
  font: inherit;
  resize: vertical;
}

.profile-page-form input:focus,
.profile-page-form textarea:focus {
  border-color: rgba(255, 149, 69, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 105, 27, 0.13);
}

.profile-handle-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 132, 54, 0.38);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.72);
}

.profile-handle-input > span {
  padding-left: 12px;
  color: #f2a15b;
  font-weight: 900;
}

.profile-handle-input input {
  border: 0;
  background: transparent;
}

.profile-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.profile-form-footer span {
  color: rgba(255, 224, 194, 0.44);
  font-size: 11px;
}

.profile-form-footer button,
.profile-page-card button {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 137, 53, 0.7);
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      rgba(148, 52, 4, 0.94),
      rgba(78, 21, 0, 0.96)
    );
  color: #fff0d9;
  font-weight: 900;
  cursor: pointer;
}

.profile-page-notice {
  padding: 12px 14px;
  border: 1px solid rgba(255, 157, 86, 0.48);
  border-radius: 12px;
  background: rgba(87, 28, 0, 0.52);
  color: #ffd2a7;
}

.profile-page-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-page-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(255, 126, 44, 0.29);
  border-radius: 15px;
  background: rgba(8, 2, 0, 0.8);
}

.profile-page-card h3 {
  margin: 0;
  color: #ffbd7d;
  font-size: 19px;
}

.profile-page-card p {
  margin: 0;
  color: rgba(255, 226, 198, 0.62);
  line-height: 1.45;
}

.profile-page-code {
  padding: 11px;
  overflow-wrap: anywhere;
  border: 1px dashed rgba(255, 144, 66, 0.49);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.58);
  color: #ffe2bf;
  font-family: monospace;
  line-height: 1.45;
}

.profile-membership-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 126, 44, 0.12);
}

.profile-membership-row:last-child {
  border-bottom: 0;
}

.profile-membership-row span {
  color: rgba(255, 226, 198, 0.56);
  font-size: 12px;
}

.profile-membership-row b {
  color: #ffd9b1;
  font-size: 12px;
  text-align: right;
  overflow-wrap: anywhere;
}

.profile-page-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.profile-page-bottom > span {
  color: rgba(255, 225, 196, 0.43);
  font-size: 11px;
}

.profile-page-reset {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 97, 77, 0.43);
  border-radius: 10px;
  background: rgba(88, 15, 9, 0.54);
  color: #ffada3;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 950px) {
  .blackout-page-panel[data-page="profile"] {
    width: min(700px, calc(100vw - 210px)) !important;
  }

  .profile-page-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .blackout-page-panel[data-page="profile"] {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 28px) !important;
  }

  .profile-page-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-page-avatar {
    width: 72px;
    height: 72px;
    font-size: 33px;
  }

  .profile-page-edit-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .profile-page-stats,
  .profile-page-grid {
    grid-template-columns: 1fr;
  }

  .profile-page-bottom {
    align-items: stretch;
    flex-direction: column;
  }
}

/* YEU_PROFILE_PAGE_END */

/* YEU_GET_STARTED_PAGE_START */

.blackout-page-panel[data-page="getStarted"] {
  width: min(850px, calc(100vw - 300px)) !important;
  max-height: min(850px, calc(100vh - 70px)) !important;
  overflow-y: auto !important;
}

.blackout-get-started-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 4px 2px 20px;
  box-sizing: border-box;
}

.get-started-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}

.get-started-hero-text {
  min-width: 0;
}

.get-started-badge {
  display: inline-flex;
  padding: 4px 11px;
  border: 1px solid rgba(255, 135, 53, 0.64);
  border-radius: 999px;
  background: rgba(93, 29, 0, 0.48);
  color: #ffae6a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.get-started-hero h3 {
  margin: 8px 0 5px;
  color: #fff0dc;
  font-size: clamp(29px, 4vw, 42px);
}

.get-started-hero p {
  margin: 0;
  max-width: 570px;
  color: rgba(255, 228, 201, 0.68);
  line-height: 1.5;
}

.get-started-progress-ring {
  --yeu-progress: 0%;

  display: grid;
  flex: 0 0 auto;
  width: 118px;
  height: 118px;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(
      #ec7d2d var(--yeu-progress),
      rgba(255, 122, 44, 0.14) 0
    );
  box-shadow: 0 0 30px rgba(255, 88, 0, 0.13);
}

.get-started-progress-ring::before {
  grid-area: 1 / 1;
  width: 91px;
  height: 91px;
  border: 1px solid rgba(255, 134, 51, 0.24);
  border-radius: 50%;
  background: #090301;
  content: "";
}

.get-started-progress-ring > div {
  z-index: 1;
  display: flex;
  grid-area: 1 / 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.get-started-progress-ring strong {
  color: #ffe5c4;
  font-size: 25px;
}

.get-started-progress-ring small {
  color: rgba(255, 224, 194, 0.51);
  font-size: 9px;
}

.get-started-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 126, 44, 0.13);
}

.get-started-progress-track > div {
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #9f3b0a,
      #f08b38
    );
  transition: width 220ms ease;
}

.get-started-steps {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.get-started-step {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid rgba(255, 126, 44, 0.28);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(44, 12, 0, 0.66),
      rgba(7, 2, 0, 0.9)
    );
}

.get-started-step.complete {
  border-color: rgba(72, 190, 105, 0.37);
  background:
    linear-gradient(
      145deg,
      rgba(18, 58, 27, 0.35),
      rgba(5, 12, 6, 0.9)
    );
}

.get-started-step-number {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(255, 135, 55, 0.5);
  border-radius: 50%;
  background: rgba(94, 29, 0, 0.58);
  color: #ffc18a;
  font-size: 18px;
  font-weight: 900;
}

.get-started-step.complete
.get-started-step-number {
  border-color: rgba(75, 197, 109, 0.55);
  background: rgba(23, 94, 44, 0.42);
  color: #96e7ab;
}

.get-started-step-text {
  min-width: 0;
}

.get-started-step-text > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.get-started-step h3 {
  margin: 0;
  color: #ffe8cd;
  font-size: 17px;
}

.get-started-step-text span {
  flex: 0 0 auto;
  color: #f0a260;
  font-size: 11px;
  font-weight: 800;
}

.get-started-step.complete
.get-started-step-text span {
  color: #85d79a;
}

.get-started-step p {
  margin: 5px 0 0;
  color: rgba(255, 225, 197, 0.58);
  font-size: 12px;
  line-height: 1.45;
}

.get-started-step button,
.get-started-complete-card button,
.get-started-footer button {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 135, 53, 0.65);
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      rgba(146, 51, 3, 0.94),
      rgba(77, 21, 0, 0.96)
    );
  color: #fff0d8;
  font-weight: 900;
  cursor: pointer;
}

.get-started-step button:hover,
.get-started-complete-card button:hover,
.get-started-footer button:hover {
  filter: brightness(1.14);
}

.get-started-complete-card {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 17px;
  border: 1px solid rgba(74, 199, 109, 0.44);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(20, 73, 36, 0.42),
      rgba(4, 14, 7, 0.92)
    );
}

.get-started-complete-card > div {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(53, 168, 86, 0.23);
  color: #9ceab0;
  font-size: 23px;
  font-weight: 900;
}

.get-started-complete-card h3 {
  margin: 0;
  color: #b4f0c3;
  font-size: 18px;
}

.get-started-complete-card p {
  margin: 5px 0 0;
  color: rgba(194, 239, 204, 0.62);
  font-size: 12px;
  line-height: 1.45;
}

.get-started-info-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.get-started-info-grid section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px;
  border: 1px solid rgba(255, 126, 44, 0.25);
  border-radius: 14px;
  background: rgba(8, 2, 0, 0.8);
}

.get-started-info-grid h3 {
  margin: 0;
  color: rgba(255, 225, 197, 0.54);
  font-size: 11px;
  text-transform: uppercase;
}

.get-started-info-grid strong {
  color: #ffc68f;
  font-size: 17px;
}

.get-started-info-grid p {
  margin: 0;
  color: rgba(255, 226, 198, 0.56);
  font-size: 11px;
  line-height: 1.45;
}

.get-started-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 17px;
}

.get-started-footer > span {
  color: rgba(255, 225, 196, 0.43);
  font-size: 11px;
}

@media (max-width: 950px) {
  .blackout-page-panel[data-page="getStarted"] {
    width: min(720px, calc(100vw - 210px)) !important;
  }

  .get-started-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .blackout-page-panel[data-page="getStarted"] {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 28px) !important;
  }

  .get-started-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .get-started-progress-ring {
    width: 100px;
    height: 100px;
  }

  .get-started-progress-ring::before {
    width: 76px;
    height: 76px;
  }

  .get-started-step {
    grid-template-columns:
      auto minmax(0, 1fr);
  }

  .get-started-step > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .get-started-step-text > div {
    flex-direction: column;
    gap: 3px;
  }

  .get-started-complete-card {
    grid-template-columns:
      auto minmax(0, 1fr);
  }

  .get-started-complete-card > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .get-started-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

/* YEU_GET_STARTED_PAGE_END */

/* YEU_MAP_PAGE_START */

.blackout-page-panel[data-page="yeuMap"] {
  width: min(900px, calc(100vw - 290px)) !important;
  max-height: min(880px, calc(100vh - 60px)) !important;
  overflow-y: auto !important;
}

.blackout-yeu-map-page {
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 100%;
  padding: 4px 2px 22px;
  box-sizing: border-box;
}

.yeu-map-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
}

.yeu-map-badge {
  display: inline-flex;
  padding: 4px 11px;
  border: 1px solid rgba(255, 134, 52, 0.65);
  border-radius: 999px;
  background: rgba(89, 27, 0, 0.54);
  color: #ffaf6c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.yeu-map-header h3 {
  margin: 8px 0 5px;
  color: #fff0da;
  font-size: clamp(29px, 4vw, 42px);
}

.yeu-map-header p {
  max-width: 590px;
  margin: 0;
  color: rgba(255, 228, 201, 0.68);
  line-height: 1.5;
}

.yeu-map-refresh,
.yeu-map-footer button {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 137, 55, 0.65);
  border-radius: 11px;
  background:
    linear-gradient(
      180deg,
      rgba(145, 51, 4, 0.95),
      rgba(75, 20, 0, 0.97)
    );
  color: #fff0d8;
  font-weight: 900;
  cursor: pointer;
}

.yeu-map-refresh:disabled {
  cursor: wait;
  opacity: 0.6;
}

.yeu-map-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.yeu-map-stats section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 127, 45, 0.29);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(58, 16, 0, 0.65),
      rgba(7, 2, 0, 0.91)
    );
}

.yeu-map-stats small {
  color: rgba(255, 227, 199, 0.53);
  font-size: 10px;
  text-transform: uppercase;
}

.yeu-map-stats strong {
  color: #ffe4c0;
  font-size: clamp(18px, 2.4vw, 25px);
  overflow-wrap: anywhere;
}

.yeu-map-controls {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(170px, 0.34fr);
  gap: 11px;
}

.yeu-map-controls input,
.yeu-map-controls select,
.yeu-map-pin-field input {
  width: 100%;
  min-height: 43px;
  padding: 9px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 133, 52, 0.38);
  border-radius: 11px;
  outline: none;
  background: rgba(0, 0, 0, 0.75);
  color: #fff0dc;
  font: inherit;
}

.yeu-map-controls input:focus,
.yeu-map-controls select:focus,
.yeu-map-pin-field input:focus {
  border-color: rgba(255, 151, 70, 0.88);
  box-shadow:
    0 0 0 2px rgba(255, 99, 17, 0.13);
}

.yeu-map-notice {
  padding: 11px 14px;
  border: 1px solid rgba(255, 143, 65, 0.42);
  border-radius: 11px;
  background: rgba(81, 25, 0, 0.5);
  color: #ffd1a5;
  line-height: 1.45;
}

.yeu-map-canvas {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid rgba(255, 127, 43, 0.34);
  border-radius: 19px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(107, 34, 3, 0.34),
      rgba(12, 4, 1, 0.96) 50%,
      #030100 100%
    );
  box-shadow:
    inset 0 0 55px rgba(0, 0, 0, 0.8),
    0 0 28px rgba(255, 83, 0, 0.08);
}

.yeu-map-grid-lines {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background-image:
    linear-gradient(
      rgba(255, 130, 50, 0.13) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 130, 50, 0.13) 1px,
      transparent 1px
    );
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(24deg) scale(1.2);
}

.yeu-map-center-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 116px;
  height: 116px;
  place-content: center;
  border: 1px solid rgba(255, 135, 48, 0.33);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(100, 29, 0, 0.7),
      rgba(5, 1, 0, 0.94) 67%
    );
  box-shadow:
    0 0 38px rgba(255, 78, 0, 0.14);
  text-align: center;
  transform: translate(-50%, -50%);
}

.yeu-map-center-seal span {
  color: #ffbb7a;
  font-size: 28px;
  font-weight: 900;
}

.yeu-map-center-seal small {
  color: rgba(255, 213, 174, 0.45);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.yeu-map-pin {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 175px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(10, 3, 1, 0.93);
  color: #ffe7c9;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.yeu-map-pin span {
  font-size: 20px;
}

.yeu-map-pin small {
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yeu-map-pin.verified {
  border: 1px solid rgba(79, 204, 114, 0.67);
  box-shadow:
    0 0 18px rgba(60, 201, 99, 0.16);
}

.yeu-map-pin.verified span {
  color: #8ce6a5;
}

.yeu-map-pin.pending {
  border: 1px solid rgba(255, 148, 69, 0.6);
}

.yeu-map-pin.pending span {
  color: #ffad6a;
}

.yeu-map-pin.claimed {
  border: 1px solid rgba(113, 188, 238, 0.65);
  box-shadow:
    0 0 18px rgba(83, 166, 220, 0.15);
}

.yeu-map-pin.claimed span {
  color: #9ed7ff;
}

.yeu-map-map-note {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: -8px;
  color: rgba(255, 224, 194, 0.42);
  font-size: 10px;
}

.yeu-map-map-note strong {
  flex: 0 0 auto;
  color: #d7985e;
}

.yeu-map-place-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.yeu-map-place-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 126, 43, 0.27);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(49, 13, 0, 0.62),
      rgba(7, 2, 0, 0.92)
    );
}

.yeu-map-place-top {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.yeu-map-place-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 50%;
  font-size: 20px;
}

.yeu-map-place-icon.verified {
  border: 1px solid rgba(79, 201, 111, 0.49);
  background: rgba(24, 88, 43, 0.31);
  color: #91e5a8;
}

.yeu-map-place-icon.pending {
  border: 1px solid rgba(255, 144, 65, 0.45);
  background: rgba(96, 30, 2, 0.38);
  color: #ffb06c;
}

.yeu-map-place-card h3 {
  margin: 0;
  color: #ffead0;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.yeu-map-place-top span {
  color: rgba(255, 224, 194, 0.5);
  font-size: 10px;
}

.yeu-map-place-status {
  display: flex;
  justify-content: space-between;
  gap: 13px;
}

.yeu-map-place-status span {
  font-size: 10px;
  font-weight: 800;
}

.yeu-map-place-status span.verified {
  color: #8bdd9f;
}

.yeu-map-place-status span.pending {
  color: #e9a260;
}

.yeu-map-place-status b {
  color: #ffc17e;
  font-size: 13px;
}

.yeu-map-place-card p {
  margin: 0;
  color: rgba(255, 229, 204, 0.69);
  font-size: 13px;
  line-height: 1.45;
}

.yeu-map-place-card > small {
  color: rgba(255, 161, 89, 0.56);
  font-size: 10px;
}

.yeu-map-place-card > button {
  min-height: 41px;
  margin-top: auto;
  padding: 8px 12px;
  border: 1px solid rgba(255, 137, 54, 0.62);
  border-radius: 10px;
  background: rgba(100, 29, 0, 0.75);
  color: #ffe0bd;
  font-weight: 900;
  cursor: pointer;
}

.yeu-map-place-card > button:disabled {
  cursor: not-allowed;
  opacity: 0.47;
}

.yeu-map-empty {
  padding: 31px 18px;
  border: 1px dashed rgba(255, 136, 56, 0.37);
  border-radius: 15px;
  background: rgba(5, 1, 0, 0.75);
  text-align: center;
}

.yeu-map-empty strong {
  color: #ffc18a;
  font-size: 20px;
}

.yeu-map-empty p {
  margin: 7px 0 0;
  color: rgba(255, 226, 198, 0.58);
}

.yeu-map-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.yeu-map-footer > span {
  color: rgba(255, 225, 197, 0.43);
  font-size: 11px;
}

.yeu-map-reward-panel {
  position: sticky;
  z-index: 10;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 17px;
  border: 1px solid rgba(255, 140, 59, 0.57);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      rgba(67, 19, 0, 0.98),
      rgba(6, 2, 0, 0.99)
    );
  box-shadow:
    0 -12px 40px rgba(0, 0, 0, 0.72);
}

.yeu-map-reward-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 13px;
}

.yeu-map-reward-heading span {
  color: #f29b51;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.yeu-map-reward-heading h3 {
  margin: 4px 0;
  color: #fff0d9;
  font-size: 22px;
}

.yeu-map-reward-heading p {
  margin: 0;
  color: rgba(255, 224, 194, 0.62);
}

.yeu-map-reward-close {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 132, 54, 0.37);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffc99a;
  font-size: 24px;
  cursor: pointer;
}

.yeu-map-reward-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(83, 200, 115, 0.34);
  border-radius: 12px;
  background: rgba(23, 76, 37, 0.26);
}

.yeu-map-reward-value small {
  color: rgba(195, 238, 205, 0.57);
}

.yeu-map-reward-value strong {
  color: #9be7ae;
  font-size: 20px;
}

.yeu-map-pin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: rgba(255, 227, 200, 0.72);
  font-size: 11px;
}

.yeu-map-pin-help {
  margin: 0;
  color: rgba(255, 224, 195, 0.45);
  font-size: 10px;
  line-height: 1.45;
}

.yeu-map-claim-button {
  min-height: 45px;
  border: 1px solid rgba(78, 203, 113, 0.61);
  border-radius: 11px;
  background:
    linear-gradient(
      180deg,
      rgba(35, 124, 61, 0.94),
      rgba(14, 67, 31, 0.98)
    );
  color: #e4ffeb;
  font-weight: 900;
  cursor: pointer;
}

.yeu-map-claim-button:disabled {
  cursor: wait;
  opacity: 0.57;
}

.yeu-map-pending-message,
.yeu-map-claimed-message {
  padding: 12px;
  border-radius: 11px;
  line-height: 1.45;
}

.yeu-map-pending-message {
  border: 1px solid rgba(255, 153, 75, 0.38);
  background: rgba(101, 34, 3, 0.37);
  color: #ffc18c;
}

.yeu-map-claimed-message {
  border: 1px solid rgba(72, 198, 107, 0.39);
  background: rgba(23, 88, 42, 0.32);
  color: #a5eab7;
}

@media (max-width: 980px) {
  .blackout-page-panel[data-page="yeuMap"] {
    width: min(735px, calc(100vw - 205px)) !important;
  }

  .yeu-map-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .blackout-page-panel[data-page="yeuMap"] {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 28px) !important;
  }

  .yeu-map-header,
  .yeu-map-footer,
  .yeu-map-map-note {
    align-items: stretch;
    flex-direction: column;
  }

  .yeu-map-refresh,
  .yeu-map-footer button {
    width: 100%;
  }

  .yeu-map-controls,
  .yeu-map-place-grid {
    grid-template-columns: 1fr;
  }

  .yeu-map-canvas {
    min-height: 270px;
  }

  .yeu-map-pin {
    max-width: 125px;
  }

  .yeu-map-pin small {
    max-width: 82px;
  }
}

/* YEU_MAP_PAGE_END */

/* YEU_BUSINESS_SIGNUP_PAGE_START */

.blackout-page-panel[data-page="businessSignup"] {
  width: min(900px, calc(100vw - 290px)) !important;
  max-height: min(880px, calc(100vh - 60px)) !important;
  overflow-y: auto !important;
}

.blackout-business-signup-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 4px 2px 22px;
  box-sizing: border-box;
}

.business-signup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
}

.business-signup-badge {
  display: inline-flex;
  padding: 4px 11px;
  border: 1px solid rgba(255, 135, 53, 0.64);
  border-radius: 999px;
  background: rgba(92, 28, 0, 0.5);
  color: #ffae69;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.business-signup-header h3 {
  margin: 8px 0 5px;
  color: #fff0da;
  font-size: clamp(29px, 4vw, 42px);
}

.business-signup-header p {
  max-width: 600px;
  margin: 0;
  color: rgba(255, 228, 200, 0.68);
  line-height: 1.5;
}

.business-signup-map-button,
.business-signup-footer button,
.business-signup-success-card button {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 137, 54, 0.65);
  border-radius: 11px;
  background:
    linear-gradient(
      180deg,
      rgba(147, 52, 4, 0.95),
      rgba(75, 20, 0, 0.97)
    );
  color: #fff0d8;
  font-weight: 900;
  cursor: pointer;
}

.business-signup-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.business-signup-stats section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(255, 126, 44, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(58, 16, 0, 0.64),
      rgba(7, 2, 0, 0.92)
    );
}

.business-signup-stats small {
  color: rgba(255, 226, 198, 0.53);
  font-size: 10px;
  text-transform: uppercase;
}

.business-signup-stats strong {
  color: #ffe4c1;
  font-size: clamp(18px, 2.5vw, 25px);
}

.business-signup-notice {
  padding: 12px 14px;
  border: 1px solid rgba(255, 144, 65, 0.44);
  border-radius: 12px;
  background: rgba(81, 25, 0, 0.52);
  color: #ffd0a4;
  line-height: 1.45;
}

.business-signup-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 15px;
  align-items: start;
}

.business-signup-form,
.business-signup-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 126, 44, 0.3);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      rgba(45, 12, 0, 0.72),
      rgba(6, 2, 0, 0.94)
    );
}

.business-signup-form-title,
.business-signup-preview-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.business-signup-form-title span,
.business-signup-preview-heading span {
  color: #ef9850;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.business-signup-form-title h3 {
  margin: 4px 0 0;
  color: #ffead0;
  font-size: 22px;
}

.business-signup-form-title button {
  padding: 6px 10px;
  border: 1px solid rgba(255, 126, 44, 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #dca06e;
  cursor: pointer;
}

.business-signup-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: rgba(255, 229, 203, 0.76);
  font-size: 11px;
}

.business-signup-form input,
.business-signup-form select,
.business-signup-form textarea {
  width: 100%;
  min-height: 43px;
  padding: 9px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 132, 53, 0.39);
  border-radius: 10px;
  outline: none;
  background: rgba(0, 0, 0, 0.74);
  color: #fff0db;
  font: inherit;
}

.business-signup-form textarea {
  min-height: 96px;
  resize: vertical;
}

.business-signup-form input:focus,
.business-signup-form select:focus,
.business-signup-form textarea:focus {
  border-color: rgba(255, 151, 70, 0.9);
  box-shadow:
    0 0 0 2px rgba(255, 99, 18, 0.13);
}

.business-signup-two-column {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.business-signup-reward-input {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 132, 53, 0.39);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.74);
}

.business-signup-reward-input span {
  padding-left: 12px;
  color: #72d894;
  font-weight: 900;
}

.business-signup-reward-input b {
  padding-right: 12px;
  color: #f1aa68;
  font-size: 11px;
}

.business-signup-reward-input input {
  border: 0;
  background: transparent;
}

.business-signup-security {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(255, 145, 65, 0.31);
  border-radius: 11px;
  background: rgba(71, 22, 0, 0.35);
}

.business-signup-security > span {
  color: #ffad6d;
  font-size: 24px;
}

.business-signup-security strong {
  color: #ffd2a8;
  font-size: 12px;
}

.business-signup-security p {
  margin: 4px 0 0;
  color: rgba(255, 226, 197, 0.5);
  font-size: 10px;
  line-height: 1.45;
}

.business-signup-submit {
  min-height: 47px;
  border: 1px solid rgba(72, 198, 107, 0.59);
  border-radius: 11px;
  background:
    linear-gradient(
      180deg,
      rgba(35, 123, 61, 0.95),
      rgba(14, 67, 31, 0.98)
    );
  color: #e6ffed;
  font-weight: 900;
  cursor: pointer;
}

.business-signup-submit:disabled {
  cursor: wait;
  opacity: 0.58;
}

.business-signup-preview-heading strong {
  color: #e5a05f;
  font-size: 10px;
}

.business-signup-preview-icon {
  display: grid;
  width: 73px;
  height: 73px;
  place-items: center;
  margin: 8px auto 0;
  border: 1px solid rgba(255, 139, 57, 0.53);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(118, 38, 3, 0.65),
      rgba(8, 2, 0, 0.95)
    );
  color: #ffbd79;
  font-size: 31px;
}

.business-signup-preview > h3 {
  margin: 0;
  color: #ffead0;
  font-size: 23px;
  text-align: center;
  overflow-wrap: anywhere;
}

.business-signup-preview-location {
  margin: -7px 0 0;
  color: rgba(255, 224, 195, 0.52);
  font-size: 11px;
  text-align: center;
}

.business-signup-preview-reward {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(76, 198, 110, 0.35);
  border-radius: 11px;
  background: rgba(22, 76, 37, 0.26);
}

.business-signup-preview-reward small {
  color: rgba(194, 237, 204, 0.57);
}

.business-signup-preview-reward strong {
  color: #9be7ae;
  font-size: 19px;
}

.business-signup-preview-offer {
  min-height: 44px;
  margin: 0;
  color: rgba(255, 229, 204, 0.67);
  line-height: 1.45;
  text-align: center;
}

.business-signup-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 13px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 126, 44, 0.13);
}

.business-signup-preview-row span {
  color: rgba(255, 225, 197, 0.51);
  font-size: 11px;
}

.business-signup-preview-row b {
  color: #ffd5aa;
  font-size: 11px;
  text-align: right;
}

.business-signup-qr-preview {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border: 1px dashed rgba(255, 143, 63, 0.43);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
}

.business-signup-qr-preview > span {
  color: #ffb16c;
  font-size: 36px;
}

.business-signup-qr-preview strong {
  color: #ffd4aa;
  font-size: 12px;
}

.business-signup-qr-preview p {
  margin: 4px 0 0;
  color: rgba(255, 225, 197, 0.49);
  font-size: 10px;
  line-height: 1.45;
}

.business-signup-success-card {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(76, 198, 109, 0.43);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(20, 72, 35, 0.4),
      rgba(4, 14, 7, 0.92)
    );
}

.business-signup-success-card > div {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: rgba(48, 159, 78, 0.23);
  color: #9ceab0;
  font-size: 22px;
  font-weight: 900;
}

.business-signup-success-card h3 {
  margin: 0;
  color: #b3efc2;
  font-size: 18px;
}

.business-signup-success-card p {
  margin: 4px 0 0;
  color: rgba(195, 238, 204, 0.61);
  font-size: 11px;
}

.business-signup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.business-signup-footer > span {
  color: rgba(255, 225, 196, 0.43);
  font-size: 11px;
}

@media (max-width: 980px) {
  .blackout-page-panel[data-page="businessSignup"] {
    width: min(735px, calc(100vw - 205px)) !important;
  }

  .business-signup-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .business-signup-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .blackout-page-panel[data-page="businessSignup"] {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 28px) !important;
  }

  .business-signup-header,
  .business-signup-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .business-signup-map-button,
  .business-signup-footer button {
    width: 100%;
  }

  .business-signup-two-column {
    grid-template-columns: 1fr;
  }

  .business-signup-success-card {
    grid-template-columns:
      auto minmax(0, 1fr);
  }

  .business-signup-success-card button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* YEU_BUSINESS_SIGNUP_PAGE_END */

/* YEU_BUSINESS_SIGNUP_CLARITY_V1 */
.business-signup-guide {
  display: grid;
  gap: 14px;
  margin: 16px 0;
  padding: 18px;
  border: 1px solid rgba(255, 118, 31, 0.32);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at top,
      rgba(94, 24, 3, 0.36),
      rgba(18, 3, 0, 0.94) 68%
    );
  box-shadow:
    inset 0 0 24px rgba(255, 76, 0, 0.05),
    0 0 18px rgba(255, 72, 0, 0.04);
}

.business-signup-guide-heading {
  text-align: center;
}

.business-signup-guide-heading > span {
  display: block;
  color: #ffb37f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.business-signup-guide-heading h3 {
  margin: 6px 0 5px;
  color: #ffe1c8;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.business-signup-guide-heading p {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255, 220, 195, 0.72);
  font-size: 0.88rem;
  line-height: 1.55;
}

.business-signup-guide-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.business-signup-guide-grid article {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 124, 43, 0.2);
  border-radius: 12px;
  background: rgba(50, 10, 1, 0.58);
}

.business-signup-guide-grid article > b {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 136, 58, 0.56);
  border-radius: 50%;
  color: #ffd4b0;
  background: rgba(104, 27, 4, 0.72);
  font-size: 0.82rem;
}

.business-signup-guide-grid article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.business-signup-guide-grid strong {
  color: #ffe1c8;
  font-size: 0.86rem;
  line-height: 1.35;
}

.business-signup-guide-grid span {
  color: rgba(255, 218, 190, 0.64);
  font-size: 0.75rem;
  line-height: 1.45;
}

.business-signup-guide-warning {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 183, 82, 0.27);
  border-radius: 11px;
  background: rgba(59, 32, 1, 0.4);
  text-align: center;
}

.business-signup-guide-warning strong {
  color: #ffd38b;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

.business-signup-guide-warning span {
  color: rgba(255, 224, 190, 0.68);
  font-size: 0.76rem;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .business-signup-guide-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .business-signup-guide {
    padding: 14px;
  }

  .business-signup-guide-grid {
    grid-template-columns: 1fr;
  }
}

/* YEU_BUSINESS_SIGNUP_GUIDE_LAYOUT_V2 */

/*
 * The Business Signup page uses a parent grid.
 * This guide must span every parent grid column.
 */
.blackout-business-signup-page > .business-signup-guide {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  justify-self: stretch;
  align-self: stretch;
}

/*
 * Keep all four steps balanced across the available width.
 */
.blackout-business-signup-page
  .business-signup-guide-grid {
  width: 100%;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

/*
 * Prevent long text from forcing narrow or uneven cards.
 */
.blackout-business-signup-page
  .business-signup-guide-grid article {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.blackout-business-signup-page
  .business-signup-guide-grid article > div {
  min-width: 0;
}

.blackout-business-signup-page
  .business-signup-guide-grid strong,
.blackout-business-signup-page
  .business-signup-guide-grid span {
  overflow-wrap: anywhere;
}

/*
 * Keep the guide readable on smaller browser widths.
 */
@media (max-width: 1100px) {
  .blackout-business-signup-page
    .business-signup-guide-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .blackout-business-signup-page
    .business-signup-guide-grid {
    grid-template-columns: 1fr;
  }
}

/* YEU_BUSINESS_SIGNUP_HALF_SCREEN_LAYOUT_V3 */

/*
 * Always make the guide occupy the complete parent grid.
 * This stronger rule also covers narrow split-screen windows.
 */
.business-signup-guide {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

/*
 * Size the cards from the guide's actual available width,
 * rather than only using the browser viewport width.
 */
.business-signup-guide-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, 255px),
        1fr
      )
    ) !important;
  gap: 10px !important;
}

.business-signup-guide-grid article {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.business-signup-guide-grid article > div {
  min-width: 0 !important;
}

.business-signup-guide-grid strong,
.business-signup-guide-grid span {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

/*
 * Use one readable column when the browser is placed
 * into a narrow half-screen or phone-sized window.
 */
@media (max-width: 900px) {
  .business-signup-guide {
    padding: 14px !important;
  }

  .business-signup-guide-grid {
    grid-template-columns: 1fr !important;
  }

  .business-signup-guide-grid article {
    display: grid !important;
    grid-template-columns:
      34px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .business-signup-guide-grid article > b {
    grid-column: 1 !important;
  }

  .business-signup-guide-grid article > div {
    grid-column: 2 !important;
  }
}

/* YEU_BUSINESS_SIGNUP_HALF_SCREEN_STRETCH_V4 */

/*
 * Make every direct guide section stretch across the guide panel.
 */
.business-signup-guide {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

.business-signup-guide
  > .business-signup-guide-heading,
.business-signup-guide
  > .business-signup-guide-grid,
.business-signup-guide
  > .business-signup-guide-warning {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

/*
 * Remove any earlier width limits from the step grid.
 */
.business-signup-guide-grid {
  display: grid !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*
 * Every step card must occupy the full grid track.
 */
.business-signup-guide-grid article {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}

.business-signup-guide-grid article > div {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/*
 * Narrow and half-screen windows use one full-width readable card
 * per row without leaving an empty column.
 */
@media (max-width: 900px) {
  .business-signup-guide-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .business-signup-guide-grid article {
    display: grid !important;
    grid-template-columns:
      36px minmax(0, 1fr) !important;
    column-gap: 11px !important;
    align-items: start !important;
  }

  .business-signup-guide-grid article > b {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .business-signup-guide-grid article > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .business-signup-guide-heading p,
  .business-signup-guide-warning span {
    max-width: none !important;
    width: 100% !important;
  }
}

/* YEU_CAMPAIGNS_PAGE_V1 */

.blackout-campaigns-page {
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 4px 22px;
}

.campaigns-page-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(255, 111, 27, 0.3);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at top left,
      rgba(107, 27, 3, 0.46),
      rgba(20, 3, 0, 0.94) 68%
    );
}

.campaigns-page-badge,
.campaigns-page-guide-heading > span,
.campaigns-page-section-heading span {
  display: block;
  color: #ffb176;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.campaigns-page-hero h3,
.campaigns-page-guide-heading h3,
.campaigns-page-section-heading h3 {
  margin: 6px 0;
  color: #ffe1c8;
}

.campaigns-page-hero h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.campaigns-page-hero p,
.campaigns-page-guide-heading p,
.campaigns-page-section-heading p {
  margin: 0;
  color: rgba(255, 220, 195, 0.7);
  line-height: 1.55;
}

.campaigns-page-mode {
  display: grid;
  gap: 5px;
  min-width: 165px;
  padding: 14px;
  border: 1px solid rgba(255, 136, 55, 0.25);
  border-radius: 12px;
  background: rgba(45, 10, 1, 0.72);
  text-align: center;
}

.campaigns-page-mode small {
  color: #c89270;
  font-size: 0.67rem;
  letter-spacing: 0.12em;
}

.campaigns-page-mode strong {
  color: #ffd8b9;
}

.campaigns-page-mode span {
  color: rgba(255, 214, 184, 0.6);
  font-size: 0.7rem;
}

.campaigns-page-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid rgba(255, 118, 31, 0.26);
  border-radius: 16px;
  background: rgba(32, 6, 1, 0.84);
}

.campaigns-page-guide-heading {
  text-align: center;
}

.campaigns-page-guide-heading p {
  max-width: 760px;
  margin: 0 auto;
}

.campaigns-page-guide-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.campaigns-page-guide-grid article {
  display: grid;
  grid-template-columns:
    32px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 125, 42, 0.2);
  border-radius: 11px;
  background: rgba(55, 12, 2, 0.62);
}

.campaigns-page-guide-grid article > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 135, 57, 0.5);
  border-radius: 50%;
  color: #ffd6b6;
  background: rgba(102, 27, 4, 0.72);
  font-size: 0.78rem;
}

.campaigns-page-guide-grid article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.campaigns-page-guide-grid strong {
  color: #ffe0c6;
  font-size: 0.82rem;
  line-height: 1.35;
}

.campaigns-page-guide-grid span {
  color: rgba(255, 216, 187, 0.62);
  font-size: 0.72rem;
  line-height: 1.45;
}

.campaigns-page-safety {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 181, 75, 0.24);
  border-radius: 11px;
  background: rgba(60, 31, 1, 0.38);
  text-align: center;
}

.campaigns-page-safety strong {
  color: #ffd38c;
  font-size: 0.81rem;
}

.campaigns-page-safety span {
  color: rgba(255, 222, 190, 0.67);
  font-size: 0.74rem;
  line-height: 1.5;
}

.campaigns-page-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.campaigns-page-stats article {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(255, 113, 30, 0.25);
  border-radius: 12px;
  background: rgba(43, 8, 1, 0.75);
  text-align: center;
}

.campaigns-page-stats small {
  color: #c98e6c;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.campaigns-page-stats strong {
  color: #ffe0c7;
  font-size: 1.2rem;
}

.campaigns-page-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 2px 4px;
}

.campaigns-page-section-heading p {
  max-width: 360px;
  text-align: right;
  font-size: 0.78rem;
}

.campaigns-page-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.campaigns-page-card {
  display: grid;
  grid-template-rows:
    auto auto minmax(72px, auto) auto auto auto;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 116, 30, 0.24);
  border-radius: 14px;
  background:
    linear-gradient(
      150deg,
      rgba(57, 12, 2, 0.88),
      rgba(20, 3, 0, 0.96)
    );
}

.campaigns-page-card.live {
  border-color: rgba(102, 212, 124, 0.3);
  box-shadow:
    inset 0 0 24px rgba(64, 178, 91, 0.04);
}

.campaigns-page-card.planned {
  border-color: rgba(255, 163, 59, 0.3);
}

.campaigns-page-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.campaigns-page-card-top span,
.campaigns-page-card-top b {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.campaigns-page-card-top span {
  color: #ffc89d;
  border: 1px solid rgba(255, 135, 54, 0.28);
  background: rgba(77, 18, 2, 0.68);
}

.campaigns-page-card-top b {
  color: #9ce6aa;
  border: 1px solid rgba(93, 198, 114, 0.3);
  background: rgba(9, 58, 20, 0.5);
}

.campaigns-page-card.planned
  .campaigns-page-card-top b {
  color: #ffd18f;
  border-color: rgba(255, 168, 65, 0.34);
  background: rgba(69, 36, 2, 0.5);
}

.campaigns-page-card h3 {
  margin: 0;
  color: #ffe0c7;
  font-size: 1.08rem;
}

.campaigns-page-card > p {
  margin: 0;
  color: rgba(255, 218, 190, 0.66);
  font-size: 0.78rem;
  line-height: 1.5;
}

.campaigns-page-card-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.campaigns-page-card-details > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 122, 37, 0.15);
  border-radius: 9px;
  background: rgba(25, 4, 0, 0.58);
}

.campaigns-page-card-details small {
  color: #b97f5f;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.campaigns-page-card-details strong {
  color: #f6c6a2;
  font-size: 0.74rem;
  overflow-wrap: break-word;
}

.campaigns-page-progress {
  display: grid;
  gap: 7px;
}

.campaigns-page-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #c58c6d;
  font-size: 0.69rem;
}

.campaigns-page-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(12, 2, 0, 0.88);
}

.campaigns-page-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #7d2607,
      #ff7a24
    );
}

.campaigns-page-card button,
.campaigns-page-footer button {
  border: 1px solid rgba(255, 118, 31, 0.5);
  border-radius: 9px;
  color: #ffe0c7;
  background:
    linear-gradient(
      180deg,
      rgba(104, 29, 5, 0.92),
      rgba(54, 10, 1, 0.96)
    );
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.campaigns-page-card button {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
}

.campaigns-page-card button:hover,
.campaigns-page-footer button:hover {
  border-color: rgba(255, 164, 88, 0.82);
  filter: brightness(1.08);
}

.campaigns-page-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid rgba(255, 119, 32, 0.2);
  border-radius: 13px;
  background: rgba(38, 7, 1, 0.72);
}

.campaigns-page-footer > div {
  display: grid;
  gap: 4px;
}

.campaigns-page-footer strong {
  color: #ffd6b4;
}

.campaigns-page-footer span {
  color: rgba(255, 218, 188, 0.63);
  font-size: 0.74rem;
  line-height: 1.45;
}

.campaigns-page-footer button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 14px;
}

@media (max-width: 1100px) {
  .campaigns-page-guide-grid,
  .campaigns-page-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .campaigns-page-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .campaigns-page-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .campaigns-page-hero {
    grid-template-columns: 1fr;
  }

  .campaigns-page-mode {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .campaigns-page-guide-grid,
  .campaigns-page-stats,
  .campaigns-page-grid {
    grid-template-columns: 1fr;
  }

  .campaigns-page-card:last-child {
    grid-column: auto;
  }

  .campaigns-page-section-heading,
  .campaigns-page-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .campaigns-page-section-heading p {
    max-width: none;
    text-align: left;
  }

  .campaigns-page-footer button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .blackout-campaigns-page {
    gap: 12px;
  }

  .campaigns-page-hero,
  .campaigns-page-guide {
    padding: 14px;
  }

  .campaigns-page-card-details {
    grid-template-columns: 1fr;
  }
}

/* YEU_CAMPAIGNS_RESPONSIVE_LAYOUT_V2 */

/*
 * Prevent generic page-panel section rules from forcing
 * Campaigns content into a narrow left-side column.
 */
.blackout-campaigns-page {
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

.blackout-campaigns-page
  > .campaigns-page-hero,
.blackout-campaigns-page
  > .campaigns-page-guide,
.blackout-campaigns-page
  > .campaigns-page-stats,
.blackout-campaigns-page
  > .campaigns-page-section-heading,
.blackout-campaigns-page
  > .campaigns-page-grid,
.blackout-campaigns-page
  > .campaigns-page-footer {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

/*
 * Stretch all guide contents across their panel.
 */
.campaigns-page-guide {
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
}

.campaigns-page-guide
  > .campaigns-page-guide-heading,
.campaigns-page-guide
  > .campaigns-page-guide-grid,
.campaigns-page-guide
  > .campaigns-page-safety {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

.campaigns-page-guide-heading p {
  width: 100% !important;
  max-width: none !important;
}

/*
 * Half-screen layout: balanced two-by-two steps
 * using the complete available width.
 */
@media (max-width: 1100px) {
  .campaigns-page-guide-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .campaigns-page-guide-grid article {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
  }

  .campaigns-page-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .campaigns-page-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .campaigns-page-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .campaigns-page-card:last-child {
    grid-column: 1 / -1 !important;
  }
}

/*
 * Very narrow screens become one clean column.
 */
@media (max-width: 620px) {
  .campaigns-page-hero {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .campaigns-page-guide-grid,
  .campaigns-page-stats,
  .campaigns-page-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .campaigns-page-card:last-child {
    grid-column: auto !important;
  }

  .campaigns-page-section-heading,
  .campaigns-page-footer {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .campaigns-page-section-heading p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  .campaigns-page-footer button {
    width: 100% !important;
  }
}

/*
 * Keep words readable instead of splitting into letters.
 */
.campaigns-page-guide-grid strong,
.campaigns-page-guide-grid span,
.campaigns-page-card h3,
.campaigns-page-card p,
.campaigns-page-card-details strong {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

/* YEU_CREATORS_PAGE_V1 */

.blackout-creators-page {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  gap: 16px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 8px 4px 22px;
}

.blackout-creators-page
  > .creators-page-hero,
.blackout-creators-page
  > .creators-page-guide,
.blackout-creators-page
  > .creators-page-stats,
.blackout-creators-page
  > .creators-page-section-heading,
.blackout-creators-page
  > .creators-page-grid,
.blackout-creators-page
  > .creators-page-footer {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

.creators-page-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(255, 111, 27, 0.3);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at top left,
      rgba(107, 27, 3, 0.46),
      rgba(20, 3, 0, 0.94) 68%
    );
}

.creators-page-badge,
.creators-page-guide-heading > span,
.creators-page-section-heading span {
  display: block;
  color: #ffb176;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.creators-page-hero h3,
.creators-page-guide-heading h3,
.creators-page-section-heading h3 {
  margin: 6px 0;
  color: #ffe1c8;
}

.creators-page-hero h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.creators-page-hero p,
.creators-page-guide-heading p,
.creators-page-section-heading p {
  margin: 0;
  color: rgba(255, 220, 195, 0.7);
  line-height: 1.55;
}

.creators-page-mode {
  display: grid;
  gap: 5px;
  min-width: 165px;
  padding: 14px;
  border: 1px solid rgba(255, 136, 55, 0.25);
  border-radius: 12px;
  background: rgba(45, 10, 1, 0.72);
  text-align: center;
}

.creators-page-mode small {
  color: #c89270;
  font-size: 0.67rem;
  letter-spacing: 0.12em;
}

.creators-page-mode strong {
  color: #ffd8b9;
}

.creators-page-mode span {
  color: rgba(255, 214, 184, 0.6);
  font-size: 0.7rem;
}

.creators-page-guide {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  gap: 13px;
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid rgba(255, 118, 31, 0.26);
  border-radius: 16px;
  background: rgba(32, 6, 1, 0.84);
}

.creators-page-guide
  > .creators-page-guide-heading,
.creators-page-guide
  > .creators-page-guide-grid,
.creators-page-guide
  > .creators-page-safety {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.creators-page-guide-heading {
  text-align: center;
}

.creators-page-guide-heading p {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.creators-page-guide-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.creators-page-guide-grid article {
  display: grid;
  grid-template-columns:
    32px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 125, 42, 0.2);
  border-radius: 11px;
  background: rgba(55, 12, 2, 0.62);
}

.creators-page-guide-grid article > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 135, 57, 0.5);
  border-radius: 50%;
  color: #ffd6b6;
  background: rgba(102, 27, 4, 0.72);
  font-size: 0.78rem;
}

.creators-page-guide-grid article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.creators-page-guide-grid strong {
  color: #ffe0c6;
  font-size: 0.82rem;
  line-height: 1.35;
}

.creators-page-guide-grid span {
  color: rgba(255, 216, 187, 0.62);
  font-size: 0.72rem;
  line-height: 1.45;
}

.creators-page-safety {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 181, 75, 0.24);
  border-radius: 11px;
  background: rgba(60, 31, 1, 0.38);
  text-align: center;
}

.creators-page-safety strong {
  color: #ffd38c;
  font-size: 0.81rem;
}

.creators-page-safety span {
  color: rgba(255, 222, 190, 0.67);
  font-size: 0.74rem;
  line-height: 1.5;
}

.creators-page-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.creators-page-stats article {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(255, 113, 30, 0.25);
  border-radius: 12px;
  background: rgba(43, 8, 1, 0.75);
  text-align: center;
}

.creators-page-stats small {
  color: #c98e6c;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.creators-page-stats strong {
  color: #ffe0c7;
  font-size: 1.2rem;
}

.creators-page-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 2px 4px;
}

.creators-page-section-heading p {
  max-width: 360px;
  text-align: right;
  font-size: 0.78rem;
}

.creators-page-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.creators-page-card {
  display: grid;
  grid-template-rows:
    auto auto minmax(76px, auto) auto auto auto;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 116, 30, 0.24);
  border-radius: 14px;
  background:
    linear-gradient(
      150deg,
      rgba(57, 12, 2, 0.88),
      rgba(20, 3, 0, 0.96)
    );
}

.creators-page-card.live {
  border-color: rgba(102, 212, 124, 0.3);
}

.creators-page-card.ready {
  border-color: rgba(96, 164, 230, 0.32);
}

.creators-page-card.planned {
  border-color: rgba(255, 163, 59, 0.3);
}

.creators-page-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.creators-page-card-top span,
.creators-page-card-top b {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.creators-page-card-top span {
  color: #ffc89d;
  border: 1px solid rgba(255, 135, 54, 0.28);
  background: rgba(77, 18, 2, 0.68);
}

.creators-page-card-top b {
  color: #9ce6aa;
  border: 1px solid rgba(93, 198, 114, 0.3);
  background: rgba(9, 58, 20, 0.5);
}

.creators-page-card.ready
  .creators-page-card-top b {
  color: #a8d7ff;
  border-color: rgba(88, 161, 224, 0.34);
  background: rgba(7, 40, 68, 0.5);
}

.creators-page-card.planned
  .creators-page-card-top b {
  color: #ffd18f;
  border-color: rgba(255, 168, 65, 0.34);
  background: rgba(69, 36, 2, 0.5);
}

.creators-page-card h3 {
  margin: 0;
  color: #ffe0c7;
  font-size: 1.08rem;
}

.creators-page-card > p {
  margin: 0;
  color: rgba(255, 218, 190, 0.66);
  font-size: 0.78rem;
  line-height: 1.5;
}

.creators-page-card-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.creators-page-card-details > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 122, 37, 0.15);
  border-radius: 9px;
  background: rgba(25, 4, 0, 0.58);
}

.creators-page-card-details small {
  color: #b97f5f;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.creators-page-card-details strong {
  color: #f6c6a2;
  font-size: 0.74rem;
  overflow-wrap: break-word;
}

.creators-page-progress {
  display: grid;
  gap: 7px;
}

.creators-page-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #c58c6d;
  font-size: 0.69rem;
}

.creators-page-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(12, 2, 0, 0.88);
}

.creators-page-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #7d2607,
      #ff7a24
    );
}

.creators-page-card button,
.creators-page-footer button {
  border: 1px solid rgba(255, 118, 31, 0.5);
  border-radius: 9px;
  color: #ffe0c7;
  background:
    linear-gradient(
      180deg,
      rgba(104, 29, 5, 0.92),
      rgba(54, 10, 1, 0.96)
    );
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.creators-page-card button {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
}

.creators-page-card button:hover,
.creators-page-footer button:hover {
  border-color: rgba(255, 164, 88, 0.82);
  filter: brightness(1.08);
}

.creators-page-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid rgba(255, 119, 32, 0.2);
  border-radius: 13px;
  background: rgba(38, 7, 1, 0.72);
}

.creators-page-footer > div {
  display: grid;
  gap: 4px;
}

.creators-page-footer strong {
  color: #ffd6b4;
}

.creators-page-footer span {
  color: rgba(255, 218, 188, 0.63);
  font-size: 0.74rem;
  line-height: 1.45;
}

.creators-page-footer button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 14px;
}

.creators-page-guide-grid strong,
.creators-page-guide-grid span,
.creators-page-card h3,
.creators-page-card p,
.creators-page-card-details strong {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

@media (max-width: 1100px) {
  .creators-page-guide-grid,
  .creators-page-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .creators-page-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .creators-page-card {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .creators-page-card:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  .creators-page-hero {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .creators-page-mode {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .creators-page-guide-grid,
  .creators-page-stats,
  .creators-page-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .creators-page-card:last-child {
    grid-column: auto !important;
  }

  .creators-page-section-heading,
  .creators-page-footer {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .creators-page-section-heading p {
    width: 100%;
    max-width: none;
    text-align: left;
  }

  .creators-page-footer button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .blackout-creators-page {
    gap: 12px;
  }

  .creators-page-hero,
  .creators-page-guide {
    padding: 14px;
  }

  .creators-page-card-details {
    grid-template-columns: 1fr;
  }
}

/* YEU_PARTNER_KIT_PAGE_V1 */

.blackout-partner-kit-page {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  gap: 16px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 8px 4px 22px;
}

.blackout-partner-kit-page
  > .partner-kit-hero,
.blackout-partner-kit-page
  > .partner-kit-guide,
.blackout-partner-kit-page
  > .partner-kit-stats,
.blackout-partner-kit-page
  > .partner-kit-section-heading,
.blackout-partner-kit-page
  > .partner-kit-tools-grid,
.blackout-partner-kit-page
  > .partner-kit-assets,
.blackout-partner-kit-page
  > .partner-kit-footer {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

.partner-kit-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(255, 111, 27, 0.3);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at top left,
      rgba(107, 27, 3, 0.46),
      rgba(20, 3, 0, 0.94) 68%
    );
}

.partner-kit-badge,
.partner-kit-guide-heading > span,
.partner-kit-section-heading span,
.partner-kit-assets-heading > span {
  display: block;
  color: #ffb176;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.partner-kit-hero h3,
.partner-kit-guide-heading h3,
.partner-kit-section-heading h3,
.partner-kit-assets-heading h3 {
  margin: 6px 0;
  color: #ffe1c8;
}

.partner-kit-hero h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.partner-kit-hero p,
.partner-kit-guide-heading p,
.partner-kit-section-heading p,
.partner-kit-assets-heading p {
  margin: 0;
  color: rgba(255, 220, 195, 0.7);
  line-height: 1.55;
}

.partner-kit-mode {
  display: grid;
  gap: 5px;
  min-width: 180px;
  padding: 14px;
  border: 1px solid rgba(255, 136, 55, 0.25);
  border-radius: 12px;
  background: rgba(45, 10, 1, 0.72);
  text-align: center;
}

.partner-kit-mode small {
  color: #c89270;
  font-size: 0.67rem;
  letter-spacing: 0.12em;
}

.partner-kit-mode strong {
  color: #ffd8b9;
}

.partner-kit-mode span {
  color: rgba(255, 214, 184, 0.6);
  font-size: 0.7rem;
}

.partner-kit-guide {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  gap: 13px;
  width: 100% !important;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255, 118, 31, 0.26);
  border-radius: 16px;
  background: rgba(32, 6, 1, 0.84);
}

.partner-kit-guide
  > .partner-kit-guide-heading,
.partner-kit-guide
  > .partner-kit-guide-grid,
.partner-kit-guide
  > .partner-kit-safety {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.partner-kit-guide-heading {
  text-align: center;
}

.partner-kit-guide-heading p {
  max-width: 800px;
  margin: 0 auto;
}

.partner-kit-guide-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.partner-kit-guide-grid article {
  display: grid;
  grid-template-columns:
    32px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 125, 42, 0.2);
  border-radius: 11px;
  background: rgba(55, 12, 2, 0.62);
}

.partner-kit-guide-grid article > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 135, 57, 0.5);
  border-radius: 50%;
  color: #ffd6b6;
  background: rgba(102, 27, 4, 0.72);
  font-size: 0.78rem;
}

.partner-kit-guide-grid article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.partner-kit-guide-grid strong {
  color: #ffe0c6;
  font-size: 0.82rem;
  line-height: 1.35;
}

.partner-kit-guide-grid span {
  color: rgba(255, 216, 187, 0.62);
  font-size: 0.72rem;
  line-height: 1.45;
}

.partner-kit-safety {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 181, 75, 0.24);
  border-radius: 11px;
  background: rgba(60, 31, 1, 0.38);
  text-align: center;
}

.partner-kit-safety strong {
  color: #ffd38c;
  font-size: 0.81rem;
}

.partner-kit-safety span {
  color: rgba(255, 222, 190, 0.67);
  font-size: 0.74rem;
  line-height: 1.5;
}

.partner-kit-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.partner-kit-stats article {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(255, 113, 30, 0.25);
  border-radius: 12px;
  background: rgba(43, 8, 1, 0.75);
  text-align: center;
}

.partner-kit-stats small {
  color: #c98e6c;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.partner-kit-stats strong {
  color: #ffe0c7;
  font-size: 1.2rem;
}

.partner-kit-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 2px 4px;
}

.partner-kit-section-heading p {
  max-width: 380px;
  text-align: right;
  font-size: 0.78rem;
}

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

.partner-kit-tool-card {
  display: grid;
  grid-template-rows:
    auto auto minmax(72px, auto) auto auto;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 116, 30, 0.24);
  border-radius: 14px;
  background:
    linear-gradient(
      150deg,
      rgba(57, 12, 2, 0.88),
      rgba(20, 3, 0, 0.96)
    );
}

.partner-kit-tool-card.live {
  border-color: rgba(102, 212, 124, 0.3);
}

.partner-kit-tool-card.ready {
  border-color: rgba(96, 164, 230, 0.28);
}

.partner-kit-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.partner-kit-card-top span,
.partner-kit-card-top b {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.partner-kit-card-top span {
  color: #ffc89d;
  border: 1px solid rgba(255, 135, 54, 0.28);
  background: rgba(77, 18, 2, 0.68);
}

.partner-kit-card-top b {
  color: #a8d7ff;
  border: 1px solid rgba(88, 161, 224, 0.34);
  background: rgba(7, 40, 68, 0.5);
}

.partner-kit-tool-card.live
  .partner-kit-card-top b {
  color: #9ce6aa;
  border-color: rgba(93, 198, 114, 0.3);
  background: rgba(9, 58, 20, 0.5);
}

.partner-kit-tool-card h3 {
  margin: 0;
  color: #ffe0c7;
  font-size: 1.08rem;
}

.partner-kit-tool-card > p {
  margin: 0;
  color: rgba(255, 218, 190, 0.66);
  font-size: 0.78rem;
  line-height: 1.5;
}

.partner-kit-card-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.partner-kit-card-details > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 122, 37, 0.15);
  border-radius: 9px;
  background: rgba(25, 4, 0, 0.58);
}

.partner-kit-card-details small {
  color: #b97f5f;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.partner-kit-card-details strong {
  color: #f6c6a2;
  font-size: 0.74rem;
  overflow-wrap: break-word;
}

.partner-kit-tool-card button,
.partner-kit-footer button {
  min-height: 42px;
  border: 1px solid rgba(255, 118, 31, 0.5);
  border-radius: 9px;
  color: #ffe0c7;
  background:
    linear-gradient(
      180deg,
      rgba(104, 29, 5, 0.92),
      rgba(54, 10, 1, 0.96)
    );
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.partner-kit-tool-card button {
  width: 100%;
  padding: 9px 12px;
}

.partner-kit-tool-card button:hover,
.partner-kit-footer button:hover {
  border-color: rgba(255, 164, 88, 0.82);
  filter: brightness(1.08);
}

.partner-kit-assets {
  display: grid;
  gap: 12px;
  padding: 17px;
  border: 1px solid rgba(255, 118, 31, 0.22);
  border-radius: 14px;
  background: rgba(36, 7, 1, 0.75);
}

.partner-kit-assets-heading {
  text-align: center;
}

.partner-kit-assets-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.partner-kit-assets-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 145, 61, 0.18);
  border-radius: 11px;
  background: rgba(50, 12, 2, 0.62);
  text-align: center;
}

.partner-kit-assets-grid article > span {
  color: #ffd18f;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.partner-kit-assets-grid h3 {
  margin: 0;
  color: #ffe0c7;
  font-size: 0.95rem;
}

.partner-kit-assets-grid p {
  margin: 0;
  color: rgba(255, 216, 187, 0.62);
  font-size: 0.72rem;
  line-height: 1.45;
}

.partner-kit-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid rgba(255, 119, 32, 0.2);
  border-radius: 13px;
  background: rgba(38, 7, 1, 0.72);
}

.partner-kit-footer > div {
  display: grid;
  gap: 4px;
}

.partner-kit-footer strong {
  color: #ffd6b4;
}

.partner-kit-footer span {
  color: rgba(255, 218, 188, 0.63);
  font-size: 0.74rem;
  line-height: 1.45;
}

.partner-kit-footer button {
  flex: 0 0 auto;
  padding: 9px 14px;
}

.partner-kit-guide-grid strong,
.partner-kit-guide-grid span,
.partner-kit-tool-card h3,
.partner-kit-tool-card p,
.partner-kit-card-details strong,
.partner-kit-assets-grid h3,
.partner-kit-assets-grid p {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

@media (max-width: 1100px) {
  .partner-kit-guide-grid,
  .partner-kit-stats,
  .partner-kit-tools-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .partner-kit-assets-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .partner-kit-assets-grid article:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .partner-kit-hero {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .partner-kit-mode {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .partner-kit-guide-grid,
  .partner-kit-stats,
  .partner-kit-tools-grid,
  .partner-kit-assets-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .partner-kit-assets-grid article:last-child {
    grid-column: auto;
  }

  .partner-kit-section-heading,
  .partner-kit-footer {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .partner-kit-section-heading p {
    width: 100%;
    max-width: none;
    text-align: left;
  }

  .partner-kit-footer button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .blackout-partner-kit-page {
    gap: 12px;
  }

  .partner-kit-hero,
  .partner-kit-guide {
    padding: 14px;
  }

  .partner-kit-card-details {
    grid-template-columns: 1fr;
  }
}

/* YEU_PARTNER_KIT_RESPONSIVE_LAYOUT_V2 */

/*
 * Prevent generic page-panel rules from forcing
 * Partner Kit into a narrow left-side column.
 */
.blackout-partner-kit-page {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.blackout-partner-kit-page
  > .partner-kit-hero,
.blackout-partner-kit-page
  > .partner-kit-guide,
.blackout-partner-kit-page
  > .partner-kit-stats,
.blackout-partner-kit-page
  > .partner-kit-section-heading,
.blackout-partner-kit-page
  > .partner-kit-tools-grid,
.blackout-partner-kit-page
  > .partner-kit-assets,
.blackout-partner-kit-page
  > .partner-kit-footer {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

/*
 * Stretch every guide section across its panel.
 */
.partner-kit-guide {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
}

.partner-kit-guide
  > .partner-kit-guide-heading,
.partner-kit-guide
  > .partner-kit-guide-grid,
.partner-kit-guide
  > .partner-kit-safety {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

.partner-kit-guide-heading p {
  width: 100% !important;
  max-width: none !important;
}

/*
 * Half-screen layout.
 */
@media (max-width: 1100px) {
  .partner-kit-guide-grid {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .partner-kit-guide-grid article {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
  }

  .partner-kit-stats {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .partner-kit-tools-grid {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .partner-kit-tool-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .partner-kit-assets-grid {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .partner-kit-assets-grid article {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .partner-kit-assets-grid article:last-child {
    grid-column: 1 / -1 !important;
  }
}

/*
 * Very narrow screens become one readable column.
 */
@media (max-width: 620px) {
  .partner-kit-hero {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .partner-kit-mode {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .partner-kit-guide-grid,
  .partner-kit-stats,
  .partner-kit-tools-grid,
  .partner-kit-assets-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .partner-kit-assets-grid article:last-child {
    grid-column: auto !important;
  }

  .partner-kit-section-heading,
  .partner-kit-footer {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .partner-kit-section-heading p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  .partner-kit-footer button {
    width: 100% !important;
  }
}

/*
 * Prevent individual words from splitting into letters.
 */
.partner-kit-guide-grid strong,
.partner-kit-guide-grid span,
.partner-kit-tool-card h3,
.partner-kit-tool-card p,
.partner-kit-card-details strong,
.partner-kit-assets-grid h3,
.partner-kit-assets-grid p {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

/* YEU_OWNER_PAGE_V1 */

.blackout-owner-page {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  gap: 16px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 8px 4px 22px;
}

.blackout-owner-page
  > .owner-page-hero,
.blackout-owner-page
  > .owner-page-guide,
.blackout-owner-page
  > .owner-page-stats,
.blackout-owner-page
  > .owner-page-section-heading,
.blackout-owner-page
  > .owner-page-tools-grid,
.blackout-owner-page
  > .owner-page-boundaries,
.blackout-owner-page
  > .owner-page-footer {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

.owner-page-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(255, 111, 27, 0.3);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at top left,
      rgba(107, 27, 3, 0.46),
      rgba(20, 3, 0, 0.94) 68%
    );
}

.owner-page-badge,
.owner-page-guide-heading > span,
.owner-page-section-heading span,
.owner-page-boundaries-heading > span {
  display: block;
  color: #ffb176;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.owner-page-hero h3,
.owner-page-guide-heading h3,
.owner-page-section-heading h3,
.owner-page-boundaries-heading h3 {
  margin: 6px 0;
  color: #ffe1c8;
}

.owner-page-hero h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.owner-page-hero p,
.owner-page-guide-heading p,
.owner-page-section-heading p,
.owner-page-boundaries-heading p {
  margin: 0;
  color: rgba(255, 220, 195, 0.7);
  line-height: 1.55;
}

.owner-page-mode {
  display: grid;
  gap: 5px;
  min-width: 190px;
  padding: 14px;
  border: 1px solid rgba(255, 136, 55, 0.25);
  border-radius: 12px;
  background: rgba(45, 10, 1, 0.72);
  text-align: center;
}

.owner-page-mode small {
  color: #c89270;
  font-size: 0.67rem;
  letter-spacing: 0.12em;
}

.owner-page-mode strong {
  color: #ffd8b9;
}

.owner-page-mode span {
  color: rgba(255, 214, 184, 0.6);
  font-size: 0.7rem;
}

.owner-page-guide {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  gap: 13px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 18px;
  border: 1px solid rgba(255, 118, 31, 0.26);
  border-radius: 16px;
  background: rgba(32, 6, 1, 0.84);
  box-sizing: border-box;
}

.owner-page-guide
  > .owner-page-guide-heading,
.owner-page-guide
  > .owner-page-guide-grid,
.owner-page-guide
  > .owner-page-safety {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.owner-page-guide-heading {
  text-align: center;
}

.owner-page-guide-heading p {
  width: 100% !important;
  max-width: 820px;
  margin: 0 auto;
}

.owner-page-guide-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.owner-page-guide-grid article {
  display: grid;
  grid-template-columns:
    32px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 125, 42, 0.2);
  border-radius: 11px;
  background: rgba(55, 12, 2, 0.62);
}

.owner-page-guide-grid article > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 135, 57, 0.5);
  border-radius: 50%;
  color: #ffd6b6;
  background: rgba(102, 27, 4, 0.72);
  font-size: 0.78rem;
}

.owner-page-guide-grid article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.owner-page-guide-grid strong {
  color: #ffe0c6;
  font-size: 0.82rem;
  line-height: 1.35;
}

.owner-page-guide-grid span {
  color: rgba(255, 216, 187, 0.62);
  font-size: 0.72rem;
  line-height: 1.45;
}

.owner-page-safety {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 181, 75, 0.24);
  border-radius: 11px;
  background: rgba(60, 31, 1, 0.38);
  text-align: center;
}

.owner-page-safety strong {
  color: #ffd38c;
  font-size: 0.81rem;
}

.owner-page-safety span {
  color: rgba(255, 222, 190, 0.67);
  font-size: 0.74rem;
  line-height: 1.5;
}

.owner-page-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.owner-page-stats article {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(255, 113, 30, 0.25);
  border-radius: 12px;
  background: rgba(43, 8, 1, 0.75);
  text-align: center;
}

.owner-page-stats small {
  color: #c98e6c;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.owner-page-stats strong {
  color: #ffe0c7;
  font-size: 1.2rem;
}

.owner-page-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 2px 4px;
}

.owner-page-section-heading p {
  max-width: 390px;
  text-align: right;
  font-size: 0.78rem;
}

.owner-page-tools-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.owner-page-tool-card {
  display: grid;
  grid-template-rows:
    auto auto minmax(78px, auto) auto auto;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 116, 30, 0.24);
  border-radius: 14px;
  background:
    linear-gradient(
      150deg,
      rgba(57, 12, 2, 0.88),
      rgba(20, 3, 0, 0.96)
    );
}

.owner-page-tool-card.live {
  border-color: rgba(102, 212, 124, 0.3);
}

.owner-page-tool-card.ready {
  border-color: rgba(96, 164, 230, 0.28);
}

.owner-page-tool-card.protected {
  border-color: rgba(255, 179, 72, 0.32);
}

.owner-page-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.owner-page-card-top span,
.owner-page-card-top b {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.owner-page-card-top span {
  color: #ffc89d;
  border: 1px solid rgba(255, 135, 54, 0.28);
  background: rgba(77, 18, 2, 0.68);
}

.owner-page-card-top b {
  color: #a8d7ff;
  border: 1px solid rgba(88, 161, 224, 0.34);
  background: rgba(7, 40, 68, 0.5);
}

.owner-page-tool-card.live
  .owner-page-card-top b {
  color: #9ce6aa;
  border-color: rgba(93, 198, 114, 0.3);
  background: rgba(9, 58, 20, 0.5);
}

.owner-page-tool-card.protected
  .owner-page-card-top b {
  color: #ffd18f;
  border-color: rgba(255, 168, 65, 0.34);
  background: rgba(69, 36, 2, 0.5);
}

.owner-page-tool-card h3 {
  margin: 0;
  color: #ffe0c7;
  font-size: 1.04rem;
}

.owner-page-tool-card > p {
  margin: 0;
  color: rgba(255, 218, 190, 0.66);
  font-size: 0.77rem;
  line-height: 1.5;
}

.owner-page-card-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.owner-page-card-details > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 122, 37, 0.15);
  border-radius: 9px;
  background: rgba(25, 4, 0, 0.58);
}

.owner-page-card-details small {
  color: #b97f5f;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.owner-page-card-details strong {
  color: #f6c6a2;
  font-size: 0.74rem;
}

.owner-page-tool-card button,
.owner-page-footer button {
  min-height: 42px;
  border: 1px solid rgba(255, 118, 31, 0.5);
  border-radius: 9px;
  color: #ffe0c7;
  background:
    linear-gradient(
      180deg,
      rgba(104, 29, 5, 0.92),
      rgba(54, 10, 1, 0.96)
    );
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.owner-page-tool-card button {
  width: 100%;
  padding: 9px 12px;
}

.owner-page-tool-card button:hover,
.owner-page-footer button:hover {
  border-color: rgba(255, 164, 88, 0.82);
  filter: brightness(1.08);
}

.owner-page-boundaries {
  display: grid;
  gap: 12px;
  padding: 17px;
  border: 1px solid rgba(255, 118, 31, 0.22);
  border-radius: 14px;
  background: rgba(36, 7, 1, 0.75);
}

.owner-page-boundaries-heading {
  text-align: center;
}

.owner-page-boundaries-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.owner-page-boundaries-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 145, 61, 0.18);
  border-radius: 11px;
  background: rgba(50, 12, 2, 0.62);
  text-align: center;
}

.owner-page-boundaries-grid strong {
  color: #ffd9ba;
  font-size: 0.86rem;
}

.owner-page-boundaries-grid span {
  color: rgba(255, 216, 187, 0.62);
  font-size: 0.72rem;
  line-height: 1.45;
}

.owner-page-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid rgba(255, 119, 32, 0.2);
  border-radius: 13px;
  background: rgba(38, 7, 1, 0.72);
}

.owner-page-footer > div {
  display: grid;
  gap: 4px;
}

.owner-page-footer strong {
  color: #ffd6b4;
}

.owner-page-footer span {
  color: rgba(255, 218, 188, 0.63);
  font-size: 0.74rem;
  line-height: 1.45;
}

.owner-page-footer button {
  flex: 0 0 auto;
  padding: 9px 14px;
}

.owner-page-guide-grid strong,
.owner-page-guide-grid span,
.owner-page-tool-card h3,
.owner-page-tool-card p,
.owner-page-card-details strong,
.owner-page-boundaries-grid strong,
.owner-page-boundaries-grid span {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

@media (max-width: 1100px) {
  .owner-page-guide-grid,
  .owner-page-stats,
  .owner-page-tools-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .owner-page-boundaries-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .owner-page-boundaries-grid article:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  .owner-page-hero {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .owner-page-mode {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .owner-page-guide-grid,
  .owner-page-stats,
  .owner-page-tools-grid,
  .owner-page-boundaries-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .owner-page-boundaries-grid article:last-child {
    grid-column: auto !important;
  }

  .owner-page-section-heading,
  .owner-page-footer {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .owner-page-section-heading p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  .owner-page-footer button {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .blackout-owner-page {
    gap: 12px;
  }

  .owner-page-hero,
  .owner-page-guide {
    padding: 14px;
  }

  .owner-page-card-details {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

/* YEU_SHOP_PAGE_V1 */

.blackout-shop-page {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  gap: 16px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 8px 4px 22px;
  box-sizing: border-box !important;
}

.blackout-shop-page
  > .shop-page-hero,
.blackout-shop-page
  > .shop-page-guide,
.blackout-shop-page
  > .shop-page-stats,
.blackout-shop-page
  > .shop-page-section-heading,
.blackout-shop-page
  > .shop-page-catalog-grid,
.blackout-shop-page
  > .shop-page-safeguards,
.blackout-shop-page
  > .shop-page-footer {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

.shop-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(201, 91, 255, 0.3);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at top left,
      rgba(79, 16, 100, 0.5),
      rgba(12, 1, 18, 0.95) 68%
    );
}

.shop-page-badge,
.shop-page-guide-heading > span,
.shop-page-section-heading span,
.shop-page-safeguards-heading > span {
  display: block;
  color: #e5a8ff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.shop-page-hero h3,
.shop-page-guide-heading h3,
.shop-page-section-heading h3,
.shop-page-safeguards-heading h3 {
  margin: 6px 0;
  color: #f4d9ff;
}

.shop-page-hero h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.shop-page-hero p,
.shop-page-guide-heading p,
.shop-page-section-heading p,
.shop-page-safeguards-heading p {
  margin: 0;
  color: rgba(239, 211, 250, 0.7);
  line-height: 1.55;
}

.shop-page-mode {
  display: grid;
  gap: 5px;
  min-width: 190px;
  padding: 14px;
  border: 1px solid rgba(196, 99, 235, 0.27);
  border-radius: 12px;
  background: rgba(44, 8, 56, 0.72);
  text-align: center;
}

.shop-page-mode small {
  color: #ba86cb;
  font-size: 0.67rem;
  letter-spacing: 0.12em;
}

.shop-page-mode strong {
  color: #efd0fb;
}

.shop-page-mode span {
  color: rgba(232, 202, 243, 0.62);
  font-size: 0.7rem;
}

.shop-page-guide {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 13px;
  width: 100% !important;
  min-width: 0 !important;
  padding: 18px;
  border: 1px solid rgba(195, 84, 238, 0.26);
  border-radius: 16px;
  background: rgba(26, 3, 34, 0.86);
  box-sizing: border-box;
}

.shop-page-guide-heading {
  text-align: center;
}

.shop-page-guide-heading p {
  max-width: 820px;
  margin: 0 auto;
}

.shop-page-guide-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.shop-page-guide-grid article {
  display: grid;
  grid-template-columns:
    32px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(199, 94, 240, 0.2);
  border-radius: 11px;
  background: rgba(54, 9, 67, 0.62);
}

.shop-page-guide-grid article > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(210, 117, 248, 0.5);
  border-radius: 50%;
  color: #efd2fb;
  background: rgba(91, 20, 112, 0.74);
  font-size: 0.78rem;
}

.shop-page-guide-grid article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shop-page-guide-grid strong {
  color: #f1d6fb;
  font-size: 0.82rem;
  line-height: 1.35;
}

.shop-page-guide-grid span {
  color: rgba(237, 210, 248, 0.64);
  font-size: 0.72rem;
  line-height: 1.45;
}

.shop-page-safety-banner {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(232, 169, 255, 0.23);
  border-radius: 11px;
  background: rgba(70, 22, 82, 0.42);
  text-align: center;
}

.shop-page-safety-banner strong {
  color: #f2d0ff;
  font-size: 0.81rem;
}

.shop-page-safety-banner span {
  color: rgba(237, 211, 246, 0.68);
  font-size: 0.74rem;
  line-height: 1.5;
}

.shop-page-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.shop-page-stats article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(197, 91, 239, 0.25);
  border-radius: 12px;
  background: rgba(39, 5, 49, 0.77);
  text-align: center;
}

.shop-page-stats small {
  color: #b985ca;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.shop-page-stats strong {
  color: #efd3fa;
  font-size: 1.05rem;
  overflow-wrap: break-word;
}

.shop-page-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 2px 4px;
}

.shop-page-section-heading p {
  max-width: 420px;
  text-align: right;
  font-size: 0.78rem;
}

.shop-page-catalog-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.shop-page-item-card {
  display: grid;
  grid-template-rows:
    auto auto auto minmax(76px, auto) auto auto;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(197, 91, 239, 0.25);
  border-radius: 14px;
  background:
    linear-gradient(
      150deg,
      rgba(55, 9, 68, 0.9),
      rgba(17, 2, 22, 0.97)
    );
}

.shop-page-item-card.preview {
  border-color: rgba(92, 165, 232, 0.3);
}

.shop-page-item-card.planned {
  border-color: rgba(207, 109, 245, 0.29);
}

.shop-page-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.shop-page-card-top span,
.shop-page-card-top b {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.shop-page-card-top span {
  color: #e4b7f4;
  border: 1px solid rgba(199, 99, 237, 0.3);
  background: rgba(71, 14, 86, 0.7);
}

.shop-page-card-top b {
  color: #add9ff;
  border: 1px solid rgba(90, 162, 225, 0.32);
  background: rgba(7, 38, 66, 0.5);
}

.shop-page-item-card.planned
  .shop-page-card-top b {
  color: #e7b8fa;
  border-color: rgba(201, 103, 238, 0.32);
  background: rgba(68, 14, 83, 0.5);
}

.shop-page-item-symbol {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(211, 119, 247, 0.34);
  border-radius: 14px;
  color: #efd3fb;
  background: rgba(78, 17, 95, 0.54);
  font-size: 1.5rem;
}

.shop-page-item-card h3 {
  margin: 0;
  color: #f0d6fa;
  font-size: 1.04rem;
}

.shop-page-item-card > p {
  margin: 0;
  color: rgba(237, 210, 247, 0.67);
  font-size: 0.77rem;
  line-height: 1.5;
}

.shop-page-item-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shop-page-item-details > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(199, 91, 239, 0.16);
  border-radius: 9px;
  background: rgba(20, 2, 26, 0.61);
}

.shop-page-item-details small {
  color: #aa78bb;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.shop-page-item-details strong {
  color: #e6c0f4;
  font-size: 0.74rem;
}

.shop-page-item-card button,
.shop-page-footer button {
  min-height: 42px;
  border: 1px solid rgba(199, 90, 239, 0.5);
  border-radius: 9px;
  color: #f1d7fb;
  background:
    linear-gradient(
      180deg,
      rgba(83, 19, 102, 0.94),
      rgba(43, 7, 54, 0.97)
    );
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.shop-page-item-card button {
  width: 100%;
  padding: 9px 12px;
}

.shop-page-item-card button:hover,
.shop-page-footer button:hover {
  border-color: rgba(222, 143, 255, 0.8);
  filter: brightness(1.08);
}

.shop-page-safeguards {
  display: grid;
  gap: 12px;
  padding: 17px;
  border: 1px solid rgba(199, 91, 239, 0.22);
  border-radius: 14px;
  background: rgba(31, 4, 40, 0.78);
}

.shop-page-safeguards-heading {
  text-align: center;
}

.shop-page-safeguards-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.shop-page-safeguards-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(202, 103, 240, 0.18);
  border-radius: 11px;
  background: rgba(49, 9, 61, 0.64);
  text-align: center;
}

.shop-page-safeguards-grid strong {
  color: #ebccf6;
  font-size: 0.86rem;
}

.shop-page-safeguards-grid span {
  color: rgba(234, 208, 243, 0.64);
  font-size: 0.72rem;
  line-height: 1.45;
}

.shop-page-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid rgba(198, 91, 238, 0.2);
  border-radius: 13px;
  background: rgba(32, 4, 41, 0.74);
}

.shop-page-footer > div {
  display: grid;
  gap: 4px;
}

.shop-page-footer strong {
  color: #ebcdf7;
}

.shop-page-footer span {
  color: rgba(235, 210, 245, 0.64);
  font-size: 0.74rem;
  line-height: 1.45;
}

.shop-page-footer button {
  flex: 0 0 auto;
  padding: 9px 14px;
}

.shop-page-guide-grid strong,
.shop-page-guide-grid span,
.shop-page-item-card h3,
.shop-page-item-card p,
.shop-page-item-details strong,
.shop-page-safeguards-grid strong,
.shop-page-safeguards-grid span {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

@media (max-width: 1100px) {
  .shop-page-guide-grid,
  .shop-page-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-page-catalog-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-page-safeguards-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-page-safeguards-grid article:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  .shop-page-hero {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .shop-page-mode {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .shop-page-guide-grid,
  .shop-page-stats,
  .shop-page-catalog-grid,
  .shop-page-safeguards-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .shop-page-safeguards-grid article:last-child {
    grid-column: auto !important;
  }

  .shop-page-section-heading,
  .shop-page-footer {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .shop-page-section-heading p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  .shop-page-footer button {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .shop-page-hero,
  .shop-page-guide {
    padding: 14px;
  }

  .shop-page-item-details {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

/* YEU_SHOP_RESPONSIVE_LAYOUT_V2 */

/*
 * Prevent generic page-panel rules from forcing
 * Shop content into only the left half.
 */
.blackout-shop-page {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.blackout-shop-page
  > .shop-page-hero,
.blackout-shop-page
  > .shop-page-guide,
.blackout-shop-page
  > .shop-page-stats,
.blackout-shop-page
  > .shop-page-section-heading,
.blackout-shop-page
  > .shop-page-catalog-grid,
.blackout-shop-page
  > .shop-page-safeguards,
.blackout-shop-page
  > .shop-page-footer {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

/*
 * Stretch every guide section across its panel.
 */
.shop-page-guide {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.shop-page-guide
  > .shop-page-guide-heading,
.shop-page-guide
  > .shop-page-guide-grid,
.shop-page-guide
  > .shop-page-safety-banner {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

.shop-page-guide-heading p {
  width: 100% !important;
  max-width: none !important;
}

.shop-page-guide-grid,
.shop-page-stats,
.shop-page-catalog-grid,
.shop-page-safeguards-grid {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

.shop-page-guide-grid article,
.shop-page-stats article,
.shop-page-item-card,
.shop-page-safeguards-grid article {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

/*
 * Balanced half-screen layout.
 */
@media (max-width: 1100px) {
  .shop-page-guide-grid {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-page-stats {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-page-catalog-grid {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-page-safeguards-grid {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-page-safeguards-grid article:last-child {
    grid-column: 1 / -1 !important;
  }
}

/*
 * Very narrow screens become one readable column.
 */
@media (max-width: 620px) {
  .shop-page-hero {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .shop-page-mode {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .shop-page-guide-grid,
  .shop-page-stats,
  .shop-page-catalog-grid,
  .shop-page-safeguards-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .shop-page-safeguards-grid article:last-child {
    grid-column: auto !important;
  }

  .shop-page-section-heading,
  .shop-page-footer {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .shop-page-section-heading p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  .shop-page-footer button {
    width: 100% !important;
  }
}

/*
 * Keep words readable instead of splitting into letters.
 */
.shop-page-guide-grid strong,
.shop-page-guide-grid span,
.shop-page-item-card h3,
.shop-page-item-card p,
.shop-page-item-details strong,
.shop-page-safeguards-grid strong,
.shop-page-safeguards-grid span {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

/* YEU_ADMIN_PAGE_V1 */

.blackout-admin-page {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  gap: 16px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 8px 4px 22px;
  box-sizing: border-box !important;
}

.blackout-admin-page
  > .admin-page-hero,
.blackout-admin-page
  > .admin-page-guide,
.blackout-admin-page
  > .admin-page-stats,
.blackout-admin-page
  > .admin-page-section-heading,
.blackout-admin-page
  > .admin-page-tools-grid,
.blackout-admin-page
  > .admin-page-boundaries,
.blackout-admin-page
  > .admin-page-footer {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

.admin-page-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(230, 70, 70, 0.32);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at top left,
      rgba(103, 15, 15, 0.48),
      rgba(18, 1, 1, 0.96) 68%
    );
}

.admin-page-badge,
.admin-page-guide-heading > span,
.admin-page-section-heading span,
.admin-page-boundaries-heading > span {
  display: block;
  color: #ff9c87;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.admin-page-hero h3,
.admin-page-guide-heading h3,
.admin-page-section-heading h3,
.admin-page-boundaries-heading h3 {
  margin: 6px 0;
  color: #ffd8cf;
}

.admin-page-hero h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.admin-page-hero p,
.admin-page-guide-heading p,
.admin-page-section-heading p,
.admin-page-boundaries-heading p {
  margin: 0;
  color: rgba(255, 215, 204, 0.7);
  line-height: 1.55;
}

.admin-page-mode {
  display: grid;
  gap: 5px;
  min-width: 205px;
  padding: 14px;
  border: 1px solid rgba(234, 84, 70, 0.28);
  border-radius: 12px;
  background: rgba(62, 7, 5, 0.75);
  text-align: center;
}

.admin-page-mode small {
  color: #cf8378;
  font-size: 0.67rem;
  letter-spacing: 0.12em;
}

.admin-page-mode strong {
  color: #ffd5cc;
}

.admin-page-mode span {
  color: rgba(255, 210, 200, 0.62);
  font-size: 0.7rem;
}

.admin-page-guide {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  justify-items: stretch !important;
  gap: 13px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 18px;
  border: 1px solid rgba(229, 69, 58, 0.26);
  border-radius: 16px;
  background: rgba(37, 3, 2, 0.87);
  box-sizing: border-box;
}

.admin-page-guide
  > .admin-page-guide-heading,
.admin-page-guide
  > .admin-page-guide-grid,
.admin-page-guide
  > .admin-page-safety-banner {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.admin-page-guide-heading {
  text-align: center;
}

.admin-page-guide-heading p {
  width: 100% !important;
  max-width: 820px;
  margin: 0 auto;
}

.admin-page-guide-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.admin-page-guide-grid article {
  display: grid;
  grid-template-columns:
    32px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(230, 75, 62, 0.21);
  border-radius: 11px;
  background: rgba(68, 8, 5, 0.64);
}

.admin-page-guide-grid article > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(239, 100, 83, 0.5);
  border-radius: 50%;
  color: #ffd6cd;
  background: rgba(112, 18, 12, 0.76);
  font-size: 0.78rem;
}

.admin-page-guide-grid article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-page-guide-grid strong {
  color: #ffd9d1;
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-page-guide-grid span {
  color: rgba(255, 215, 205, 0.64);
  font-size: 0.72rem;
  line-height: 1.45;
}

.admin-page-safety-banner {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 162, 115, 0.25);
  border-radius: 11px;
  background: rgba(80, 28, 5, 0.42);
  text-align: center;
}

.admin-page-safety-banner strong {
  color: #ffd08f;
  font-size: 0.81rem;
}

.admin-page-safety-banner span {
  color: rgba(255, 218, 191, 0.68);
  font-size: 0.74rem;
  line-height: 1.5;
}

.admin-page-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.admin-page-stats article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(226, 68, 58, 0.25);
  border-radius: 12px;
  background: rgba(49, 5, 4, 0.78);
  text-align: center;
}

.admin-page-stats small {
  color: #c77d72;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.admin-page-stats strong {
  color: #ffd8d0;
  font-size: 1.2rem;
}

.admin-page-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 2px 4px;
}

.admin-page-section-heading p {
  max-width: 420px;
  text-align: right;
  font-size: 0.78rem;
}

.admin-page-tools-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.admin-page-tool-card {
  display: grid;
  grid-template-rows:
    auto auto minmax(78px, auto) auto auto;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(225, 68, 58, 0.25);
  border-radius: 14px;
  background:
    linear-gradient(
      150deg,
      rgba(68, 8, 6, 0.91),
      rgba(21, 2, 2, 0.97)
    );
}

.admin-page-tool-card.live {
  border-color: rgba(87, 196, 111, 0.3);
}

.admin-page-tool-card.review {
  border-color: rgba(91, 158, 220, 0.3);
}

.admin-page-tool-card.protected {
  border-color: rgba(245, 158, 67, 0.32);
}

.admin-page-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.admin-page-card-top span,
.admin-page-card-top b {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.admin-page-card-top span {
  color: #f2b0a4;
  border: 1px solid rgba(230, 78, 64, 0.3);
  background: rgba(89, 12, 8, 0.72);
}

.admin-page-card-top b {
  color: #acd7ff;
  border: 1px solid rgba(86, 158, 221, 0.33);
  background: rgba(7, 38, 66, 0.5);
}

.admin-page-tool-card.live
  .admin-page-card-top b {
  color: #9ce7ab;
  border-color: rgba(92, 199, 113, 0.3);
  background: rgba(8, 57, 19, 0.5);
}

.admin-page-tool-card.protected
  .admin-page-card-top b {
  color: #ffd08b;
  border-color: rgba(245, 159, 66, 0.34);
  background: rgba(72, 36, 2, 0.52);
}

.admin-page-tool-card h3 {
  margin: 0;
  color: #ffd9d1;
  font-size: 1.04rem;
}

.admin-page-tool-card > p {
  margin: 0;
  color: rgba(255, 216, 206, 0.67);
  font-size: 0.77rem;
  line-height: 1.5;
}

.admin-page-card-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-page-card-details > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(228, 70, 58, 0.16);
  border-radius: 9px;
  background: rgba(27, 2, 2, 0.62);
}

.admin-page-card-details small {
  color: #b87369;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.admin-page-card-details strong {
  color: #efbdb4;
  font-size: 0.74rem;
}

.admin-page-tool-card button,
.admin-page-footer button {
  min-height: 42px;
  border: 1px solid rgba(228, 69, 58, 0.5);
  border-radius: 9px;
  color: #ffd9d1;
  background:
    linear-gradient(
      180deg,
      rgba(110, 17, 12, 0.94),
      rgba(57, 6, 4, 0.98)
    );
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.admin-page-tool-card button {
  width: 100%;
  padding: 9px 12px;
}

.admin-page-tool-card button:hover,
.admin-page-footer button:hover {
  border-color: rgba(245, 115, 95, 0.82);
  filter: brightness(1.08);
}

.admin-page-boundaries {
  display: grid;
  gap: 12px;
  padding: 17px;
  border: 1px solid rgba(226, 68, 57, 0.22);
  border-radius: 14px;
  background: rgba(40, 3, 3, 0.79);
}

.admin-page-boundaries-heading {
  text-align: center;
}

.admin-page-boundaries-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-page-boundaries-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(230, 77, 62, 0.18);
  border-radius: 11px;
  background: rgba(61, 7, 5, 0.66);
  text-align: center;
}

.admin-page-boundaries-grid strong {
  color: #ffd2c9;
  font-size: 0.86rem;
}

.admin-page-boundaries-grid span {
  color: rgba(255, 213, 203, 0.64);
  font-size: 0.72rem;
  line-height: 1.45;
}

.admin-page-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid rgba(226, 68, 57, 0.2);
  border-radius: 13px;
  background: rgba(42, 4, 3, 0.76);
}

.admin-page-footer > div {
  display: grid;
  gap: 4px;
}

.admin-page-footer strong {
  color: #ffd3ca;
}

.admin-page-footer span {
  color: rgba(255, 213, 203, 0.64);
  font-size: 0.74rem;
  line-height: 1.45;
}

.admin-page-footer button {
  flex: 0 0 auto;
  padding: 9px 14px;
}

.admin-page-guide-grid strong,
.admin-page-guide-grid span,
.admin-page-tool-card h3,
.admin-page-tool-card p,
.admin-page-card-details strong,
.admin-page-boundaries-grid strong,
.admin-page-boundaries-grid span {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

@media (max-width: 1100px) {
  .admin-page-guide-grid,
  .admin-page-stats,
  .admin-page-tools-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-page-boundaries-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-page-boundaries-grid article:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  .admin-page-hero {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .admin-page-mode {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .admin-page-guide-grid,
  .admin-page-stats,
  .admin-page-tools-grid,
  .admin-page-boundaries-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .admin-page-boundaries-grid article:last-child {
    grid-column: auto !important;
  }

  .admin-page-section-heading,
  .admin-page-footer {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .admin-page-section-heading p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  .admin-page-footer button {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .admin-page-hero,
  .admin-page-guide {
    padding: 14px;
  }

  .admin-page-card-details {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

/*
 * YEU_BLACKOUT_SUPERSEDED_GEOMETRY_STACK_V9
 *
 * Previous main-only V1/V2/V4/V5/V7/V8 face sizing
 * rules were removed here after backup.
 * Canonical geometry is defined at the end of this file.
 */

/* YEU_DESKTOP_TALISMAN_ART_2X_V1
   Main YÊU Blackout only.
   Double visible side-navigation artwork.
   Keep button grid, labels and mobile layout unchanged.
*/
@media (min-width: 651px) {
  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap {
    transform: scale(2) !important;
    transform-origin: 50% 50% !important;
    overflow: visible !important;
    z-index: 4 !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img {
    overflow: visible !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman > span {
    position: relative !important;
    z-index: 8 !important;
  }
}

/* YEU_DESKTOP_TALISMAN_2X_CLEANUP_V2
   Keep approved 2X talisman artwork.
   Desktop only.
   Pull rails inward and give labels a clean readable layer.
   Main YÊU Blackout only.
*/

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column {
    overflow: visible !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-left {
    left: 34px !important;
    right: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-right {
    right: 34px !important;
    left: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman {
    overflow: visible !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap {
    transform: scale(2) !important;
    transform-origin: 50% 50% !important;

    overflow: visible !important;

    z-index: 6 !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img {
    overflow: visible !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman > span {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    bottom: 1px !important;
    top: auto !important;

    transform:
      translateX(-50%) !important;

    width: max-content !important;
    max-width: calc(100% - 8px) !important;

    margin: 0 !important;
    padding: 2px 7px !important;

    border: 1px solid
      rgba(255, 105, 20, .28) !important;

    border-radius: 999px !important;

    background:
      rgba(0, 0, 0, .82) !important;

    box-shadow:
      0 0 8px rgba(0, 0, 0, .95),
      0 0 9px rgba(255, 76, 0, .18)
      !important;

    text-shadow:
      0 0 4px #000,
      0 0 7px rgba(255, 90, 0, .72)
      !important;

    line-height: 1.05 !important;

    white-space: nowrap !important;

    overflow: visible !important;

    pointer-events: none !important;

    z-index: 20 !important;
  }
}

/*
 * Split-screen desktop:
 * preserve room for the center while still preventing
 * the doubled artwork from being clipped.
 */
@media (min-width: 651px) and (max-width: 1250px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-left {
    left: 28px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-right {
    right: 28px !important;
  }
}

/* YEU_HELP_CHARM_REPOSITION_V1
   Main YÊU Blackout desktop only.
   Keep the ? charm clear of the approved 2X Kitty Studio talisman.
*/
@media (min-width: 651px) {
  html body
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm {
    right: 220px !important;
    bottom: 18px !important;
    z-index: 40000 !important;
  }
}

/* Slightly tighter position for split-screen desktop. */
@media (min-width: 651px) and (max-width: 1250px) {
  html body
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm {
    right: 185px !important;
  }
}

/* YEU_HELP_CHARM_FINAL_POSITION_V2
   Keep help charm completely clear of Kitty Studio.
*/
@media (min-width: 1251px) {
  html body
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm {
    right: 300px !important;
    bottom: 18px !important;
  }
}

@media (min-width: 651px) and (max-width: 1250px) {
  html body
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm {
    right: 260px !important;
    bottom: 18px !important;
  }
}
/* YEU_DESKTOP_TALISMAN_NORMALIZE_V3
   Desktop main Blackout only.
   Keep artwork large but normalize visible PNG content.
   Source PNG files are never modified.
*/
@media (min-width: 651px) {
  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap {
    width: var(--yeu-final-art) !important;
    height: var(--yeu-final-art) !important;
    display: grid !important;
    place-items: center !important;
    transform: scale(1.60) !important;
    transform-origin: 50% 50% !important;
    overflow: visible !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform-origin: 50% 50% !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_home.png"] {
    transform: scale(1.0026) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_get_started.png"] {
    transform: scale(1.0039) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_profile.png"] {
    transform: scale(0.8946) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_history.png"] {
    transform: scale(1.0000) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_status.png"] {
    transform: scale(1.0026) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_creators.png"] {
    transform: scale(1.0000) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_campaigns.png"] {
    transform: scale(1.0026) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_partner_kit.png"] {
    transform: scale(0.8957) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_admin.png"] {
    transform: scale(0.8946) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_wallet.png"] {
    transform: scale(1.0026) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_shop.png"] {
    transform: scale(1.0000) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_business_signup.png"] {
    transform: scale(0.9974) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_owner.png"] {
    transform: scale(1.0026) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_yeu_map.png"] {
    transform: scale(1.0000) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="talisman_daily_video.png"] {
    transform: scale(0.8946) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap img[src*="KittyStudio.png"] {
    transform: scale(0.90) !important;
  }
}


/* YEU_BLACKOUT_CANONICAL_GEOMETRY_V1
   MAIN YÊU BLACKOUT — DESKTOP

   One shared square interaction stage.
   The locked 1672x941 PNG is contained inside it.
   This matches the coordinate system used by the
   previously tuned eyes, nose and mouth controls.

   Blackout Playground and mobile are untouched.
*/
@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face {
    position: fixed !important;

    left: 50vw !important;
    right: auto !important;

    top: 50.5vh !important;
    bottom: auto !important;

    width: min(120vmin, 1080px) !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

    aspect-ratio: 1 / 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
      translate(-50%, -50%) !important;

    transform-origin:
      50% 50% !important;

    translate: none !important;
    scale: none !important;
    rotate: none !important;

    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-sizing: border-box !important;

    z-index: 1000 !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .linh-miu-real-face {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;

    object-fit: contain !important;
    object-position: 50% 50% !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none !important;

    z-index: 1 !important;
  }

  /*
   * Reassert the coordinates that were tuned against
   * this exact square interaction stage.
   */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .eye-left.linhmiu-hold-eye {
    left: 32% !important;
    top: 43.5% !important;
    width: 16% !important;
    height: 10% !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .eye-right.linhmiu-hold-eye {
    left: 52% !important;
    right: auto !important;
    top: 43.5% !important;
    width: 16% !important;
    height: 10% !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .nose-tip-zone {
    left: 49.8% !important;
    top: 55.2% !important;

    width: 64px !important;
    height: 64px !important;

    transform:
      translate(-50%, -50%) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .mouth-zone {
    left: 45.35% !important;
    top: 60.25% !important;

    width: 14% !important;
    height: 8% !important;
  }

  /*
   * Chat is intentionally smaller than the face stage.
   * Keep it centered below Linh Miu instead of letting
   * old responsive rules stretch it independently.
   */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-chat {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;

    top: 66vh !important;
    bottom: auto !important;

    width: min(520px, 64vw) !important;
    max-width: 520px !important;

    transform:
      translateX(-50%) !important;

    font-size:
      clamp(12px, 1.25vw, 15px) !important;

    z-index: 10000 !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-chat
  .chat-lines {
    height:
      clamp(120px, 18vh, 180px) !important;

    min-height: 120px !important;
    max-height: 180px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-chat
  input {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }
}

/* YEU_CANONICAL_NOSE_LEFT_NUDGE_V2 */

/* YEU_CANONICAL_NOSE_MICRO_LEFT_V3 */

/* YEU_MOUTH_CALIBRATION_RING_V1
   Temporary visible mouth-position calibration circle.
   Main YÊU Blackout desktop only.
*/
@media (min-width: 651px) {
  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .mouth-zone {
    left: 45.35% !important;
    top: 60.25% !important;

    width: 64px !important;
    height: 64px !important;

    transform: translate(-50%, -50%) !important;

    box-sizing: border-box !important;
    border: 2px solid rgba(255, 120, 70, 0.92) !important;
    border-radius: 999px !important;

    background: rgba(255, 90, 45, 0.025) !important;

    box-shadow:
      0 0 8px rgba(255, 110, 55, 0.48) !important;

    cursor: pointer !important;
    pointer-events: auto !important;

    z-index: 90 !important;
  }
}


/* YEU_LINHMIU_FOREHEAD_CHARM_CHAT_V1_START */
html body #root .linh-face {
  position: relative;
}

html body #root .linh-face .linhmiu-forehead-charm {
  position: absolute;
  left: 50%;
  top: 28.6%;
  width: clamp(90px, 18.3vw, 194px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  z-index: 8;
}

html body #root .linh-face .linhmiu-forehead-charm img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

html body #root .linh-face .linhmiu-forehead-charm:hover,
html body #root .linh-face .linhmiu-forehead-charm:focus-visible {
  transform: translateX(-50%) scale(1.03);
}

html body #root .linh-face .linhmiu-forehead-charm:active {
  transform: translateX(-50%) scale(0.985);
}

@media (max-width: 900px) {
  html body #root .linh-face .linhmiu-forehead-charm {
    top: 28.3%;
    width: clamp(82px, 23.4vw, 160px);
  }
}

@media (max-width: 600px) {
  html body #root .linh-face .linhmiu-forehead-charm {
    top: 27.8%;
    width: clamp(72px, 26.0vw, 136px);
  }
}
/* YEU_LINHMIU_FOREHEAD_CHARM_CHAT_V1_END */


/* ==========================================================
   YEU LINH MIU TALISMAN BURN + SPIRIT SUMMON V1
   ========================================================== */

/* Allow the flame aura to extend outside the charm button. */
html body #root .linh-face .linhmiu-forehead-charm {
  overflow: visible;
  isolation: isolate;
}

/* Flame aura behind the talisman. */
html body #root
.linh-face
.linhmiu-forehead-charm::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  border-radius: 45%;

  background:
    radial-gradient(
      ellipse at 50% 80%,
      rgba(255, 228, 105, 0.95) 0%,
      rgba(255, 121, 0, 0.75) 24%,
      rgba(190, 20, 0, 0.42) 48%,
      transparent 72%
    );

  filter: blur(8px);
  transform: scale(.55);
}

/* Hot ember halo. */
html body #root
.linh-face
.linhmiu-forehead-charm::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  opacity: 0;
  border-radius: 40%;

  box-shadow:
    0 0 10px rgba(255, 214, 89, .95),
    0 0 25px rgba(255, 112, 0, .9),
    0 0 50px rgba(220, 25, 0, .7);

  transform: scale(.7);
}


/* ----------------------------------------------------------
   TALISMAN BURN
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-forehead-charm.is-burning::before {
  animation:
    yeuCharmFlameBloom 900ms ease-out forwards;
}

html body #root
.linh-face
.linhmiu-forehead-charm.is-burning::after {
  animation:
    yeuCharmEmberHalo 850ms ease-out forwards;
}

html body #root
.linh-face
.linhmiu-forehead-charm.is-burning > img {
  transform-origin: 50% 70%;

  animation:
    yeuCharmBurnPaper 980ms
    cubic-bezier(.4, 0, .75, 1)
    forwards;
}


@keyframes yeuCharmBurnPaper {
  0% {
    opacity: 1;
    transform:
      scale(1)
      rotate(0deg);

    filter:
      brightness(1)
      contrast(1)
      saturate(1)
      sepia(0)
      drop-shadow(
        0 2px 8px
        rgba(0,0,0,.55)
      );
  }

  25% {
    opacity: 1;

    transform:
      scale(1.04)
      rotate(-1deg);

    filter:
      brightness(1.6)
      contrast(1.25)
      saturate(1.7)
      sepia(.6)
      drop-shadow(
        0 0 10px
        rgba(255,175,35,.95)
      );
  }

  55% {
    opacity: .86;

    transform:
      scale(.92)
      rotate(1deg);

    filter:
      brightness(2.15)
      contrast(1.45)
      saturate(2.2)
      sepia(1)
      drop-shadow(
        0 0 20px
        rgba(255,70,0,1)
      );
  }

  78% {
    opacity: .38;

    transform:
      scale(.72)
      rotate(-2deg);

    filter:
      brightness(2.8)
      blur(1px)
      saturate(2.5)
      sepia(1);
  }

  100% {
    opacity: 0;

    transform:
      scale(.38)
      translateY(-8%)
      rotate(3deg);

    filter:
      brightness(3)
      blur(4px)
      saturate(3)
      sepia(1);
  }
}


@keyframes yeuCharmFlameBloom {
  0% {
    opacity: 0;
    transform: scale(.4);
  }

  25% {
    opacity: .75;
  }

  55% {
    opacity: 1;
    transform: scale(1.15);
  }

  100% {
    opacity: 0;
    transform: scale(1.75);
    filter: blur(18px);
  }
}


@keyframes yeuCharmEmberHalo {
  0% {
    opacity: 0;
    transform: scale(.45);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}


/* ----------------------------------------------------------
   SPIRIT CAT
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-spirit-cat {
  position: absolute;

  left: 50%;
  top: 30.5%;

  width: 43%;
  max-width: 390px;
  min-width: 150px;

  height: auto;

  z-index: 12;

  opacity: 0;

  pointer-events: none;
  user-select: none;

  transform:
    translate(-50%, -6%)
    scale(.08);

  transform-origin: 50% 50%;

  filter:
    brightness(1.3)
    saturate(1.18)
    drop-shadow(
      0 0 12px
      rgba(255,140,0,.8)
    )
    drop-shadow(
      0 0 30px
      rgba(255,65,0,.45)
    );
}


/* Cat emerging from the burning charm. */
html body #root
.linh-face
.linhmiu-spirit-cat.is-summoning {
  animation:
    yeuSpiritMaterialize
    900ms
    cubic-bezier(.16,.84,.26,1)
    forwards;
}


/* Once summoned, keep her softly floating. */
html body #root
.linh-face
.linhmiu-spirit-cat.is-summoned {
  opacity: 1;

  transform:
    translate(-50%, -18%)
    scale(1);

  animation:
    yeuSpiritFloat
    3.6s
    ease-in-out
    infinite;
}


@keyframes yeuSpiritMaterialize {
  0% {
    opacity: 0;

    top: 33.5%;

    transform:
      translate(-50%, 10%)
      scale(.06);

    filter:
      brightness(3)
      saturate(1.8)
      blur(7px)
      drop-shadow(
        0 0 30px
        rgba(255,120,0,1)
      );
  }

  18% {
    opacity: .28;
  }

  45% {
    opacity: .72;

    transform:
      translate(-50%, -8%)
      scale(.46);

    filter:
      brightness(2)
      saturate(1.5)
      blur(3px)
      drop-shadow(
        0 0 38px
        rgba(255,110,0,.9)
      );
  }

  72% {
    opacity: 1;

    top: 28.5%;

    transform:
      translate(-50%, -14%)
      scale(1.08);

    filter:
      brightness(1.55)
      saturate(1.3)
      blur(0)
      drop-shadow(
        0 0 28px
        rgba(255,100,0,.85)
      );
  }

  100% {
    opacity: 1;

    top: 26.5%;

    transform:
      translate(-50%, -18%)
      scale(1);

    filter:
      brightness(1.3)
      saturate(1.18)
      drop-shadow(
        0 0 14px
        rgba(255,150,0,.85)
      )
      drop-shadow(
        0 0 34px
        rgba(255,65,0,.5)
      );
  }
}


@keyframes yeuSpiritFloat {
  0%,
  100% {
    top: 26.5%;

    transform:
      translate(-50%, -18%)
      scale(1);
  }

  50% {
    top: 25%;

    transform:
      translate(-50%, -18%)
      scale(1.025);
  }
}


/* Make the charm itself disappear once the spirit begins forming. */
html body #root
.linh-face
.linhmiu-forehead-charm.is-burning {
  pointer-events: none;
}


/* Phone/tablet scaling. */
@media (max-width: 900px) {
  html body #root
  .linh-face
  .linhmiu-spirit-cat {
    width: 46%;
    min-width: 135px;
  }
}

@media (max-width: 600px) {
  html body #root
  .linh-face
  .linhmiu-spirit-cat {
    width: 50%;
    min-width: 115px;
  }
}


/* Accessibility: no dramatic movement when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  html body #root
  .linh-face
  .linhmiu-forehead-charm.is-burning > img {
    animation-duration: 150ms;
  }

  html body #root
  .linh-face
  .linhmiu-spirit-cat.is-summoning,
  html body #root
  .linh-face
  .linhmiu-spirit-cat.is-summoned {
    animation: none;

    opacity: 1;

    top: 26.5%;

    transform:
      translate(-50%, -18%)
      scale(1);
  }
}

/* YEU_LINHMIU_TALISMAN_SPIRIT_SUMMON_V1_END */


/* ==========================================================
   YEU TALISMAN REAL FIRE + ASH V2
   More visible flame, glowing char, sparks and ash breakup.
   ========================================================== */

html body #root
.linh-face
.linhmiu-forehead-charm {
  overflow: visible !important;
}


/* ----------------------------------------------------------
   FIRE BODY
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-charm-fire {
  position: absolute;

  left: -24%;
  right: -24%;
  top: -18%;
  bottom: -20%;

  z-index: 5;

  pointer-events: none;

  opacity: 0;

  transform:
    scale(.6)
    translateY(8%);

  transform-origin: 50% 70%;

  background:
    radial-gradient(
      ellipse at 20% 85%,
      rgba(255,245,155,.98) 0 5%,
      rgba(255,145,0,.95) 10%,
      rgba(255,45,0,.7) 22%,
      transparent 38%
    ),
    radial-gradient(
      ellipse at 48% 78%,
      rgba(255,255,190,1) 0 6%,
      rgba(255,174,0,.98) 12%,
      rgba(255,55,0,.75) 27%,
      transparent 44%
    ),
    radial-gradient(
      ellipse at 78% 84%,
      rgba(255,236,120,.95) 0 5%,
      rgba(255,130,0,.92) 12%,
      rgba(230,35,0,.68) 26%,
      transparent 42%
    ),
    radial-gradient(
      ellipse at 35% 48%,
      rgba(255,180,0,.9),
      rgba(255,50,0,.55) 24%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 68% 42%,
      rgba(255,190,0,.85),
      rgba(230,45,0,.5) 26%,
      transparent 50%
    );

  filter:
    blur(2px)
    drop-shadow(0 0 8px rgba(255,210,70,.95))
    drop-shadow(0 0 18px rgba(255,85,0,.9))
    drop-shadow(0 0 35px rgba(190,20,0,.65));
}


/* ----------------------------------------------------------
   ASH / EMBER PARTICLES
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-charm-ash {
  position: absolute;

  left: 50%;
  top: 52%;

  width: 4px;
  height: 4px;

  z-index: 7;

  pointer-events: none;

  opacity: 0;

  border-radius: 50%;

  background: rgba(45,35,30,.95);

  box-shadow:
    -34px -62px 0 1px rgba(255,95,0,.95),
    -21px -48px 0 0 rgba(70,55,45,.95),
    -8px  -68px 0 1px rgba(255,170,25,.92),
     8px  -54px 0 0 rgba(65,50,42,.95),
     22px -72px 0 1px rgba(255,78,0,.92),
     36px -50px 0 0 rgba(85,65,50,.9),

    -42px -20px 0 1px rgba(55,45,38,.95),
    -27px -12px 0 0 rgba(255,132,0,.88),
    -13px -28px 0 1px rgba(78,59,47,.95),
      5px -18px 0 0 rgba(255,76,0,.92),
     19px -26px 0 1px rgba(66,52,43,.95),
     40px -10px 0 0 rgba(255,155,15,.88),

    -38px  15px 0 1px rgba(65,54,47,.95),
    -18px  26px 0 0 rgba(255,95,0,.85),
      2px  18px 0 1px rgba(58,48,42,.95),
     18px  32px 0 0 rgba(255,140,0,.88),
     34px  20px 0 1px rgba(52,45,40,.95);
}


/* ----------------------------------------------------------
   START FIRE
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-forehead-charm.is-burning
.linhmiu-charm-fire {
  animation:
    yeuRealFireBurn
    1120ms
    cubic-bezier(.2,.8,.2,1)
    forwards;
}


html body #root
.linh-face
.linhmiu-forehead-charm.is-burning
.linhmiu-charm-ash {
  animation:
    yeuAshBurst
    1450ms
    ease-out
    430ms
    forwards;
}


/* ----------------------------------------------------------
   PAPER ITSELF: heat -> scorch -> blacken -> crumble
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-forehead-charm.is-burning > img {
  animation:
    yeuPaperBurnToAsh
    1250ms
    cubic-bezier(.4,0,.7,1)
    forwards !important;

  transform-origin: 50% 76%;
}


@keyframes yeuPaperBurnToAsh {

  0% {
    opacity: 1;

    transform:
      scale(1)
      rotate(0deg);

    filter:
      brightness(1)
      contrast(1)
      saturate(1)
      sepia(0)
      blur(0);
  }

  12% {
    transform:
      scale(1.02)
      rotate(-.6deg);

    filter:
      brightness(1.4)
      contrast(1.18)
      saturate(1.5)
      sepia(.25)
      drop-shadow(
        0 0 6px
        rgba(255,190,50,.9)
      );
  }

  28% {
    opacity: 1;

    transform:
      scale(1.035)
      rotate(.7deg);

    filter:
      brightness(1.8)
      contrast(1.35)
      saturate(2)
      sepia(.65)
      drop-shadow(
        0 0 13px
        rgba(255,100,0,1)
      );
  }

  44% {
    opacity: .96;

    transform:
      scale(.99)
      rotate(-1deg);

    filter:
      brightness(1.1)
      contrast(1.8)
      saturate(1.45)
      sepia(1)
      drop-shadow(
        0 0 18px
        rgba(255,55,0,.95)
      );
  }

  58% {
    opacity: .83;

    transform:
      scale(.91)
      rotate(1.1deg);

    filter:
      brightness(.62)
      contrast(2.25)
      saturate(.6)
      sepia(1)
      grayscale(.25)
      drop-shadow(
        0 0 15px
        rgba(255,75,0,.9)
      );
  }

  72% {
    opacity: .58;

    transform:
      translateY(-2%)
      scale(.76)
      rotate(-2deg);

    filter:
      brightness(.34)
      contrast(2.6)
      saturate(.25)
      grayscale(.65)
      sepia(.5)
      blur(.5px);
  }

  86% {
    opacity: .26;

    transform:
      translateY(-7%)
      scale(.54)
      rotate(2.7deg);

    filter:
      brightness(.22)
      contrast(2.8)
      grayscale(1)
      blur(1.6px);
  }

  100% {
    opacity: 0;

    transform:
      translateY(-16%)
      scale(.22)
      rotate(-5deg);

    filter:
      brightness(.15)
      grayscale(1)
      blur(5px);
  }
}


/* ----------------------------------------------------------
   FLAME MOTION
   ---------------------------------------------------------- */

@keyframes yeuRealFireBurn {

  0% {
    opacity: 0;

    transform:
      scale(.45)
      translateY(18%);
  }

  12% {
    opacity: .55;

    transform:
      scale(.72)
      translateY(8%);
  }

  28% {
    opacity: 1;

    transform:
      scale(1.0)
      translateY(0%);
  }

  44% {
    opacity: 1;

    transform:
      scale(1.15, 1.28)
      translateY(-7%)
      rotate(-1deg);
  }

  61% {
    opacity: .96;

    transform:
      scale(1.26, 1.52)
      translateY(-15%)
      rotate(1.5deg);
  }

  78% {
    opacity: .72;

    transform:
      scale(1.42, 1.76)
      translateY(-26%);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.7, 2.05)
      translateY(-42%);

    filter:
      blur(10px)
      drop-shadow(
        0 0 30px
        rgba(255,70,0,.6)
      );
  }
}


/* ----------------------------------------------------------
   ASH DRIFTS DOWN WHILE HOT EMBERS FLOAT UP
   ---------------------------------------------------------- */

@keyframes yeuAshBurst {

  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(.3)
      rotate(0deg);
  }

  16% {
    opacity: 1;
  }

  52% {
    opacity: .9;

    transform:
      translate(-50%, -38%)
      scale(1.05)
      rotate(17deg);
  }

  78% {
    opacity: .58;

    transform:
      translate(-54%, 40%)
      scale(1.4)
      rotate(38deg);
  }

  100% {
    opacity: 0;

    transform:
      translate(-62%, 135%)
      scale(1.8)
      rotate(75deg);

    filter:
      blur(2px);
  }
}


/* Make old glow layers feel more like actual flame illumination. */
html body #root
.linh-face
.linhmiu-forehead-charm.is-burning::before {
  animation:
    yeuHotFireFlash
    1050ms
    ease-out
    forwards !important;
}

html body #root
.linh-face
.linhmiu-forehead-charm.is-burning::after {
  animation:
    yeuHotEmberPulse
    1050ms
    ease-out
    forwards !important;
}


@keyframes yeuHotFireFlash {

  0% {
    opacity: 0;
    transform: scale(.35);
  }

  20% {
    opacity: .9;
  }

  48% {
    opacity: 1;
    transform: scale(1.18);
  }

  72% {
    opacity: .72;
    transform: scale(1.55);
  }

  100% {
    opacity: 0;
    transform: scale(2.05);
    filter: blur(20px);
  }
}


@keyframes yeuHotEmberPulse {

  0% {
    opacity: 0;
    transform: scale(.5);
  }

  30% {
    opacity: 1;
  }

  55% {
    opacity: .85;
    transform: scale(1.15);
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}


/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {

  html body #root
  .linh-face
  .linhmiu-forehead-charm.is-burning > img {
    animation-duration: 250ms !important;
  }

  html body #root
  .linh-face
  .linhmiu-charm-fire,
  html body #root
  .linh-face
  .linhmiu-charm-ash {
    animation-duration: 250ms !important;
  }
}

/* YEU_TALISMAN_REAL_FIRE_ASH_V2_END */


/* ==========================================================
   YEU REALISTIC TALISMAN FIRE V3
   Canvas flame + smoke + sparks + ash
   ========================================================== */

html body #root
.linh-face
.linhmiu-charm-fire-canvas {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 280%;
  height: 280%;

  transform:
    translate(-50%, -50%);

  pointer-events: none;

  z-index: 20;

  opacity: 0;

  overflow: visible;
}


html body #root
.linh-face
.linhmiu-forehead-charm.is-burning
.linhmiu-charm-fire-canvas {
  opacity: 1;
}


/*
 * Disable the older fake gradient flames.
 * Canvas now handles the actual fire.
 */
html body #root
.linh-face
.linhmiu-charm-fire,
html body #root
.linh-face
.linhmiu-charm-ash {
  display: none !important;
}


html body #root
.linh-face
.linhmiu-forehead-charm.is-burning::before,
html body #root
.linh-face
.linhmiu-forehead-charm.is-burning::after {
  display: none !important;
}


/* ----------------------------------------------------------
   PAPER BURN FRONT
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-forehead-charm.is-burning > img {
  animation:
    yeuRealPaperCharV3
    1650ms
    cubic-bezier(.28,.05,.58,1)
    forwards !important;

  transform-origin:
    50% 50%;

  will-change:
    transform,
    opacity,
    filter,
    clip-path;
}


@keyframes yeuRealPaperCharV3 {

  0% {
    opacity: 1;

    transform:
      scale(1)
      rotate(0deg);

    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%
      );

    filter:
      brightness(1)
      contrast(1)
      saturate(1);
  }


  18% {
    opacity: 1;

    transform:
      scale(1.015)
      rotate(-.3deg);

    filter:
      brightness(1.32)
      contrast(1.12)
      saturate(1.4)
      drop-shadow(
        0 0 6px
        rgba(255,174,39,.75)
      );
  }


  36% {
    opacity: 1;

    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 92%,
        91% 87%,
        82% 93%,
        70% 86%,
        59% 92%,
        47% 85%,
        36% 91%,
        24% 86%,
        12% 93%,
        0 88%
      );

    filter:
      brightness(.95)
      contrast(1.42)
      saturate(1.15)
      sepia(.35)
      drop-shadow(
        0 0 9px
        rgba(255,90,0,.9)
      );
  }


  54% {
    opacity: .96;

    transform:
      scale(.985)
      rotate(.4deg);

    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 74%,
        90% 68%,
        80% 76%,
        70% 66%,
        58% 73%,
        47% 64%,
        35% 72%,
        24% 65%,
        12% 75%,
        0 68%
      );

    filter:
      brightness(.58)
      contrast(1.9)
      saturate(.55)
      sepia(.8);
  }


  70% {
    opacity: .82;

    transform:
      scale(.94)
      rotate(-.6deg);

    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 53%,
        91% 47%,
        80% 55%,
        68% 45%,
        57% 52%,
        45% 43%,
        34% 51%,
        22% 45%,
        11% 54%,
        0 47%
      );

    filter:
      brightness(.26)
      contrast(2.35)
      saturate(.18)
      grayscale(.55);
  }


  84% {
    opacity: .58;

    transform:
      scale(.88)
      rotate(1.2deg);

    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 31%,
        89% 25%,
        77% 33%,
        65% 22%,
        54% 30%,
        42% 20%,
        30% 29%,
        19% 21%,
        9% 32%,
        0 25%
      );

    filter:
      brightness(.15)
      contrast(2.7)
      grayscale(.9)
      blur(.35px);
  }


  100% {
    opacity: 0;

    transform:
      translateY(-4%)
      scale(.72)
      rotate(-2deg);

    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 7%,
        87% 3%,
        72% 9%,
        58% 2%,
        43% 8%,
        28% 2%,
        14% 9%,
        0 4%
      );

    filter:
      brightness(.08)
      contrast(3)
      grayscale(1)
      blur(2px);
  }
}


/*
 * Add a slight heat shimmer during the hottest part.
 */
html body #root
.linh-face
.linhmiu-forehead-charm.is-burning {
  animation:
    yeuCharmHeatJitterV3
    115ms
    steps(2)
    6;
}


@keyframes yeuCharmHeatJitterV3 {
  0% {
    translate: 0 0;
  }

  50% {
    translate: .45px -.35px;
  }

  100% {
    translate: -.35px .35px;
  }
}


/* YEU_REALISTIC_TALISMAN_FIRE_V3_END */


/* ==========================================================
   YEU PIXEL-BURN TALISMAN V4
   ========================================================== */

html body #root
.linh-face
.linhmiu-charm-burn-canvas {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 8;

  opacity: 0;

  pointer-events: none;

  overflow: visible;

  filter:
    drop-shadow(
      0 0 3px
      rgba(255,110,0,.45)
    );
}


/* The actual source image stays normal while idle. */
html body #root
.linh-face
.linhmiu-forehead-charm:not(.is-burning)
.linhmiu-charm-burn-canvas {
  display: none;
}


/*
 * During burning, canvas becomes the visible paper.
 * Original PNG remains in layout so button dimensions
 * stay exactly where we already tuned them.
 */
html body #root
.linh-face
.linhmiu-forehead-charm.is-burning
.linhmiu-charm-burn-canvas {
  display: block;

  opacity: 1;
}


/* Hide original visual, but preserve its dimensions. */
html body #root
.linh-face
.linhmiu-forehead-charm.is-burning
> img:first-child {
  opacity: 0 !important;

  animation: none !important;

  filter: none !important;
}


/*
 * Fire canvas stays ABOVE paper burn line,
 * so the flame appears to lick across its edge.
 */
html body #root
.linh-face
.linhmiu-charm-fire-canvas {
  z-index: 11 !important;
}


/*
 * Tiny orange pulse when ignition first happens.
 */
html body #root
.linh-face
.linhmiu-forehead-charm.is-burning {
  filter:
    drop-shadow(
      0 0 5px
      rgba(255,125,0,.75)
    );

  animation:
    yeuIgnitionKickV4
    260ms
    ease-out
    1 !important;
}


@keyframes yeuIgnitionKickV4 {

  0% {
    filter:
      drop-shadow(
        0 0 0
        rgba(255,100,0,0)
      );
  }

  35% {
    filter:
      drop-shadow(
        0 0 14px
        rgba(255,195,60,1)
      )
      drop-shadow(
        0 0 28px
        rgba(255,55,0,.85)
      );
  }

  100% {
    filter:
      drop-shadow(
        0 0 5px
        rgba(255,105,0,.55)
      );
  }
}


/* YEU_PIXEL_BURN_TALISMAN_V4_END */


/* ==========================================================
   YEU CINEMATIC SUMMON V8
   fire-light flicker + heat haze + ember collapse
   ========================================================== */

html body #root
.linh-face
.linhmiu-spirit-cinema {
  position: absolute;
  left: 50%;
  top: 17%;
  width: 52%;
  height: 48%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  overflow: visible;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-burning,
html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoning,
html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoned {
  opacity: 1;
}


/* ----------------------------------------------------------
   FIRE LIGHT FLICKER ON THE SCENE
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-light-flicker {
  position: absolute;
  inset: -8% -28% -8% -28%;
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 50% 24%,
      rgba(255, 192, 78, .58) 0%,
      rgba(255, 112, 0, .28) 24%,
      rgba(255, 40, 0, .12) 42%,
      transparent 68%
    ),
    radial-gradient(
      ellipse at 50% 48%,
      rgba(255, 115, 0, .16) 0%,
      rgba(255, 48, 0, .08) 26%,
      transparent 56%
    );
  filter: blur(16px);
  mix-blend-mode: screen;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-burning
.linhmiu-light-flicker {
  opacity: .75;
  animation: yeuCinemaFlickerV8 130ms steps(2) infinite;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoning
.linhmiu-light-flicker {
  opacity: .92;
  animation: yeuCinemaFlickerV8 92ms steps(2) infinite;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoned
.linhmiu-light-flicker {
  opacity: .32;
  animation: yeuCinemaGlowHoldV8 2.2s ease-in-out infinite;
}

@keyframes yeuCinemaFlickerV8 {
  0%   { transform: scale(1.00); opacity: .52; }
  25%  { transform: scale(1.04); opacity: .80; }
  50%  { transform: scale(1.01); opacity: .58; }
  75%  { transform: scale(1.07); opacity: .93; }
  100% { transform: scale(1.00); opacity: .62; }
}

@keyframes yeuCinemaGlowHoldV8 {
  0%,100% { transform: scale(1); opacity: .22; }
  50%     { transform: scale(1.04); opacity: .40; }
}


/* ----------------------------------------------------------
   HEAT HAZE / SHIMMER
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-heat-haze {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 42%;
  height: 62%;
  transform: translateX(-50%);
  opacity: 0;
  border-radius: 40% 40% 50% 50%;
  background:
    radial-gradient(
      ellipse at 50% 78%,
      rgba(255, 215, 140, .18) 0%,
      rgba(255, 150, 70, .10) 35%,
      rgba(255, 255, 255, .03) 58%,
      transparent 72%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.045) 0px,
      rgba(255,255,255,.010) 12px,
      rgba(255,180,80,.03) 22px,
      rgba(255,255,255,.012) 34px
    );
  filter: blur(8px);
  mix-blend-mode: screen;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-burning
.linhmiu-heat-haze {
  opacity: .42;
  animation: yeuHeatHazeV8 .88s linear infinite;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoning
.linhmiu-heat-haze {
  opacity: .34;
  animation: yeuHeatHazeV8 .72s linear infinite;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoned
.linhmiu-heat-haze {
  opacity: .12;
  animation: yeuHeatHazeCalmV8 2.8s ease-in-out infinite;
}

@keyframes yeuHeatHazeV8 {
  0% {
    transform: translateX(-50%) skewX(-2deg) scaleX(1.00) scaleY(1.00);
  }
  25% {
    transform: translateX(-49%) skewX(3deg) scaleX(1.04) scaleY(1.06);
  }
  50% {
    transform: translateX(-51%) skewX(-4deg) scaleX(.97) scaleY(1.02);
  }
  75% {
    transform: translateX(-50%) skewX(2deg) scaleX(1.05) scaleY(1.08);
  }
  100% {
    transform: translateX(-50%) skewX(-2deg) scaleX(1.00) scaleY(1.00);
  }
}

@keyframes yeuHeatHazeCalmV8 {
  0%,100% { transform: translateX(-50%) skewX(-1deg) scaleX(1); }
  50%     { transform: translateX(-50%) skewX(1deg) scaleX(1.02); }
}


/* ----------------------------------------------------------
   EMBER COLLAPSE / GATHER INTO SPIRIT CAT
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-ember-cloud,
html body #root
.linh-face
.linhmiu-ember-cloud::before,
html body #root
.linh-face
.linhmiu-ember-cloud::after {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  content: "";
  background: rgba(255, 182, 60, .95);
  filter: blur(.3px);
}

html body #root
.linh-face
.linhmiu-ember-cloud {
  box-shadow:
    -54px  20px 0 1px rgba(255, 146, 22, .92),
    -46px -12px 0 0 rgba(255, 210, 84, .95),
    -33px  34px 0 1px rgba(255, 96, 0, .88),
    -25px -30px 0 0 rgba(255, 170, 50, .95),
    -12px   8px 0 1px rgba(255, 84, 0, .92),
      6px -20px 0 0 rgba(255, 210, 110, .95),
     22px  26px 0 1px rgba(255, 105, 0, .90),
     35px -14px 0 0 rgba(255, 180, 70, .95),
     48px  10px 0 1px rgba(255, 130, 18, .90),
     60px -28px 0 0 rgba(255, 205, 100, .94);
}

html body #root
.linh-face
.linhmiu-ember-cloud::before {
  box-shadow:
    -58px -40px 0 0 rgba(255, 120, 0, .88),
    -40px  -6px 0 1px rgba(255, 220, 92, .95),
    -20px -48px 0 0 rgba(255, 75, 0, .86),
      0px  18px 0 1px rgba(255, 160, 35, .92),
     18px -36px 0 0 rgba(255, 220, 140, .96),
     36px   4px 0 1px rgba(255, 88, 0, .90),
     56px -18px 0 0 rgba(255, 175, 42, .93);
}

html body #root
.linh-face
.linhmiu-ember-cloud::after {
  box-shadow:
    -50px  48px 0 1px rgba(255, 110, 0, .86),
    -26px  58px 0 0 rgba(255, 182, 44, .92),
      0px  42px 0 1px rgba(255, 230, 100, .94),
     28px  58px 0 0 rgba(255, 140, 0, .88),
     54px  46px 0 1px rgba(255, 92, 0, .84);
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoning
.linhmiu-ember-cloud {
  opacity: 1;
  animation: yeuEmberGatherV8 1.18s cubic-bezier(.15,.82,.23,1) forwards;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoning
.linhmiu-ember-cloud::before {
  opacity: 1;
  animation: yeuEmberGatherV8a 1.22s cubic-bezier(.15,.82,.23,1) forwards;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoning
.linhmiu-ember-cloud::after {
  opacity: 1;
  animation: yeuEmberGatherV8b 1.28s cubic-bezier(.15,.82,.23,1) forwards;
}

@keyframes yeuEmberGatherV8 {
  0% {
    opacity: 0;
    transform: translate(-50%, 8%) scale(.55) rotate(0deg);
    filter: blur(.4px);
  }
  10% {
    opacity: 1;
  }
  45% {
    opacity: .95;
    transform: translate(-50%, -12%) scale(.92) rotate(18deg);
  }
  78% {
    opacity: .88;
    transform: translate(-50%, -42%) scale(.58) rotate(42deg);
    filter: blur(.2px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -62%) scale(.12) rotate(78deg);
    filter: blur(1.2px);
  }
}

@keyframes yeuEmberGatherV8a {
  0% {
    opacity: 0;
    transform: translate(-50%, 14%) scale(.58) rotate(0deg);
  }
  12% {
    opacity: .95;
  }
  55% {
    opacity: .90;
    transform: translate(-50%, -18%) scale(.76) rotate(-24deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -58%) scale(.10) rotate(-66deg);
    filter: blur(1.4px);
  }
}

@keyframes yeuEmberGatherV8b {
  0% {
    opacity: 0;
    transform: translate(-50%, 18%) scale(.64) rotate(0deg);
  }
  8% {
    opacity: 1;
  }
  52% {
    opacity: .94;
    transform: translate(-50%, -10%) scale(.82) rotate(24deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -54%) scale(.16) rotate(92deg);
    filter: blur(1.5px);
  }
}


/* ----------------------------------------------------------
   SPIRIT CAT: slower, more dramatic materialization
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-spirit-cat.is-summoning {
  animation:
    yeuSpiritMaterializeCinemaV8
    1320ms
    cubic-bezier(.18,.84,.24,1)
    forwards !important;
}

html body #root
.linh-face
.linhmiu-spirit-cat.is-summoned {
  animation:
    yeuSpiritFloatCinemaV8
    4.2s
    ease-in-out
    infinite !important;
}

@keyframes yeuSpiritMaterializeCinemaV8 {
  0% {
    opacity: 0;
    top: 31%;
    transform: translate(-50%, 2%) scale(.10);
    filter:
      brightness(3.0)
      saturate(1.8)
      blur(10px)
      drop-shadow(0 0 34px rgba(255,130,0,1));
  }

  18% {
    opacity: .24;
  }

  40% {
    opacity: .72;
    top: 29%;
    transform: translate(-50%, -8%) scale(.42);
    filter:
      brightness(2.2)
      saturate(1.5)
      blur(4px)
      drop-shadow(0 0 42px rgba(255,105,0,.94));
  }

  72% {
    opacity: 1;
    top: 27%;
    transform: translate(-50%, -18%) scale(.98);
    filter:
      brightness(1.55)
      saturate(1.24)
      blur(0)
      drop-shadow(0 0 28px rgba(255,120,0,.90));
  }

  100% {
    opacity: 1;
    top: 26.5%;
    transform: translate(-50%, -18%) scale(1);
    filter:
      brightness(1.28)
      saturate(1.18)
      drop-shadow(0 0 16px rgba(255,150,0,.86))
      drop-shadow(0 0 36px rgba(255,70,0,.46));
  }
}

@keyframes yeuSpiritFloatCinemaV8 {
  0%,100% {
    top: 26.5%;
    transform: translate(-50%, -18%) scale(1);
  }
  50% {
    top: 25.2%;
    transform: translate(-50%, -18%) scale(1.022);
  }
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {
  html body #root
  .linh-face
  .linhmiu-spirit-cinema {
    width: 56%;
    height: 50%;
  }
}

@media (max-width: 600px) {
  html body #root
  .linh-face
  .linhmiu-spirit-cinema {
    width: 60%;
    height: 52%;
  }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html body #root
  .linh-face
  .linhmiu-light-flicker,
  html body #root
  .linh-face
  .linhmiu-heat-haze,
  html body #root
  .linh-face
  .linhmiu-ember-cloud,
  html body #root
  .linh-face
  .linhmiu-ember-cloud::before,
  html body #root
  .linh-face
  .linhmiu-ember-cloud::after,
  html body #root
  .linh-face
  .linhmiu-spirit-cat.is-summoning,
  html body #root
  .linh-face
  .linhmiu-spirit-cat.is-summoned {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* YEU_CINEMATIC_SUMMON_V8_END */


/* ==========================================================
   YEU CINEMATIC LIGHT SUBTLE V9
   Keep fire / cat glow, reduce scene illumination.
   ========================================================== */

html body #root
.linh-face
.linhmiu-light-flicker {
  inset: -2% -12% -2% -12%;

  background:
    radial-gradient(
      ellipse at 50% 24%,
      rgba(255, 192, 78, .20) 0%,
      rgba(255, 112, 0, .09) 24%,
      rgba(255, 40, 0, .035) 42%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 50% 48%,
      rgba(255, 115, 0, .045) 0%,
      rgba(255, 48, 0, .018) 28%,
      transparent 52%
    );

  filter: blur(12px);
}


/* Burning — visible flicker, but no huge flashlight effect */
html body #root
.linh-face
.linhmiu-spirit-cinema.phase-burning
.linhmiu-light-flicker {
  animation:
    yeuCinemaFlickerSoftV9
    145ms
    steps(2)
    infinite;
}


/* Summoning — slightly stronger than burning */
html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoning
.linhmiu-light-flicker {
  animation:
    yeuCinemaSummonGlowSoftV9
    125ms
    steps(2)
    infinite;
}


/* Cat resting — very faint ambient glow */
html body #root
.linh-face
.linhmiu-spirit-cinema.phase-summoned
.linhmiu-light-flicker {
  animation:
    yeuCinemaGlowHoldSoftV9
    2.8s
    ease-in-out
    infinite;
}


@keyframes yeuCinemaFlickerSoftV9 {
  0% {
    transform: scale(1);
    opacity: .12;
  }

  25% {
    transform: scale(1.025);
    opacity: .22;
  }

  50% {
    transform: scale(1.005);
    opacity: .14;
  }

  75% {
    transform: scale(1.035);
    opacity: .27;
  }

  100% {
    transform: scale(1);
    opacity: .15;
  }
}


@keyframes yeuCinemaSummonGlowSoftV9 {
  0% {
    transform: scale(1);
    opacity: .18;
  }

  30% {
    transform: scale(1.03);
    opacity: .30;
  }

  65% {
    transform: scale(1.015);
    opacity: .22;
  }

  100% {
    transform: scale(1.04);
    opacity: .34;
  }
}


@keyframes yeuCinemaGlowHoldSoftV9 {
  0%,
  100% {
    transform: scale(1);
    opacity: .07;
  }

  50% {
    transform: scale(1.02);
    opacity: .13;
  }
}

/* YEU_CINEMATIC_LIGHT_SUBTLE_V9_END */


/* ==========================================================
   YEU SPIRIT CAT INTERACTION LOOP V10
   Cat click -> dissolve -> talisman reforms
   ========================================================== */


/* ----------------------------------------------------------
   CLICKABLE ONLY AFTER FULL SUMMON
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-spirit-cat.is-summoned {
  pointer-events: auto !important;
  cursor: pointer;
  touch-action: manipulation;
}

html body #root
.linh-face
.linhmiu-spirit-cat.is-summoned:hover {
  filter:
    brightness(1.38)
    saturate(1.20)
    drop-shadow(
      0 0 18px
      rgba(255,150,0,.92)
    )
    drop-shadow(
      0 0 42px
      rgba(255,70,0,.48)
    );
}


/* ----------------------------------------------------------
   SPIRIT CAT DISSOLVE
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-spirit-cat.is-dismissing {
  pointer-events: none !important;

  animation:
    yeuSpiritDissolveV10
    900ms
    cubic-bezier(.32,.05,.72,1)
    forwards !important;
}


@keyframes yeuSpiritDissolveV10 {

  0% {
    opacity: 1;

    top: 26.5%;

    transform:
      translate(-50%, -18%)
      scale(1, 1);

    filter:
      brightness(1.28)
      saturate(1.18)
      blur(0)
      drop-shadow(
        0 0 16px
        rgba(255,150,0,.86)
      )
      drop-shadow(
        0 0 36px
        rgba(255,70,0,.46)
      );
  }


  18% {
    opacity: .96;

    top: 26.9%;

    transform:
      translate(-50%, -14%)
      scale(1.02, .97);

    filter:
      brightness(1.6)
      saturate(1.28)
      blur(1px)
      drop-shadow(
        0 0 22px
        rgba(255,145,0,.92)
      );
  }


  42% {
    opacity: .82;

    top: 27.8%;

    transform:
      translate(-50%, -7%)
      scale(.96, .82);

    filter:
      brightness(1.95)
      saturate(1.42)
      blur(4px)
      drop-shadow(
        0 0 28px
        rgba(255,120,0,.82)
      );
  }


  66% {
    opacity: .56;

    top: 29.2%;

    transform:
      translate(-50%, 2%)
      scale(.82, .58);

    filter:
      brightness(2.35)
      saturate(1.62)
      blur(8px)
      drop-shadow(
        0 0 24px
        rgba(255,95,0,.65)
      );
  }


  84% {
    opacity: .24;

    top: 30.6%;

    transform:
      translate(-50%, 12%)
      scale(.62, .32);

    filter:
      brightness(2.7)
      saturate(1.75)
      blur(13px);
  }


  100% {
    opacity: 0;

    top: 31.8%;

    transform:
      translate(-50%, 24%)
      scale(.38, .12);

    filter:
      brightness(3)
      saturate(2)
      blur(20px);
  }
}


/* ----------------------------------------------------------
   MIST / EMBER FADE WHILE CAT DISAPPEARS
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-dismissing {
  opacity: 1;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-dismissing
.linhmiu-heat-haze {
  opacity: .18;

  animation:
    yeuSpiritDismissMistV10
    900ms
    ease-out
    forwards;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-dismissing
.linhmiu-light-flicker {
  opacity: .16;

  animation:
    yeuSpiritDismissLightV10
    900ms
    ease-out
    forwards;
}


@keyframes yeuSpiritDismissMistV10 {

  0% {
    opacity: .22;

    transform:
      translateX(-50%)
      translateY(0%)
      scale(1, 1);
  }

  35% {
    opacity: .20;

    transform:
      translateX(-50%)
      translateY(8%)
      scale(1.10, 1.18);
  }

  68% {
    opacity: .13;

    transform:
      translateX(-50%)
      translateY(18%)
      scale(1.28, 1.42);
  }

  100% {
    opacity: 0;

    transform:
      translateX(-50%)
      translateY(30%)
      scale(1.55, 1.82);

    filter: blur(22px);
  }
}


@keyframes yeuSpiritDismissLightV10 {

  0% {
    opacity: .18;
    transform: scale(1);
  }

  45% {
    opacity: .12;
    transform: scale(1.12);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}


/* ----------------------------------------------------------
   TALISMAN REFORMS FROM ASH
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-forehead-charm.is-reforming {
  pointer-events: none;
}


html body #root
.linh-face
.linhmiu-forehead-charm.is-reforming
> img:first-child {

  opacity: 0;

  transform-origin:
    50% 50%;

  animation:
    yeuTalismanReformV10
    720ms
    cubic-bezier(.18,.82,.22,1)
    forwards !important;
}


@keyframes yeuTalismanReformV10 {

  0% {
    opacity: 0;

    transform:
      scale(.28)
      translateY(-10%)
      rotate(-3deg);

    filter:
      brightness(2.8)
      sepia(1)
      saturate(2)
      blur(9px)
      drop-shadow(
        0 0 22px
        rgba(255,105,0,.75)
      );
  }


  25% {
    opacity: .25;

    transform:
      scale(.48)
      translateY(-7%)
      rotate(2deg);

    filter:
      brightness(2.2)
      sepia(.8)
      saturate(1.7)
      blur(6px)
      drop-shadow(
        0 0 18px
        rgba(255,130,0,.72)
      );
  }


  52% {
    opacity: .62;

    transform:
      scale(.76)
      translateY(-3%)
      rotate(-1deg);

    filter:
      brightness(1.65)
      sepia(.45)
      saturate(1.35)
      blur(3px)
      drop-shadow(
        0 0 12px
        rgba(255,145,0,.55)
      );
  }


  78% {
    opacity: .92;

    transform:
      scale(1.035)
      translateY(0)
      rotate(.4deg);

    filter:
      brightness(1.18)
      sepia(.12)
      saturate(1.1)
      blur(.5px);
  }


  100% {
    opacity: 1;

    transform:
      scale(1)
      translateY(0)
      rotate(0deg);

    filter:
      brightness(1)
      sepia(0)
      saturate(1)
      blur(0)
      drop-shadow(
        0 2px 8px
        rgba(0,0,0,.55)
      );
  }
}


/* ----------------------------------------------------------
   REFORMING CANVAS/OFFSCREEN FIRE MUST STAY HIDDEN
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-forehead-charm.is-reforming
.linhmiu-charm-burn-canvas,

html body #root
.linh-face
.linhmiu-forehead-charm.is-reforming
.linhmiu-charm-fire-canvas {
  display: none !important;
}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-spirit-cat.is-summoned:focus-visible {
  outline:
    2px solid
    rgba(255,180,60,.85);

  outline-offset: 5px;

  border-radius: 42%;
}


@media (prefers-reduced-motion: reduce) {

  html body #root
  .linh-face
  .linhmiu-spirit-cat.is-dismissing,

  html body #root
  .linh-face
  .linhmiu-forehead-charm.is-reforming
  > img:first-child {

    animation-duration:
      120ms !important;
  }
}

/* YEU_SPIRIT_CAT_INTERACTION_LOOP_V10_END */


/* ==========================================================
   YEU REAL MELT + MIST DISMISS V11
   Make Spirit Cat slump, drip, melt downward, then fog out.
   ========================================================== */

/* ----------------------------------------------------------
   Override the dismissing cat animation
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-spirit-cat.is-dismissing {
  pointer-events: none !important;
  transform-origin: 50% 92%;

  animation:
    yeuSpiritRealMeltV11
    1080ms
    cubic-bezier(.22,.08,.58,1)
    forwards !important;
}


/* ----------------------------------------------------------
   Main realistic melt
   ---------------------------------------------------------- */

@keyframes yeuSpiritRealMeltV11 {

  0% {
    opacity: 1;
    top: 26.5%;

    transform:
      translate(-50%, -18%)
      scale(1, 1)
      skewX(0deg);

    clip-path:
      polygon(
        0% 0%,
        100% 0%,
        100% 100%,
        0% 100%
      );

    filter:
      brightness(1.28)
      saturate(1.18)
      blur(0)
      drop-shadow(0 0 16px rgba(255,150,0,.86))
      drop-shadow(0 0 36px rgba(255,70,0,.46));
  }

  16% {
    opacity: .98;
    top: 26.9%;

    transform:
      translate(-50%, -15%)
      scale(1.02, .99)
      skewX(-.8deg);

    clip-path:
      polygon(
        2% 0%,
        98% 0%,
        100% 86%,
        90% 96%,
        80% 100%,
        68% 95%,
        55% 100%,
        44% 94%,
        31% 100%,
        18% 95%,
        8% 100%,
        0% 88%
      );

    filter:
      brightness(1.45)
      saturate(1.28)
      blur(.6px)
      drop-shadow(0 0 20px rgba(255,145,0,.92))
      drop-shadow(0 0 42px rgba(255,70,0,.42));
  }

  34% {
    opacity: .94;
    top: 27.8%;

    transform:
      translate(-50%, -9%)
      scale(1.03, .93)
      skewX(1.2deg);

    clip-path:
      polygon(
        4% 0%,
        96% 0%,
        98% 74%,
        88% 90%,
        78% 102%,
        66% 93%,
        56% 108%,
        49% 116%,
        42% 106%,
        34% 94%,
        23% 104%,
        12% 94%,
        2% 78%
      );

    filter:
      brightness(1.78)
      saturate(1.40)
      blur(2px)
      drop-shadow(0 0 28px rgba(255,125,0,.86));
  }

  54% {
    opacity: .82;
    top: 29.0%;

    transform:
      translate(-50%, -1%)
      scale(1.00, .78)
      skewX(-1.8deg);

    clip-path:
      polygon(
        8% 0%,
        92% 0%,
        95% 54%,
        86% 68%,
        77% 86%,
        67% 104%,
        58% 118%,
        51% 128%,
        45% 118%,
        36% 102%,
        26% 86%,
        16% 69%,
        6% 56%
      );

    filter:
      brightness(2.05)
      saturate(1.55)
      blur(5px)
      drop-shadow(0 0 32px rgba(255,110,0,.76));
  }

  72% {
    opacity: .58;
    top: 30.3%;

    transform:
      translate(-50%, 8%)
      scale(.92, .56)
      skewX(2.4deg);

    clip-path:
      polygon(
        18% 0%,
        82% 0%,
        87% 34%,
        79% 47%,
        71% 66%,
        63% 90%,
        56% 118%,
        51% 140%,
        46% 120%,
        39% 92%,
        31% 68%,
        23% 48%,
        14% 36%
      );

    filter:
      brightness(2.45)
      saturate(1.72)
      blur(9px)
      drop-shadow(0 0 28px rgba(255,95,0,.65));
  }

  88% {
    opacity: .26;
    top: 31.3%;

    transform:
      translate(-50%, 16%)
      scale(.76, .28)
      skewX(-2.2deg);

    clip-path:
      polygon(
        30% 0%,
        70% 0%,
        75% 18%,
        68% 34%,
        62% 58%,
        57% 92%,
        52% 132%,
        49% 150%,
        45% 132%,
        40% 94%,
        34% 58%,
        27% 35%,
        22% 18%
      );

    filter:
      brightness(2.8)
      saturate(1.85)
      blur(14px);
  }

  100% {
    opacity: 0;
    top: 32.0%;

    transform:
      translate(-50%, 26%)
      scale(.60, .10)
      skewX(0deg);

    clip-path:
      polygon(
        42% 0%,
        58% 0%,
        62% 10%,
        58% 28%,
        55% 62%,
        52% 108%,
        50% 154%,
        48% 108%,
        45% 62%,
        42% 28%,
        38% 10%
      );

    filter:
      brightness(3)
      saturate(2)
      blur(22px);
  }
}


/* ----------------------------------------------------------
   Create a low mist pool under the melting cat
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-dismissing::before,
html body #root
.linh-face
.linhmiu-spirit-cinema.phase-dismissing::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 9;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-dismissing::before {
  top: 43%;
  width: 42%;
  height: 18%;
  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(255,170,55,.34) 0%,
      rgba(255,120,0,.20) 22%,
      rgba(255,85,0,.10) 38%,
      rgba(255,255,255,.04) 52%,
      transparent 72%
    ),
    radial-gradient(
      ellipse at 50% 62%,
      rgba(255,210,130,.20) 0%,
      rgba(255,150,60,.08) 32%,
      transparent 64%
    );

  filter: blur(12px);

  animation:
    yeuSpiritMistPoolV11
    1080ms
    ease-out
    forwards;
}

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-dismissing::after {
  top: 36%;
  width: 22%;
  height: 30%;
  border-radius: 50% 50% 58% 58%;

  background:
    radial-gradient(
      ellipse at 50% 20%,
      rgba(255,225,155,.22) 0%,
      rgba(255,160,45,.15) 20%,
      rgba(255,110,0,.09) 35%,
      transparent 62%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0px,
      rgba(255,220,160,.02) 10px,
      rgba(255,120,40,.035) 20px,
      rgba(255,255,255,.012) 32px
    );

  filter: blur(10px);

  animation:
    yeuSpiritMistStemV11
    1080ms
    ease-out
    forwards;
}


@keyframes yeuSpiritMistPoolV11 {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(.42, .18);
  }

  24% {
    opacity: .18;
    transform: translateX(-50%) scale(.68, .42);
  }

  52% {
    opacity: .28;
    transform: translateX(-50%) scale(1.02, .82);
  }

  78% {
    opacity: .19;
    transform: translateX(-50%) scale(1.28, 1.06);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.55, 1.22);
    filter: blur(22px);
  }
}

@keyframes yeuSpiritMistStemV11 {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-8%) scale(.55, .35);
  }

  30% {
    opacity: .24;
    transform: translateX(-50%) translateY(4%) scale(.84, .86);
  }

  62% {
    opacity: .18;
    transform: translateX(-50%) translateY(16%) scale(1.02, 1.22);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(26%) scale(1.18, 1.55);
    filter: blur(18px);
  }
}


/* ----------------------------------------------------------
   Make the existing heat haze follow the melt downward
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-dismissing
.linhmiu-heat-haze {
  opacity: .16;

  animation:
    yeuSpiritDismissHeatDownV11
    1080ms
    ease-out
    forwards !important;
}

@keyframes yeuSpiritDismissHeatDownV11 {
  0% {
    opacity: .16;
    transform: translateX(-50%) translateY(0%) scale(1,1);
  }

  45% {
    opacity: .15;
    transform: translateX(-50%) translateY(10%) scale(1.05,1.18);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(24%) scale(1.18,1.48);
    filter: blur(20px);
  }
}


/* ----------------------------------------------------------
   Tone the light flicker down while dismissing
   ---------------------------------------------------------- */

html body #root
.linh-face
.linhmiu-spirit-cinema.phase-dismissing
.linhmiu-light-flicker {
  opacity: .10;

  animation:
    yeuSpiritDismissLightDownV11
    1080ms
    ease-out
    forwards !important;
}

@keyframes yeuSpiritDismissLightDownV11 {
  0% {
    opacity: .12;
    transform: scale(1);
  }

  55% {
    opacity: .08;
    transform: scale(1.06);
  }

  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

/* YEU_REAL_MELT_MIST_DISMISS_V11_END */





/* YEU_LINHMIU_CROSS_MATCH_SCALE_V7_START
   LinhMiuCross ONLY — 65%.
*/
html body #root
.yeu-blackout-locked-main-v1
.linh-face
img.linh-miu-real-face[src*="LinhMiuCross.png"] {
  position: absolute !important;

  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;

  width: 65% !important;
  height: 65% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: 65% !important;
  max-height: 65% !important;

  transform: translate(-50%, -50%) !important;

  object-fit: contain !important;
  object-position: center center !important;

  opacity: 1 !important;
  visibility: visible !important;
}
/* YEU_LINHMIU_CROSS_MATCH_SCALE_V7_END */


/* YEU_OWNER_STAT_LABEL_VISIBILITY_V1 */
html body #root
.blackout-owner-page
.owner-page-stats
article
.owner-page-stat-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;

  color: #ffb879 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: normal !important;
}

html body #root
.blackout-owner-page
.owner-page-stats
article > strong {
  display: block !important;
  margin-top: 3px !important;
}
/* YEU_OWNER_STAT_LABEL_VISIBILITY_V1_END */


/* YEU_OWNER_MY_BUSINESSES_V1 */
.owner-page-my-businesses {
  padding: 18px;
  border: 1px solid rgba(255, 113, 30, 0.28);
  border-radius: 16px;
  background: rgba(35, 6, 1, 0.72);
}

.owner-page-my-businesses-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.owner-page-my-businesses-heading span {
  color: #ff9a55;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.owner-page-my-businesses-heading h3 {
  margin: 5px 0 0;
  color: #ffe0c7;
}

.owner-page-my-businesses-heading > strong {
  min-width: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 126, 47, 0.35);
  border-radius: 999px;
  color: #ffd0a8;
  text-align: center;
}

.owner-page-my-businesses-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.owner-page-my-businesses-grid article {
  padding: 15px;
  border: 1px solid rgba(255, 113, 30, 0.24);
  border-radius: 14px;
  background: rgba(48, 9, 2, 0.78);
}

.owner-page-my-business-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.owner-page-my-business-top small {
  color: #c98e6c;
}

.owner-page-my-business-top h3 {
  margin: 4px 0 0;
  color: #ffe0c7;
}

.owner-page-my-business-top b {
  font-size: 0.72rem;
  white-space: nowrap;
}

.owner-page-my-business-top b.verified {
  color: #86e899;
}

.owner-page-my-business-top b.pending {
  color: #ffb879;
}

.owner-page-my-business-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.owner-page-my-business-details div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 130, 40, 0.05);
}

.owner-page-my-business-details small {
  display: block;
  color: #b77e62;
  font-size: 0.67rem;
}

.owner-page-my-business-details strong {
  display: block;
  margin-top: 4px;
  color: #ffd9bb;
}

.owner-page-my-businesses-grid article > p {
  color: rgba(255, 222, 190, 0.72);
  line-height: 1.5;
}

.owner-page-my-businesses-grid button,
.owner-page-my-businesses-empty button {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 123, 43, 0.5);
  border-radius: 10px;
  background: rgba(110, 30, 5, 0.5);
  color: #ffd5b5;
  font-weight: 700;
  cursor: pointer;
}

.owner-page-my-businesses-empty {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px dashed rgba(255, 123, 43, 0.3);
  border-radius: 12px;
  text-align: center;
}

.owner-page-my-businesses-empty strong {
  color: #ffd9bb;
}

.owner-page-my-businesses-empty span {
  color: rgba(255, 222, 190, 0.66);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .owner-page-my-businesses-grid,
  .owner-page-my-business-details {
    grid-template-columns:
      minmax(0, 1fr);
  }
}
/* YEU_OWNER_MY_BUSINESSES_V1_END */


/* YEU_PARTNER_NETWORK_LIVE_V1 */

.blackout-partner-kit-page
> .partner-kit-network {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.partner-kit-stat-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffb879 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.partner-kit-network {
  padding: 18px;
  border: 1px solid rgba(255, 113, 30, 0.28);
  border-radius: 16px;
  background: rgba(35, 6, 1, 0.72);
}

.partner-kit-network-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.partner-kit-network-heading span {
  color: #ff9a55;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.partner-kit-network-heading h3 {
  margin: 5px 0 0;
  color: #ffe0c7;
}

.partner-kit-network-heading > strong {
  min-width: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 126, 47, 0.35);
  border-radius: 999px;
  color: #ffd0a8;
  text-align: center;
}

.partner-kit-network-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.partner-kit-network-grid article {
  padding: 15px;
  border: 1px solid rgba(255, 113, 30, 0.24);
  border-radius: 14px;
  background: rgba(48, 9, 2, 0.78);
}

.partner-kit-network-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.partner-kit-network-card-top small {
  color: #c98e6c;
}

.partner-kit-network-card-top h3 {
  margin: 4px 0 0;
  color: #ffe0c7;
}

.partner-kit-network-card-top b {
  color: #86e899;
  font-size: 0.72rem;
  white-space: nowrap;
}

.partner-kit-network-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.partner-kit-network-details div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 130, 40, 0.05);
}

.partner-kit-network-details small {
  display: block;
  color: #b77e62;
  font-size: 0.67rem;
}

.partner-kit-network-details strong {
  display: block;
  margin-top: 4px;
  color: #ffd9bb;
}

.partner-kit-network-grid article > p {
  color: rgba(255, 222, 190, 0.72);
  line-height: 1.5;
}

.partner-kit-network-grid button,
.partner-kit-network-empty button {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 123, 43, 0.5);
  border-radius: 10px;
  background: rgba(110, 30, 5, 0.5);
  color: #ffd5b5;
  font-weight: 700;
  cursor: pointer;
}

.partner-kit-network-empty {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px dashed rgba(255, 123, 43, 0.3);
  border-radius: 12px;
  text-align: center;
}

.partner-kit-network-empty strong {
  color: #ffd9bb;
}

.partner-kit-network-empty span {
  color: rgba(255, 222, 190, 0.66);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .partner-kit-network-grid,
  .partner-kit-network-details {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

/* YEU_PARTNER_NETWORK_LIVE_V1_END */


/* YEU_PARTNER_STAT_LABEL_VISIBILITY_V2_START */
html body #root
.blackout-partner-kit-page
.partner-kit-stats
article
.partner-kit-stat-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 1em !important;

  margin: 0 0 3px 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  color: #ffb879 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: normal !important;
}

html body #root
.blackout-partner-kit-page
.partner-kit-stats
article > strong {
  display: block !important;
  position: static !important;
  margin-top: 2px !important;
}
/* YEU_PARTNER_STAT_LABEL_VISIBILITY_V2_END */


/* YEU_CREATORS_LIVE_DASHBOARD_V1_START */

html body #root
.blackout-creators-page
.creators-page-stats
article
.creators-page-stat-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;

  color: #ffb879 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: normal !important;
}

html body #root
.blackout-creators-page
.creators-page-stats
article > strong {
  display: block !important;
  position: static !important;
  margin-top: 3px !important;
}

.blackout-creators-page
> .creators-page-live-campaigns {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.creators-page-live-campaigns {
  padding: 18px;
  border: 1px solid rgba(255, 113, 30, 0.28);
  border-radius: 16px;
  background: rgba(35, 6, 1, 0.72);
}

.creators-page-live-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.creators-page-live-heading span {
  color: #ff9a55;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.creators-page-live-heading h3 {
  margin: 5px 0 0;
  color: #ffe0c7;
}

.creators-page-live-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creators-page-live-heading-actions strong {
  min-width: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 126, 47, 0.35);
  border-radius: 999px;
  color: #ffd0a8;
  text-align: center;
}

.creators-page-live-heading-actions button,
.creators-page-live-grid button,
.creators-page-live-empty button {
  padding: 9px 13px;
  border: 1px solid rgba(255, 123, 43, 0.5);
  border-radius: 10px;
  background: rgba(110, 30, 5, 0.5);
  color: #ffd5b5;
  font-weight: 700;
  cursor: pointer;
}

.creators-page-live-heading-actions button:disabled {
  opacity: 0.55;
  cursor: default;
}

.creators-page-live-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creators-page-live-grid article {
  padding: 15px;
  border: 1px solid rgba(255, 113, 30, 0.24);
  border-radius: 14px;
  background: rgba(48, 9, 2, 0.78);
}

.creators-page-live-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.creators-page-live-card-top small {
  color: #c98e6c;
}

.creators-page-live-card-top h3 {
  margin: 4px 0 0;
  color: #ffe0c7;
}

.creators-page-live-card-top b {
  font-size: 0.72rem;
  white-space: nowrap;
}

.creators-page-live-card-top b.claimable {
  color: #86e899;
}

.creators-page-live-card-top b.review {
  color: #ffb879;
}

.creators-page-live-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.creators-page-live-details > div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 130, 40, 0.05);
}

.creators-page-live-details small {
  display: block;
  color: #b77e62;
  font-size: 0.67rem;
}

.creators-page-live-details strong {
  display: block;
  margin-top: 4px;
  color: #ffd9bb;
}

.creators-page-live-grid article > button {
  width: 100%;
}

.creators-page-live-empty {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px dashed rgba(255, 123, 43, 0.3);
  border-radius: 12px;
  text-align: center;
}

.creators-page-live-empty strong {
  color: #ffd9bb;
}

.creators-page-live-empty span {
  color: rgba(255, 222, 190, 0.66);
  line-height: 1.5;
}

.creators-page-live-empty button {
  width: 100%;
  max-width: 420px;
  justify-self: center;
}

@media (max-width: 900px) {
  .creators-page-live-grid,
  .creators-page-live-details {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .creators-page-live-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* YEU_CREATORS_LIVE_DASHBOARD_V1_END */


/* YEU_CAMPAIGNS_LIVE_DATA_V1_START */

html body #root
.blackout-campaigns-page
.campaigns-page-stats
article
.campaigns-page-stat-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;

  color: #ffb879 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

html body #root
.blackout-campaigns-page
.campaigns-page-stats
article > strong {
  display: block !important;
  position: static !important;
  margin-top: 3px !important;
}

.campaigns-page-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.campaigns-page-heading-actions p {
  margin: 0;
}

.campaigns-page-heading-actions button {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid rgba(255, 123, 43, 0.5);
  border-radius: 10px;
  background: rgba(110, 30, 5, 0.5);
  color: #ffd5b5;
  font-weight: 700;
  cursor: pointer;
}

.campaigns-page-heading-actions button:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (max-width: 900px) {
  .campaigns-page-heading-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .campaigns-page-heading-actions button {
    width: 100%;
  }
}

/* YEU_CAMPAIGNS_LIVE_DATA_V1_END */


/* YEU_STATUS_PAGE_LIVE_V1_START */

.blackout-status-page {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.blackout-status-page
> * {
  min-width: 0;
  box-sizing: border-box;
}

.status-page-hero,
.status-page-health,
.status-page-rules,
.status-page-data,
.status-page-daily,
.status-page-footer {
  padding: 18px;
  border: 1px solid rgba(255, 113, 30, 0.28);
  border-radius: 16px;
  background: rgba(35, 6, 1, 0.75);
}

.status-page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.status-page-badge,
.status-page-section-heading span,
.status-page-daily > div:first-child > span {
  color: #ff9a55;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.status-page-hero h3,
.status-page-section-heading h3 {
  margin: 5px 0;
  color: #ffe0c7;
}

.status-page-hero p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 222, 190, 0.67);
  line-height: 1.5;
}

.status-page-overall {
  min-width: 205px;
  padding: 14px;
  border: 1px solid rgba(255, 127, 48, 0.32);
  border-radius: 13px;
  text-align: center;
  background: rgba(60, 12, 2, 0.72);
}

.status-page-overall small {
  display: block;
  color: #c98e6c;
}

.status-page-overall strong {
  display: block;
  margin: 5px 0;
  color: #ffd8b8;
  font-size: 1.12rem;
}

.status-page-overall.healthy strong {
  color: #86e899;
}

.status-page-overall.partial strong {
  color: #ffbf78;
}

.status-page-overall.offline strong {
  color: #ff8e7e;
}

.status-page-overall span {
  color: rgba(255, 222, 190, 0.58);
  font-size: 0.68rem;
}

.status-page-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.status-page-stats article {
  padding: 14px;
  border: 1px solid rgba(255, 113, 30, 0.25);
  border-radius: 12px;
  background: rgba(43, 8, 1, 0.78);
  text-align: center;
}

html body #root
.blackout-status-page
.status-page-stats
.status-page-stat-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffb879 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.status-page-stats strong {
  display: block;
  margin-top: 5px;
  color: #ffe0c7;
  font-size: 1rem;
}

.status-page-stats small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 222, 190, 0.55);
  font-size: 0.65rem;
  line-height: 1.4;
}

.status-page-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.status-page-section-heading button,
.status-page-daily button,
.status-page-footer button {
  padding: 9px 14px;
  border: 1px solid rgba(255, 123, 43, 0.5);
  border-radius: 10px;
  background: rgba(110, 30, 5, 0.5);
  color: #ffd5b5;
  font-weight: 700;
  cursor: pointer;
}

.status-page-section-heading button:disabled {
  opacity: 0.55;
  cursor: default;
}

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

.status-page-health-grid article {
  padding: 13px;
  border: 1px solid rgba(255, 113, 30, 0.2);
  border-radius: 12px;
  background: rgba(53, 10, 2, 0.66);
}

.status-page-health-grid article > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.status-page-health-grid span {
  color: #ffb879;
  font-weight: 700;
}

.status-page-health-grid b {
  font-size: 0.67rem;
}

.status-page-health-grid b.ok {
  color: #86e899;
}

.status-page-health-grid b.bad {
  color: #ff947e;
}

.status-page-health-grid strong {
  display: block;
  margin-top: 12px;
  color: #ffe0c7;
}

.status-page-health-grid small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 222, 190, 0.56);
  line-height: 1.4;
}

.status-page-rules-grid,
.status-page-data-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.status-page-rules-grid article,
.status-page-data-grid article {
  padding: 13px;
  border: 1px solid rgba(255, 113, 30, 0.2);
  border-radius: 11px;
  background: rgba(52, 9, 2, 0.62);
}

.status-page-rules-grid small,
.status-page-data-grid span {
  display: block;
  color: #c98e6c;
}

.status-page-rules-grid strong,
.status-page-data-grid strong {
  display: block;
  margin-top: 6px;
  color: #ffe0c7;
}

.status-page-data-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.status-page-daily {
  display: grid;
  gap: 12px;
}

.status-page-daily strong {
  display: block;
  margin-top: 6px;
  color: #ffe0c7;
}

.status-page-daily small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 222, 190, 0.6);
}

.status-page-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 130, 40, 0.11);
}

.status-page-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ff7d2a;
}

.status-page-daily button {
  width: 100%;
}

.status-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.status-page-footer strong {
  display: block;
  color: #ffd9bb;
}

.status-page-footer span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 222, 190, 0.58);
  line-height: 1.4;
}

.status-page-notice {
  padding: 11px 14px;
  border: 1px solid rgba(255, 123, 43, 0.26);
  border-radius: 10px;
  color: #ffc89d;
  background: rgba(60, 12, 2, 0.72);
  text-align: center;
}

@media (max-width: 900px) {
  .status-page-stats,
  .status-page-health-grid,
  .status-page-rules-grid,
  .status-page-data-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .status-page-hero,
  .status-page-footer,
  .status-page-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .status-page-overall {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .status-page-stats,
  .status-page-health-grid,
  .status-page-rules-grid,
  .status-page-data-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

/* YEU_STATUS_PAGE_LIVE_V1_END */


/* YEU_STATUS_LABEL_VISIBILITY_V2_START */

html body #root
.blackout-status-page
.status-page-rules-grid
.status-page-rule-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;

  width: auto !important;
  height: auto !important;
  min-height: 1em !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  color: #ffb879 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

html body #root
.blackout-status-page
.status-page-rules-grid
article > strong {
  display: block !important;
  position: static !important;
  margin-top: 7px !important;
}

html body #root
.blackout-status-page
.status-page-daily
.status-page-daily-progress-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;

  margin-top: 5px !important;

  color: rgba(255, 222, 190, 0.68) !important;
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* YEU_STATUS_LABEL_VISIBILITY_V2_END */


/* YEU_ADMIN_LIVE_REVIEW_V1_START */

html body #root
.blackout-admin-page
.admin-page-stats
article
.admin-page-stat-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;

  color: #ffb879 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

html body #root
.blackout-admin-page
.admin-page-stats
article > strong {
  display: block !important;
  position: static !important;
  margin-top: 4px !important;
}

.blackout-admin-page
> .admin-page-live-review {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.admin-page-live-review {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 113, 30, 0.28);
  border-radius: 16px;
  background: rgba(35, 6, 1, 0.74);
}

.admin-page-live-heading,
.admin-page-pending-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-page-live-heading span,
.admin-page-pending-heading span {
  color: #ff9a55;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.admin-page-live-heading h3,
.admin-page-pending-heading h3 {
  margin: 5px 0 0;
  color: #ffe0c7;
}

.admin-page-live-heading button,
.admin-page-pending-grid button {
  padding: 9px 14px;
  border: 1px solid rgba(255, 123, 43, 0.5);
  border-radius: 10px;
  background: rgba(110, 30, 5, 0.5);
  color: #ffd5b5;
  font-weight: 700;
  cursor: pointer;
}

.admin-page-live-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-page-live-summary article {
  padding: 13px;
  border: 1px solid rgba(255, 113, 30, 0.22);
  border-radius: 11px;
  background: rgba(52, 9, 2, 0.65);
  text-align: center;
}

.admin-page-live-summary small {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffb879 !important;
  font-weight: 700 !important;
}

.admin-page-live-summary strong {
  display: block;
  margin-top: 6px;
  color: #ffe0c7;
}

.admin-page-live-summary span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 222, 190, 0.57);
  font-size: 0.67rem;
  line-height: 1.4;
}

.admin-page-pending-review {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 113, 30, 0.18);
}

.admin-page-pending-heading > strong {
  min-width: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 126, 47, 0.34);
  border-radius: 999px;
  color: #ffd0a8;
  text-align: center;
}

.admin-page-pending-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.admin-page-pending-grid article {
  padding: 15px;
  border: 1px solid rgba(255, 113, 30, 0.24);
  border-radius: 13px;
  background: rgba(48, 9, 2, 0.76);
}

.admin-page-pending-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.admin-page-pending-top small {
  color: #c98e6c;
}

.admin-page-pending-top h3 {
  margin: 4px 0 0;
  color: #ffe0c7;
}

.admin-page-pending-top b {
  color: #ffb879;
  font-size: 0.7rem;
}

.admin-page-pending-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 13px 0;
}

.admin-page-pending-details > div {
  padding: 9px;
  border-radius: 9px;
  background: rgba(255, 130, 40, 0.05);
}

.admin-page-pending-details small {
  display: block;
  color: #b77e62;
}

.admin-page-pending-details strong {
  display: block;
  margin-top: 4px;
  color: #ffd9bb;
}

.admin-page-pending-grid p {
  color: rgba(255, 222, 190, 0.62);
  line-height: 1.45;
}

.admin-page-pending-grid button {
  width: 100%;
}

.admin-page-pending-empty,
.admin-page-pending-warning {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed rgba(255, 123, 43, 0.28);
  border-radius: 10px;
  color: rgba(255, 222, 190, 0.66);
  text-align: center;
}

.admin-page-pending-warning {
  color: #ffc08a;
}

@media (max-width: 900px) {
  .admin-page-live-summary,
  .admin-page-pending-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .admin-page-live-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .admin-page-live-summary,
  .admin-page-pending-grid,
  .admin-page-pending-details {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

/* YEU_ADMIN_LIVE_REVIEW_V1_END */


/* YEU_SHOP_LIVE_MARKET_V1_START */

html body #root
.blackout-shop-page
.shop-page-stats
.shop-page-stat-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;

  color: #ffb879 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.blackout-shop-page
> .shop-page-live-market {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.shop-page-live-market {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 113, 30, 0.28);
  border-radius: 16px;
  background: rgba(35, 6, 1, 0.74);
}

.shop-page-live-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.shop-page-live-heading span {
  color: #ff9a55;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.shop-page-live-heading h3 {
  margin: 5px 0 0;
  color: #ffe0c7;
}

.shop-page-live-heading button {
  padding: 9px 14px;
  border: 1px solid rgba(255, 123, 43, 0.5);
  border-radius: 10px;
  background: rgba(110, 30, 5, 0.5);
  color: #ffd5b5;
  font-weight: 700;
  cursor: pointer;
}

.shop-page-live-heading button:disabled {
  opacity: 0.55;
  cursor: default;
}

.shop-page-live-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.shop-page-live-grid article {
  padding: 13px;
  border: 1px solid rgba(255, 113, 30, 0.22);
  border-radius: 11px;
  background: rgba(52, 9, 2, 0.65);
  text-align: center;
}

.shop-page-live-grid small {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffb879 !important;
  font-weight: 700 !important;
}

.shop-page-live-grid strong {
  display: block;
  margin-top: 6px;
  color: #ffe0c7;
}

.shop-page-live-grid span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 222, 190, 0.57);
  font-size: 0.67rem;
}

.shop-page-backend-listings {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shop-page-backend-listings article {
  padding: 14px;
  border: 1px solid rgba(255, 113, 30, 0.24);
  border-radius: 12px;
  background: rgba(48, 9, 2, 0.76);
}

.shop-page-backend-listings small {
  color: #ff9a55;
}

.shop-page-backend-listings h3 {
  margin: 5px 0 0;
  color: #ffe0c7;
}

.shop-page-backend-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.shop-page-backend-details span {
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 130, 40, 0.05);
  color: #ffd0aa;
  text-align: center;
}

.shop-page-backend-listings p {
  color: rgba(255, 222, 190, 0.6);
}

.shop-page-live-empty,
.shop-page-live-notice {
  padding: 12px;
  border: 1px dashed rgba(255, 123, 43, 0.28);
  border-radius: 10px;
  color: rgba(255, 222, 190, 0.68);
  text-align: center;
}

.shop-page-live-empty strong {
  display: block;
  color: #ffd9bb;
}

.shop-page-live-empty span {
  display: block;
  margin-top: 5px;
}

.shop-page-live-notice {
  color: #ffc08a;
}

@media (max-width: 900px) {
  .shop-page-live-grid,
  .shop-page-backend-listings {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .shop-page-live-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .shop-page-live-grid,
  .shop-page-backend-listings,
  .shop-page-backend-details {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

/* YEU_SHOP_LIVE_MARKET_V1_END */

/* YEU_TRADE_LAB_LIVE_READONLY_V1_START */

.blackout-trade-lab-page {
  width: 100%;
  display: grid;
  gap: 16px;
  color: #f6f6f6;
}

.trade-lab-hero,
.trade-lab-performance,
.trade-lab-position,
.trade-lab-activity,
.trade-lab-readonly {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.015)
    );
  border-radius: 18px;
  padding: 18px;
}

.trade-lab-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(180px, 0.34fr);
  gap: 18px;
  align-items: center;
}

.trade-lab-badge,
.trade-lab-section-title span,
.trade-lab-market-grid span,
.trade-lab-performance-grid span,
.trade-lab-position span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.trade-lab-hero h3,
.trade-lab-section-title h3 {
  margin: 6px 0;
}

.trade-lab-hero p {
  max-width: 760px;
  margin: 0;
  opacity: 0.75;
  line-height: 1.6;
}

.trade-lab-bot-status {
  display: grid;
  gap: 5px;
  min-height: 105px;
  align-content: center;
  padding: 16px;
  border-radius: 15px;
  background:
    rgba(0, 0, 0, 0.38);
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
}

.trade-lab-bot-status small,
.trade-lab-bot-status span {
  opacity: 0.62;
}

.trade-lab-bot-status strong {
  font-size: 1.45rem;
}

.trade-lab-bot-status.running strong {
  color: #89f7a1;
}

.trade-lab-bot-status.offline strong {
  color: #ff8d8d;
}

.trade-lab-market-grid,
.trade-lab-performance-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.trade-lab-market-grid article,
.trade-lab-performance-grid article {
  min-height: 105px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-radius: 15px;
  padding: 15px;
  background:
    rgba(0, 0, 0, 0.36);
  border:
    1px solid
    rgba(255, 255, 255, 0.09);
}

.trade-lab-market-grid strong,
.trade-lab-performance-grid strong {
  font-size: 1.28rem;
}

.trade-lab-market-grid small {
  opacity: 0.58;
}

.trade-lab-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.trade-lab-section-title button {
  appearance: none;
  border: 1px solid
    rgba(255, 255, 255, 0.16);
  background:
    rgba(255, 255, 255, 0.06);
  color: inherit;
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
}

.trade-lab-section-title button:disabled {
  opacity: 0.5;
  cursor: default;
}

.trade-lab-position {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.trade-lab-position > div {
  display: grid;
  gap: 8px;
  padding: 13px;
  border-radius: 14px;
  background:
    rgba(0, 0, 0, 0.3);
}

.trade-lab-position strong {
  font-size: 1.18rem;
}

.trade-lab-position small {
  opacity: 0.63;
}

.trade-lab-log {
  max-height: 290px;
  overflow: auto;
  border-radius: 14px;
  padding: 12px 14px;
  background: #050505;
  border:
    1px solid
    rgba(255, 255, 255, 0.08);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}

.trade-lab-log p {
  margin: 0;
  padding: 6px 0;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.045);
  font-size: 0.82rem;
  opacity: 0.84;
}

.trade-lab-log p:last-child {
  border-bottom: 0;
}

.trade-lab-readonly {
  display: grid;
  gap: 8px;
  border-color:
    rgba(255, 210, 100, 0.2);
}

.trade-lab-readonly strong {
  letter-spacing: 0.14em;
  font-size: 0.77rem;
}

.trade-lab-readonly span {
  line-height: 1.55;
}

.trade-lab-readonly small,
.trade-lab-notice {
  opacity: 0.62;
  line-height: 1.5;
}

.trade-lab-notice {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background:
    rgba(255, 90, 90, 0.08);
  border:
    1px solid
    rgba(255, 90, 90, 0.18);
}

@media (max-width: 900px) {
  .trade-lab-hero,
  .trade-lab-position {
    grid-template-columns: 1fr;
  }

  .trade-lab-market-grid,
  .trade-lab-performance-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .trade-lab-market-grid,
  .trade-lab-performance-grid {
    grid-template-columns: 1fr;
  }
}

/* YEU_TRADE_LAB_LIVE_READONLY_V1_END */



/* YEU_TRADE_LAB_AB_V2_START */

.trade-lab-ab-v2 {
  display: grid;
  gap: 16px;
  border:
    1px solid
    rgba(255, 210, 100, 0.18);
  background:
    linear-gradient(
      145deg,
      rgba(255, 190, 70, 0.055),
      rgba(255, 255, 255, 0.015)
    );
  border-radius: 18px;
  padding: 18px;
}

.trade-lab-ab-review {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.trade-lab-ab-review small,
.trade-lab-ab-card span,
.trade-lab-ab-verdict span {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.64;
}

.trade-lab-ab-review strong {
  font-size: 1.2rem;
}

.trade-lab-ab-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.trade-lab-ab-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background:
    rgba(0, 0, 0, 0.38);
  border:
    1px solid
    rgba(255, 255, 255, 0.09);
}

.trade-lab-ab-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.trade-lab-ab-card-head > div {
  display: grid;
  gap: 6px;
}

.trade-lab-ab-card-head strong {
  font-size: 1.55rem;
}

.trade-lab-ab-card-head small {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.trade-lab-ab-card-head small.running {
  color: #89f7a1;
  border:
    1px solid
    rgba(137, 247, 161, 0.24);
}

.trade-lab-ab-card-head small.offline {
  color: #ff8d8d;
  border:
    1px solid
    rgba(255, 141, 141, 0.24);
}

.trade-lab-ab-card p {
  margin: 0;
  opacity: 0.68;
  font-size: 0.82rem;
}

.trade-lab-ab-stats {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.trade-lab-ab-stats > div {
  display: grid;
  gap: 5px;
  min-height: 68px;
  align-content: center;
  padding: 9px;
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.025);
}

.trade-lab-ab-stats strong {
  font-size: 0.94rem;
}

.trade-lab-ab-verdict {
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  border-radius: 14px;
  background:
    rgba(0, 0, 0, 0.34);
  border:
    1px solid
    rgba(255, 210, 100, 0.14);
}

.trade-lab-ab-verdict strong {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.trade-lab-ab-verdict small {
  opacity: 0.66;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .trade-lab-ab-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .trade-lab-ab-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .trade-lab-ab-review {
    justify-items: start;
  }
}


/* YEU_TRADE_LAB_WHY_V21_START */

.trade-lab-ab-why {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.34);
  border:
    1px solid
    rgba(255, 210, 100, 0.14);
}

.trade-lab-ab-why-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.trade-lab-ab-why-head > div {
  display: grid;
  gap: 6px;
}

.trade-lab-ab-why-head span,
.trade-lab-ab-why-grid span,
.trade-lab-ab-why-reasons > span {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.64;
}

.trade-lab-ab-why-head strong {
  font-size: 1.05rem;
}

.trade-lab-ab-why-head small {
  max-width: 300px;
  text-align: right;
  opacity: 0.62;
  line-height: 1.45;
}

.trade-lab-ab-why-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.trade-lab-ab-why-grid > div {
  display: grid;
  gap: 5px;
  min-height: 66px;
  align-content: center;
  padding: 9px;
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.025);
}

.trade-lab-ab-why-grid strong {
  font-size: 0.9rem;
}

.trade-lab-ab-why-reasons {
  display: grid;
  gap: 7px;
}

.trade-lab-ab-why-reasons ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 5px;
}

.trade-lab-ab-why-reasons li,
.trade-lab-ab-why-reasons p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.72;
}

@media (max-width: 700px) {
  .trade-lab-ab-why-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .trade-lab-ab-why-head {
    display: grid;
  }

  .trade-lab-ab-why-head small {
    text-align: left;
  }
}

/* YEU_TRADE_LAB_WHY_V21_END */


/* YEU_TRADE_LAB_AB_V2_END */

/* YEU_TRADE_LAB_TALISMAN_SCALE_V2_START */
@media (min-width: 651px) {
  html body #root
  .yeu-blackout-locked-main-v1
  .talisman-column
  .talisman-img-wrap
  img[src*="talisman_trade_lab.png"] {
    transform: scale(0.90) !important;
    transform-origin: 50% 50% !important;
  }
}
/* YEU_TRADE_LAB_TALISMAN_SCALE_V2_END */


/* YEU_TALISMAN_GLOBAL_RED_TINT_V3_START */
html body #root
.yeu-blackout-locked-main-v1
.talisman-column
.talisman-img-wrap
img {
  filter:
    brightness(1.04)
    saturate(1.24)
    hue-rotate(-14deg)
    contrast(1.04) !important;
}
/* YEU_TALISMAN_GLOBAL_RED_TINT_V3_END */


/* YEU_FOREHEAD_CHARM_FORCE_DOWN_V6_START */
html body #root
.yeu-blackout-locked-main-v1
.linh-face
.linhmiu-forehead-charm {
  top: 31.5% !important;
  transform: translate(-50%, -4px) !important;
}
/* YEU_FOREHEAD_CHARM_FORCE_DOWN_V6_END */






/* ============================================================
   YEU_ORBIT_WHEEL_V1_START

   Desktop experiment only.
   Linh Miu face geometry is untouched.
   Existing mobile side navigation remains intact.
   ============================================================ */

@media (min-width: 651px) {

  /*
   * Hide the original two desktop rails.
   * They remain in JSX and remain available on mobile.
   */
  html body #root
  .yeu-blackout-locked-main-v1
  > .talisman-left,

  html body #root
  .yeu-blackout-locked-main-v1
  > .talisman-right {
    display: none !important;
  }


  /*
   * Orbit center matches Linh Miu's locked desktop stage:
   * left 50vw / top 50.5vh.
   */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-radius:
      min(43vmin, 465px);

    position: fixed !important;

    left: 50vw !important;
    right: auto !important;

    top: 50.5vh !important;
    bottom: auto !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: visible !important;

    z-index: 1210 !important;

    touch-action: none !important;
    user-select: none !important;

    cursor: grab !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column:active {
    cursor: grabbing !important;
  }


  /*
   * One talisman = one point around the wheel.
   *
   * Rotate to angle
   * -> move outward
   * -> rotate back so artwork/label stays upright.
   */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item {
    --yeu-orbit-scale: 1;

    position: absolute !important;

    left: 0 !important;
    right: auto !important;

    top: 0 !important;
    bottom: auto !important;

    width: 112px !important;
    height: 108px !important;
    min-height: 0 !important;

    margin-left: -56px !important;
    margin-top: -54px !important;

    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    opacity: .82 !important;

    transform:
      rotate(var(--yeu-orbit-angle))
      translateX(var(--yeu-orbit-radius))
      rotate(var(--yeu-orbit-counter-angle))
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(var(--yeu-orbit-forehead-zoom, 1))
      scale(var(--yeu-orbit-scale))
      !important;

    transform-origin: 56px 54px !important;

    transition:
      opacity 140ms ease,
      filter 140ms ease !important;

    touch-action: none !important;
    user-select: none !important;

    cursor: pointer !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item:hover {
    --yeu-orbit-scale: 1.06;

    opacity: 1 !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item.active {
    --yeu-orbit-scale: 1.08;

    opacity: 1 !important;
  }


  /*
   * Keep current approved talisman artwork behavior.
   * The orbit nav intentionally also carries
   * .talisman-column so existing approved icon sizing,
   * Trade Lab sizing, Kitty Studio sizing and tinting
   * continue to apply.
   */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item
  > span {
    position: relative !important;

    display: block !important;

    width: 112px !important;

    margin-top: 5px !important;

    text-align: center !important;

    line-height: 1.05 !important;

    pointer-events: none !important;

    z-index: 20 !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .talisman-img-wrap {
    pointer-events: none !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .talisman-img-wrap img {
    user-select: none !important;

    -webkit-user-drag: none !important;

    pointer-events: none !important;
  }


  /*
   * Very faint wheel guide.
   * Visual only; no pointer interaction.
   */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav::before {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width:
      calc(var(--yeu-orbit-radius) * 2)
      !important;

    height:
      calc(var(--yeu-orbit-radius) * 2)
      !important;

    transform:
      translate(-50%, -50%)
      !important;

    border:
      1px solid rgba(255, 48, 0, .10)
      !important;

    border-radius: 999px !important;

    box-shadow:
      0 0 26px rgba(255, 40, 0, .035),
      inset 0 0 26px rgba(255, 40, 0, .025)
      !important;

    pointer-events: none !important;

    z-index: -1 !important;
  }
}


/*
 * V1 deliberately leaves phone navigation unchanged.
 */
@media (max-width: 650px) {
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav {
    display: none !important;
  }
}

/* YEU_ORBIT_WHEEL_V1_END */


/* YEU_ORBIT_WHEEL_V1_1_TUNE_START */

/*
 * Full desktop:
 * move the navigation ring slightly farther away from
 * Linh Miu so SEND / RECEIVE have more breathing room.
 */
@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-radius:
      min(46vmin, 500px) !important;
  }
}


/*
 * Medium-height desktop / split-screen.
 * Keep the wheel usable instead of letting 17 large
 * talismans pile on top of one another.
 */
@media (min-width: 651px) and (max-height: 760px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-radius:
      min(44vmin, 360px) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item {
    width: 88px !important;
    height: 84px !important;

    margin-left: -44px !important;
    margin-top: -42px !important;

    transform-origin:
      44px 42px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item
  .talisman-img-wrap {
    width: 78px !important;
    height: 78px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item
  > span {
    width: 88px !important;

    margin-top: 2px !important;

    font-size: 10px !important;
  }
}


/*
 * Very short desktop windows.
 */
@media (min-width: 651px) and (max-height: 560px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-radius:
      min(43vmin, 285px) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item {
    width: 70px !important;
    height: 68px !important;

    margin-left: -35px !important;
    margin-top: -34px !important;

    transform-origin:
      35px 34px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item
  .talisman-img-wrap {
    width: 62px !important;
    height: 62px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item
  > span {
    width: 70px !important;

    margin-top: 1px !important;

    font-size: 8px !important;
  }
}

/* YEU_ORBIT_WHEEL_V1_1_TUNE_END */



/* ============================================================
   YEU_ORBIT_WHEEL_V1_2_TUNE_START

   Scale the WHOLE talisman rather than only its layout box.
   Also combines with JS axis scaling to protect fixed
   SEND / RECEIVE controls.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-responsive-scale: 1;
  }
}


/* Split / shorter desktop */
@media (min-width: 651px) and (max-height: 760px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-responsive-scale: 0.78;
  }
}


/*
 * Very short split-screen like your screenshot.
 * Existing talisman-specific image rules can no longer
 * defeat this because the entire orbit item is scaled.
 */
@media (min-width: 651px) and (max-height: 560px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-responsive-scale: 0.60;
  }
}

/* YEU_ORBIT_WHEEL_V1_2_TUNE_END */



/* ============================================================
   YEU_SEND_RECEIVE_CORNER_CONTROLS_V1_START

   SEND  = fixed upper-left
   RECEIVE = fixed upper-right

   Their artwork is temporarily retained.
   We will replace these with compact circular text controls
   after position is visually approved.
   ============================================================ */


/* SEND */
html body #root
.yeu-blackout-locked-main-v1
button:has(img[src*="send_yeu"]) {
  position: fixed !important;

  left: 24px !important;
  right: auto !important;

  top: 22px !important;
  bottom: auto !important;

  transform: none !important;

  width: 118px !important;
  height: 118px !important;

  z-index: 5000 !important;

  margin: 0 !important;
}


/* RECEIVE */
html body #root
.yeu-blackout-locked-main-v1
button:has(img[src*="receive_yeu"]) {
  position: fixed !important;

  right: 24px !important;
  left: auto !important;

  top: 22px !important;
  bottom: auto !important;

  transform: none !important;

  width: 118px !important;
  height: 118px !important;

  z-index: 5000 !important;

  margin: 0 !important;
}


/* Keep the actual artwork contained */
html body #root
.yeu-blackout-locked-main-v1
button:has(img[src*="send_yeu"])
img,

html body #root
.yeu-blackout-locked-main-v1
button:has(img[src*="receive_yeu"])
img {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  transform: none !important;
}


/*
 * Slightly smaller in split-screen / short desktop windows.
 */
@media (min-width: 651px) and (max-height: 700px) {

  html body #root
  .yeu-blackout-locked-main-v1
  button:has(img[src*="send_yeu"]),

  html body #root
  .yeu-blackout-locked-main-v1
  button:has(img[src*="receive_yeu"]) {
    width: 84px !important;
    height: 84px !important;
    top: 14px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  button:has(img[src*="send_yeu"]) {
    left: 14px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  button:has(img[src*="receive_yeu"]) {
    right: 14px !important;
  }
}


/* Mobile */
@media (max-width: 650px) {

  html body #root
  .yeu-blackout-locked-main-v1
  button:has(img[src*="send_yeu"]),

  html body #root
  .yeu-blackout-locked-main-v1
  button:has(img[src*="receive_yeu"]) {
    width: 66px !important;
    height: 66px !important;
    top: 10px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  button:has(img[src*="send_yeu"]) {
    left: 10px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  button:has(img[src*="receive_yeu"]) {
    right: 10px !important;
  }
}


/* YEU_SEND_RECEIVE_CORNER_CONTROLS_V1_END */


/* ============================================================
   YEU_ORBIT_NO_CENTER_JUMP_V1_START

   Orbit talismans must never use the legacy centered-active
   positioning. They remain attached to their wheel position.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item.active {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    transform:
      rotate(var(--yeu-orbit-angle))
      translateX(var(--yeu-orbit-radius))
      rotate(var(--yeu-orbit-counter-angle))
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(var(--yeu-orbit-forehead-zoom, 1))
      scale(var(--yeu-orbit-scale))
      !important;
  }
}

/* YEU_ORBIT_NO_CENTER_JUMP_V1_END */

/* ============================================================
   YEU_ORBIT_ACTIVE_DRAG_FIX_V1_START

   Legacy .talisman:active previously replaced the orbit transform
   while the pointer was held down, making the talisman jump into
   the center of Linh Miu.

   Orbit items must retain their complete circular transform during
   pointer-down / drag.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item:active {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    transform:
      rotate(var(--yeu-orbit-angle))
      translateX(var(--yeu-orbit-radius))
      rotate(var(--yeu-orbit-counter-angle))
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(var(--yeu-orbit-forehead-zoom, 1))
      scale(var(--yeu-orbit-scale))
      !important;
  }
}

/* YEU_ORBIT_ACTIVE_DRAG_FIX_V1_END */


/* YEU_ORBIT_PERFECT_RING_V1_START
   IMPORTANT:
   The ORBIT BUTTON itself no longer changes scale.

   This keeps every talisman CENTER locked to the exact
   same circular path.

   Responsive scaling, axis shrinking and forehead zoom
   are applied only to the artwork INSIDE the button.
   ---------------------------------------------------- */

@media (min-width: 651px) {

  /* ALL orbit positions, including the active page,
     use exactly the same circle geometry. */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    overflow: visible !important;

    /*
     * CRITICAL:
     * No scale() functions here.
     *
     * Therefore the center of every button remains
     * exactly on the same radius.
     */
    transform:
      rotate(var(--yeu-orbit-angle))
      translateX(var(--yeu-orbit-radius))
      rotate(var(--yeu-orbit-counter-angle))
      !important;

    transform-origin: 56px 54px !important;
  }


  /* Active talisman must obey the exact same geometry. */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item.active {

    transform:
      rotate(var(--yeu-orbit-angle))
      translateX(var(--yeu-orbit-radius))
      rotate(var(--yeu-orbit-counter-angle))
      !important;

    transform-origin: 56px 54px !important;
  }


  /*
   * ALL visual scaling happens inside the stationary
   * orbit button.
   *
   * That means:
   *
   * - split-screen shrinking still works
   * - SEND/RECEIVE axis shrinking still works
   * - forehead enlargement still works
   * - BUT the item's orbit center never moves
   */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item
  .talisman-img-wrap {

    transform:
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(var(--yeu-orbit-forehead-zoom, 1))
      scale(var(--yeu-orbit-scale, 1))
      !important;

    transform-origin: 50% 50% !important;

    overflow: visible !important;

    will-change: transform;
  }
}

/* YEU_ORBIT_PERFECT_RING_V1_END */


/* YEU_SEND_RECEIVE_CLASS_CORNERS_V2_START
   Force the actual send / receive controls into the
   top-left and top-right corners while we keep working.
   This does NOT affect the orbit wheel. */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    position: fixed !important;
    top: 18px !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 7000 !important;
    width: 112px !important;
    height: 112px !important;
    max-width: 112px !important;
    max-height: 112px !important;
    transform: none !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 18px !important;
    right: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 18px !important;
    left: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil img,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

/* Slightly smaller in shorter desktop windows */
@media (min-width: 651px) and (max-height: 760px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    top: 10px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 10px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 10px !important;
  }
}

/* YEU_SEND_RECEIVE_CLASS_CORNERS_V2_END */



/* ============================================================
   YEU_ORBIT_EXACT_CENTER_V1_START

   Center the orbit wheel itself exactly in the viewport.
   Does NOT change:
   - orbit radius
   - icon spacing
   - drag / rotation
   - forehead zoom
   - Linh Miu
   - SEND / RECEIVE corner controls
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {

    position: fixed !important;

    left: 50vw !important;
    top: 50vh !important;

    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    transform:
      translate(-50%, -50%)
      !important;

    transform-origin:
      50% 50%
      !important;
  }
}

/* YEU_ORBIT_EXACT_CENTER_V1_END */


/* ============================================================
   YEU_ORBIT_TRUE_VIEWPORT_CENTER_V2_START

   Make the orbit stage equal the full viewport, then anchor
   EVERY orbit talisman directly at 50vw / 50vh.

   This removes inherited container offset from the geometry.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {

    position: fixed !important;

    inset: 0 !important;

    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;

    transform: none !important;
    transform-origin: 50vw 50vh !important;

    overflow: visible !important;

    pointer-events: none !important;
  }


  /*
   * All actual talisman buttons use the exact viewport center
   * as their orbit origin.
   */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item {

    position: absolute !important;

    left: 50vw !important;
    top: 50vh !important;

    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    pointer-events: auto !important;
  }


  /*
   * Active talisman must use the SAME orbit origin.
   * Never allow the legacy active-page positioning to move it.
   */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item.active {

    left: 50vw !important;
    top: 50vh !important;

    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;
  }
}

/* YEU_ORBIT_TRUE_VIEWPORT_CENTER_V2_END */


/* ============================================================
   YEU_ORBIT_CENTER_OFFSET_FIX_V3_START

   Orbit item transform-origin is 56px 54px.
   Compensate for that so the TRANSFORM ORIGIN itself,
   not the button's top-left corner, sits at viewport center.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item.active {

    left: calc(50vw - 56px) !important;
    top: calc(50vh - 54px) !important;

    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    transform-origin: 56px 54px !important;
  }
}

/* YEU_ORBIT_CENTER_OFFSET_FIX_V3_END */


/* ============================================================
   YEU_ORBIT_DRAG_STABILITY_V1_START

   Keep orbit geometry IDENTICAL while:
   normal / hover / active / focus / dragging.

   Also prevent the browser from dragging the PNG itself.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item:hover,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item:active,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item:focus,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item:focus-visible,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item.active {

    position: absolute !important;

    left: calc(50vw - 56px) !important;
    top: calc(50vh - 54px) !important;

    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    transform-origin: 56px 54px !important;

    transform:
      rotate(var(--yeu-orbit-angle))
      translateX(var(--yeu-orbit-radius))
      rotate(var(--yeu-orbit-counter-angle))
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(var(--yeu-orbit-forehead-zoom, 1))
      scale(var(--yeu-orbit-scale))
      !important;
  }


  /* Do not let Firefox/Chromium drag the PNG separately. */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item img {

    pointer-events: none !important;

    user-select: none !important;
    -webkit-user-select: none !important;

    -webkit-user-drag: none !important;

    touch-action: none !important;
  }


  /* Keep child labels from becoming the drag target. */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item span {

    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }


  /* ----------------------------------------------------------
     Trade Lab + Kitty Studio artwork already contains wording.
     Hide ONLY the additional HTML label underneath them.
     ---------------------------------------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item:has(img[src*="talisman_trade_lab.png"])
  span,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item:has(img[src*="KittyStudio.png"])
  span {

    display: none !important;
  }
}

/* YEU_ORBIT_DRAG_STABILITY_V1_END */



/* ============================================================
   YEU_SMALLER_RING_LOWER_FOREHEAD_ZOOM_V1_START

   - Make the orbit circle smaller
   - Let the forehead zoom sit LOWER on the screen
   - Preserve drag, spacing logic, and send/receive corners
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-radius: min(38vmin, 405px) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item:hover,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item:active,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item:focus,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item:focus-visible,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item.active {

    transform:
      rotate(var(--yeu-orbit-angle))
      translateX(var(--yeu-orbit-radius))
      rotate(var(--yeu-orbit-counter-angle))
      translateY(calc((var(--yeu-orbit-forehead-zoom, 1) - 1) * 22px))
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(var(--yeu-orbit-forehead-zoom, 1))
      scale(var(--yeu-orbit-scale))
      !important;
  }
}


/* Shorter desktop windows */
@media (min-width: 651px) and (max-height: 760px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-radius: min(35vmin, 340px) !important;
  }
}


/* Very short split-screen windows */
@media (min-width: 651px) and (max-height: 560px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-radius: min(32vmin, 285px) !important;
  }
}

/* YEU_SMALLER_RING_LOWER_FOREHEAD_ZOOM_V1_END */



/* ============================================================
   YEU_ORBIT_LABEL_BUBBLES_OFF_V2_START

   Remove only the visual bubble.
   Preserve the original label sizing / spacing / alignment.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item span,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item small,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item label {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* Keep text centered without changing its old geometry. */
    text-align: center !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item span::before,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item span::after,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item small::before,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item small::after,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item label::before,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item label::after {
    content: none !important;
    display: none !important;
  }
}

/* YEU_ORBIT_LABEL_BUBBLES_OFF_V2_END */




/* YEU_ORBIT_LABELS_LOWER_CLEARER_V1_REMOVED */


/* ============================================================
   YEU_ORBIT_LABEL_PRECISE_V2_START

   Desktop orbit text only.

   The artwork + label share the same parent transform.
   This keeps the name directly below the artwork as forehead
   zoom increases instead of allowing the label to drift over
   Linh Miu.

   Trade Lab and Kitty Studio already contain their wording in
   their artwork, so their separate HTML labels are not rendered.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item {
    overflow: visible !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item
  > .yeu-orbit-label {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    right: auto !important;
    bottom: auto !important;

    /*
     * 60px below the talisman's mathematical center.
     * Since the parent itself zooms, this distance grows
     * naturally with the enlarged artwork.
     */
    transform:
      translate(-50%, 60px)
      !important;

    transform-origin:
      50% 50%
      !important;

    width: max-content !important;
    max-width: 210px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
    text-align: center !important;

    line-height: 1 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;

    pointer-events: none !important;

    z-index: 50 !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item
  > .yeu-orbit-label::before,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item
  > .yeu-orbit-label::after {

    content: none !important;
    display: none !important;
  }
}

/* YEU_ORBIT_LABEL_PRECISE_V2_END */


/* YEU_ORBIT_LABEL_DISTANCE_TUNE_V2_START
   Keep ordinary HTML labels visually attached to their artwork.

   Normal/side icons:
     slightly tighter than before.

   Bottom/top axis icons:
     pull label upward as axis scaling makes artwork smaller.

   Forehead zoom:
     only a tiny extra gap instead of the old large zoom gap.

   Trade Lab / Kitty Studio built-in artwork labels remain untouched.
*/

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item > span {

    top:
      calc(
        100%
        + 2px
        + ((var(--yeu-orbit-forehead-zoom, 1) - 1) * 6px)
        - ((1 - var(--yeu-orbit-axis-scale, 1)) * 28px)
      )
      !important;

    bottom: auto !important;
    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;
    transform-origin: 50% 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    width: max-content !important;
    white-space: nowrap !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    pointer-events: none !important;
  }
}

/* YEU_ORBIT_LABEL_DISTANCE_TUNE_V2_END */



/* ============================================================
   YEU_ORBIT_LABEL_HUG_V3_START

   Ordinary labels now follow the apparent size of the icon.

   Large forehead icon:
     label stays directly underneath.

   Small bottom/top icons:
     label is pulled upward with the shrinking artwork instead
     of remaining at the bottom of the full-size button box.

   Trade Lab + Kitty Studio artwork wording is untouched.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item > span {

    top:
      calc(
        50%
        + (44px * var(--yeu-orbit-axis-scale, 1))
      )
      !important;

    bottom: auto !important;

    left: 50% !important;
    right: auto !important;

    transform:
      translate(-50%, 1px)
      !important;

    transform-origin: 50% 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    width: max-content !important;
    max-width: 220px !important;

    white-space: nowrap !important;
    text-align: center !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    pointer-events: none !important;
  }
}

/* YEU_ORBIT_LABEL_HUG_V3_END */


/* ============================================================
   YEU_ORBIT_STRONG_LABEL_HUG_V4_START

   Strong correction:
   Ordinary orbit labels are attached much closer to artwork.

   Trade Lab + Kitty Studio HTML labels stay hidden because
   their wording is already built into their artwork.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item:not(:has(img[src*="talisman_trade_lab"]))
  :not(:has(img[src*="KittyStudio"])) {
    /* intentionally empty */
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item:not(:has(img[src*="talisman_trade_lab"]))
  :not(:has(img[src*="KittyStudio"])) > span {
    top: 68% !important;
    bottom: auto !important;

    left: 50% !important;
    right: auto !important;

    transform: translate(-50%, 0) !important;
    transform-origin: 50% 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    width: max-content !important;
    max-width: 220px !important;

    white-space: nowrap !important;
    text-align: center !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    pointer-events: none !important;
  }


  /* Correct direct-button selector */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item:not(:has(img[src*="talisman_trade_lab.png"]))
  :not(:has(img[src*="KittyStudio.png"])) {
    overflow: visible !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-item:not(:has(img[src*="talisman_trade_lab.png"]))
  :not(:has(img[src*="KittyStudio.png"])) > span {
    top: 68% !important;
  }


  /* Exact direct-child version — strongest rule */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.yeu-orbit-item:not(:has(img[src*="talisman_trade_lab.png"]))
  :not(:has(img[src*="KittyStudio.png"])) > span {
    top: 68% !important;
    transform: translate(-50%, 0) !important;
  }


  /* Keep duplicate labels OFF on these two */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-item:has(img[src*="talisman_trade_lab.png"]) > span,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-item:has(img[src*="KittyStudio.png"]) > span {
    display: none !important;
  }
}

/* YEU_ORBIT_STRONG_LABEL_HUG_V4_END */


/* ============================================================
   YEU_ORBIT_EXACT_LABEL_ANCHOR_V5_START

   IMPORTANT:
   This targets the ACTUAL direct <span> shown in JSX.

   No image changes.
   No ring changes.
   No zoom changes.

   Trade Lab + Kitty Studio keep their baked-in wording.
   Every ordinary HTML label is anchored inside the same
   transformed talisman button, close under its artwork.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.talisman.yeu-orbit-item:not(:has(img[src*="talisman_trade_lab.png"])):not(:has(img[src*="KittyStudio.png"])) {
    overflow: visible !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.talisman.yeu-orbit-item:not(:has(img[src*="talisman_trade_lab.png"])):not(:has(img[src*="KittyStudio.png"])) > span {

    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    /*
     * Button transform origin is ~56x54.
     * Put text roughly 27px below that center.
     *
     * Because the LABEL IS INSIDE THE BUTTON,
     * forehead zoom and small-axis scaling now
     * affect icon + label together.
     */
    top: calc(
      50% +
      24px +
      ((var(--yeu-orbit-forehead-zoom, 1) - 1) * 6px)
    ) !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;
    transform-origin: 50% 50% !important;

    margin: 0 !important;
    padding: 0 !important;

    width: max-content !important;
    max-width: 210px !important;

    display: block !important;

    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    pointer-events: none !important;
  }


  /*
   * These two already contain their names in the PNG artwork.
   * Never add the HTML name underneath.
   */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.talisman.yeu-orbit-item:has(img[src*="talisman_trade_lab.png"]) > span,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.talisman.yeu-orbit-item:has(img[src*="KittyStudio.png"]) > span {
    display: none !important;
  }


  /*
   * Kill old pseudo-label/bubble remnants without
   * changing the real span geometry.
   */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.talisman.yeu-orbit-item > span::before,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.talisman.yeu-orbit-item > span::after {
    content: none !important;
    display: none !important;
  }
}

/* YEU_ORBIT_EXACT_LABEL_ANCHOR_V5_END */


/* ============================================================
   YEU_ORBIT_BUTTON_HITAREA_FIX_V1_START

   Orbit artwork and labels must never steal the mouse event.
   The BUTTON itself owns clicking while the orbit container
   continues handling drag rotation.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.yeu-orbit-item {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.yeu-orbit-item
  .talisman-img-wrap,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.yeu-orbit-item img,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.yeu-orbit-item span {
    pointer-events: none !important;
  }
}

/* YEU_ORBIT_BUTTON_HITAREA_FIX_V1_END */


/* ============================================================
   YEU_ORBIT_BUILTIN_ICON_LABELS_V1_START

   All 17 replacement PNGs now contain their own wording.
   Hide only the old HTML labels on the desktop orbit.

   Does NOT affect:
   - orbit position
   - icon size
   - forehead zoom
   - click
   - drag / spin
   - Send / Receive
   - Linh Miu
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  button.yeu-orbit-item
  > .yeu-orbit-label {

    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* YEU_ORBIT_BUILTIN_ICON_LABELS_V1_END */




/* ============================================================
   YEU_SEND_RECEIVE_NEW_IMAGES_V2_START

   The actual JSX now contains:
   SendYeu.png
   ReceiveYeu.png

   Disable all legacy background artwork so the new PNGs show.
   ============================================================ */

html body #root
.yeu-blackout-locked-main-v1
.send-sigil,

html body #root
.yeu-blackout-locked-main-v1
.receive-sigil {

  background: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  padding: 0 !important;

  overflow: visible !important;
}


/* Kill legacy generated artwork */
html body #root
.yeu-blackout-locked-main-v1
.send-sigil::before,

html body #root
.yeu-blackout-locked-main-v1
.send-sigil::after,

html body #root
.yeu-blackout-locked-main-v1
.receive-sigil::before,

html body #root
.yeu-blackout-locked-main-v1
.receive-sigil::after {

  content: none !important;
  display: none !important;

  background: none !important;
  background-image: none !important;
}


/* New real PNG artwork */
html body #root
.yeu-blackout-locked-main-v1
.send-sigil > img,

html body #root
.yeu-blackout-locked-main-v1
.receive-sigil > img {

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  opacity: 1 !important;
  visibility: visible !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  pointer-events: none !important;

  transform: none !important;

  position: relative !important;
  z-index: 2 !important;
}

/* YEU_SEND_RECEIVE_NEW_IMAGES_V2_END */




/* ============================================================
   YEU_SEND_RECEIVE_SMALLER_CORNERS_V3_START

   VISUAL ONLY:
   - smaller Send / Receive artwork
   - slightly inset from screen edges
   - orbit wheel geometry untouched
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    width: 84px !important;
    height: 84px !important;

    min-width: 84px !important;
    min-height: 84px !important;

    max-width: 84px !important;
    max-height: 84px !important;

    top: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {

    left: 24px !important;
    right: auto !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    right: 24px !important;
    left: auto !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil > img,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil > img {

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;

    transform: none !important;
  }
}


/* Shorter desktop windows */
@media (min-width: 651px) and (max-height: 760px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    width: 70px !important;
    height: 70px !important;

    min-width: 70px !important;
    min-height: 70px !important;

    max-width: 70px !important;
    max-height: 70px !important;

    top: 14px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 16px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 16px !important;
  }
}

/* YEU_SEND_RECEIVE_SMALLER_CORNERS_V3_END */




/* ============================================================
   YEU_SEND_RECEIVE_INWARD_POSITION_V2_START

   Move Send / Receive toward the orbit.
   Orbit itself is NOT moved or resized.
   ============================================================ */

@media (min-width: 651px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    width: 70px !important;
    height: 70px !important;

    min-width: 70px !important;
    min-height: 70px !important;

    max-width: 70px !important;
    max-height: 70px !important;

    top: 18px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: clamp(110px, 16vw, 280px) !important;
    right: auto !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: clamp(110px, 16vw, 280px) !important;
    left: auto !important;
  }
}


/* Tighter split-screen desktop */
@media (min-width: 651px) and (max-width: 1050px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: clamp(70px, 12vw, 130px) !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: clamp(70px, 12vw, 130px) !important;
  }
}

/* YEU_SEND_RECEIVE_INWARD_POSITION_V2_END */




/* ============================================================
   YEU_EDGE_CONTROLS_ORBIT_FIT_V4_START

   Keep SEND / RECEIVE visually closer to the orbit at both:
   - large/full desktop
   - smaller/split desktop

   Orbit itself remains unchanged.
   ============================================================ */


/* ---------- LARGE / FULL-SCREEN DESKTOP ---------- */

@media (min-width: 1300px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    width: 70px !important;
    height: 70px !important;

    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;

    top: 18px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 22vw !important;
    right: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 22vw !important;
    left: auto !important;
  }
}


/* ---------- MEDIUM DESKTOP ---------- */

@media (min-width: 1051px) and (max-width: 1299px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    width: 66px !important;
    height: 66px !important;

    min-width: 66px !important;
    min-height: 66px !important;
    max-width: 66px !important;
    max-height: 66px !important;

    top: 16px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 18vw !important;
    right: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 18vw !important;
    left: auto !important;
  }
}


/* ---------- SPLIT / SMALL DESKTOP ---------- */

@media (min-width: 651px) and (max-width: 1050px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    width: 58px !important;
    height: 58px !important;

    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;

    top: 14px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 14vw !important;
    right: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 14vw !important;
    left: auto !important;
  }
}


/* Keep the actual PNG fitted inside either size. */

html body #root
.yeu-blackout-locked-main-v1
.send-sigil > img,

html body #root
.yeu-blackout-locked-main-v1
.receive-sigil > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}


/* YEU_EDGE_CONTROLS_ORBIT_FIT_V4_END */




/* ============================================================
   YEU_HELP_CHARM_RESPONSIVE_INWARD_V3_START

   Move the bottom-right ? charm inward at every desktop size.

   Does NOT change:
   - orbit
   - Send / Receive
   - Linh Miu
   - navigation
   ============================================================ */


/* FULL / LARGE DESKTOP */

@media (min-width: 1300px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm {

    right: 64px !important;
    bottom: 34px !important;
  }
}


/* MEDIUM DESKTOP */

@media (min-width: 1051px) and (max-width: 1299px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm {

    right: 50px !important;
    bottom: 30px !important;
  }
}


/* SPLIT / SMALL DESKTOP */

@media (min-width: 651px) and (max-width: 1050px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm {

    right: 36px !important;
    bottom: 24px !important;
  }
}


/* YEU_HELP_CHARM_RESPONSIVE_INWARD_V3_END */




/* ============================================================
   YEU_EDGE_CONTROLS_INWARD_V5_START

   Bring SEND / RECEIVE substantially closer to orbit.
   Keep orbit geometry itself completely unchanged.
   ============================================================ */


/* FULL SCREEN */
@media (min-width: 1300px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 27vw !important;
    right: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 27vw !important;
    left: auto !important;
  }
}


/* MEDIUM */
@media (min-width: 1051px) and (max-width: 1299px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 24vw !important;
    right: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 24vw !important;
    left: auto !important;
  }
}


/* SMALL / SPLIT DESKTOP */
@media (min-width: 651px) and (max-width: 1050px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 22vw !important;
    right: auto !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 22vw !important;
    left: auto !important;
  }
}


/* ============================================================
   HELP ? BUTTON — use its real class directly.
   ============================================================ */


/* FULL */
@media (min-width: 1300px) {

  html body .linhmiu-help-charm {
    right: 8vw !important;
    bottom: 34px !important;
  }
}


/* MEDIUM */
@media (min-width: 1051px) and (max-width: 1299px) {

  html body .linhmiu-help-charm {
    right: 7vw !important;
    bottom: 28px !important;
  }
}


/* SMALL / SPLIT */
@media (min-width: 651px) and (max-width: 1050px) {

  html body .linhmiu-help-charm {
    right: 6vw !important;
    bottom: 22px !important;
  }
}


/* YEU_EDGE_CONTROLS_INWARD_V5_END */




/* ============================================================
   YEU_SEND_RECEIVE_RESPONSIVE_V6_START

   FULL SCREEN:
   - move farther inward toward orbit
   - make artwork larger / easier to read

   HALF / SPLIT SCREEN:
   - move back outward
   - retain readable size

   Orbit itself is untouched.
   ============================================================ */


/* =========================
   LARGE / FULL SCREEN
   ========================= */

@media (min-width: 1300px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    width: 84px !important;
    height: 84px !important;

    min-width: 84px !important;
    min-height: 84px !important;

    max-width: 84px !important;
    max-height: 84px !important;

    top: 16px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {

    left: 30vw !important;
    right: auto !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    right: 30vw !important;
    left: auto !important;
  }
}


/* =========================
   MEDIUM DESKTOP
   ========================= */

@media (min-width: 1051px) and (max-width: 1299px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    width: 76px !important;
    height: 76px !important;

    min-width: 76px !important;
    min-height: 76px !important;

    max-width: 76px !important;
    max-height: 76px !important;

    top: 15px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {

    left: 22vw !important;
    right: auto !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    right: 22vw !important;
    left: auto !important;
  }
}


/* =========================
   HALF / SPLIT SCREEN
   ========================= */

@media (min-width: 651px) and (max-width: 1050px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    width: 68px !important;
    height: 68px !important;

    min-width: 68px !important;
    min-height: 68px !important;

    max-width: 68px !important;
    max-height: 68px !important;

    top: 14px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {

    left: 14vw !important;
    right: auto !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    right: 14vw !important;
    left: auto !important;
  }
}


/* Keep new artwork perfectly fitted */

html body #root
.yeu-blackout-locked-main-v1
.send-sigil > img,

html body #root
.yeu-blackout-locked-main-v1
.receive-sigil > img {

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  transform: none !important;
}


/* YEU_SEND_RECEIVE_RESPONSIVE_V6_END */




/* ============================================================
   YEU_SEND_RECEIVE_HALF_SCREEN_V7_START

   HALF / SPLIT DESKTOP ONLY:
   - move Send / Receive slightly farther outward
   - enlarge slightly for easier reading

   FULL SCREEN IS UNCHANGED.
   ============================================================ */

@media (min-width: 651px) and (max-width: 1050px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    width: 74px !important;
    height: 74px !important;

    min-width: 74px !important;
    min-height: 74px !important;

    max-width: 74px !important;
    max-height: 74px !important;

    top: 14px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {

    left: 10vw !important;
    right: auto !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    right: 10vw !important;
    left: auto !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil > img,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil > img {

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
  }
}

/* YEU_SEND_RECEIVE_HALF_SCREEN_V7_END */




/* ============================================================
   YEU_SEND_RECEIVE_HALF_SCREEN_SIZE_V8_START

   HALF / SPLIT SCREEN ONLY:
   - keep current position
   - enlarge Send / Receive from 74px to 82px

   FULL SCREEN UNCHANGED.
   ============================================================ */

@media (min-width: 651px) and (max-width: 1050px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    max-width: 82px !important;
    max-height: 82px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 10vw !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 10vw !important;
  }
}

/* YEU_SEND_RECEIVE_HALF_SCREEN_SIZE_V8_END */




/* ============================================================
   YEU_SEND_RECEIVE_HALF_SCREEN_SIZE_V9_START

   HALF / SPLIT SCREEN ONLY:
   - position stays exactly the same
   - size 82px -> 90px

   FULL SCREEN UNCHANGED.
   ============================================================ */

@media (min-width: 651px) and (max-width: 1050px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    width: 90px !important;
    height: 90px !important;

    min-width: 90px !important;
    min-height: 90px !important;

    max-width: 90px !important;
    max-height: 90px !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {
    left: 10vw !important;
  }

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {
    right: 10vw !important;
  }
}

/* YEU_SEND_RECEIVE_HALF_SCREEN_SIZE_V9_END */




/* ============================================================
   YEU_HELP_CHARM_BIG_INWARD_V4_START

   Move ONLY the ? button much farther left/inward.
   Send / Receive and orbit remain untouched.
   ============================================================ */


/* FULL SCREEN */
@media (min-width: 1300px) {

  html body .linhmiu-help-charm {
    right: 16vw !important;
    bottom: 34px !important;
  }
}


/* MEDIUM */
@media (min-width: 1051px) and (max-width: 1299px) {

  html body .linhmiu-help-charm {
    right: 14vw !important;
    bottom: 28px !important;
  }
}


/* HALF / SPLIT SCREEN */
@media (min-width: 651px) and (max-width: 1050px) {

  html body .linhmiu-help-charm {
    right: 12vw !important;
    bottom: 22px !important;
  }
}


/* YEU_HELP_CHARM_BIG_INWARD_V4_END */




/* ============================================================
   YEU_HELP_CHARM_FINAL_RESPONSIVE_V5_START

   Strong winning selector.

   FULL:
   - much farther inward

   HALF / SPLIT:
   - keep horizontal position
   - move noticeably higher
   ============================================================ */


/* FULL SCREEN */
@media (min-width: 1300px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm {

    right: 24vw !important;
    bottom: 42px !important;
  }
}


/* MEDIUM */
@media (min-width: 1051px) and (max-width: 1299px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm {

    right: 18vw !important;
    bottom: 46px !important;
  }
}


/* HALF / SPLIT */
@media (min-width: 651px) and (max-width: 1050px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm {

    right: 12vw !important;
    bottom: 64px !important;
  }
}


/* YEU_HELP_CHARM_FINAL_RESPONSIVE_V5_END */




/* ============================================================
   YEU_HELP_CHARM_FORCE_INWARD_V6_START

   Strong override for the actual help charm.
   HALF / SPLIT positioning stays untouched.
   ============================================================ */


/* FULL SCREEN */
@media (min-width: 1300px) {

  html body #root .linhmiu-help-charm,
  html body #root button.linhmiu-help-charm,
  html body .linhmiu-help-charm {

    position: fixed !important;

    right: 31vw !important;
    bottom: 78px !important;

    left: auto !important;
    top: auto !important;

    z-index: 99999 !important;
  }
}


/* MEDIUM DESKTOP */
@media (min-width: 1051px) and (max-width: 1299px) {

  html body #root .linhmiu-help-charm,
  html body #root button.linhmiu-help-charm,
  html body .linhmiu-help-charm {

    position: fixed !important;

    right: 24vw !important;
    bottom: 66px !important;

    left: auto !important;
    top: auto !important;
  }
}


/* YEU_HELP_CHARM_FORCE_INWARD_V6_END */



/* ============================================================
   YEU_HELP_CHARM_HEIGHT_NUDGE_V7_START

   Keep current horizontal placement.
   Only move the ? button slightly higher on:
   - full screen
   - medium desktop
   - half / split desktop
   ============================================================ */

/* FULL SCREEN */
@media (min-width: 1300px) {
  html body #root .linhmiu-help-charm,
  html body #root button.linhmiu-help-charm,
  html body .linhmiu-help-charm {
    bottom: 96px !important;
  }
}

/* MEDIUM DESKTOP */
@media (min-width: 1051px) and (max-width: 1299px) {
  html body #root .linhmiu-help-charm,
  html body #root button.linhmiu-help-charm,
  html body .linhmiu-help-charm {
    bottom: 80px !important;
  }
}

/* HALF / SPLIT DESKTOP */
@media (min-width: 651px) and (max-width: 1050px) {
  html body #root .linhmiu-help-charm,
  html body #root button.linhmiu-help-charm,
  html body .linhmiu-help-charm {
    bottom: 58px !important;
  }
}

/* YEU_HELP_CHARM_HEIGHT_NUDGE_V7_END */


/* ============================================================
   YEU_HELP_CHARM_HEIGHT_V8_START

   Horizontal position stays EXACTLY the same.

   FULL: slightly higher
   HALF / SPLIT: much higher
   ============================================================ */


/* FULL SCREEN */
@media (min-width: 1300px) {

  html body #root .linhmiu-help-charm,
  html body #root button.linhmiu-help-charm,
  html body .linhmiu-help-charm {

    bottom: 112px !important;
  }
}


/* MEDIUM */
@media (min-width: 1051px) and (max-width: 1299px) {

  html body #root .linhmiu-help-charm,
  html body #root button.linhmiu-help-charm,
  html body .linhmiu-help-charm {

    bottom: 104px !important;
  }
}


/* HALF / SPLIT */
@media (min-width: 651px) and (max-width: 1050px) {

  html body #root .linhmiu-help-charm,
  html body #root button.linhmiu-help-charm,
  html body .linhmiu-help-charm {

    bottom: 110px !important;
  }
}


/* YEU_HELP_CHARM_HEIGHT_V8_END */




/* ============================================================
   YEU_TINY_DESKTOP_MODE_V1_START

   Only activates on very short desktop windows.

   Full screen: untouched
   Normal half screen: untouched

   Tiny window:
   - compact Send / Receive
   - ? back near bottom but inset
   - orbit artwork slightly easier to see
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {


  /* -------------------------
     SEND / RECEIVE
     ------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    width: 72px !important;
    height: 72px !important;

    min-width: 72px !important;
    min-height: 72px !important;

    max-width: 72px !important;
    max-height: 72px !important;

    top: 10px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {

    left: 10vw !important;
    right: auto !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    right: 10vw !important;
    left: auto !important;
  }



  /* -------------------------
     HELP ?
     Tiny window needs this
     back DOWN near bottom.
     ------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm,

  html body #root
  button.linhmiu-help-charm,

  html body
  .linhmiu-help-charm {

    right: 7vw !important;
    bottom: 20px !important;

    top: auto !important;
    left: auto !important;
  }



  /* -------------------------
     ORBIT ARTWORK
     Slight readability boost.
     Ring geometry stays fixed.
     ------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item
  .talisman-img-wrap {

    transform:
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(var(--yeu-orbit-forehead-zoom, 1))
      scale(var(--yeu-orbit-scale, 1))
      scale(1.08)
      !important;
  }



  /* Slight boost for HTML labels where still used */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-label {

    font-size: 1.08em !important;
  }

}

/* YEU_TINY_DESKTOP_MODE_V1_END */




/* ============================================================
   YEU_TINY_COMPACT_LAYOUT_V2_START

   TINY HEIGHT ONLY <= 480px

   - SEND / RECEIVE positioned relative to center/orbit
   - ? positioned near lower-right of orbit
   - orbit artwork enlarged again
   - full screen untouched
   - normal half screen untouched
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {


  /* ========================================================
     SEND / RECEIVE
     Keep readable size but pull them toward the orbit.
     ======================================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil,

  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    width: 76px !important;
    height: 76px !important;

    min-width: 76px !important;
    min-height: 76px !important;

    max-width: 76px !important;
    max-height: 76px !important;

    top: 12px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .send-sigil {

    left: calc(50vw - 250px) !important;
    right: auto !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .receive-sigil {

    right: calc(50vw - 250px) !important;
    left: auto !important;
  }



  /* ========================================================
     HELP ?
     Bring it underneath/right of the orbit instead of
     leaving it near the browser corner.
     ======================================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .linhmiu-help-charm,

  html body #root
  button.linhmiu-help-charm,

  html body
  .linhmiu-help-charm {

    position: fixed !important;

    right: calc(50vw - 250px) !important;
    bottom: 22px !important;

    left: auto !important;
    top: auto !important;
  }



  /* ========================================================
     ORBIT ARTWORK
     Previous tiny mode = 1.08
     New tiny mode = 1.18
     ======================================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item
  .talisman-img-wrap {

    transform:
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(var(--yeu-orbit-forehead-zoom, 1))
      scale(var(--yeu-orbit-scale, 1))
      scale(1.18)
      !important;

    transform-origin: 50% 50% !important;
  }


  /* HTML labels, where still present */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-label {

    font-size: 1.12em !important;
  }

}

/* YEU_TINY_COMPACT_LAYOUT_V2_END */




/* ============================================================
   YEU_TINY_ORBIT_LARGE_CHARM_SMALL_V3_START

   TINY HEIGHT ONLY <= 480px

   - larger orbit circle
   - smaller forehead talisman
   - full / half layouts untouched
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {


  /* ----------------------------------------
     MAKE THE ORBIT CIRCLE MUCH LARGER
     ---------------------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {

    --yeu-orbit-radius:
      clamp(135px, 42vmin, 175px) !important;
  }


  /* Keep orbit artwork readable without
     making the icons themselves ridiculous. */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item
  .talisman-img-wrap {

    transform:
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(var(--yeu-orbit-forehead-zoom, 1))
      scale(var(--yeu-orbit-scale, 1))
      scale(1.12)
      !important;

    transform-origin: 50% 50% !important;
  }


  /* ----------------------------------------
     SHRINK THE HUGE FOREHEAD TALISMAN
     ---------------------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .linhmiu-forehead-charm {

    transform:
      translate(-50%, -4px)
      scale(0.72)
      !important;

    transform-origin:
      50% 0%
      !important;
  }

}

/* YEU_TINY_ORBIT_LARGE_CHARM_SMALL_V3_END */




/* ============================================================
   YEU_TINY_GEOMETRY_V4_START

   TINY WINDOW ONLY <= 480px

   - orbit wider
   - forehead talisman much smaller
   - controls untouched
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {

    --yeu-orbit-radius:
      clamp(155px, 48vmin, 200px) !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .linhmiu-forehead-charm {

    transform:
      translate(-50%, -4px)
      scale(0.55)
      !important;

    transform-origin:
      50% 0%
      !important;
  }

}

/* YEU_TINY_GEOMETRY_V4_END */




/* ============================================================
   YEU_TINY_DENSE_ORBIT_V5_START

   TINY WINDOW ONLY <= 480px

   Goal:
   - CLOSE gaps between orbit icons
   - SMALLER overall circle
   - BIGGER individual orbit artwork
   - actually shrink forehead talisman
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {


  /* --------------------------------------------------------
     CLOSE THE ORBIT

     Smaller radius = icons closer together.
     This keeps the full circle inside the tiny viewport.
     -------------------------------------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {

    --yeu-orbit-radius:
      clamp(112px, 34vmin, 132px) !important;
  }



  /* --------------------------------------------------------
     MAKE EACH ORBIT ICON BIGGER

     Bigger artwork + smaller radius =
     stronger orbit with LESS empty space.
     -------------------------------------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item
  .talisman-img-wrap {

    transform:
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(var(--yeu-orbit-forehead-zoom, 1))
      scale(var(--yeu-orbit-scale, 1))
      scale(1.34)
      !important;

    transform-origin: 50% 50% !important;
  }



  /* --------------------------------------------------------
     REALLY SHRINK THE FOREHEAD TALISMAN

     Use the independent CSS scale property so existing
     translate/transform rules cannot cancel this shrink.
     -------------------------------------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .linhmiu-forehead-charm {

    scale: 0.58 !important;

    transform-origin:
      50% 0%
      !important;
  }



  /* Keep its actual artwork constrained to its button. */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .linhmiu-forehead-charm img {

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
  }

}

/* YEU_TINY_DENSE_ORBIT_V5_END */




/* ============================================================
   YEU_TINY_VISIBILITY_V6_START

   TINY WINDOW ONLY <= 480px

   FIXES:
   - restore forehead charm/button to its proper track
   - shrink ONLY charm artwork
   - keep compact orbit radius
   - remove top/bottom icon shrinking
   - substantially enlarge orbit artwork
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {


  /* ========================================================
     KEEP THE TIGHT ORBIT CIRCLE
     Do NOT spread the icons farther apart.
     ======================================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {

    --yeu-orbit-radius:
      clamp(112px, 34vmin, 132px) !important;
  }



  /* ========================================================
     REMOVE AXIS SHRINKING IN TINY MODE

     The inline axis value was making the top/bottom icons
     dramatically smaller than the side icons.
     ======================================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .talisman.yeu-orbit-item {

    --yeu-orbit-axis-scale: 1 !important;
  }



  /* ========================================================
     BIGGER ORBIT ARTWORK

     Bigger icons while retaining the smaller circle radius.
     Forehead zoom remains, but is softened slightly so the
     focused icon does not become ridiculous.
     ======================================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item
  .talisman-img-wrap {

    transform:
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(
        calc(
          1 +
          (
            var(--yeu-orbit-forehead-zoom, 1) - 1
          ) * 0.72
        )
      )
      scale(var(--yeu-orbit-scale, 1))
      scale(1.52)
      !important;

    transform-origin: 50% 50% !important;

    overflow: visible !important;
  }



  /* HTML labels, if present */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-label {

    font-size: 1.20em !important;
  }



  /* ========================================================
     FOREHEAD TALISMAN

     Restore the BUTTON itself.
     Scaling the entire button knocked it off its locked track.
     ======================================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .linhmiu-forehead-charm {

    scale: 1 !important;

    transform:
      translate(-50%, -4px)
      !important;

    transform-origin:
      50% 50%
      !important;
  }



  /* Shrink only the visible artwork inside the correctly
     positioned forehead button. */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .linhmiu-forehead-charm img {

    transform:
      scale(0.58)
      !important;

    transform-origin:
      50% 50%
      !important;

    object-fit: contain !important;
  }

}

/* YEU_TINY_VISIBILITY_V6_END */




/* ============================================================
   YEU_TINY_BALANCE_V7_START

   Tiny window only.
   Goal:
   - orbit a bit larger
   - focused icon less gigantic
   - normal orbit icons a bit bigger
   - forehead talisman smaller
   - Send / Receive / ? unchanged
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {

  /* Slightly larger orbit radius */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {
    --yeu-orbit-radius: clamp(124px, 36vmin, 146px) !important;
  }

  /* Remove top/bottom shrinking */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .talisman.yeu-orbit-item {
    --yeu-orbit-axis-scale: 1 !important;
  }

  /* Make normal orbit icons a bit bigger,
     but calm down the focused/zoomed one a lot */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item
  .talisman-img-wrap {
    transform:
      scale(var(--yeu-orbit-responsive-scale, 1))
      scale(var(--yeu-orbit-axis-scale, 1))
      scale(calc(1 + ((var(--yeu-orbit-forehead-zoom, 1) - 1) * 0.22)))
      scale(var(--yeu-orbit-scale, 1))
      scale(1.26)
      !important;

    transform-origin: 50% 50% !important;
    overflow: visible !important;
  }

  /* Keep labels readable but not oversized */
  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-label {
    font-size: 1.08em !important;
  }

  /* Restore forehead charm button to its locked track */
  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .linhmiu-forehead-charm {
    scale: 1 !important;
    transform: translate(-50%, -4px) !important;
    transform-origin: 50% 50% !important;
  }

  /* Shrink only the visible forehead artwork */
  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .linhmiu-forehead-charm img {
    transform: scale(0.44) !important;
    transform-origin: 50% 50% !important;
    object-fit: contain !important;
  }
}

/* YEU_TINY_BALANCE_V7_END */




/* ============================================================
   YEU_TINY_TALISMAN_RAISE_V8_START

   TINY WINDOW ONLY:
   Raise forehead talisman substantially higher.
   Everything else stays unchanged.
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .linhmiu-forehead-charm {

    transform:
      translate(-50%, -58px)
      !important;

    transform-origin:
      50% 50%
      !important;
  }

}

/* YEU_TINY_TALISMAN_RAISE_V8_END */




/* ============================================================
   YEU_TINY_FACE_ALIGNMENT_V1_START

   TINY WINDOW ONLY <= 480px

   Align:
   - left eye
   - right eye
   - nose poke
   - Kitty Chat mouth

   Full / half screen remain untouched.
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {


  /* =====================================
     LEFT EYE
     Desktop: top 43.5%
     Tiny: move slightly upward
     ===================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .eye-left.linhmiu-hold-eye {

    left: 32% !important;
    top: 41.8% !important;

    width: 14% !important;
    height: 8% !important;
  }


  /* =====================================
     RIGHT EYE
     ===================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .eye-right.linhmiu-hold-eye {

    left: 52% !important;
    right: auto !important;

    top: 41.8% !important;

    width: 14% !important;
    height: 8% !important;
  }


  /* =====================================
     NOSE

     Keep large invisible click target,
     but make visible circle much smaller.
     ===================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .nose-tip-zone {

    left: 49.8% !important;
    top: 52.5% !important;

    width: 44px !important;
    height: 44px !important;

    transform:
      translate(-50%, -50%)
      !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .nose-tip-zone
  > .nose-tip-ring {

    left: 50% !important;
    top: 50% !important;

    width: 34px !important;
    height: 34px !important;

    transform:
      translate(-50%, -50%)
      !important;
  }


  /* =====================================
     KITTY CHAT / MOUTH

     Desktop ring was 64px.
     Tiny gets a much smaller ring and
     moves upward onto her actual mouth.
     ===================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .mouth-zone {

    left: 45.35% !important;
    top: 56.8% !important;

    width: 40px !important;
    height: 40px !important;

    transform:
      translate(-50%, -50%)
      !important;

    border-radius: 999px !important;
  }

}

/* YEU_TINY_FACE_ALIGNMENT_V1_END */




/* ============================================================
   YEU_TINY_NOSE_CHAT_CENTER_V2_START

   Tiny window ONLY.

   Put the two interaction circles onto Linh Miu:
   1. Nose circle = centered on nose
   2. Kitty Chat circle = centered below it on mouth
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {


  /* ========================================================
     NOSE
     ======================================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .nose-tip-zone {

    left: 50% !important;
    top: 54.8% !important;

    width: 38px !important;
    height: 38px !important;

    transform:
      translate(-50%, -50%)
      !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .nose-tip-zone
  > .nose-tip-ring {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 34px !important;
    height: 34px !important;

    transform:
      translate(-50%, -50%)
      !important;
  }



  /* ========================================================
     KITTY CHAT / MOUTH

     IMPORTANT:
     Old value was left:45.35%.
     That is why the circle was sitting off to the left.

     Put it on the SAME CENTERLINE as her nose.
     ======================================================== */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .mouth-zone {

    left: 50% !important;
    top: 61.2% !important;

    width: 38px !important;
    height: 38px !important;

    transform:
      translate(-50%, -50%)
      !important;

    border-radius: 999px !important;
  }

}

/* YEU_TINY_NOSE_CHAT_CENTER_V2_END */




/* ============================================================
   YEU_FACE_CENTERLINE_V3_START

   NOSE + KITTY CHAT
   - same horizontal centerline
   - moved substantially upward
   - normal desktop / half-screen corrected
   - tiny-height gets its own tighter positions
   ============================================================ */


/* ============================================================
   NORMAL DESKTOP + HALF SCREEN
   ============================================================ */

@media (min-width: 651px) {

  /* --------------------------
     NOSE
     -------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .nose-tip-zone {

    left: 50% !important;
    top: 49.8% !important;

    width: 48px !important;
    height: 48px !important;

    transform:
      translate(-50%, -50%)
      !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .nose-tip-zone
  > .nose-tip-ring {

    left: 50% !important;
    top: 50% !important;

    width: 42px !important;
    height: 42px !important;

    transform:
      translate(-50%, -50%)
      !important;
  }


  /* --------------------------
     KITTY CHAT / MOUTH
     -------------------------- */

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .mouth-zone {

    left: 50% !important;
    top: 55.2% !important;

    width: 46px !important;
    height: 46px !important;

    transform:
      translate(-50%, -50%)
      !important;

    border-radius: 999px !important;
  }

}


/* ============================================================
   TINY HEIGHT

   Pull both slightly closer together and higher.
   ============================================================ */

@media (min-width: 651px) and (max-height: 480px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .nose-tip-zone {

    left: 50% !important;
    top: 48.8% !important;

    width: 34px !important;
    height: 34px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .nose-tip-zone
  > .nose-tip-ring {

    width: 30px !important;
    height: 30px !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face > .mouth-zone {

    left: 50% !important;
    top: 54.2% !important;

    width: 34px !important;
    height: 34px !important;
  }

}

/* YEU_FACE_CENTERLINE_V3_END */




/* ============================================================
   YEU_TALISMAN_CLEAR_FACE_V9_START

   Goal:
   Move hanging forehead talisman UP so it stops covering
   Linh Miu's nose + Kitty Chat/mouth controls.

   Nose/chat horizontal centerline is NOT changed.
   ============================================================ */


/* ------------------------------------------------------------
   NORMAL DESKTOP / HALF SCREEN
   ------------------------------------------------------------ */

@media (min-width: 651px) and (min-height: 481px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .linhmiu-forehead-charm {

    transform:
      translate(-50%, -92px)
      !important;

    transform-origin:
      50% 50%
      !important;
  }

}


/* ------------------------------------------------------------
   TINY WINDOW

   Keep the already-raised tiny layout but raise it
   slightly farther so nose/mouth have breathing room.
   ------------------------------------------------------------ */

@media (min-width: 651px) and (max-height: 480px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .linh-face
  .linhmiu-forehead-charm {

    transform:
      translate(-50%, -76px)
      !important;

    transform-origin:
      50% 50%
      !important;
  }

}


/* YEU_TALISMAN_CLEAR_FACE_V9_END */


/* YEU_WALLET_V2_BASE_SEPOLIA_READONLY_START */

.yeu-wallet-v2 {
  width: min(100%, 980px);
  margin: 0 auto;
  display: grid;
  gap: 16px;
  padding: 8px 2px 28px;
}

.yeu-wallet-v2-hero,
.yeu-wallet-v2-address-card,
.yeu-wallet-v2-chain-card,
.yeu-wallet-v2-safety {
  border:
    1px solid
    rgba(255, 255, 255, 0.09);
  background:
    rgba(5, 5, 5, 0.76);
  border-radius: 18px;
}

.yeu-wallet-v2-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px;
}

.yeu-wallet-v2-badge {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  opacity: 0.72;
}

.yeu-wallet-v2-hero h3 {
  margin: 0 0 8px;
  font-size: 1.65rem;
}

.yeu-wallet-v2-hero p {
  margin: 0;
  max-width: 600px;
  line-height: 1.55;
  opacity: 0.7;
}

.yeu-wallet-v2-status {
  min-width: 130px;
  padding: 11px 14px;
  border-radius: 12px;
  border:
    1px solid
    rgba(255, 255, 255, 0.09);
  display: grid;
  gap: 4px;
  text-align: right;
}

.yeu-wallet-v2-status small,
.yeu-wallet-v2-address-head small,
.yeu-wallet-v2-grid span,
.yeu-wallet-v2-chain-card small,
.yeu-wallet-v2-safety span {
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  opacity: 0.58;
}

.yeu-wallet-v2-status strong {
  font-size: 0.82rem;
}

.yeu-wallet-v2-status.is-watching {
  border-color:
    rgba(150, 255, 190, 0.22);
}

.yeu-wallet-v2-address-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.yeu-wallet-v2-address-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.yeu-wallet-v2-address-head > div {
  display: grid;
  gap: 5px;
}

.yeu-wallet-v2-address-head strong {
  font-family: monospace;
  font-size: 0.92rem;
}

.yeu-wallet-v2-address-head > span {
  font-size: 0.72rem;
  opacity: 0.55;
}

.yeu-wallet-v2-address-form {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  gap: 9px;
}

.yeu-wallet-v2-address-form input {
  min-width: 0;
  padding: 12px 13px;
  border-radius: 11px;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  background:
    rgba(255, 255, 255, 0.025);
  color: inherit;
  font-family: monospace;
  outline: none;
}

.yeu-wallet-v2-address-form input:focus {
  border-color:
    rgba(255, 220, 140, 0.28);
}

.yeu-wallet-v2-address-form button,
.yeu-wallet-v2-address-actions button {
  padding: 11px 14px;
  border-radius: 10px;
  border:
    1px solid
    rgba(255, 255, 255, 0.11);
  background:
    rgba(255, 255, 255, 0.045);
  color: inherit;
  cursor: pointer;
}

.yeu-wallet-v2-address-form button:disabled,
.yeu-wallet-v2-address-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}

.yeu-wallet-v2-address-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yeu-wallet-v2-error {
  padding: 10px 12px;
  border-radius: 9px;
  border:
    1px solid
    rgba(255, 120, 120, 0.2);
  font-size: 0.76rem;
}

.yeu-wallet-v2-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.yeu-wallet-v2-grid article {
  min-width: 0;
  min-height: 105px;
  padding: 15px;
  border-radius: 15px;
  border:
    1px solid
    rgba(255, 255, 255, 0.08);
  background:
    rgba(5, 5, 5, 0.7);
  display: grid;
  align-content: center;
  gap: 7px;
}

.yeu-wallet-v2-grid strong {
  font-size: 1.12rem;
  overflow-wrap: anywhere;
}

.yeu-wallet-v2-grid small {
  font-size: 0.68rem;
  opacity: 0.52;
  line-height: 1.35;
}

.yeu-wallet-v2-chain-card {
  display: grid;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 1fr);
  gap: 10px;
  padding: 18px;
}

.yeu-wallet-v2-chain-card > div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.yeu-wallet-v2-chain-card strong {
  font-family: monospace;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.yeu-wallet-v2-safety {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.yeu-wallet-v2-safety h3 {
  margin: 5px 0 0;
}

.yeu-wallet-v2-safety-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.yeu-wallet-v2-safety-grid p {
  margin: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background:
    rgba(255, 255, 255, 0.025);
  font-size: 0.75rem;
}

.yeu-wallet-v2-safety > small {
  opacity: 0.6;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .yeu-wallet-v2-hero {
    display: grid;
  }

  .yeu-wallet-v2-status {
    text-align: left;
  }

  .yeu-wallet-v2-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .yeu-wallet-v2-chain-card {
    grid-template-columns: 1fr;
  }

  .yeu-wallet-v2-safety-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .yeu-wallet-v2-address-head {
    display: grid;
  }

  .yeu-wallet-v2-address-form {
    grid-template-columns: 1fr;
  }

  .yeu-wallet-v2-grid {
    grid-template-columns: 1fr;
  }

  .yeu-wallet-v2-safety-grid {
    grid-template-columns: 1fr;
  }
}

/* YEU_WALLET_V2_BASE_SEPOLIA_READONLY_END */


/* YEU_WALLET_V2_CLEAR_LABELS_V1_START */

.yeu-wallet-v2-status {
  min-width: 190px;
}

.yeu-wallet-v2-status strong {
  line-height: 1.35;
}

.yeu-wallet-v2-grid article:nth-child(4) strong {
  font-size: clamp(0.72rem, 1.15vw, 0.96rem);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.yeu-wallet-v2-address-actions button {
  min-height: 42px;
}

@media (max-width: 760px) {
  .yeu-wallet-v2-status {
    min-width: 0;
  }

  .yeu-wallet-v2-grid article:nth-child(4) strong {
    white-space: normal;
  }
}

/* YEU_WALLET_V2_CLEAR_LABELS_V1_END */


/* YEU_WALLET_V2_LABEL_VISIBILITY_V1_START */

.yeu-wallet-v2-status small,
.yeu-wallet-v2-address-head small,
.yeu-wallet-v2-chain-card small {
  display: block !important;
  visibility: visible !important;
  opacity: 0.9 !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

.yeu-wallet-v2-status strong {
  display: block;
  margin-top: 2px;
}

.yeu-wallet-v2-address-head > div,
.yeu-wallet-v2-chain-card > div {
  align-content: start;
}

.yeu-wallet-v2-chain-card {
  min-height: 72px;
  align-items: center;
}

/* YEU_WALLET_V2_LABEL_VISIBILITY_V1_END */



/* YEU_RECEIVE_V2_BASE_SEPOLIA_START */

.blackout-wallet-action:has(.receive-v2) {
  width: min(560px, calc(100vw - 36px)) !important;
  max-width: 560px !important;
}

.receive-v2 {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
}

.receive-v2-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.receive-v2-head small,
.receive-v2-label,
.receive-v2-card small {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 194, 137, 0.82);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.3;
}

.receive-v2-head h2 {
  margin: 0 !important;
}

.receive-v2-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(255, 126, 39, 0.68);
  border-radius: 999px;
  background: rgba(96, 31, 0, 0.48);
  color: #ffc18b;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.receive-v2-section {
  padding: 13px;
  border: 1px solid rgba(255, 126, 39, 0.30);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.34);
}

.receive-v2-address,
.receive-v2-contract {
  padding: 11px 12px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(255, 143, 66, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.62);
  color: #ffe9d2;
  font-family: monospace;
  font-size: 0.79rem;
  line-height: 1.5;
}

.receive-v2-copy {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
}

.receive-v2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.receive-v2-card {
  padding: 12px;
  border: 1px solid rgba(255, 126, 39, 0.28);
  border-radius: 12px;
  background: rgba(29, 8, 1, 0.66);
}

.receive-v2-card strong {
  display: block;
  color: #fff0dd;
  font-size: 0.95rem;
}

.receive-v2-empty {
  padding: 12px;
  border: 1px dashed rgba(255, 160, 90, 0.42);
  border-radius: 10px;
  color: rgba(255, 225, 197, 0.78);
  line-height: 1.45;
}

.receive-v2-safety {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid rgba(130, 206, 145, 0.32);
  border-radius: 12px;
  background: rgba(12, 48, 18, 0.22);
}

.receive-v2-safety strong {
  color: #b9e8c1;
  font-size: 0.82rem;
}

.receive-v2-safety span {
  color: rgba(210, 238, 215, 0.72);
  font-size: 0.72rem;
  line-height: 1.4;
}

@media (max-width: 650px) {
  .blackout-wallet-action:has(.receive-v2) {
    width: calc(100vw - 24px) !important;
  }

  .receive-v2-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* YEU_RECEIVE_V2_BASE_SEPOLIA_END */



/* YEU_ACTIVE_SEND_RECEIVE_MODAL_V2_START */

body.yeu-send-receive-modal-open {
  overflow: hidden !important;
}

.blackout-dom-action-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  background: rgba(0, 0, 0, 0.80) !important;

  backdrop-filter:
    blur(11px)
    brightness(0.32) !important;

  -webkit-backdrop-filter:
    blur(11px)
    brightness(0.32) !important;
}

.blackout-dom-action-panel {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform:
    translate(-50%, -50%) !important;

  z-index: 2147482001 !important;

  width:
    min(
      620px,
      calc(100vw - 36px)
    ) !important;

  max-width:
    620px !important;

  max-height:
    calc(100vh - 40px) !important;

  overflow-y:
    auto !important;

  box-sizing:
    border-box !important;

  padding:
    28px 26px 24px !important;

  border:
    1px solid
    rgba(
      255,
      111,
      30,
      0.72
    ) !important;

  border-radius:
    24px !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(104, 31, 4, 0.33),
      rgba(8, 4, 2, 0.985) 45%
    ) !important;

  box-shadow:
    0 28px 110px
      rgba(0, 0, 0, 0.95),
    0 0 44px
      rgba(255, 72, 10, 0.22),
    inset 0 0 42px
      rgba(255, 75, 10, 0.04) !important;

  color:
    #ffe4cb !important;
}

.blackout-dom-action-panel h2 {
  margin:
    5px 0 10px !important;

  color:
    #ff8a42 !important;

  font-size:
    clamp(
      1.55rem,
      4vw,
      2rem
    ) !important;

  letter-spacing:
    0.15em !important;

  text-align:
    center !important;

  text-shadow:
    0 0 16px
      rgba(
        255,
        91,
        24,
        0.38
      ) !important;
}

.blackout-dom-kicker {
  margin:
    0 42px 3px;

  color:
    #ffc18d !important;

  font-size:
    0.70rem;

  font-weight:
    900;

  letter-spacing:
    0.14em;

  text-align:
    center;
}

.blackout-dom-intro {
  max-width:
    500px;

  margin:
    0 auto 20px !important;

  color:
    rgba(
      255,
      224,
      197,
      0.92
    ) !important;

  font-size:
    0.88rem !important;

  line-height:
    1.55 !important;

  text-align:
    center !important;
}

.blackout-dom-field-label,
.blackout-dom-receive-section small,
.blackout-dom-network-grid small {
  display:
    block;

  margin:
    13px 0 6px;

  color:
    #ffc394 !important;

  font-size:
    0.69rem !important;

  font-weight:
    900 !important;

  letter-spacing:
    0.12em !important;
}

.blackout-dom-action-panel input {
  display:
    block;

  width:
    100% !important;

  min-height:
    48px !important;

  margin:
    0 0 8px !important;

  padding:
    11px 14px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(
      255,
      123,
      51,
      0.50
    ) !important;

  border-radius:
    13px !important;

  outline:
    none !important;

  background:
    rgba(
      7,
      3,
      2,
      0.94
    ) !important;

  color:
    #fff0df !important;

  font-size:
    0.94rem !important;
}

.blackout-dom-action-panel
input::placeholder {
  color:
    rgba(
      255,
      213,
      178,
      0.62
    ) !important;

  opacity:
    1 !important;
}

.blackout-dom-action-panel
input:focus {
  border-color:
    rgba(
      255,
      154,
      85,
      0.95
    ) !important;

  box-shadow:
    0 0 0 2px
      rgba(
        255,
        103,
        27,
        0.14
      ) !important;
}

.blackout-dom-actions {
  display:
    flex !important;

  flex-wrap:
    wrap !important;

  justify-content:
    center !important;

  gap:
    10px !important;

  margin:
    17px 0 7px !important;
}

.blackout-dom-action-panel button {
  min-height:
    46px !important;

  padding:
    10px 17px !important;

  border:
    1px solid
    rgba(
      255,
      123,
      47,
      0.72
    ) !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(
        69,
        24,
        7,
        0.98
      ),
      rgba(
        28,
        8,
        3,
        0.98
      )
    ) !important;

  color:
    #ffe2c4 !important;

  font-size:
    0.84rem !important;

  font-weight:
    850 !important;

  line-height:
    1.25 !important;

  cursor:
    pointer !important;
}

.blackout-dom-action-panel
button:hover,
.blackout-dom-action-panel
button:focus-visible {
  border-color:
    #ff9a59 !important;

  background:
    linear-gradient(
      180deg,
      rgba(
        107,
        38,
        8,
        0.99
      ),
      rgba(
        48,
        12,
        3,
        0.99
      )
    ) !important;

  box-shadow:
    0 0 18px
      rgba(
        255,
        94,
        18,
        0.26
      ) !important;

  outline:
    none !important;
}

.blackout-dom-action-panel
button:disabled {
  opacity:
    0.45 !important;

  cursor:
    not-allowed !important;
}

.blackout-dom-close {
  position:
    absolute !important;

  top:
    13px !important;

  right:
    13px !important;

  width:
    40px !important;

  min-width:
    40px !important;

  height:
    40px !important;

  min-height:
    40px !important;

  padding:
    0 !important;

  border-radius:
    50% !important;

  color:
    #ff7042 !important;

  font-size:
    1.3rem !important;
}

.blackout-dom-helper {
  margin:
    7px 0 15px !important;

  color:
    rgba(
      255,
      215,
      182,
      0.84
    ) !important;

  font-size:
    0.76rem !important;

  font-weight:
    650 !important;

  line-height:
    1.45 !important;

  text-align:
    center !important;
}

.blackout-dom-receive-section {
  margin:
    13px 0;

  padding:
    14px;

  border:
    1px solid
    rgba(
      255,
      122,
      46,
      0.32
    );

  border-radius:
    14px;

  background:
    rgba(
      0,
      0,
      0,
      0.36
    );
}

.blackout-dom-receive-section small {
  margin-top:
    0;
}

.blackout-dom-receive-address,
.blackout-dom-contract {
  padding:
    12px 13px;

  overflow-wrap:
    anywhere;

  border:
    1px solid
    rgba(
      255,
      132,
      60,
      0.40
    );

  border-radius:
    11px;

  background:
    rgba(
      0,
      0,
      0,
      0.70
    );

  color:
    #fff0dc;

  font-family:
    monospace;

  font-size:
    0.84rem;

  line-height:
    1.5;
}

.blackout-dom-receive-address.is-empty {
  color:
    rgba(
      255,
      211,
      175,
      0.68
    );
}

.blackout-dom-receive-section
> button {
  width:
    100% !important;

  margin-top:
    11px !important;
}

.blackout-dom-network-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    11px;

  margin:
    13px 0;
}

.blackout-dom-network-grid > div {
  padding:
    13px;

  border:
    1px solid
    rgba(
      255,
      123,
      45,
      0.29
    );

  border-radius:
    13px;

  background:
    rgba(
      35,
      9,
      2,
      0.68
    );
}

.blackout-dom-network-grid small {
  margin:
    0 0 5px;
}

.blackout-dom-network-grid strong {
  display:
    block;

  color:
    #fff0dc;

  font-size:
    0.95rem;
}

.blackout-dom-safety {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  margin-top:
    15px;

  padding:
    12px 14px;

  border:
    1px solid
    rgba(
      123,
      207,
      141,
      0.38
    );

  border-radius:
    13px;

  background:
    rgba(
      8,
      46,
      17,
      0.27
    );
}

.blackout-dom-safety strong {
  color:
    #bcecc6;

  font-size:
    0.72rem;

  letter-spacing:
    0.08em;
}

.blackout-dom-safety span {
  color:
    rgba(
      211,
      241,
      217,
      0.82
    );

  font-size:
    0.72rem;

  line-height:
    1.45;
}

@media (max-width: 650px) {
  .blackout-dom-action-panel {
    width:
      calc(
        100vw - 22px
      ) !important;

    max-height:
      calc(
        100vh - 22px
      ) !important;

    padding:
      23px 16px
      18px !important;

    border-radius:
      18px !important;
  }

  .blackout-dom-network-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .blackout-dom-actions button {
    flex:
      1 1 130px;
  }

  .blackout-dom-kicker {
    margin-left:
      36px;

    margin-right:
      36px;
  }
}

/* YEU_ACTIVE_SEND_RECEIVE_MODAL_V2_END */



/* YEU_ACTIVE_SEND_RECEIVE_MODAL_V2_VISIBILITY_FIX_START */

/*
 * Higher-specificity override for old
 * [data-kind="send"] / [data-kind="receive"]
 * rules left from the earlier Send/Receive UI.
 */

body.yeu-send-receive-modal-open
.blackout-dom-action-panel[data-kind="send"],
body.yeu-send-receive-modal-open
.blackout-dom-action-panel[data-kind="receive"] {

  display: block !important;

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

  filter: none !important;

  position: fixed !important;

  left: 50% !important;

  top: 50% !important;

  right: auto !important;

  bottom: auto !important;

  transform:
    translate(-50%, -50%) !important;

  z-index:
    2147483001 !important;

  width:
    min(
      620px,
      calc(100vw - 36px)
    ) !important;

  max-width:
    620px !important;

  max-height:
    calc(100vh - 40px) !important;

  overflow-y:
    auto !important;

  padding:
    28px 26px
    24px !important;

  border:
    1px solid
    rgba(
      255,
      111,
      30,
      0.72
    ) !important;

  border-radius:
    24px !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(
        104,
        31,
        4,
        0.38
      ),
      rgba(
        8,
        4,
        2,
        0.99
      ) 46%
    ) !important;

  box-shadow:
    0 30px 120px
      rgba(
        0,
        0,
        0,
        0.96
      ),
    0 0 46px
      rgba(
        255,
        72,
        10,
        0.25
      ),
    inset 0 0 42px
      rgba(
        255,
        75,
        10,
        0.045
      ) !important;

  color:
    #ffe4cb !important;
}

/*
 * Keep backdrop below panel, but above
 * everything else in the YÊU UI.
 */

body.yeu-send-receive-modal-open
.blackout-dom-action-backdrop {

  display: block !important;

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

  z-index:
    2147483000 !important;
}

@media (max-width: 650px) {

  body.yeu-send-receive-modal-open
  .blackout-dom-action-panel[data-kind="send"],

  body.yeu-send-receive-modal-open
  .blackout-dom-action-panel[data-kind="receive"] {

    width:
      calc(
        100vw - 22px
      ) !important;

    max-height:
      calc(
        100vh - 22px
      ) !important;

    padding:
      23px 16px
      18px !important;

    border-radius:
      18px !important;
  }
}

/* YEU_ACTIVE_SEND_RECEIVE_MODAL_V2_VISIBILITY_FIX_END */



/* YEU_SEND_RECEIVE_TRUE_3X_V2_START */

/*
   Desktop baseline was approximately 90px.
   90px × 3 = 270px.

   Keep all existing positions.
   Only enlarge the clickable artwork box.
*/

html body #root
main.yeu-blackout-locked-main-v1
> button.send-sigil,

html body #root
main.yeu-blackout-locked-main-v1
> button.receive-sigil {

  width: 270px !important;
  height: 270px !important;

  min-width: 270px !important;
  min-height: 270px !important;

  max-width: 270px !important;
  max-height: 270px !important;

  padding: 0 !important;

  overflow: visible !important;
}

/*
   The PNGs are approximately 3:1.
   object-fit contain preserves that artwork.
*/

html body #root
main.yeu-blackout-locked-main-v1
> button.send-sigil
> img,

html body #root
main.yeu-blackout-locked-main-v1
> button.receive-sigil
> img {

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  transform: none !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/*
   Existing smaller responsive versions were
   roughly 72–76px. About 3× = 216–228px.
*/

@media (max-width: 1000px) {

  html body #root
  main.yeu-blackout-locked-main-v1
  > button.send-sigil,

  html body #root
  main.yeu-blackout-locked-main-v1
  > button.receive-sigil {

    width: 228px !important;
    height: 228px !important;

    min-width: 228px !important;
    min-height: 228px !important;

    max-width: 228px !important;
    max-height: 228px !important;
  }
}

@media (max-width: 650px) {

  html body #root
  main.yeu-blackout-locked-main-v1
  > button.send-sigil,

  html body #root
  main.yeu-blackout-locked-main-v1
  > button.receive-sigil {

    width: 216px !important;
    height: 216px !important;

    min-width: 216px !important;
    min-height: 216px !important;

    max-width: 216px !important;
    max-height: 216px !important;
  }
}

/* YEU_SEND_RECEIVE_TRUE_3X_V2_END */



/* YEU_SEND_RECEIVE_CORNER_NUDGE_V1_START */

/*
   Keep TRUE 3X sizing exactly as-is.
   Position adjustment only:
   Send    = up + outward left
   Receive = up + outward right
*/

html body #root
main.yeu-blackout-locked-main-v1
> button.send-sigil {
  translate: -36px -22px !important;
}

html body #root
main.yeu-blackout-locked-main-v1
> button.receive-sigil {
  translate: 36px -22px !important;
}

/* Slightly gentler movement on smaller windows */
@media (max-width: 1000px) {

  html body #root
  main.yeu-blackout-locked-main-v1
  > button.send-sigil {
    translate: -24px -16px !important;
  }

  html body #root
  main.yeu-blackout-locked-main-v1
  > button.receive-sigil {
    translate: 24px -16px !important;
  }
}

/* YEU_SEND_RECEIVE_CORNER_NUDGE_V1_END */



/* YEU_SPIRIT_CAT_HELP_TRIGGER_V1_START */

/*
   Spirit Cat replaces the old little ? helper.
   Keep this secondary to Send / Receive:
   visible, recognizable, but deliberately small.
*/

html body #root
main.yeu-blackout-locked-main-v1
> .linhmiu-spirit-help-trigger {

  position: fixed !important;

  right: 28px !important;
  bottom: 24px !important;

  width: 92px !important;
  height: 92px !important;

  min-width: 92px !important;
  min-height: 92px !important;

  max-width: 92px !important;
  max-height: 92px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: none !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;

  z-index: 999999 !important;

  cursor: pointer !important;

  opacity: 0.88 !important;

  transition:
    transform 160ms ease,
    opacity 160ms ease,
    filter 160ms ease !important;
}


html body #root
main.yeu-blackout-locked-main-v1
> .linhmiu-spirit-help-trigger
> img {

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  pointer-events: none !important;

  filter:
    drop-shadow(
      0 0 8px
      rgba(255, 105, 40, 0.28)
    ) !important;
}


html body #root
main.yeu-blackout-locked-main-v1
> .linhmiu-spirit-help-trigger:hover,

html body #root
main.yeu-blackout-locked-main-v1
> .linhmiu-spirit-help-trigger:focus-visible {

  opacity: 1 !important;

  transform:
    scale(1.08) !important;

  filter:
    drop-shadow(
      0 0 10px
      rgba(255, 114, 45, 0.34)
    ) !important;
}


/*
   Forehead paper is retired.
   Keep any old charm CSS from accidentally
   resurrecting a decorative layer.
*/

html body #root
main.yeu-blackout-locked-main-v1
.linhmiu-forehead-charm {

  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Smaller windows */

@media (max-width: 1000px) {

  html body #root
  main.yeu-blackout-locked-main-v1
  > .linhmiu-spirit-help-trigger {

    right: 18px !important;
    bottom: 16px !important;

    width: 76px !important;
    height: 76px !important;

    min-width: 76px !important;
    min-height: 76px !important;

    max-width: 76px !important;
    max-height: 76px !important;
  }
}


@media (max-height: 480px) {

  html body #root
  main.yeu-blackout-locked-main-v1
  > .linhmiu-spirit-help-trigger {

    right: 14px !important;
    bottom: 10px !important;

    width: 64px !important;
    height: 64px !important;

    min-width: 64px !important;
    min-height: 64px !important;

    max-width: 64px !important;
    max-height: 64px !important;
  }
}

/* YEU_SPIRIT_CAT_HELP_TRIGGER_V1_END */



/* YEU_SPIRIT_CAT_QUESTION_SLOT_V2_START */

/*
   Replace the old Help ? spatially.
   JS reads the exact center of that original control
   and places Spirit Cat on that coordinate.
*/

:root {
  /*
     Screenshot-safe fallback only.
     Normally JS immediately replaces these.
  */
  --yeu-spirit-help-x:
    calc(100vw - 112px);

  --yeu-spirit-help-y:
    calc(100vh - 115px);
}


html body #root
main.yeu-blackout-locked-main-v1
> .linhmiu-spirit-help-trigger {

  position: fixed !important;

  left:
    var(
      --yeu-spirit-help-x
    )
    !important;

  top:
    var(
      --yeu-spirit-help-y
    )
    !important;

  right: auto !important;
  bottom: auto !important;

  margin: 0 !important;

  transform:
    translate(
      -50%,
      -50%
    )
    !important;
}


/*
   Preserve centering when hovering.
*/

html body #root
main.yeu-blackout-locked-main-v1
> .linhmiu-spirit-help-trigger:hover,

html body #root
main.yeu-blackout-locked-main-v1
> .linhmiu-spirit-help-trigger:focus-visible {

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1.08)
    !important;
}


/*
   Original ? is retained only as an invisible
   responsive positioning anchor.
*/

[data-yeu-spirit-help-replaced="1"] {

  visibility:
    hidden !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;
}

/* YEU_SPIRIT_CAT_QUESTION_SLOT_V2_END */



/* YEU_ORBIT_EQUAL_SMALL_ICONS_V2_START */

/*
   Orbit sizing rule:
   - every normal icon = SAME SIZE
   - bottom icons no longer shrink
   - side icons no longer get different perspective sizes
   - only the 12-o'clock focused icon receives forehead zoom
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column
.talisman.yeu-orbit-item {

  --yeu-orbit-axis-scale:
    1 !important;

  --yeu-orbit-scale:
    1 !important;
}


html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column
.talisman.yeu-orbit-item
.talisman-img-wrap {

  transform:
    scale(
      var(
        --yeu-orbit-responsive-scale,
        1
      )
    )
    scale(
      var(
        --yeu-orbit-forehead-zoom,
        1
      )
    )
    !important;

  transform-origin:
    50% 50% !important;

  overflow:
    visible !important;
}


/*
   Prevent the actual artwork from carrying
   an old individual transform.
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column
.talisman.yeu-orbit-item
.talisman-img-wrap
> img {

  transform:
    none !important;
}


/*
   Tiny / half-height layouts:
   still equal-size orbit icons.
*/

@media (min-width: 651px) and (max-height: 480px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item {

    --yeu-orbit-axis-scale:
      1 !important;

    --yeu-orbit-scale:
      1 !important;
  }
}

/* YEU_ORBIT_EQUAL_SMALL_ICONS_V2_END */


/* YEU_ORBIT_CENTER_LOWER_FOCUS_V1_START */
/*
  Pull the zoomed/forehead-focused orbit item lower
  toward center. Non-focused items stay almost unchanged.
*/
html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav
.talisman.yeu-orbit-item {
  margin-top: calc(
    (var(--yeu-orbit-forehead-zoom, 1) - 1) * 84px
  ) !important;
}
/* YEU_ORBIT_CENTER_LOWER_FOCUS_V1_END */



/* YEU_ORBIT_SMOOTH_FOCUS_ZOOM_V1_START */

/*
   Keep only the 12-o'clock item enlarged,
   but animate the enlargement instead of
   instantly blinking between normal / zoomed.

   Also animate its downward focus movement.
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column
.talisman.yeu-orbit-item {

  transition:
    margin-top 600ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      )
      !important;
}


html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column
.talisman.yeu-orbit-item
.talisman-img-wrap {

  transition:
    transform 600ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      ),
    filter 600ms ease,
    opacity 350ms ease
      !important;

  will-change:
    transform !important;
}


/*
   Artwork itself stays stable.
   The wrapper performs the smooth zoom.
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column
.talisman.yeu-orbit-item
.talisman-img-wrap
> img {

  transition:
    filter 600ms ease
      !important;
}


/*
   Tiny windows: slightly faster,
   so the orbit remains responsive.
*/

@media (max-height: 480px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item {

    transition:
      margin-top 450ms
        cubic-bezier(
          0.22,
          1,
          0.36,
          1
        )
        !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  .talisman.yeu-orbit-item
  .talisman-img-wrap {

    transition:
      transform 450ms
        cubic-bezier(
          0.22,
          1,
          0.36,
          1
        )
        !important;
  }
}

/* YEU_ORBIT_SMOOTH_FOCUS_ZOOM_V1_END */



/* YEU_PORTRAIT_ORBIT_COORDINATES_V2B_START */
/* YEU_PORTRAIT_PHONE_TRIGGER_V2C */

/*
   PHONE PORTRAIT ONLY.

   Desktop and landscape remain exactly on their
   existing orbit system.

   Every portrait icon receives a true x/y ellipse
   coordinate calculated in JSX.
*/

@media
  (orientation: portrait)
  and (max-width: 1100px) {

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    overflow: visible !important;

    pointer-events: none !important;
  }


  /*
     Center point of portrait ellipse.

     Home is angle -90:
       cos(-90) = 0
       therefore Home is exactly horizontally centered.

     Center-Y is based on WIDTH so the keyboard changing
     viewport height does not collapse the navigation.
  */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  > .talisman.yeu-orbit-item {

    position: fixed !important;

    left: 50% !important;

    top:
      clamp(
        360px,
        105vw,
        430px
      )
      !important;

    right: auto !important;
    bottom: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform:
      translate(
        calc(
          -50% +
          var(
            --yeu-portrait-orbit-x,
            0px
          )
        ),
        calc(
          -50% +
          var(
            --yeu-portrait-orbit-y,
            0px
          )
        )
      )
      !important;

    pointer-events: auto !important;

    --yeu-orbit-axis-scale:
      1 !important;

    --yeu-orbit-scale:
      1 !important;
  }


  /*
     Keep every normal icon equal size.

     Existing --yeu-orbit-forehead-zoom still gives
     the top icon its smooth 1.45x focus animation.
  */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav.talisman-column
  > .talisman.yeu-orbit-item
  > .talisman-img-wrap {

    transform:
      scale(
        var(
          --yeu-orbit-responsive-scale,
          1
        )
      )
      scale(
        var(
          --yeu-orbit-forehead-zoom,
          1
        )
      )
      !important;

    transform-origin:
      50% 50% !important;

    overflow:
      visible !important;

    transition:
      transform 600ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      )
      !important;
  }


  /*
     The talisman PNGs already contain their names.
     Hide the additional HTML label on portrait.
  */

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .yeu-orbit-label {

    display: none !important;
    visibility: hidden !important;
  }


  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .talisman.yeu-orbit-item::before,

  html body #root
  .yeu-blackout-locked-main-v1
  .yeu-orbit-nav
  .talisman.yeu-orbit-item::after {

    content: none !important;
  }


  /*
     Spirit Cat stays visually above orbit items.
  */

  html body #root
  .yeu-blackout-locked-main-v1
  > .linhmiu-spirit-help-trigger {

    z-index:
      1000001 !important;
  }
}

/* YEU_PORTRAIT_ORBIT_COORDINATES_V2B_END */



/* YEU_MOBILE_PORTRAIT_RUNTIME_ORBIT_V2E_START */

/*
   This block deliberately uses NO media query.

   React adds:
     .yeu-portrait-orbit-active

   only when the live viewport is portrait and <=1100px.

   Therefore:
   - portrait phone gets the ellipse
   - landscape keeps the good existing orbit
   - desktop keeps the good existing orbit
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column.yeu-portrait-orbit-active {

  position: fixed !important;

  inset: 0 !important;

  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: none !important;
  max-height: none !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  overflow: visible !important;

  pointer-events: none !important;
}


/*
   Every navigation button now uses the X/Y coordinates
   calculated by JSX instead of old phone-column geometry.
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column.yeu-portrait-orbit-active
> .talisman.yeu-orbit-item {

  position: fixed !important;

  inset: auto !important;

  left: 50% !important;

  top:
    clamp(
      360px,
      105vw,
      430px
    )
    !important;

  right: auto !important;
  bottom: auto !important;

  float: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  transform:
    translate(
      calc(
        -50% +
        var(
          --yeu-portrait-orbit-x,
          0px
        )
      ),
      calc(
        -50% +
        var(
          --yeu-portrait-orbit-y,
          0px
        )
      )
    )
    !important;

  pointer-events: auto !important;

  --yeu-orbit-axis-scale:
    1 !important;

  --yeu-orbit-scale:
    1 !important;
}


/*
   Preserve equal normal icon sizing and only use
   the existing forehead zoom for the focused icon.
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column.yeu-portrait-orbit-active
> .talisman.yeu-orbit-item
> .talisman-img-wrap {

  transform:
    scale(
      var(
        --yeu-orbit-responsive-scale,
        1
      )
    )
    scale(
      var(
        --yeu-orbit-forehead-zoom,
        1
      )
    )
    !important;

  transform-origin:
    50% 50% !important;

  overflow: visible !important;

  transition:
    transform 600ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    !important;
}


/*
   Keep artwork itself stable.
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column.yeu-portrait-orbit-active
.talisman-img-wrap
> img {

  transform: none !important;
}


/*
   PNG already contains the title.
   Remove the duplicate HTML title in portrait.
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column.yeu-portrait-orbit-active
.yeu-orbit-label {

  display: none !important;
  visibility: hidden !important;
}


/*
   Prevent old phone pseudo labels.
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column.yeu-portrait-orbit-active
.talisman.yeu-orbit-item::before,

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav.talisman-column.yeu-portrait-orbit-active
.talisman.yeu-orbit-item::after {

  content: none !important;
}

/* YEU_MOBILE_PORTRAIT_RUNTIME_ORBIT_V2E_END */



/* YEU_HIDE_LEGACY_PORTRAIT_COLUMNS_V2F_START */

/*
   The old mobile navigation still renders:
     .talisman-left
     .talisman-right

   Keep those untouched on desktop/landscape.

   In runtime portrait mode, V2E is the ONLY
   navigation layer that should be visible.
*/

html body #root
.yeu-blackout-locked-main-v1.yeu-mobile-portrait-active
.talisman-column.talisman-left,

html body #root
.yeu-blackout-locked-main-v1.yeu-mobile-portrait-active
.talisman-column.talisman-right {

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;
}


/*
   Keep the new V2E orbit explicitly visible.
*/

html body #root
.yeu-blackout-locked-main-v1.yeu-mobile-portrait-active
.yeu-orbit-nav.yeu-portrait-orbit-active {

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;
}

/* YEU_HIDE_LEGACY_PORTRAIT_COLUMNS_V2F_END */



/* YEU_MOBILE_CONTINUOUS_ORBIT_DRAG_V3_START */

/*
   Do not allow Android/Chrome to reinterpret an orbit
   finger gesture as browser scrolling/panning.
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav {

  touch-action:
    none !important;

  overscroll-behavior:
    contain !important;

  -webkit-user-select:
    none !important;

  user-select:
    none !important;
}


html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav
.talisman.yeu-orbit-item,

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav
.talisman-img-wrap,

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav
.talisman-img-wrap
> img {

  touch-action:
    none !important;

  -webkit-user-select:
    none !important;

  user-select:
    none !important;

  -webkit-user-drag:
    none !important;
}


/*
   The clickable orbit buttons still receive the pointer.
*/

html body #root
.yeu-blackout-locked-main-v1
.yeu-orbit-nav
.talisman.yeu-orbit-item {

  pointer-events:
    auto !important;
}

/* YEU_MOBILE_CONTINUOUS_ORBIT_DRAG_V3_END */



/* ============================================================
   YEU_RASTER_SHARPNESS_V1_START

   Keep PNG artwork crisp.
   Does NOT change size, position, orbit geometry, or glow layers.
   ============================================================ */

/* Linh Miu actual face raster */
html body #root
main.yeu-blackout-locked-main-v1
img.linh-miu-real-face {
  filter: none !important;
  -webkit-filter: none !important;
  image-rendering: auto !important;
  will-change: auto !important;
}

/* Navigation artwork itself */
html body #root
main.yeu-blackout-locked-main-v1
.yeu-orbit-nav
.talisman-img-wrap > img {
  filter: none !important;
  -webkit-filter: none !important;
  image-rendering: auto !important;
  opacity: 1 !important;
  will-change: auto !important;
}

/* Prevent an older wrapper filter from blurring the whole PNG */
html body #root
main.yeu-blackout-locked-main-v1
.yeu-orbit-nav
.talisman-img-wrap {
  filter: none !important;
  -webkit-filter: none !important;
  will-change: auto !important;
}

/* Prevent an older button filter from softening its artwork */
html body #root
main.yeu-blackout-locked-main-v1
.yeu-orbit-nav
.talisman.yeu-orbit-item {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Send + Receive actual artwork */
html body #root
main.yeu-blackout-locked-main-v1
> button.send-sigil > img,
html body #root
main.yeu-blackout-locked-main-v1
> button.receive-sigil > img {
  filter: none !important;
  -webkit-filter: none !important;
  image-rendering: auto !important;
  opacity: 1 !important;
  will-change: auto !important;
}

/* YEU_RASTER_SHARPNESS_V1_END */


/* YEU_SEND_RECEIVE_CENTER_V1_START
   YEU Send / Receive face positioning
*/

/* SEND */
html body #root
main.yeu-blackout-locked-main-v1
> button.send-sigil {
  position: fixed !important;
  inset: auto !important;

  left: calc(50% + 22px) !important;
  top: calc(34% - 28px) !important;

  right: auto !important;
  bottom: auto !important;

  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4005 !important;
}

/* RECEIVE */
html body #root
main.yeu-blackout-locked-main-v1
> button.receive-sigil {
  position: fixed !important;
  inset: auto !important;

  left: calc(50% - 18px) !important;
  top: 74% !important;

  right: auto !important;
  bottom: auto !important;

  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4005 !important;
}

html body #root
main.yeu-blackout-locked-main-v1
> button.send-sigil > img,
html body #root
main.yeu-blackout-locked-main-v1
> button.receive-sigil > img {
  display: block !important;
  margin: 0 auto !important;
}

/* YEU_SEND_RECEIVE_CENTER_V1_END */

/* YEU_SEND_RECEIVE_HITBOX_V1_START

   EASY HITBOX CONTROLS

   X:
     positive = move clickable area RIGHT
     negative = move clickable area LEFT

   Y:
     positive = move clickable area DOWN
     negative = move clickable area UP

   Changing these DOES NOT move the visible artwork.
*/

/* -------------------------
   SEND CLICK AREA
   ------------------------- */

html body #root
main.yeu-blackout-locked-main-v1
> button.send-sigil {
  --yeu-hit-x: 0px;
  --yeu-hit-y: 0px;

  --yeu-hit-width: 120px;
  --yeu-hit-height: 80px;

  width: var(--yeu-hit-width) !important;
  height: var(--yeu-hit-height) !important;

  left: calc(50% + 22px + var(--yeu-hit-x)) !important;
  top: calc(34% - 28px + var(--yeu-hit-y)) !important;

  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;

  transform: translate(-50%, -50%) !important;
}

/* Keep SEND artwork exactly where it currently is */
html body #root
main.yeu-blackout-locked-main-v1
> button.send-sigil > img {
  position: absolute !important;

  width: 228px !important;
  height: 228px !important;
  max-width: none !important;
  max-height: none !important;

  left: calc(50% - var(--yeu-hit-x)) !important;
  top: calc(50% - var(--yeu-hit-y)) !important;

  transform: translate(-50%, -50%) !important;

  /* Critical: transparent PNG area cannot steal clicks */
  pointer-events: none !important;
}


/* -------------------------
   RECEIVE CLICK AREA
   ------------------------- */

html body #root
main.yeu-blackout-locked-main-v1
> button.receive-sigil {
  --yeu-hit-x: 0px;
  --yeu-hit-y: 0px;

  --yeu-hit-width: 120px;
  --yeu-hit-height: 80px;

  width: var(--yeu-hit-width) !important;
  height: var(--yeu-hit-height) !important;

  left: calc(50% - 18px + var(--yeu-hit-x)) !important;
  top: calc(74% + var(--yeu-hit-y)) !important;

  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;

  transform: translate(-50%, -50%) !important;
}

/* Keep RECEIVE artwork exactly where it currently is */
html body #root
main.yeu-blackout-locked-main-v1
> button.receive-sigil > img {
  position: absolute !important;

  width: 228px !important;
  height: 228px !important;
  max-width: none !important;
  max-height: none !important;

  left: calc(50% - var(--yeu-hit-x)) !important;
  top: calc(50% - var(--yeu-hit-y)) !important;

  transform: translate(-50%, -50%) !important;

  pointer-events: none !important;
}

/* YEU_SEND_RECEIVE_HITBOX_V1_END */




/* YEU_SEND_RECEIVE_OVAL_HITBOX_FORCE_V1_START
   Force visible/clickable Send + Receive areas to horizontal ovals.
   Artwork remains centered and unchanged.
*/

html body #root
main.yeu-blackout-locked-main-v1
> button.send-sigil,
html body #root
main.yeu-blackout-locked-main-v1
> button.receive-sigil {
  width: 130px !important;
  height: 64px !important;
  min-width: 130px !important;
  min-height: 64px !important;
  max-width: 130px !important;
  max-height: 64px !important;

  border-radius: 999px !important;
  padding: 0 !important;
}

/* Keep artwork larger than hitbox and centered */
html body #root
main.yeu-blackout-locked-main-v1
> button.send-sigil > img,
html body #root
main.yeu-blackout-locked-main-v1
> button.receive-sigil > img {
  width: 228px !important;
  height: 228px !important;
  max-width: none !important;
  max-height: none !important;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  pointer-events: none !important;
}

/* YEU_SEND_RECEIVE_OVAL_HITBOX_FORCE_V1_END */