: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: 34px; height: 34px; padding: 0 0 4px; color: var(--text); background: var(--card); border: 0; border-radius: 50%; font-size: 29px; line-height: 1; cursor: pointer; }
.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: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 22px; color: #bce8ff; background: linear-gradient(135deg, #266e9b, #59c1ef); border-radius: 22px; font-size: 34px; }.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 { flex: 1; }.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; }
.modal { position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; 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(0,0,0,.56); transition-delay:0s; }.modal-sheet { position:relative; width:100%; padding:25px 20px calc(28px + env(safe-area-inset-bottom)); background:#172a3c; border-radius:26px 26px 0 0; 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(90,194,241,.35); border-radius:13px; color:#fff; background:#23435b; font-weight:700; }.plans strong { color:#f5df79; }.modal ul { margin:18px 0 10px; padding:0; list-style:none; color:#d6e1e8; }.modal li { margin:7px 0; }

/* Компактные горизонтальные карточки: место остаётся под будущий каталог. */
.character-card { display:grid; grid-template-columns:118px minmax(0,1fr); min-height:142px; background:rgba(42,25,35,.68); border-color:rgba(236,204,152,.12); backdrop-filter:blur(14px); }.character-card .character-photo { grid-column:1; align-self:stretch; width:98px; height:auto; min-height:0; max-height:none; margin:10px 0 10px 10px; object-fit:cover; object-position:center top; background:transparent; border-radius:16px; }.character-card .character-content { grid-column:2; display:flex; min-width:0; flex-direction:column; padding:14px; }.character-content h2 { font-size:20px; }.character-content .eyebrow { color:#e6bb78; }.character-content p { margin-bottom:10px; font-size:13px; line-height:1.35; }.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; }