/* * Тема на двух цветах: «основа» (фон, карточки, поля — глубина через оттенки) * и «акцент» (действия, суммы, активные состояния). Палитра целиком задаётся * токенами ниже; варианты переключаются атрибутом data-theme на . * Служебные цвета (успех, ошибка) приглушены, чтобы не спорить с основой. */ :root { color-scheme: dark; /* индиго + золото (по умолчанию) */ --bg: #0b0f1f; --bg-2: #121834; --card-rgb: 23, 29, 56; --card: rgba(var(--card-rgb), .82); --card-solid: #171d38; --field: #1f2748; --field-2: #262f56; --text: #f3f4fb; --hint: #9aa3c7; --hint-rgb: 154, 163, 199; --muted: #6b7399; --accent: #f2b544; --accent-2: #ffd27a; --accent-deep: #c98a1c; --accent-rgb: 242, 181, 68; --accent-text: #1a1204; --glow-rgb: 74, 92, 200; /* второй ореол фона, оттенок основы */ --link: #8fb4ff; --info: #8fb4ff; --info-rgb: 143, 180, 255; --danger: #ff7b7b; --danger-deep: #e05555; --danger-text: #1a0606; --danger-rgb: 255, 123, 123; --ok: #5fd39a; --ok-rgb: 95, 211, 154; --appeal: #d8b8ff; --appeal-rgb: 216, 184, 255; --silver: #c9d1e3; --bronze: #d29a5a; --border: rgba(var(--hint-rgb), .16); --border-strong: rgba(var(--accent-rgb), .55); --radius: 18px; --radius-sm: 12px; --shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04) inset; --glow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 8px 24px rgba(var(--accent-rgb), .18); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } /* графит + мята */ html[data-theme="mint"] { --bg: #0f1211; --bg-2: #181c1b; --card-rgb: 30, 35, 34; --card-solid: #1d2221; --field: #282e2c; --field-2: #333a38; --text: #eef1f0; --hint: #a3ada9; --hint-rgb: 163, 173, 169; --muted: #7d8884; --accent: #6fd3ad; --accent-2: #a6e6cd; --accent-deep: #2f9673; --accent-rgb: 111, 211, 173; --accent-text: #0b1f18; --glow-rgb: 52, 70, 63; --link: #8ab6cc; --info: #8ab6cc; --info-rgb: 138, 182, 204; --danger: #ec8a82; --danger-deep: #b34a44; --danger-text: #240808; --danger-rgb: 236, 138, 130; --ok: #9ccb93; --ok-rgb: 156, 203, 147; --appeal: #d8b46e; --appeal-rgb: 216, 180, 110; --silver: #b8c0bd; --bronze: #c79a6c; } /* тёмная бирюза + коралл */ html[data-theme="coral"] { --bg: #06181b; --bg-2: #0b2529; --card-rgb: 17, 47, 51; --card-solid: #112f33; --field: #183c41; --field-2: #1f4a50; --text: #eff7f5; --hint: #a3c2be; --hint-rgb: 163, 194, 190; --muted: #6d9c9a; --accent: #ff7f66; --accent-2: #ffb3a2; --accent-deep: #d9553f; --accent-rgb: 255, 127, 102; --accent-text: #1a0c09; --glow-rgb: 21, 112, 116; --link: #7fd9dc; --info: #4fc3c9; --info-rgb: 79, 195, 201; --danger: #f2618a; --danger-deep: #ad2448; --danger-text: #200a11; --danger-rgb: 242, 97, 138; --ok: #70d28a; --ok-rgb: 112, 210, 138; --appeal: #d9b36a; --appeal-rgb: 217, 179, 106; --silver: #c5d0d1; --bronze: #c4906f; } /* MoonUp: космос и луна — глубокий фиолетово-синий космос, лунный свет как акцент, лаванда для ссылок */ html[data-theme="moon"] { --bg: #07081a; --bg-2: #10122e; --card-rgb: 22, 24, 58; --card-solid: #16183a; --field: #1f2250; --field-2: #2a2d63; --text: #f4f2ff; --hint: #a9a6d6; --hint-rgb: 169, 166, 214; --muted: #746fa8; --accent: #f5e6a8; --accent-2: #fff4c9; --accent-deep: #d9c072; --accent-rgb: 245, 230, 168; --accent-text: #1d1a06; --glow-rgb: 120, 90, 220; --link: #c3a8ff; --info: #c3a8ff; --info-rgb: 195, 168, 255; --danger: #ff7d9a; --danger-deep: #b23a58; --danger-text: #24060e; --danger-rgb: 255, 125, 154; --ok: #7fe0b6; --ok-rgb: 127, 224, 182; --appeal: #c3a8ff; --appeal-rgb: 195, 168, 255; --silver: #cfd3f2; --bronze: #d6a06c; } /* звёздное поле: три слоя точек с разным шагом, чтобы не было видно повтора */ html[data-theme="moon"] .app { position: relative; z-index: 1; } html[data-theme="moon"] body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 12px 18px, rgba(255, 255, 255, .9), transparent 60%), radial-gradient(1px 1px at 90px 60px, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(1.2px 1.2px at 150px 130px, rgba(195, 168, 255, .8), transparent 60%), radial-gradient(0.9px 0.9px at 40px 110px, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(1px 1px at 200px 40px, rgba(255, 244, 201, .8), transparent 60%), radial-gradient(0.8px 0.8px at 240px 210px, rgba(255, 255, 255, .45), transparent 60%); background-size: 160px 160px, 220px 220px, 280px 280px, 190px 190px, 250px 250px, 330px 330px; opacity: 1; } /* луна в правом верхнем углу */ html[data-theme="moon"] body::after { content: ''; position: fixed; top: -60px; right: -70px; width: 190px; height: 190px; border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 40% 40%, #fff8d6 0%, #f5e6a8 45%, #cdb56a 100%); box-shadow: 0 0 80px 30px rgba(245, 230, 168, .16), 0 0 160px 60px rgba(120, 90, 220, .14); opacity: .22; } /* знак бренда: монета в обычных темах, месяц в MoonUp */ .brand { display: flex; align-items: center; gap: 10px; } .brand__mark { width: 30px; height: 30px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--accent-2), var(--accent) 60%, var(--accent-deep)); box-shadow: 0 0 16px rgba(var(--accent-rgb), .45); position: relative; } .brand__mark::after { content: '₿'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 900; color: var(--accent-text); -webkit-text-fill-color: var(--accent-text); } html[data-theme="moon"] .brand__mark { background: transparent; box-shadow: inset -9px -4px 0 0 var(--accent), 0 0 18px rgba(var(--accent-rgb), .35); transform: rotate(-20deg); } html[data-theme="moon"] .brand__mark::after { content: ''; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: radial-gradient(900px 520px at 50% -160px, rgba(var(--accent-rgb), .16), transparent 60%), radial-gradient(700px 500px at 100% 20%, rgba(var(--glow-rgb), .22), transparent 60%), radial-gradient(600px 400px at 0% 90%, rgba(var(--accent-rgb), .06), transparent 60%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 45%); background-attachment: fixed; } .app { max-width: 480px; margin: 0 auto; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; } .header h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(90deg, #fff 0%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .status { color: var(--hint); font-size: 13px; margin-top: 2px; } .status--error { color: var(--danger); } .status--ok { color: var(--ok); } /* ---------- карточки ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .card__title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } /* ---------- направление ---------- */ .direction { display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 2px; } .direction__arrow { color: var(--accent); font-size: 20px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--field); border: 1px solid var(--border); font-weight: 700; letter-spacing: .02em; } .chip__flag { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--field-2); font-size: 14px; } .chip--btc .chip__flag { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-text); box-shadow: 0 0 14px rgba(var(--accent-rgb), .45); } /* ---------- поля ---------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: 12px; color: var(--hint); text-transform: uppercase; letter-spacing: .06em; } .field__row { display: flex; align-items: stretch; background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } .field__row:focus-within { border-color: var(--border-strong); box-shadow: var(--glow); } .field__row input { border: none; background: transparent; border-radius: 0; box-shadow: none; } .field__row input:focus { border: none; box-shadow: none; } .unit { display: flex; align-items: center; padding: 0 14px; font-weight: 700; color: var(--hint); border-left: 1px solid var(--border); } .unit--btc { color: var(--accent); } input { width: 100%; min-width: 0; border: 1px solid var(--border); background: var(--field); color: var(--text); border-radius: var(--radius-sm); padding: 13px 14px; font-size: 18px; font-family: inherit; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; } input::placeholder { color: var(--muted); } input:focus { border-color: var(--border-strong); box-shadow: var(--glow); } input#wallet, input#betWallet, input#diceWallet { font-size: 15px; font-family: var(--mono); } .presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .presets button { border: 1px solid var(--border); background: rgba(255, 255, 255, .03); color: var(--text); border-radius: 10px; padding: 9px 0; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .08s ease; } .presets button:active { transform: scale(.97); } .presets button:hover { background: var(--field); } .presets--mines button.on, .presets button.on { border-color: var(--border-strong); color: var(--accent-2); background: rgba(var(--accent-rgb), .1); } .rate { font-size: 15px; font-weight: 700; color: var(--text); text-align: center; font-variant-numeric: tabular-nums; } .fee { font-size: 13px; color: var(--hint); text-align: center; min-height: 1em; } /* ---------- кнопки ---------- */ .primary { border: none; border-radius: 14px; padding: 15px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--accent-text); background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%); box-shadow: 0 8px 24px rgba(var(--accent-rgb), .28), 0 1px 0 rgba(255, 255, 255, .35) inset; cursor: pointer; transition: transform .08s ease, filter .15s ease, box-shadow .15s ease; } .primary:hover { filter: brightness(1.04); } .primary:active { transform: translateY(1px) scale(.99); box-shadow: 0 4px 12px rgba(var(--accent-rgb), .25); } .primary:disabled { opacity: .38; cursor: default; box-shadow: none; filter: none; transform: none; } .secondary { border: 1px solid var(--border); border-radius: 14px; padding: 12px; font-size: 16px; font-weight: 700; background: var(--field); color: var(--text); cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .08s ease; } .secondary:hover { background: var(--field-2); border-color: rgba(var(--hint-rgb), .3); } .secondary:active { transform: scale(.99); } .link { border: none; background: none; color: var(--link); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; } .link--danger { color: var(--danger); } /* ---------- история ---------- */ .history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .history li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 13px; background: var(--field); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .history li:hover { border-color: var(--border); } .history li:active { opacity: .8; } .history .id { color: var(--hint); font-size: 12px; margin-top: 2px; } .history .amounts { font-weight: 700; } /* ---------- тост ---------- */ .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: rgba(var(--card-rgb), .96); color: var(--text); border: 1px solid var(--border-strong); padding: 11px 16px; border-radius: 14px; font-size: 14px; max-width: 90vw; z-index: 10; box-shadow: var(--shadow); backdrop-filter: blur(10px); } /* ---------- оплата ---------- */ .view { display: flex; flex-direction: column; gap: 14px; } .pay__head { display: flex; justify-content: space-between; align-items: center; color: var(--hint); font-size: 14px; } .pay__head b { color: var(--text); font-family: var(--mono); } .timer { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--accent-2); background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3); padding: 4px 11px; border-radius: 999px; } .timer--warn { color: var(--danger); background: rgba(var(--danger-rgb), .12); border-color: rgba(var(--danger-rgb), .35); } .pay__amount { display: flex; flex-direction: column; gap: 4px; } .pay__big { font-size: 36px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #fff, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .req { display: flex; flex-direction: column; background: var(--field); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .req__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .req__row:last-child { border-bottom: none; } .req__label { grid-column: 1 / -1; font-size: 11px; color: var(--hint); text-transform: uppercase; letter-spacing: .06em; } .req__value { font-weight: 700; word-break: break-all; } .req__number { font-family: var(--mono); font-size: clamp(15px, 4.4vw, 18px); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent-2); } .req__comment { padding: 10px 14px; font-size: 13px; color: var(--hint); border-top: 1px solid var(--border); } .copy { border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .08); color: var(--accent-2); border-radius: 9px; padding: 6px 11px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s ease; } .copy:active, .copy:hover { background: rgba(var(--accent-rgb), .18); } .note { margin: 0; font-size: 13px; color: var(--hint); line-height: 1.5; } .note b { color: var(--text); } .note a.mono { color: var(--link); text-decoration: none; } .mono { font-family: var(--mono); word-break: break-all; color: var(--text); } /* ---------- статус ---------- */ .card--center { align-items: center; text-align: center; padding: 30px 18px; } .status-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; background: var(--field); box-shadow: 0 0 0 8px rgba(255, 255, 255, .03); } .status-icon--ok { background: rgba(var(--ok-rgb), .14); color: var(--ok); box-shadow: 0 0 0 8px rgba(var(--ok-rgb), .06), 0 0 30px rgba(var(--ok-rgb), .2); } .status-icon--wait { background: rgba(var(--accent-rgb), .14); color: var(--accent); box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .06), 0 0 30px rgba(var(--accent-rgb), .2); } .status-icon--bad { background: rgba(var(--danger-rgb), .14); color: var(--danger); box-shadow: 0 0 0 8px rgba(var(--danger-rgb), .06); } .status-title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; } .card--center .primary, .card--center .secondary { align-self: stretch; margin-top: 6px; } /* ---------- пилюли статусов ---------- */ .pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--field); color: var(--hint); white-space: nowrap; } .pill--awaiting_payment { color: var(--accent-2); background: rgba(var(--accent-rgb), .14); } .pill--paid, .pill--sending { color: var(--info); background: rgba(var(--info-rgb), .14); } .pill--completed { color: var(--ok); background: rgba(var(--ok-rgb), .14); } .pill--cancelled, .pill--expired, .pill--payout_failed { color: var(--danger); background: rgba(var(--danger-rgb), .12); } .pill--appeal { color: var(--appeal); background: rgba(var(--appeal-rgb), .14); } .pill--confirmed { color: var(--accent-2); background: rgba(var(--accent-rgb), .14); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Атрибут hidden должен побеждать display:flex у контейнеров экранов */ .view[hidden], .tabpane[hidden], [hidden] { display: none !important; } /* ---------- уведомления и вторичные элементы ---------- */ .notice { background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .35); color: var(--text); border-radius: 14px; padding: 11px 14px; font-size: 14px; } .notice--error { background: rgba(var(--danger-rgb), .1); border-color: rgba(var(--danger-rgb), .35); } textarea { width: 100%; border: 1px solid var(--border); background: var(--field); color: var(--text); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 16px; font-family: inherit; outline: none; resize: vertical; } textarea:focus { border-color: var(--border-strong); box-shadow: var(--glow); } .choices { display: flex; flex-direction: column; gap: 6px; } .choice { display: flex; align-items: center; gap: 10px; background: var(--field); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 15px; } .choice input { width: auto; margin: 0; } .choice--on { border-color: var(--border-strong); background: rgba(var(--accent-rgb), .08); } .receipt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--hint); } .receipt--center { justify-content: center; } .receipt__ok { color: var(--ok); font-weight: 700; } .receipt .secondary { padding: 8px 12px; font-size: 14px; } .appeal-box { align-self: stretch; background: var(--field); border-radius: 12px; padding: 10px 14px; font-size: 13px; text-align: left; color: var(--hint); } .appeal-box b { color: var(--text); } /* Родной вид чекбоксов и радио, иначе не видно состояние */ input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; width: 20px; height: 20px; padding: 0; border: none; background: none; box-shadow: none; accent-color: var(--accent); cursor: pointer; } /* ---------- навигация ---------- */ .nav { display: flex; gap: 4px; background: rgba(var(--card-rgb), .7); border: 1px solid var(--border); border-radius: 14px; padding: 4px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 8px; z-index: 5; } .nav__btn { flex: 1; border: none; background: transparent; color: var(--hint); padding: 10px 4px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; } .nav__btn--active { background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .12)); color: var(--accent-2); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3) inset; } /* ---------- игры ---------- */ .game__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .game__stats--3 { grid-template-columns: 1fr 1fr 1fr; } .game__big { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--accent-2); } .game__mid { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; touch-action: manipulation; } .cell { aspect-ratio: 1; border: 1px solid var(--border); background: linear-gradient(180deg, var(--field-2), var(--field)); border-radius: 14px; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .08s ease, background .15s ease, box-shadow .15s ease; color: var(--text); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); } .cell:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), .35); } .cell:active:not(:disabled) { transform: scale(.94); } .cell:disabled { cursor: default; } .cell--gem { background: linear-gradient(180deg, rgba(var(--ok-rgb), .3), rgba(var(--ok-rgb), .12)); border-color: rgba(var(--ok-rgb), .5); box-shadow: 0 0 16px rgba(var(--ok-rgb), .25); } .cell--mine { background: rgba(var(--danger-rgb), .16); border-color: rgba(var(--danger-rgb), .5); } .cell--boom { background: linear-gradient(180deg, var(--danger), var(--danger-deep)); color: var(--danger-text); box-shadow: 0 0 22px rgba(var(--danger-rgb), .5); } .cell--dim { opacity: .45; } .result { border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; } .result--won { background: rgba(var(--ok-rgb), .1); border: 1px solid rgba(var(--ok-rgb), .35); } .result--lost { background: rgba(var(--danger-rgb), .1); border: 1px solid rgba(var(--danger-rgb), .35); } .result b { color: var(--text); } .fair { font-size: 13px; color: var(--hint); } .fair summary { cursor: pointer; font-weight: 600; } .fair__body { display: grid; gap: 4px; margin-top: 8px; } .fair__body .mono { font-size: 12px; } .progress { height: 8px; border-radius: 999px; background: var(--field); overflow: hidden; } .progress__bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; transition: width .4s ease; box-shadow: 0 0 10px rgba(var(--accent-rgb), .5); } .ratebox { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 14px; } .ratebox .src { display: flex; justify-content: space-between; gap: 8px; color: var(--hint); } .ratebox .src b { color: var(--text); } /* Dice */ .dice__cond { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .dir { flex: 1; border: 1px solid var(--border); background: transparent; color: var(--hint); border-radius: 10px; padding: 9px 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .dir.on { border-color: var(--border-strong); color: var(--accent-2); background: rgba(var(--accent-rgb), .1); } .dice__target { font-size: 26px; font-weight: 900; min-width: 68px; text-align: right; font-variant-numeric: tabular-nums; color: var(--accent-2); } input[type=range] { width: 100%; accent-color: var(--accent); appearance: auto; -webkit-appearance: auto; background: transparent; border: none; box-shadow: none; padding: 0; height: 28px; } .dice__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); } .roll__number { font-size: 60px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; margin: 8px 0; } .roll__number--won { color: var(--ok); text-shadow: 0 0 24px rgba(var(--ok-rgb), .5); } .roll__number--lost { color: var(--danger); text-shadow: 0 0 24px rgba(var(--danger-rgb), .4); } .roll__bar { position: relative; align-self: stretch; height: 14px; border-radius: 999px; background: rgba(var(--danger-rgb), .22); overflow: visible; } .roll__win { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(var(--ok-rgb), .5), rgba(var(--ok-rgb), .7)); border-radius: 999px; } .roll__marker { position: absolute; top: -5px; width: 4px; height: 24px; background: var(--accent-2); border-radius: 2px; transform: translateX(-2px); box-shadow: 0 0 10px rgba(var(--accent-rgb), .8); } .demo-roll { display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; } .demo-roll__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .roll__bar--small { height: 10px; } .roll__number--small { font-size: 32px; margin: 0; min-width: 96px; } .demo-roll .secondary { flex: none; } /* ---------- профиль ---------- */ .profile__head { display: flex; gap: 14px; align-items: center; } .avatar { width: 60px; height: 60px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--accent-2), var(--accent) 60%, var(--accent-deep)); color: var(--accent-text); font-weight: 900; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15), 0 8px 24px rgba(var(--accent-rgb), .3); } .avatar { overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .profile__who { min-width: 0; } .profile__name { font-size: 19px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; } .profile__rank { color: var(--accent-2); font-weight: 700; font-size: 15px; } .fractals { display: flex; gap: 6px; } .fractals span { flex: 1; height: 6px; border-radius: 999px; background: var(--field); } .fractals span.on { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 8px rgba(var(--accent-rgb), .5); } .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tile { background: var(--field); border: 1px solid var(--border); border-radius: 14px; padding: 11px 13px; } .tile__v { font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .tile__k { font-size: 12px; color: var(--hint); } .board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .board li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: var(--field); font-size: 14px; border: 1px solid transparent; } .board li.me { border-color: var(--border-strong); background: rgba(var(--accent-rgb), .08); } .board .pos { font-weight: 900; color: var(--muted); text-align: center; } .board .pos--1 { color: var(--accent-2); } .board .pos--2 { color: var(--silver); } .board .pos--3 { color: var(--bronze); } .board .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board .who small { display: block; color: var(--hint); font-size: 12px; } .board .vol { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .ranks { margin: 0; padding: 0 0 0 20px; display: grid; gap: 4px; font-size: 14px; color: var(--hint); } .ranks li.cur { color: var(--accent-2); font-weight: 800; } .ranks li.done { color: var(--ok); } .ranks small { color: var(--muted); font-weight: 400; } /* ---------- нижнее меню и экран выбора игры (техническая разметка, оформление за дизайном) ---------- */ .nav--bottom { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 6; margin: 0 auto; max-width: 480px; border-radius: 16px 16px 0 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); } .nav--bottom .nav__btn { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; padding: 6px 4px; } .nav__icon { font-size: 20px; line-height: 1; } body.has-nav .app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .game-pick { display: flex; flex-direction: row; align-items: center; gap: 14px; text-align: left; width: 100%; cursor: pointer; font: inherit; color: var(--text); } .game-pick__icon { font-size: 30px; } .game-pick__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .game-pick__body b { font-size: 17px; } .game-pick__arrow { color: var(--hint); font-size: 24px; } .back-link { margin-right: auto; }