: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); }