/* Remote font imports are intentionally disabled for Telegram WebView reliability. */

:root {
  --tg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tg-safe-top: env(safe-area-inset-top, 0px);
  --miniapp-home-top-offset: 58px;
  --miniapp-top-offset: 56px;
  --miniapp-reader-top-offset: 96px;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  background: #17102b;
  color: #fff8fb;
  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.product-stage {
  align-items: stretch;
  background:
    radial-gradient(circle at 20% -12%, rgba(217, 179, 255, 0.22), transparent 42%),
    radial-gradient(circle at 84% 12%, rgba(255, 178, 203, 0.16), transparent 36%),
    linear-gradient(180deg, #20163b 0%, #17102b 48%, #1b1127 100%);
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  width: 100vw;
}

.phone-app {
  background:
    radial-gradient(110% 68% at 48% -12%, rgba(103, 58, 183, 0.45), transparent 58%),
    radial-gradient(92% 80% at 92% 100%, rgba(217, 119, 170, 0.22), transparent 54%),
    linear-gradient(180deg, #21153e 0%, #171029 54%, #1c1228 100%);
  border-radius: 0;
  box-shadow: none;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  max-height: none;
  min-height: 0;
  width: min(100vw, 430px);
}

@media (min-width: 520px) {
  .product-stage {
    padding: 0;
  }

  .phone-app {
    border-radius: 0;
    box-shadow: none;
    max-height: none;
  }
}

.phone-noise {
  opacity: 0.16;
}

.phone-status {
  color: #fffaf7;
  display: none !important;
}

.app-header {
  padding: calc(var(--miniapp-home-top-offset) + var(--tg-safe-top)) 22px 18px !important;
}

.app-title-wrap h1,
.chapter-content h2,
.tarot-mini-card h3,
.daily-card h3,
.scene-copy h2,
.outfit-hero h2,
.profile-card h2,
.room-card h2,
.tarot-intro h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
}

.app-title-wrap h1 {
  color: #fff8ef;
  font-size: 32px;
  line-height: 0.92;
}

.app-title-wrap h1 span {
  font-family: Manrope, Inter, sans-serif;
  font-weight: 800;
}

.app-title-wrap p {
  color: rgba(216, 207, 232, 0.54);
  font-size: 10px;
  letter-spacing: 0.13em;
}

.screen-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
  padding: 0 22px calc(108px + var(--tg-safe-bottom));
}

.section-kicker {
  color: rgba(231, 216, 255, 0.47);
  margin-top: 6px;
}

.desktop-grid {
  gap: 17px 14px;
  margin-bottom: 22px;
}

.app-icon-box {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.22), 0 14px 34px rgba(0, 0, 0, 0.26);
  height: 62px;
  width: 62px;
}

.app-icon strong {
  color: rgba(255, 247, 251, 0.87);
  font-weight: 800;
}

.app-icon small {
  color: rgba(233, 221, 246, 0.54);
}

.chapter-card,
.tarot-mini-card,
.daily-card,
.room-card,
.profile-card,
.shop-note,
.tarot-note,
.future-grid button,
.decor-list button,
.settings-row,
.shop-product,
.outfit-hero,
.outfit-card,
.chat-contact-card,
.message-input,
.tarot-intro {
  background: rgba(255, 255, 255, 0.095);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 16px 46px rgba(8, 4, 22, 0.22);
}

.chapter-card {
  min-height: 245px;
}

.chapter-overlay {
  background:
    linear-gradient(90deg, rgba(21, 12, 40, 0.92), rgba(21, 12, 40, 0.66) 45%, rgba(21, 12, 40, 0.14)),
    linear-gradient(180deg, transparent 0%, rgba(21, 12, 40, 0.76) 100%);
}

.chapter-content h2 {
  font-size: 39px;
}

.tarot-mini-card h3,
.daily-card h3 {
  font-size: 32px;
}

.visual-scene {
  background: #1c1330;
  min-height: min(520px, calc(100dvh - 230px));
}

.visual-gradient {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(23, 16, 43, 0.48) 42%, rgba(23, 16, 43, 0.91));
}

.bottom-nav {
  background: rgba(246, 241, 249, 0.9);
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 26px;
  bottom: clamp(6px, calc(var(--tg-safe-bottom) - 18px), 18px) !important;
  box-shadow: 0 -12px 46px rgba(11, 6, 24, 0.24), inset 0 1px rgba(255, 255, 255, 0.88);
  color: #706a78;
  height: 68px;
  box-sizing: border-box;
  left: 50% !important;
  margin: 0 !important;
  position: fixed !important;
  right: auto !important;
  transform: translate3d(-50%, 0, 0) !important;
  width: min(390px, calc(100dvw - 28px)) !important;
  z-index: 40 !important;
}

.bottom-nav button {
  color: #8f8996;
}

.bottom-nav button.active {
  color: #2f7df3;
}

.bottom-nav button.active::after {
  background: #2f7df3;
  box-shadow: 0 0 14px rgba(47, 125, 243, 0.42);
}

.bottom-nav i {
  background: #f0447f;
}

.toast {
  bottom: calc(90px + var(--tg-safe-bottom));
}

.story-picker {
  inset: 0;
  position: fixed;
  z-index: 80;
}

.story-picker__shade {
  background: rgba(8, 5, 18, 0.62);
  inset: 0;
  position: absolute;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.story-picker__panel {
  background:
    radial-gradient(circle at 24% 0%, rgba(190, 132, 255, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(31, 23, 50, 0.94), rgba(17, 11, 29, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px 30px 0 0;
  bottom: 0;
  box-shadow: 0 -22px 70px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.14);
  left: 50%;
  max-height: min(76dvh, 620px);
  overflow: hidden;
  padding: 18px 18px calc(18px + var(--tg-safe-bottom));
  position: absolute;
  transform: translateX(-50%);
  width: min(430px, 100vw);
}

.story-picker__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.story-picker__head span {
  color: #fff8ef;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 0.95;
}

.story-picker__head button {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #fff8fb;
  display: flex;
  font-size: 28px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.story-picker__list {
  display: grid;
  gap: 12px;
}

.story-picker__card {
  align-items: stretch;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.07));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  color: inherit;
  display: grid;
  gap: 14px;
  grid-template-columns: 94px 1fr;
  min-height: 132px;
  overflow: hidden;
  padding: 10px;
  text-align: left;
}

.story-picker__card img {
  border-radius: 18px;
  height: 112px;
  object-fit: cover;
  width: 94px;
}

.story-picker__card span {
  align-self: center;
  min-width: 0;
}

.story-picker__card b {
  color: #fff8ef;
  display: block;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.14;
  margin-bottom: 6px;
}

.story-picker__card small {
  color: rgba(255, 213, 161, 0.9);
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.story-picker__card em {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: rgba(255, 248, 251, 0.68);
  display: -webkit-box;
  font-size: 13px;
  font-style: normal;
  line-height: 1.34;
  overflow: hidden;
}

.story-picker__note {
  color: rgba(255, 248, 251, 0.52);
  font-size: 13px;
  line-height: 1.35;
  margin: 2px 4px 0;
  text-align: center;
}

.miniapp-audio-toggle {
  align-items: center;
  background: rgba(246, 241, 249, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  bottom: calc(88px + var(--tg-safe-bottom));
  box-shadow: 0 12px 34px rgba(11, 6, 24, 0.25), inset 0 1px rgba(255, 255, 255, 0.9);
  color: #71677c;
  cursor: pointer;
  display: flex;
  font-size: 21px;
  font-weight: 800;
  height: 46px;
  justify-content: center;
  position: fixed;
  right: max(18px, calc((100vw - 430px) / 2 + 18px));
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
  width: 46px;
  z-index: 20;
}

.miniapp-audio-toggle.is-playing {
  background: linear-gradient(135deg, #fff1f7, #eadfff);
  color: #8b4de8;
}

.miniapp-audio-toggle:active {
  transform: scale(0.94);
}

.phone-app:has(.reader-screen) {
  background: #120c21;
}

.phone-app:has(.reader-screen) .phone-noise,
.phone-app:has(.reader-screen) .phone-status,
.phone-app:has(.reader-screen) .like-counter,
.phone-app:has(.reader-screen) .bottom-nav {
  display: none;
}

.phone-app:has(.reader-screen) .app-header {
  align-items: flex-start;
  left: 0;
  padding: calc(var(--miniapp-reader-top-offset) + var(--tg-safe-top)) 16px 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 12;
}

.phone-app:has(.reader-screen) .app-title-wrap {
  pointer-events: none;
}

.phone-app:has(.reader-screen) .app-title-wrap > div {
  display: none;
}

.phone-app:has(.reader-screen) .icon-button.tiny {
  background: rgba(246, 241, 249, 0.84);
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.9);
  color: #2d2734;
  height: 48px;
  min-width: 48px;
  pointer-events: auto;
}

.phone-app:has(.reader-screen) .screen-scroll {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 0;
}

.reader-screen {
  background: #0d0918;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  inset: 0;
  overflow: hidden;
  position: fixed;
  width: 100vw;
  z-index: 5;
}

.reader-screen .visual-scene {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  min-height: 100%;
  width: 100%;
}

.reader-screen .visual-scene img {
  filter: saturate(1.05) brightness(0.92);
}

.reader-screen .visual-gradient {
  background:
    linear-gradient(180deg, rgba(5, 3, 12, 0.2) 0%, rgba(5, 3, 12, 0.03) 28%, rgba(10, 7, 20, 0.5) 68%, rgba(10, 7, 20, 0.9) 100%),
    radial-gradient(circle at 50% 72%, transparent 0%, rgba(0, 0, 0, 0.18) 72%);
}

.reader-screen .scene-topline {
  display: none;
}

.reader-screen .scene-copy {
  background: rgba(241, 239, 249, 0.92);
  border: 2px solid rgba(192, 163, 116, 0.82);
  border-radius: 28px 28px 18px 18px;
  bottom: calc(154px + var(--tg-safe-bottom));
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.85);
  color: #222333;
  left: 24px;
  max-height: 27dvh;
  overflow: hidden;
  padding: 34px 24px 22px;
  right: 24px;
}

.reader-screen .scene-copy::before {
  background: linear-gradient(135deg, #c5a46e, #9e7d49);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(74, 47, 16, 0.22);
  color: #fff;
  content: "Джейни";
  font-family: Manrope, Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  left: 50%;
  min-width: 180px;
  padding: 10px 22px 11px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translate(-50%, -50%);
}

.reader-screen .scene-copy h2 {
  display: none;
}

.reader-screen .scene-copy p {
  color: #242536;
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(20px, 5.1vw, 28px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.42;
  margin: 0;
}

.reader-screen .choice-panel {
  bottom: calc(18px + var(--tg-safe-bottom));
  display: grid;
  gap: 8px;
  left: 24px;
  max-height: 128px;
  overflow: hidden;
  padding: 0;
  position: fixed;
  right: 24px;
  z-index: 8;
}

.reader-screen .choice-title {
  display: none;
}

.reader-screen .choice {
  background: rgba(246, 241, 249, 0.9);
  border: 2px solid rgba(192, 163, 116, 0.72);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.8);
  color: #242536;
  min-height: 54px;
  padding: 10px 16px;
}

.reader-screen .choice span {
  color: #242536;
  font-size: 16px;
  font-weight: 800;
}

.reader-screen .choice small {
  color: rgba(36, 37, 54, 0.62);
  font-size: 11px;
}

.phone-app:has(.reader-screen) .miniapp-audio-toggle {
  bottom: auto;
  right: 16px;
  top: calc(var(--miniapp-reader-top-offset) + var(--tg-safe-top));
  z-index: 14;
}

body:has(.phone-app-tarot) .miniapp-audio-toggle {
  display: none !important;
}

@media (max-width: 360px) {
  .app-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .screen-scroll {
    padding-left: 18px;
    padding-right: 18px;
  }

  .app-icon-box {
    height: 56px;
    width: 56px;
  }

  .bottom-nav {
    width: calc(100vw - 22px);
  }

  .miniapp-audio-toggle {
    right: 14px;
  }

  .reader-screen .scene-copy {
    bottom: calc(146px + var(--tg-safe-bottom));
    left: 16px;
    padding: 30px 18px 18px;
    right: 16px;
  }

  .reader-screen .scene-copy p {
    font-size: 19px;
  }

  .reader-screen .choice-panel {
    left: 16px;
    right: 16px;
  }
}

.story-chat-bridge-open .messages-screen {
  min-height: calc(100dvh - 210px);
}

.story-chat-bridge,
.story-chat-fallback {
  color: #fff8fb;
  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.story-chat-fallback {
  background:
    radial-gradient(circle at 18% -10%, rgba(217, 179, 255, 0.22), transparent 42%),
    linear-gradient(180deg, #20163b, #17102b 52%, #1b1127);
  inset: 0;
  overflow: auto;
  padding: calc(18px + var(--tg-safe-top)) 18px calc(92px + var(--tg-safe-bottom));
  position: fixed;
  z-index: 90;
}

.story-chat-bridge {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100dvh - 210px);
  padding-bottom: 8px;
}

.story-chat-contact,
.story-chat-context,
.story-chat-window,
.story-chat-form,
.story-chat-return {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 16px 46px rgba(8, 4, 22, 0.22);
}

.story-chat-contact {
  align-items: center;
  background: rgba(255, 255, 255, 0.095);
  border-radius: 21px;
  display: flex;
  gap: 12px;
  padding: 13px;
}

.story-chat-contact > span {
  align-items: center;
  background: linear-gradient(135deg, rgba(201, 168, 108, 0.34), rgba(124, 58, 237, 0.32));
  border-radius: 16px;
  color: #ffe7a2;
  display: flex;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.story-chat-contact b,
.story-chat-contact small {
  display: block;
}

.story-chat-contact b {
  color: #fff8ef;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.story-chat-contact small {
  color: rgba(250, 244, 255, 0.64);
  font-size: 11px;
  margin-top: 3px;
}

.story-chat-context {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 13px 14px;
}

.story-chat-context strong {
  color: #ffdca0;
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.story-chat-context p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: rgba(255, 248, 251, 0.74);
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.38;
  margin: 0;
  overflow: hidden;
}

.story-chat-window {
  background: linear-gradient(180deg, rgba(27, 20, 46, 0.82), rgba(15, 11, 27, 0.76));
  border-radius: 24px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 9px;
  max-height: calc(100dvh - 392px);
  min-height: 300px;
  overflow: auto;
  padding: 14px;
}

.story-chat-line {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.story-chat-line.is-own {
  align-items: flex-end;
}

.story-chat-line p {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px 18px 18px 6px;
  color: rgba(255, 248, 251, 0.94);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  margin: 0;
  max-width: 82%;
  padding: 10px 12px;
  white-space: pre-wrap;
}

.story-chat-line.is-own p {
  background: linear-gradient(135deg, rgba(132, 89, 255, 0.82), rgba(217, 82, 157, 0.72));
  border-radius: 18px 18px 6px 18px;
}

.story-chat-line small {
  color: rgba(255, 255, 255, 0.52);
  display: block;
  font-size: 10px;
  margin-top: 4px;
  text-align: right;
}

.story-chat-typing {
  color: rgba(255, 248, 251, 0.54);
  font-size: 13px;
  font-weight: 800;
  padding: 2px 8px;
}

.story-chat-quick {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.story-chat-quick::-webkit-scrollbar {
  display: none;
}

.story-chat-quick button {
  background: rgba(255, 248, 251, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #fff8fb;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 900;
  min-height: 36px;
  padding: 0 13px;
}

.story-chat-form {
  background: rgba(255, 255, 255, 0.095);
  border-radius: 21px;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 42px;
  padding: 10px;
}

.story-chat-form input {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 14px;
  min-width: 0;
  outline: 0;
}

.story-chat-form input:disabled {
  opacity: 0.72;
}

.story-chat-form button {
  align-items: center;
  background: linear-gradient(135deg, #f4a6c8, #7c3aed);
  border: 0;
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 24px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.story-chat-form button:disabled {
  cursor: default;
  opacity: 0.56;
}

.story-chat-return {
  background: linear-gradient(135deg, #f2d89b, #b8914d);
  border: 0;
  border-radius: 18px;
  color: #17101f;
  cursor: pointer;
  font-size: 14px;
  font-weight: 950;
  min-height: 48px;
  padding: 0 14px;
  width: 100%;
}

@media (max-width: 360px) {
  .story-chat-window {
    max-height: calc(100dvh - 372px);
    min-height: 260px;
  }

  .story-chat-context p {
    -webkit-line-clamp: 2;
  }
}

.wardrobe-open .phone-app {
  pointer-events: none;
}

.wg-root {
  --gold: #c89a52;
  --gold-light: #f5d08a;
  --ink: #201d20;
  --muted: rgba(32, 29, 32, 0.62);
  --panel: rgba(255, 252, 247, 0.94);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 237, 199, 0.32), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(210, 149, 76, 0.24), transparent 28%),
    linear-gradient(180deg, #1c1310 0%, #281b17 46%, #0f0b0b 100%);
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 100dvh;
  inset: 0;
  isolation: isolate;
  margin: 0 auto;
  max-width: 480px;
  min-height: 700px;
  overflow: hidden;
  position: fixed;
  width: 100vw;
  z-index: 9999;
}

.wg-root::before {
  background:
    linear-gradient(115deg, transparent 0 9%, rgba(255,255,255,.06) 9.4% 10.2%, transparent 10.6% 100%),
    linear-gradient(245deg, transparent 0 16%, rgba(255,255,255,.05) 16.2% 16.9%, transparent 17.4% 100%),
    linear-gradient(90deg, rgba(0,0,0,.56) 0 7%, transparent 7% 93%, rgba(0,0,0,.52) 93% 100%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -3;
}

.wg-root::after {
  background:
    linear-gradient(90deg, rgba(255,218,152,.13) 0 1px, transparent 1px 25%),
    linear-gradient(0deg, rgba(255,218,152,.12) 0 1px, transparent 1px 33%),
    linear-gradient(90deg, rgba(49,34,29,.98), rgba(23,16,15,.98));
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(255,230,181,.1), inset 0 22px 50px rgba(255,200,128,.07), 0 42px 90px rgba(0,0,0,.24);
  content: "";
  inset: 120px 20px 250px;
  position: absolute;
  z-index: -2;
}

.wg-closet-light {
  background: linear-gradient(180deg, rgba(255,232,185,.48), rgba(255,232,185,0));
  filter: blur(14px);
  height: 470px;
  inset: -120px -80px auto auto;
  opacity: .72;
  pointer-events: none;
  position: absolute;
  transform: rotate(24deg);
  width: 280px;
  z-index: -1;
}

.wg-header {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 56px 1fr auto;
  padding: calc(16px + env(safe-area-inset-top)) 18px 8px;
  position: relative;
  z-index: 5;
}

.wg-icon-button,
.wg-arrow,
.wg-plus {
  border: 0;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wg-icon-button {
  background: rgba(10, 9, 9, 0.34);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.18);
  display: grid;
  height: 54px;
  place-items: center;
  width: 54px;
}

.wg-icon-button svg,
.wg-arrow svg,
.wg-primary svg,
.wg-secondary svg {
  height: 25px;
  width: 25px;
}

.wg-title-block {
  min-width: 0;
}

.wg-title-row {
  align-items: center;
  display: flex;
  gap: 8px;
}

.wg-title-block h1 {
  font-size: 24px;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.wg-title-block p {
  color: rgba(255,255,255,.68);
  font-size: 14px;
  margin: 5px 0 0;
}

.wg-crown {
  color: var(--gold-light);
  font-size: 17px;
}

.wg-wallet {
  align-items: center;
  background: rgba(10, 9, 9, 0.35);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.18);
  display: flex;
  font-weight: 740;
  gap: 8px;
  height: 48px;
  min-width: 98px;
  padding: 0 10px 0 14px;
}

.wg-gem {
  color: var(--gold-light);
  font-size: 22px;
  transform: rotate(45deg);
}

.wg-plus {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  display: grid;
  font-size: 18px;
  height: 25px;
  line-height: 1;
  place-items: center;
  width: 25px;
}

.wg-story-chip {
  align-items: center;
  background: rgba(10, 9, 9, 0.34);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.18);
  display: inline-flex;
  gap: 10px;
  margin: 8px 0 0 18px;
  padding: 10px 14px;
  position: relative;
  z-index: 4;
}

.wg-story-icon {
  border: 1px solid rgba(245, 208, 138, .45);
  border-radius: 10px;
  color: var(--gold-light);
  display: grid;
  height: 32px;
  place-items: center;
  width: 32px;
}

.wg-story-chip b,
.wg-story-chip small {
  display: block;
}

.wg-story-chip b {
  font-size: 14px;
  line-height: 1.1;
}

.wg-story-chip small {
  color: rgba(255,255,255,.6);
  font-size: 13px;
  margin-top: 3px;
}

.wg-stage {
  align-items: flex-end;
  display: flex;
  inset: 120px 0 235px;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.wg-avatar-wrap {
  align-items: flex-end;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: min(92%, 410px);
}

.wg-avatar {
  height: min(100%, 620px);
  position: relative;
  transform: translateY(18px);
  width: min(100%, 390px);
}

.wg-avatar::after {
  background: rgba(0,0,0,.28);
  border-radius: 999px;
  bottom: 18px;
  content: "";
  height: 24px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 190px;
}

.wg-avatar-hair,
.wg-avatar-face,
.wg-avatar-neck,
.wg-avatar-body,
.wg-avatar-top,
.wg-avatar-bottom,
.wg-avatar-dress,
.wg-avatar-shoes,
.wg-avatar-accessory {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.wg-avatar-hair {
  background: var(--hair);
  border-radius: 48% 48% 34% 34%;
  box-shadow: inset 20px -22px 0 rgba(0,0,0,.13), inset -18px 12px 0 rgba(255,255,255,.18);
  height: 250px;
  top: 18px;
  width: 185px;
  z-index: 1;
}

.wg-avatar-face {
  background: linear-gradient(135deg, #ffd8c0, #efb794 58%, #d99878);
  border-radius: 48% 48% 45% 45%;
  height: 118px;
  top: 78px;
  width: 112px;
  z-index: 3;
}

.wg-avatar-face::before {
  background:
    radial-gradient(circle at 31px 34px, #111 0 4px, #6fc4e2 5px 9px, transparent 10px),
    radial-gradient(circle at 78px 34px, #111 0 4px, #6fc4e2 5px 9px, transparent 10px),
    linear-gradient(var(--lip), var(--lip));
  border-radius: 0 0 999px 999px;
  content: "";
  height: 22px;
  left: 18px;
  position: absolute;
  top: 38px;
  width: 78px;
}

.wg-avatar-neck {
  background: #efb794;
  border-radius: 0 0 18px 18px;
  height: 58px;
  top: 178px;
  width: 58px;
  z-index: 2;
}

.wg-avatar-body {
  background: linear-gradient(135deg, #ffd8c0, #efb794 58%, #d99878);
  border-radius: 58px 58px 22px 22px;
  height: 255px;
  top: 218px;
  width: 150px;
  z-index: 1;
}

.wg-avatar-top {
  background: var(--top);
  border-radius: 28px 28px 12px 12px;
  box-shadow: inset 0 18px 0 rgba(255,255,255,.18);
  height: 94px;
  top: 232px;
  width: 172px;
  z-index: 4;
}

.wg-avatar-bottom {
  background: var(--bottom);
  clip-path: polygon(18% 0, 82% 0, 94% 100%, 59% 100%, 50% 20%, 41% 100%, 6% 100%);
  height: 188px;
  top: 318px;
  width: 172px;
  z-index: 4;
}

.wg-avatar-dress {
  background: var(--dress);
  border-radius: 22px 22px 12px 12px;
  clip-path: polygon(34% 0, 66% 0, 88% 100%, 12% 100%);
  height: 292px;
  top: 232px;
  width: 210px;
  z-index: 4;
}

.wg-avatar-shoes {
  height: 42px;
  top: 506px;
  width: 168px;
  z-index: 5;
}

.wg-avatar-shoes::before,
.wg-avatar-shoes::after {
  background: var(--shoes);
  border-radius: 999px 999px 6px 6px;
  bottom: 0;
  content: "";
  height: 18px;
  position: absolute;
  width: 64px;
}

.wg-avatar-shoes::before {
  left: 8px;
  transform: rotate(-8deg);
}

.wg-avatar-shoes::after {
  right: 8px;
  transform: rotate(8deg);
}

.wg-avatar-accessory {
  border: 4px solid var(--acc);
  border-radius: 999px;
  height: 28px;
  top: 218px;
  width: 52px;
  z-index: 6;
}

.wg-preview-badge {
  background: rgba(12, 10, 10, .34);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  bottom: 36px;
  color: rgba(255,255,255,.85);
  font-size: 12px;
  left: 50%;
  padding: 8px 13px;
  position: absolute;
  transform: translateX(-50%);
}

.wg-preview-badge.is-locked {
  border-color: rgba(255, 124, 124, .24);
  color: #ffd9d9;
}

.wg-score-card {
  align-items: center;
  background: rgba(11, 10, 10, .38);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  bottom: 78px;
  box-shadow: 0 18px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  display: grid;
  gap: 2px 8px;
  grid-template-areas: "heart score" "text text" "small small";
  grid-template-columns: auto auto;
  min-width: 125px;
  padding: 13px 14px;
  position: absolute;
  right: 18px;
}

.wg-heart {
  background: rgba(245, 208, 138, .14);
  border-radius: 999px;
  color: var(--gold-light);
  display: grid;
  font-size: 27px;
  grid-area: heart;
  height: 34px;
  place-items: center;
  width: 34px;
}

.wg-score-card strong {
  font-size: 24px;
  grid-area: score;
  letter-spacing: 0;
}

.wg-score-card span {
  color: rgba(255,255,255,.72);
  font-size: 13px;
  grid-area: text;
  margin-top: 5px;
}

.wg-score-card small {
  color: var(--gold-light);
  font-size: 13px;
  grid-area: small;
}

.wg-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,251,244,.93)), var(--panel);
  border-radius: 34px 34px 0 0;
  border-top: 1px solid rgba(255,255,255,.7);
  bottom: 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,.28);
  color: var(--ink);
  left: 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  position: absolute;
  right: 0;
  z-index: 6;
}

.wg-tabs,
.wg-card-rail {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.wg-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 2px 8px;
}

.wg-tabs::-webkit-scrollbar,
.wg-card-rail::-webkit-scrollbar {
  display: none;
}

.wg-tab {
  background: transparent;
  border: 0;
  border-radius: 21px;
  color: rgba(32,29,32,.58);
  cursor: pointer;
  display: grid;
  flex: 0 0 72px;
  gap: 4px;
  justify-items: center;
  min-height: 78px;
  padding: 9px 7px;
  -webkit-tap-highlight-color: transparent;
}

.wg-tab.is-active {
  background: linear-gradient(180deg, rgba(217, 177, 111, .2), rgba(217, 177, 111, .08));
  box-shadow: inset 0 0 0 1px rgba(201, 166, 102, .18);
  color: var(--gold);
}

.wg-tab-icon {
  border-radius: 15px;
  color: currentColor;
  display: grid;
  font-size: 24px;
  height: 35px;
  line-height: 1;
  place-items: center;
  width: 35px;
}

.wg-tab span:not(.wg-tab-icon),
.wg-tab small {
  font-size: 12px;
  line-height: 1.08;
}

.wg-tab small {
  color: currentColor;
  opacity: .75;
}

.wg-divider {
  background: linear-gradient(90deg, transparent, rgba(201,166,102,.32), transparent);
  height: 1px;
  margin: 0 3px 13px;
}

.wg-active-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 42px 1fr 42px;
}

.wg-arrow {
  background: rgba(201, 166, 102, .11);
  border-radius: 16px;
  color: var(--gold);
  display: grid;
  height: 54px;
  place-items: center;
  width: 42px;
}

.wg-item-info {
  min-width: 0;
  text-align: center;
}

.wg-rarity {
  align-items: center;
  background: rgba(201, 166, 102, .12);
  border-radius: 999px;
  color: var(--gold);
  display: inline-flex;
  font-size: 11px;
  font-weight: 760;
  height: 22px;
  justify-content: center;
  letter-spacing: .055em;
  padding: 0 9px;
  text-transform: uppercase;
}

.wg-rarity-secret {
  background: rgba(154, 76, 104, .12);
  color: #9a4c68;
}

.wg-rarity-premium {
  background: rgba(201, 166, 102, .18);
  color: #a36e25;
}

.wg-item-info h2 {
  font-size: 24px;
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1.02;
  margin: 8px 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wg-item-info p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wg-colors {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 13px 0 11px;
}

.wg-color {
  background: linear-gradient(135deg, var(--swatch-accent), var(--swatch));
  border: 2px solid rgba(32,29,32,.08);
  border-radius: 999px;
  box-shadow: 0 6px 12px rgba(0,0,0,.14);
  cursor: pointer;
  height: 28px;
  width: 28px;
  -webkit-tap-highlight-color: transparent;
}

.wg-color:disabled {
  cursor: default;
  opacity: .42;
}

.wg-color.is-active {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.wg-card-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 5px 2px 12px;
}

.wg-card {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(32,29,32,.08);
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  flex: 0 0 112px;
  gap: 6px;
  justify-items: center;
  min-height: 118px;
  padding: 10px 8px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.wg-card.is-active {
  border-color: rgba(201, 166, 102, .48);
  box-shadow: 0 12px 28px rgba(201, 166, 102, .16), inset 0 0 0 1px rgba(201, 166, 102, .18);
}

.wg-card.is-selected::after {
  background: var(--gold);
  border-radius: 999px;
  color: white;
  content: "✓";
  display: grid;
  font-size: 12px;
  height: 20px;
  place-items: center;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 20px;
}

.wg-card.is-locked .wg-thumb {
  filter: grayscale(.4);
  opacity: .64;
}

.wg-card.is-locked::before {
  background: rgba(24, 20, 18, .72);
  border-radius: 999px;
  color: #fff;
  content: "◇";
  display: grid;
  font-size: 14px;
  height: 22px;
  place-items: center;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 22px;
  z-index: 2;
}

.wg-thumb {
  background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.68), transparent 22%), linear-gradient(135deg, var(--thumb-accent), var(--thumb));
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 9px 18px rgba(0,0,0,.08);
  display: grid;
  height: 56px;
  overflow: hidden;
  place-items: center;
  position: relative;
  width: 60px;
}

.wg-thumb span {
  background: var(--thumb);
  display: block;
}

.wg-thumb-hair {
  border-radius: 48% 48% 34% 34%;
  box-shadow: inset 8px -8px 0 rgba(0,0,0,.12), inset -7px 6px 0 rgba(255,255,255,.22);
  height: 45px;
  width: 42px;
}

.wg-thumb-face {
  background: #efb794 !important;
  border-radius: 48%;
  height: 42px;
  width: 36px;
}

.wg-thumb-tops,
.wg-thumb-top {
  border-radius: 16px 16px 9px 9px;
  height: 37px;
  width: 42px;
}

.wg-thumb-bottoms {
  clip-path: polygon(20% 0, 80% 0, 95% 100%, 58% 100%, 50% 28%, 42% 100%, 5% 100%);
  height: 42px;
  width: 42px;
}

.wg-thumb-dresses {
  border-radius: 12px;
  clip-path: polygon(35% 0, 65% 0, 82% 100%, 18% 100%);
  height: 50px;
  width: 46px;
}

.wg-thumb-shoes {
  border-radius: 999px 999px 6px 6px;
  height: 22px;
  width: 48px;
}

.wg-thumb-accessories {
  background: transparent !important;
  border: 4px solid var(--thumb);
  border-radius: 999px;
  height: 34px;
  width: 34px;
}

.wg-card-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.wg-card-meta {
  color: rgba(32,29,32,.54);
  font-size: 11px;
}

.wg-actions {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.wg-primary,
.wg-secondary {
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 740;
  gap: 9px;
  height: 58px;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.wg-primary {
  background: linear-gradient(135deg, #e5bb72, #a87935);
  border: 0;
  box-shadow: 0 12px 24px rgba(168, 121, 53, .28);
  color: #fff;
}

.wg-secondary {
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(32,29,32,.08);
  color: rgba(32,29,32,.62);
}

.wg-toast {
  animation: wg-toast-in .18s ease-out;
  background: rgba(16, 13, 12, .78);
  border-radius: 999px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  color: white;
  font-size: 14px;
  left: 50%;
  padding: 11px 16px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 20;
}

@keyframes wg-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-height: 780px) {
  .wg-root {
    min-height: 660px;
  }

  .wg-header {
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  .wg-stage {
    inset: 105px 0 220px;
  }

  .wg-avatar {
    transform: translateY(32px) scale(.92);
  }

  .wg-panel {
    padding-top: 12px;
  }

  .wg-tab {
    flex-basis: 68px;
    min-height: 68px;
  }

  .wg-card-rail {
    display: none;
  }
}

@media (max-width: 390px) {
  .wg-header {
    gap: 8px;
    grid-template-columns: 50px 1fr auto;
    padding-left: 12px;
    padding-right: 12px;
  }

  .wg-wallet {
    height: 44px;
    min-width: 88px;
  }

  .wg-title-block h1 {
    font-size: 22px;
  }

  .wg-panel {
    border-radius: 28px 28px 0 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  .wg-score-card {
    right: 12px;
    transform: scale(.92);
    transform-origin: right bottom;
  }

  .wg-actions {
    gap: 8px;
  }

  .wg-primary,
  .wg-secondary {
    font-size: 15px;
    height: 54px;
  }
}

.phone-app:has(.reader-screen) .app-header {
  padding: calc(var(--miniapp-reader-top-offset) + var(--tg-safe-top)) 18px 0;
}

.phone-app:has(.reader-screen) .icon-button.tiny {
  background: rgba(19, 13, 34, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.12);
  color: #fff8fb;
  height: 44px;
  min-width: 44px;
}

.reader-screen .visual-scene img {
  filter: saturate(1.04) brightness(0.82) contrast(1.04);
}

.reader-screen .visual-gradient {
  background:
    linear-gradient(180deg, rgba(13, 8, 26, 0.18) 0%, rgba(13, 8, 26, 0.02) 28%, rgba(13, 8, 26, 0.42) 64%, rgba(13, 8, 26, 0.78) 100%),
    radial-gradient(circle at 22% 16%, rgba(190, 132, 255, 0.13), transparent 32%),
    radial-gradient(circle at 78% 78%, rgba(244, 132, 184, 0.12), transparent 36%);
}

.reader-screen .scene-copy {
  background: linear-gradient(180deg, rgba(30, 22, 48, 0.78), rgba(20, 14, 34, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  bottom: calc(198px + var(--tg-safe-bottom));
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.15);
  color: #fff8fb;
  left: 18px;
  max-height: 18dvh;
  padding: 15px 17px 14px;
  right: 18px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.reader-screen .scene-copy::before {
  display: none;
}

.reader-screen .scene-copy p {
  color: rgba(255, 248, 251, 0.93);
  display: -webkit-box;
  font-size: clamp(15px, 4.05vw, 19px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.reader-screen .choice-panel {
  bottom: calc(18px + var(--tg-safe-bottom));
  gap: 7px;
  left: 18px;
  max-height: none;
  right: 18px;
}

.reader-screen .choice {
  background: linear-gradient(180deg, rgba(30, 22, 48, 0.82), rgba(20, 14, 34, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.15);
  min-height: 48px;
  padding: 8px 14px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.reader-screen .choice span {
  color: #fff8fb;
  font-size: 14px;
  font-weight: 800;
}

.reader-screen .choice small {
  color: rgba(255, 248, 251, 0.58);
  font-size: 10px;
}

.reader-screen .choice svg {
  color: rgba(255, 213, 161, 0.9);
}

@media (max-width: 360px) {
  .phone-app:has(.reader-screen) .app-header {
    padding-top: calc(var(--miniapp-reader-top-offset) + var(--tg-safe-top));
  }

  .reader-screen .scene-copy {
    bottom: calc(190px + var(--tg-safe-bottom));
    left: 14px;
    max-height: 17dvh;
    padding: 14px 15px 13px;
    right: 14px;
  }

  .reader-screen .scene-copy p {
    font-size: 14px;
    line-height: 1.28;
  }

  .reader-screen .choice-panel {
    left: 14px;
    right: 14px;
  }
}