:root { --bg: #0f1c2a; --card: #192b3d; --card-2: #213a50; --text: #f4f8fc; --muted: #9aabba; --blue: #45a9df; --blue-dark: #258dc9; --line: rgba(255,255,255,.08); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { min-height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body { background: radial-gradient(circle at 85% -10%, #214869 0, transparent 35%), var(--bg); } button { font: inherit; }.hidden { display: none !important; }.screen { display: none; min-height: 100vh; flex-direction: column; }.screen.active { display: flex; }.muted { color: var(--muted); }
.topbar { display: flex; align-items: center; gap: 12px; padding: calc(20px + env(safe-area-inset-top)) 20px 18px; border-bottom: 1px solid var(--line); }.topbar h1, .gate h1 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -.5px; }.eyebrow { margin: 0 0 5px; color: #72c7f5; font-size: 11px; font-weight: 700; letter-spacing: 1.25px; }.back-btn { width: 48px; height: 48px; padding: 0 0 4px; color: var(--text); background: rgba(42,25,35,.68); border: 1px solid rgba(236,204,152,.16); border-radius: 50%; font-size: 40px; line-height: .9; cursor: pointer; backdrop-filter: blur(14px); }
.topbar .eyebrow, .gate > .eyebrow { color:#e6bb78; }
.catalog { width: min(100%, 580px); margin: 0 auto; padding: 20px 16px calc(30px + env(safe-area-inset-bottom)); display: grid; gap: 16px; }.character-card, .scenario-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 10px 30px rgba(0,0,0,.16); }.character-photo { display: block; width: 100%; height: min(54vw, 280px); object-fit: cover; object-position: center 25%; background: var(--card-2); }.character-content, .scenario-card { padding: 18px; }.character-content h2, .scenario-card h2 { margin: 0 0 8px; font-size: 23px; }.character-content p, .scenario-card p { margin: 0 0 18px; color: #c2d0da; }.scenario-card { background: linear-gradient(135deg, var(--card), var(--card-2)); }.scenario-number { margin-bottom: 7px; color: #71c8f7; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; }
.choose-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; padding: 12px 17px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); border: 0; border-radius: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(28,140,201,.25); }.choose-btn:active { transform: scale(.98); }.choose-btn:disabled { opacity: .65; }.choose-btn span { font-size: 23px; line-height: 0; }.text-btn { margin-top: 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.gate { width: min(100%, 460px); margin: auto; padding: 28px 24px calc(34px + env(safe-area-inset-bottom)); text-align: center; }.gate-icon { display: block; width: 68px; height: 68px; margin: 0 auto 22px; object-fit: cover; border: 1px solid rgba(230,187,120,.45); border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }.gate h1 { font-size: 31px; }.gate > p:not(.eyebrow) { color: #c5d3dd; }.gate-actions { margin-top: 25px; }.toast { position: fixed; z-index: 10; bottom: calc(25px + env(safe-area-inset-bottom)); left: 50%; width: max-content; max-width: 85%; transform: translateX(-50%); padding: 10px 15px; color: white; background: rgba(0,0,0,.8); border-radius: 12px; text-align: center; font-size: 14px; }

body { background: linear-gradient(rgba(15,5,20,.52), rgba(15,5,20,.7)), url('/static/background.jpg') center/cover fixed; }
.topbar > div:not(.energy-stack) { flex: 1; }.energy-stack { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; }.energy { flex: 0 0 auto; color: #f2cf91; background: rgba(30,18,26,.56); border: 1px solid rgba(226,180,99,.38); border-radius: 12px; padding: 8px 10px; font-weight: 700; backdrop-filter: blur(10px); }.energy b { color:#f5d39a; margin-left:4px; }.plan-badge { min-width:48px; padding:2px 7px; border:1px solid rgba(226,180,99,.28); border-radius:999px; color:#d9c9c5; background:rgba(20,10,18,.52); font-size:9px; font-weight:800; letter-spacing:1px; line-height:1.3; text-align:center; }
 .modal { position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; overflow:hidden; visibility:hidden; pointer-events:none; opacity:0; background:rgba(0,0,0,0); transition:opacity .24s ease, background .24s ease, visibility 0s linear .24s; }.modal.is-open { visibility:visible; pointer-events:auto; opacity:1; background:rgba(12,3,10,.68); transition-delay:0s; }.modal-sheet { position:relative; width:100%; max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:25px 20px calc(28px + env(safe-area-inset-bottom)); background:linear-gradient(160deg, rgba(54,25,46,.98), rgba(28,16,34,.99)); border:1px solid rgba(236,204,152,.16); border-bottom:0; border-radius:26px 26px 0 0; box-shadow:0 -20px 50px rgba(0,0,0,.35); transform:translateY(105%); transition:transform .32s cubic-bezier(.22,.8,.25,1); }.modal.is-open .modal-sheet { transform:translateY(0); }.modal-sheet h2 { margin:0 0 16px; }.close { position:absolute; top:14px; right:16px; border:0; background:transparent; color:#fff; font-size:28px; }.plans { display:grid; gap:9px; }.plans button { display:flex; justify-content:space-between; padding:14px; border:1px solid rgba(226,180,99,.42); border-radius:13px; color:#fff; background:rgba(82,43,60,.64); font-weight:700; }.plans strong { color:#f2cf91; }.modal ul { margin:18px 0 10px; padding:0; list-style:none; color:#e2d8df; }.modal li { margin:7px 0; }.modal-sheet .muted { color:#baaeba; }

/* Полупрозрачные плитки каталога в единой бордово-золотой палитре. */
#character-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:start; }.character-card { display:flex; min-width:0; min-height:0; flex-direction:column; background:rgba(42,25,35,.68); border-color:rgba(236,204,152,.16); cursor:pointer; backdrop-filter:blur(14px); }.character-card:focus-visible { outline:2px solid #e6bb78; outline-offset:3px; }.character-card .character-photo { display:block; width:100%; height:auto; margin:0; background:transparent; border-radius:0; }.character-card video.character-photo { aspect-ratio:22 / 25; object-fit:cover; object-position:center; }.character-card .character-content { display:flex; min-width:0; flex:1; flex-direction:column; padding:12px; }.character-content h2 { margin-bottom:5px; font-size:20px; line-height:1.1; }.character-content .eyebrow { color:#e6bb78; }.character-content p { margin-bottom:0; font-size:13px; line-height:1.35; }.scenario-card { background:rgba(42,25,35,.68); border-color:rgba(236,204,152,.16); backdrop-filter:blur(14px); }.character-content .choose-btn, .scenario-card .choose-btn { margin-top:auto; min-height:38px; padding:8px 12px; font-size:13px; color:#342615; background:linear-gradient(135deg,#e1ba78,#bd8a4d); box-shadow:0 8px 18px rgba(122,75,32,.28); }.scenario-card .choose-btn { min-height:50px; padding:12px 17px; font-size:16px; }.scenario-number { color:#e6bb78; }

@media (min-width: 560px) { #character-list { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.legal-link { margin:0 auto calc(22px + env(safe-area-inset-bottom)); padding:8px 16px; border:0; color:rgba(218,205,215,.62); background:transparent; font-size:13px; text-decoration:underline; text-decoration-color:rgba(218,205,215,.3); text-underline-offset:3px; cursor:pointer; }.legal-sheet { padding-bottom:calc(34px + env(safe-area-inset-bottom)); }.legal-links { display:grid; gap:10px; }.legal-links a { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 16px; border:1px solid rgba(226,180,99,.28); border-radius:14px; color:#eee4eb; background:rgba(82,43,60,.5); text-decoration:none; }.legal-links span { color:#e6bb78; font-size:20px; }.legal-note { margin:13px 0 0; color:#9f929d; font-size:12px; text-align:center; }.legal-note a { color:#c6b3c1; text-underline-offset:2px; }
.payment-methods { display:grid; gap:10px; margin:8px 0 18px; }.payment-methods button { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:14px 16px; border:1px solid rgba(226,180,99,.42); border-radius:14px; color:#fff; background:rgba(82,43,60,.64); font-weight:700; text-align:left; }.payment-methods button:disabled { opacity:.6; }.payment-methods strong { color:#f2cf91; }.payment-sheet { max-width:560px; left:50%; transform:translate(-50%,105%); }.modal.is-open .payment-sheet { transform:translate(-50%,0); }

/* Выбор подписки: единый переключатель тарифа, сроки и закреплённый итог. */
.subscription-sheet { max-width:620px; left:50%; padding-top:62px; transform:translate(-50%,105%); }.modal.is-open .subscription-sheet { transform:translate(-50%,0); }.tier-switch { position:absolute; top:14px; left:18px; right:58px; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border:1px solid rgba(226,180,99,.18); border-radius:15px; background:rgba(15,8,19,.52); }.tier-switch button { min-width:0; padding:10px 7px; border:0; border-radius:11px; color:#a99da8; background:transparent; font-size:12px; font-weight:800; letter-spacing:.45px; transition:color .22s ease, background .22s ease, box-shadow .22s ease, transform .18s ease; }.tier-switch button:active { transform:scale(.97); }.tier-switch button.is-selected { color:#2e2115; background:linear-gradient(135deg,#efd092,#c59152); box-shadow:0 7px 18px rgba(167,104,48,.28); }.subscription-heading { margin-top:16px; animation:subscription-fade .28s ease both; }.duration-label { display:flex; justify-content:space-between; margin:18px 0 9px; color:#c8bcc6; font-size:13px; }.duration-label span { color:#8f828e; font-size:11px; }.duration-grid { display:flex; gap:8px; margin-right:-20px; padding:3px 20px 10px 0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; }.duration-grid::-webkit-scrollbar { display:none; }.duration-grid button { position:relative; display:flex; min-width:112px; min-height:100px; flex:0 0 112px; flex-direction:column; align-items:center; justify-content:center; padding:17px 4px 9px; border:1px solid rgba(226,180,99,.22); border-radius:15px; color:#e9e0e7; background:rgba(71,39,56,.45); scroll-snap-align:start; transition:border-color .2s ease, background .2s ease, transform .18s ease, box-shadow .2s ease; }.duration-grid button:active { transform:scale(.96); }.duration-grid button.is-selected { border-color:#e6bb78; background:rgba(137,83,55,.5); box-shadow:0 9px 24px rgba(117,65,35,.25); transform:translateY(-2px); }.duration-grid button.is-popular { border-color:rgba(230,187,120,.58); }.duration-grid em { position:absolute; top:0; left:7px; right:7px; padding:3px 2px; color:#352414; background:linear-gradient(135deg,#f0d69d,#c99758); border-radius:0 0 7px 7px; font-size:8px; font-style:normal; font-weight:900; letter-spacing:.15px; line-height:1.2; text-transform:uppercase; }.duration-grid b { font-size:24px; line-height:1; }.duration-grid span { margin-top:4px; color:#bcb0ba; font-size:12px; }.duration-grid strong { margin-top:8px; color:#f2cf91; font-size:11px; white-space:nowrap; }.subscription-features { display:grid; gap:8px; margin:21px 0 15px; }.feature-row { display:flex; align-items:center; gap:13px; padding:10px 5px; animation:feature-in .32s ease both; }.feature-row:nth-child(2) { animation-delay:.025s; }.feature-row:nth-child(3) { animation-delay:.05s; }.feature-row:nth-child(4) { animation-delay:.075s; }.feature-row:nth-child(5) { animation-delay:.1s; }.feature-row:nth-child(6) { animation-delay:.125s; }.feature-row:nth-child(7) { animation-delay:.15s; }.feature-icon { display:grid; width:46px; height:46px; flex:0 0 46px; place-items:center; border:1px solid rgba(159,132,228,.22); border-radius:50%; background:linear-gradient(145deg,rgba(91,70,154,.52),rgba(48,35,91,.62)); box-shadow:inset 0 1px rgba(255,255,255,.08); font-size:20px; }.feature-row strong,.feature-row small { display:block; }.feature-row strong { color:#f4eef3; font-size:15px; }.feature-row small { margin-top:2px; color:#a99eaa; font-size:12px; }.subscription-note { margin:4px 0 12px; text-align:center; }.purchase-summary { position:sticky; z-index:2; bottom:calc(-28px - env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr auto; gap:8px 14px; max-height:0; margin:0 -20px; padding:0 20px; overflow:hidden; opacity:0; background:linear-gradient(180deg,rgba(27,15,32,.94),rgba(21,11,25,.99)); border-top:1px solid transparent; transform:translateY(28px); transition:max-height .38s ease, padding .38s ease, opacity .28s ease, transform .38s cubic-bezier(.22,.8,.25,1), border-color .3s ease; }.purchase-summary.is-visible { max-height:190px; padding:16px 20px calc(18px + env(safe-area-inset-bottom)); opacity:1; border-color:rgba(226,180,99,.2); transform:translateY(0); }.purchase-summary > div:first-child { display:flex; flex-direction:column; }.purchase-summary > div:first-child span { color:#e6bb78; font-size:10px; font-weight:800; letter-spacing:1px; }.purchase-summary > div:first-child strong { font-size:18px; }.summary-price { display:flex; flex-direction:column; align-items:flex-end; color:#f2cf91; font-size:13px; font-weight:700; }.purchase-summary .choose-btn { grid-column:1/-1; min-height:48px; color:#342615; background:linear-gradient(135deg,#e9c984,#bd8749); box-shadow:0 9px 22px rgba(122,75,32,.3); }.subscription-sheet > .legal-note { margin-top:12px; }
@keyframes feature-in { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } } @keyframes subscription-fade { from { opacity:.4; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .tier-switch button,.duration-grid button,.purchase-summary,.feature-row,.subscription-heading { animation:none; transition:none; } }

/* Постоянная навигация Mini App, подарки и рубины. */
.app-screen { padding-bottom:calc(82px + env(safe-area-inset-bottom)); }
.screen-enter { animation:screen-in .28s cubic-bezier(.22,.8,.25,1); }
@keyframes screen-in { from { opacity:.25; transform:translateY(8px); } to { opacity:1; transform:none; } }
.bottom-nav { position:fixed; z-index:15; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); left:10px; display:grid; grid-template-columns:repeat(4,1fr); padding:6px; border:1px solid rgba(236,204,152,.18); border-radius:20px; background:rgba(24,12,23,.91); box-shadow:0 10px 35px rgba(0,0,0,.42); backdrop-filter:blur(18px); }
.bottom-nav button { display:grid; min-width:0; min-height:53px; place-items:center; padding:5px 2px; border:0; border-radius:15px; color:#9e929d; background:transparent; transition:color .22s ease,background .22s ease,transform .18s ease; }
.bottom-nav button:active { transform:scale(.94); }.bottom-nav button.is-active { color:#f3cf90; background:rgba(134,75,74,.38); }.bottom-nav span { font-size:20px; line-height:1; }.bottom-nav small { overflow:hidden; max-width:100%; font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.topbar .balance-stack { flex:0 0 auto; display:grid; grid-template-columns:auto auto; align-items:center; gap:4px; }.balance-stack .plan-badge { grid-column:1/-1; justify-self:center; }.ruby-balance { min-height:38px; padding:7px 10px; border:1px solid rgba(255,88,100,.38); border-radius:12px; color:#ff8b97; background:rgba(64,15,29,.64); font-weight:800; box-shadow:inset 0 1px rgba(255,255,255,.06); }.ruby-balance.large { min-width:82px; font-size:17px; }.with-balance { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.ruby-icon { position:relative; display:inline-block; width:17px; height:15px; margin-right:5px; vertical-align:-2px; background:linear-gradient(135deg,#ffbac1 0 18%,#ff5265 19% 48%,#b80d32 49% 76%,#ff8290 77%); clip-path:polygon(22% 0,78% 0,100% 35%,50% 100%,0 35%); filter:drop-shadow(0 0 5px rgba(255,65,90,.7)); }.ruby-icon::after { position:absolute; inset:2px 5px 6px 4px; content:""; background:rgba(255,255,255,.72); clip-path:polygon(0 0,100% 0,45% 100%); }
.section-top { width:min(100%,620px); margin:0 auto; padding:calc(24px + env(safe-area-inset-top)) 20px 15px; }.section-top h1 { margin:0; font-size:28px; }.subscription-tab-host { width:min(100%,620px); margin:0 auto; padding:0 12px 22px; }.subscription-sheet.in-tab { position:relative; left:auto; width:100%; max-height:none; overflow:visible; padding-bottom:22px; border-bottom:1px solid rgba(236,204,152,.16); border-radius:24px; transform:none; }.subscription-sheet.in-tab .purchase-summary { bottom:calc(76px + env(safe-area-inset-bottom)); }.subscription-sheet.in-tab > .legal-note { padding-bottom:6px; }
.shop-grid { display:grid; width:min(100%,620px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 auto; padding:4px 14px 24px; }.shop-card { overflow:hidden; border:1px solid rgba(236,204,152,.18); border-radius:20px; background:rgba(42,25,35,.78); box-shadow:0 10px 28px rgba(0,0,0,.22); backdrop-filter:blur(14px); }.shop-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#321626; }.shop-card>div { display:flex; min-height:142px; flex-direction:column; padding:12px; }.shop-card h2 { margin:0 0 5px; font-size:16px; line-height:1.2; }.shop-card p { margin:0 0 10px; color:#d0bdc9; font-size:12px; }.shop-card .gift-price { color:#ff8b97; font-size:16px; font-weight:800; }.shop-card .choose-btn { min-height:40px; margin-top:auto; padding:8px 11px; font-size:13px; color:#342615; background:linear-gradient(135deg,#e9c984,#bd8749); box-shadow:none; }.ruby-grid .shop-card h2 { color:#ff8b97; font-size:20px; }
.toast { z-index:40; bottom:calc(88px + env(safe-area-inset-bottom)); }
@media(min-width:700px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.bottom-nav{left:50%;width:620px;transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.screen-enter,.bottom-nav button{animation:none;transition:none;}}