/* demo.mriv.bet — template gallery, on top of the mriv.bet site styles */
.demo-tag{ margin-inline-start:10px; padding:3px 9px; border-radius:999px; font:600 11px var(--mono); letter-spacing:.12em; background:oklch(0.62 0.18 300 / 0.25); color:var(--violet-2); border:1px solid oklch(0.62 0.18 300 / 0.5); }
.bar{ gap:14px; } .g-lang{ margin-inline-start:auto; display:flex; gap:4px; }
.g-lang button{ border:1px solid var(--line); background:transparent; color:var(--text-3); border-radius:999px; padding:6px 11px; font:600 12px var(--body); cursor:pointer; }
.g-lang button.on{ background:var(--text); color:var(--ink); border-color:var(--text); }
.g-hero{ padding:72px 24px 28px; } .g-hero h1{ font-size:clamp(38px,5.4vw,68px); line-height:1.02; margin-top:14px; max-width:16ch; }
.g-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:34px; }
.g-steps div{ display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:center; padding:14px 16px; border-radius:14px; border:1px solid var(--line-2); background:oklch(1 0 0 / 0.03); }
.g-steps span{ grid-row:span 2; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--lily); color:var(--on-lily); font-weight:600; font-size:13px; }
.g-steps b{ font-size:15px; } .g-steps small{ color:var(--text-3); font-size:13px; line-height:1.4; }
.g-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:26px; padding:34px 24px 96px; }
.g-card{ display:flex; flex-direction:column; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(170deg, oklch(0.22 0.035 162), var(--ink-2)); color:inherit; }
.g-card:hover{ color:inherit; }
.g-shot{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink-5); border-bottom:1px solid var(--line-2); }
.g-shot > img:first-child{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .6s ease; }
.g-card:hover .g-shot > img:first-child{ transform:scale(1.03); }
.g-phone{ position:absolute; inset-inline-end:5%; bottom:-14%; width:23%; border-radius:14px; border:3px solid oklch(0.12 0.02 160); box-shadow:0 18px 40px rgba(0,0,0,.55); transition:transform .4s ease; }
.g-card:hover .g-phone{ transform:translateY(-8%); }
.g-body{ display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; padding:20px 22px 22px; }
.g-body h2{ font-size:26px; margin:0; } .g-body p{ grid-column:1; color:var(--text-3); font-size:14.5px; line-height:1.5; } .g-body .btn{ grid-column:2; grid-row:1 / span 2; white-space:nowrap; }
.g-admin{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:40px; align-items:center; }
.g-admin-cards{ display:grid; gap:16px; } .g-admin-cards .card{ display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:center; color:inherit; padding:22px; }
.g-role{ font-family:var(--display); font-weight:800; font-size:22px; } .g-admin-cards p{ grid-column:1; } .g-admin-cards .btn{ grid-column:2; grid-row:1 / span 2; }
.g-end{ text-align:center; } .g-end .intro{ margin:16px auto 28px; }
.g-foot{ display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; padding:22px 24px; color:var(--muted); font-size:13px; }
[dir="rtl"] .g-hero h1, [dir="rtl"] h2{ letter-spacing:0; }
@media (max-width:560px){ .header-cta{ display:none; } .g-hero{ padding-top:44px; } .g-body{ grid-template-columns:1fr; } .g-body .btn{ grid-column:1; grid-row:auto; justify-self:start; margin-top:6px; } .g-grid{ padding-bottom:64px; } .section{ padding:64px 24px; } }

.g-body h2{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .g-mark{ width:34px; height:34px; object-fit:contain; } .g-body h2 small{ font:500 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:3px 8px; border:1px solid var(--line); border-radius:999px; }

/* Telegram Casino */
.g-tg{ display:grid; grid-template-columns:minmax(220px, 300px) minmax(0, 1fr); gap:48px; align-items:center; }
.g-tg-phone{ border-radius:34px; padding:9px; background:#0b0b0c; box-shadow:0 30px 60px -28px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08); } .g-tg-phone img{ display:block; width:100%; border-radius:26px; }
.g-tg-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; } .g-tg-actions [hidden]{ display:none; } .g-tg-note{ margin-top:14px; font-size:14px; opacity:.7; }
@media (max-width:760px){ .g-tg{ grid-template-columns:1fr; gap:28px; } .g-tg-phone{ max-width:260px; margin-inline:auto; } }