/* Telegram-only casino: what its web address shows. Same "Noir" language as the app. */
:root{ --ink:#0A0A0B; --surface:#141416; --text:#F4F0E6; --muted:#A09A8C; --accent:#D8B56A; --accent-2:#F3DFA8; --on:#1A1408; --hair:rgba(216,181,106,.3); }
html[data-template="purplepot"]{ --accent:#C3A6FF; --accent-2:#E4D6FF; --on:#160B2E; --hair:rgba(195,166,255,.3); }
html[data-template="silverstake"]{ --accent:#C9D3DC; --accent-2:#EEF3F7; --on:#10161B; --hair:rgba(201,211,220,.3); }
html[data-template="orbit"]{ --accent:#E9A25C; --accent-2:#FFD3A6; --on:#1D1005; --hair:rgba(233,162,92,.3); }
*{ box-sizing:border-box; } html,body{ height:100%; }
body{ margin:0; min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:safe center; gap:22px; padding:max(28px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background:var(--ink); color:var(--text); font-family:'Manrope', -apple-system, 'Segoe UI', sans-serif; overflow-x:hidden; position:relative; -webkit-font-smoothing:antialiased; }
.orb{ position:fixed; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; } .orb.a{ width:70vmax; height:70vmax; top:-42vmax; left:50%; transform:translateX(-50%); background:color-mix(in srgb, var(--accent) 34%, transparent); } .orb.b{ width:46vmax; height:46vmax; bottom:-30vmax; right:-12vmax; background:color-mix(in srgb, var(--accent) 16%, transparent); }
.card{ position:relative; z-index:1; width:100%; max-width:460px; display:flex; flex-direction:column; align-items:center; text-align:center; opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); } body.ready .card{ opacity:1; transform:none; }
.crest{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; overflow:hidden; margin-bottom:18px; background:radial-gradient(circle at 32% 26%, #1E1E22, var(--ink)); border:1px solid var(--hair); box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent), 0 24px 50px -20px #000; }
.crest img{ max-width:70px; max-height:56px; object-fit:contain; } .mono{ font:600 44px/1 'Fraunces', Georgia, serif; color:var(--accent); }
.eyebrow{ font-size:11px; font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
h1{ font:600 clamp(30px, 8.6vw, 46px)/1.04 'Fraunces', Georgia, serif; letter-spacing:-.025em; margin:0 0 14px; text-wrap:balance; }
p{ margin:0 0 26px; color:var(--muted); font-size:15.5px; line-height:1.6; max-width:40ch; text-wrap:pretty; }
.cta{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:340px; min-height:58px; border-radius:18px; text-decoration:none; font-weight:800; font-size:16px; color:var(--on); background:linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow:0 18px 40px -16px var(--accent); transition:transform .15s; } .cta:hover{ transform:translateY(-2px); } .cta:active{ transform:scale(.985); }
.qrbox{ margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); font-size:12.5px; } .qrbox[hidden]{ display:none; } .qr{ width:150px; height:150px; padding:12px; border-radius:18px; background:#fff; } .qr svg{ width:100%; height:100%; display:block; }
.steps{ list-style:none; counter-reset:s; margin:28px 0 0; padding:0; width:100%; max-width:380px; display:flex; flex-direction:column; gap:10px; text-align:start; }
.steps li{ counter-increment:s; display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:16px; background:color-mix(in srgb, var(--surface) 80%, transparent); border:1px solid rgba(255,255,255,.07); font-size:13.5px; color:var(--text); }
.steps li::before{ content:counter(s); flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:600 13px/1 'Fraunces', Georgia, serif; color:var(--accent); border:1px solid var(--hair); }
.langs{ display:flex; gap:6px; margin-top:24px; } .langs button{ background:none; border:1px solid rgba(255,255,255,.1); color:var(--muted); border-radius:999px; padding:6px 12px; font:700 11px/1 inherit; letter-spacing:.08em; cursor:pointer; } .langs button.on{ color:var(--on); background:var(--accent); border-color:var(--accent); }
footer{ position:relative; z-index:1; display:flex; gap:10px; align-items:center; color:var(--muted); font-size:11.5px; } footer span:first-child{ border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:3px 8px; font-weight:800; font-size:10.5px; color:var(--text); }

.alt{ display:inline-block; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom:2px; } .alt[hidden]{ display:none; } .alt.back{ color:var(--muted); border-bottom-color:transparent; margin-top:22px; }