/* Public landing page. Monochrome like the panel, with light and motion. */
.landing { --l-max: 1180px; --glow: rgba(255, 255, 255, 0.08); overflow-x: clip; }
.landing .btn.lg { padding: 14px 24px; font-size: 15px; }
.landing .btn.ghost { border-color: #2f2f2f; }
.landing .btn svg.i { width: 17px; height: 17px; }

/* ── Reveal on scroll ── */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rv.in { opacity: 1; transform: none; }

/* ── Nav ── */
.l-nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s; border-bottom: 1px solid transparent; }
.l-nav.solid { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(14px); border-color: var(--line); }
.l-nav-in { max-width: var(--l-max); margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.l-nav .brand { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; }
.l-nav .brand .mark { width: 34px; height: 34px; border-radius: 10px; }
.l-nav .brand b { font-family: var(--display); font-size: 14px; letter-spacing: 0.02em; }
.l-links { display: flex; gap: 2px; margin-left: 22px; }
.l-links button, .l-links a { text-decoration: none; border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 13.5px; padding: 8px 12px; border-radius: 999px; transition: color 0.2s, background 0.2s; }
.l-links button:hover, .l-links a:hover { color: var(--text); background: var(--hover); }
.l-nav .grow { flex: 1; }

/* ── Hero ── */
.l-hero { position: relative; min-height: 100vh; display: grid; align-items: center; padding: 110px 16px 70px; isolation: isolate; }
.l-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%); }
.l-aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.l-aurora i { position: absolute; width: 46vw; height: 46vw; min-width: 420px; min-height: 420px; border-radius: 50%; filter: blur(90px); opacity: 0.16; animation: drift 22s ease-in-out infinite alternate; }
.l-aurora i:nth-child(1) { background: #7c3aed; top: -12%; left: -8%; }
.l-aurora i:nth-child(2) { background: #2563eb; top: 20%; right: -14%; animation-duration: 28s; animation-delay: -6s; }
.l-aurora i:nth-child(3) { background: #db2777; bottom: -25%; left: 30%; animation-duration: 32s; animation-delay: -12s; opacity: 0.1; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 4vh) scale(1.15); } 100% { transform: translate(-4vw, 8vh) scale(0.95); } }

.l-hero-in { max-width: var(--l-max); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.l-hero-text { display: grid; gap: 22px; justify-items: start; }
.l-pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #2c2c2c; background: rgba(20, 20, 20, 0.7); backdrop-filter: blur(6px); border-radius: 999px; padding: 7px 12px 7px 10px; color: var(--muted); font-weight: 700; font-size: 13px; transition: border-color 0.2s, color 0.2s; }
.l-pill:hover { border-color: #444; color: var(--text); }
.l-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: ping 2s infinite; }
.l-pill svg.i { width: 14px; height: 14px; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } }
.l-hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.03em; }
.l-shine { background: linear-gradient(100deg, #fff 20%, #a78bfa 40%, #60a5fa 55%, #fff 75%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: -250% 0; } }
.l-lead { margin: 0; color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; max-width: 560px; }
.l-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.l-trust { display: flex; gap: 18px; flex-wrap: wrap; color: var(--faint); font-weight: 700; font-size: 13px; }
.l-trust span { display: inline-flex; align-items: center; gap: 6px; }
.l-trust svg.i { width: 15px; height: 15px; color: var(--green); }

/* ── Ticker ── */
.l-ticker { border-block: 1px solid var(--line); overflow: hidden; padding: 16px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.l-ticker-track { display: flex; gap: 38px; width: max-content; animation: marquee 40s linear infinite; }
.l-ticker span { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-family: var(--display); font-weight: 700; font-size: 15px; white-space: nowrap; }
.l-ticker svg.i { width: 15px; height: 15px; color: #6b6b6b; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Stats ── */
.l-stats { max-width: var(--l-max); margin: 0 auto; padding: 70px 16px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Each card has its own colour (--c): glow, icon tile and the number tint. */
.l-stat { --c: #a78bfa; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; padding: 28px 18px 24px; background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--c) 13%, transparent), transparent 70%), linear-gradient(180deg, #0f0f0f, #080808); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.l-stat.blue { --c: #60a5fa; }
.l-stat.green { --c: #34d399; }
.l-stat.orange { --c: #fb923c; }
.l-stat:hover { border-color: color-mix(in srgb, var(--c) 40%, #222); }
.l-stat-ico { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; margin-bottom: 10px; color: var(--c); background: linear-gradient(145deg, color-mix(in srgb, var(--c) 26%, #111), color-mix(in srgb, var(--c) 8%, #0b0b0b)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.l-stat-ico svg { width: 32px; height: 32px; overflow: visible; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 60%, transparent)); }
.l-stat b { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.02em; line-height: 1; background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--c) 70%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The speaker plays: waves go out one after another, the cone gives a small kick. */
.l-stat-ico .wave { transform-box: fill-box; transform-origin: left center; animation: l-wave 1.6s ease-out infinite; }
.l-stat-ico .w2 { animation-delay: 0.25s; }
.l-stat-ico .cone { transform-box: fill-box; transform-origin: right center; animation: l-cone 1.6s ease-in-out infinite; }
@keyframes l-wave { 0% { opacity: 0.15; transform: translateX(-2px) scale(0.85); } 35% { opacity: 1; transform: none; } 100% { opacity: 0.15; transform: translateX(2px) scale(1.05); } }
@keyframes l-cone { 0%, 100% { transform: none; } 12% { transform: scale(1.08); } 24% { transform: none; } }
/* Modules: the four squares slide round one corner at a time, like a shuffle. */
.l-stat-ico .sq { animation: 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.l-stat-ico .q1 { animation-name: l-q1; }
@keyframes l-q1 { 0%, 17% { transform: none; } 25%, 42% { transform: translate(13px, 0px); } 50%, 67% { transform: translate(13px, 13px); } 75%, 92% { transform: translate(0px, 13px); } 100% { transform: none; } }
.l-stat-ico .q2 { animation-name: l-q2; }
@keyframes l-q2 { 0%, 17% { transform: none; } 25%, 42% { transform: translate(0px, 13px); } 50%, 67% { transform: translate(-13px, 13px); } 75%, 92% { transform: translate(-13px, 0px); } 100% { transform: none; } }
.l-stat-ico .q4 { animation-name: l-q4; }
@keyframes l-q4 { 0%, 17% { transform: none; } 25%, 42% { transform: translate(-13px, 0px); } 50%, 67% { transform: translate(-13px, -13px); } 75%, 92% { transform: translate(0px, -13px); } 100% { transform: none; } }
.l-stat-ico .q3 { animation-name: l-q3; }
@keyframes l-q3 { 0%, 17% { transform: none; } 25%, 42% { transform: translate(0px, -13px); } 50%, 67% { transform: translate(13px, -13px); } 75%, 92% { transform: translate(13px, 0px); } 100% { transform: none; } }
/* Shield: the tick draws itself, then a glint runs across. */
.l-stat-ico .chk { stroke-dasharray: 16; animation: l-chk 4s ease-in-out infinite; }
@keyframes l-chk { 0% { stroke-dashoffset: 16; } 20%, 88% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 16; opacity: 0; } }
.l-stat-ico .glint { transform: skewX(-20deg); animation: l-glint 4s ease-in-out infinite; }
@keyframes l-glint { 0%, 25% { transform: skewX(-20deg) translateX(0); } 50%, 100% { transform: skewX(-20deg) translateX(46px); } }
/* Gamepad: rocks in the hands, the buttons get pressed in turn. */
.l-stat-ico .pad { transform-box: fill-box; transform-origin: center; animation: l-pad 3s ease-in-out infinite; }
@keyframes l-pad { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.l-stat-ico .btn1, .l-stat-ico .btn2, .l-stat-ico .dpad { transform-box: fill-box; transform-origin: center; animation: l-press 1.5s ease-in-out infinite; }
.l-stat-ico .btn2 { animation-delay: 0.5s; }
.l-stat-ico .dpad { animation-delay: 1s; }
@keyframes l-press { 0%, 40%, 100% { transform: scale(1); opacity: 0.7; } 15% { transform: scale(0.7); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .l-steps::after, .l-step-n, .l-step-n svg.i, .l-final-in, .l-final-orb, .l-final-ava, .l-final-ava::before, .l-final-ava::after, .l-mini-item .m-ico, .l-stat-ico .wave, .l-stat-ico .cone, .l-stat-ico .sq, .l-stat-ico .chk, .l-stat-ico .glint, .l-stat-ico .pad, .l-stat-ico .btn1, .l-stat-ico .btn2, .l-stat-ico .dpad { animation: none; } }
.l-stat-label { color: var(--muted); font-weight: 600; }

/* ── Sections ── */
.l-sec { max-width: var(--l-max); margin: 0 auto; padding: 90px 16px 10px; }
.l-sec.narrow { max-width: 820px; }
.l-head { text-align: center; display: grid; justify-items: center; gap: 12px; margin-bottom: 44px; }
.l-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #a78bfa; }
.l-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.02em; line-height: 1.1; }
.l-head p { margin: 0; color: var(--muted); max-width: 620px; line-height: 1.6; font-size: 16px; }

/* Cursor spotlight */
.spot { position: relative; isolation: isolate; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), var(--glow), transparent 45%); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: -1; }
.spot:hover::after { opacity: 1; }

/* ── Steps ── */
.l-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
/* A spark runs along the line from step 1 to step 3. */
.l-steps::after { content: ""; position: absolute; left: 16%; top: 33px; width: 90px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #a78bfa, #60a5fa, transparent); filter: drop-shadow(0 0 6px #8b5cf6); animation: l-run 3.6s ease-in-out infinite; }
@keyframes l-run { 0% { left: 16%; opacity: 0; } 10%, 90% { opacity: 1; } 100% { left: calc(84% - 90px); opacity: 0; } }
.l-step { --c: #a78bfa; }
.l-step.s2 { --c: #60a5fa; }
.l-step.s3 { --c: #34d399; }
.l-steps::before { content: ""; position: absolute; left: 16%; right: 16%; top: 34px; height: 1px; background: linear-gradient(90deg, transparent, #3a3a3a, transparent); }
.l-step { position: relative; text-align: center; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 0 10px; }
.l-step-n { position: relative; z-index: 1; width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center; color: var(--c); background: linear-gradient(145deg, color-mix(in srgb, var(--c) 24%, #111), color-mix(in srgb, var(--c) 6%, #0b0b0b)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--c) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08); animation: l-bob 4s ease-in-out infinite; }
.l-step.s2 .l-step-n { animation-delay: -1.3s; }
.l-step.s3 .l-step-n { animation-delay: -2.6s; }
@keyframes l-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.l-step-n svg.i { width: 28px; height: 28px; }
.l-step-logo { width: 70%; height: 70%; object-fit: contain; display: block; background: none; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 55%, transparent)); }
.l-step.s1 .l-step-n svg.i { animation: l-turn 4s ease-in-out infinite; }
.l-step.s3 .l-step-n svg.i { animation: l-launch 2.4s ease-in-out infinite; }
@keyframes l-turn { 0%, 60% { transform: rotate(0); } 80%, 100% { transform: rotate(180deg); } }
@keyframes l-launch { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -3px); } }
.l-step-n span { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #0a0a0a; font-weight: 800; font-size: 12px; display: grid; place-items: center; box-shadow: 0 0 0 4px #000; }
.l-step b { font-family: var(--display); font-size: 17px; margin-top: 6px; }
.l-step p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 300px; }

/* ── Modules ── */
.l-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
/* Module cards: colour per module (--c), soft glow in the corner, icon tile. */
.l-mod { --c: #a78bfa; --glow: color-mix(in srgb, var(--c) 14%, transparent); position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; padding: 20px; background: radial-gradient(260px 160px at 0% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%), linear-gradient(180deg, #0e0e0e, #080808); display: flex; flex-direction: column; gap: 10px; transition: border-color 0.3s, transform 0.3s; }
.l-mod:hover { border-color: color-mix(in srgb, var(--c) 45%, #222); transform: translateY(-3px); }
:is(.l-mod, .calc-item, .m-ico).m-core { --c: #60a5fa; }
:is(.l-mod, .calc-item, .m-ico).m-protection { --c: #f87171; }
:is(.l-mod, .calc-item, .m-ico).m-levels { --c: #fbbf24; }
:is(.l-mod, .calc-item, .m-ico).m-economy { --c: #34d399; }
:is(.l-mod, .calc-item, .m-ico).m-community { --c: #f472b6; }
:is(.l-mod, .calc-item, .m-ico).m-boosts { --c: #e879f9; }
:is(.l-mod, .calc-item, .m-ico).m-tickets { --c: #38bdf8; }
:is(.l-mod, .calc-item, .m-ico).m-applications { --c: #a3e635; }
:is(.l-mod, .calc-item, .m-ico).m-gameservers { --c: #818cf8; }
:is(.l-mod, .calc-item, .m-ico).m-reviews { --c: #fb923c; }
:is(.l-mod, .calc-item, .m-ico).m-music { --c: #c084fc; }
:is(.l-mod, .calc-item, .m-ico).m-translator { --c: #38bdf8; }
:is(.l-mod, .calc-item, .m-ico).m-branding { --c: #2dd4bf; }
.l-mod-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
/* Module icon tile; the colour comes from .m-<id> (falls back to violet). */
.m-ico { --k: var(--c, #a78bfa); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--k); background: linear-gradient(145deg, color-mix(in srgb, var(--k) 24%, #111), color-mix(in srgb, var(--k) 6%, #0b0b0b)); border: 1px solid color-mix(in srgb, var(--k) 40%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: transform 0.4s; }
.m-ico svg.i { width: 16px; height: 16px; }
.m-ico.lg { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--k) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.m-ico.lg svg.i { width: 22px; height: 22px; }
.m-ico.xs { width: 22px; height: 22px; border-radius: 7px; }
.m-ico.xs svg.i { width: 13px; height: 13px; }
.l-mod:hover .m-ico { transform: rotate(-8deg) scale(1.08); }
.l-mod-price { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid #242424; background: rgba(255, 255, 255, 0.03); color: var(--faint); font-size: 12px; font-weight: 700; white-space: nowrap; }
.l-mod-price b { font-family: var(--display); font-size: 14px; color: var(--text); }
.l-mod-price.free { color: #86efac; border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.1); }
.l-mod-name { font-family: var(--display); font-size: 17px; }
.l-mod p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; }

/* ── Pricing ── */
.l-plans { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 860px; margin: 0 auto; gap: 14px; align-items: stretch; }
.l-plan { position: relative; border: 1px solid var(--line); border-radius: 24px; padding: 26px; background: #0a0a0a; display: flex; flex-direction: column; gap: 12px; }
.l-plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; }
.l-plan.sponsor { border-color: rgba(255, 196, 64, 0.45); background: linear-gradient(180deg, rgba(255, 196, 64, 0.07), transparent 40%), #0a0a0a; box-shadow: 0 20px 80px rgba(255, 196, 64, 0.08); }
.l-plan-tag.gold { background: linear-gradient(90deg, #fbbf24, #f59e0b); color: #000; }
.l-plan.best { border-color: transparent; background: linear-gradient(#0d0d0d, #0d0d0d) padding-box, conic-gradient(from var(--ang, 0deg), #a78bfa, #60a5fa, #f472b6, #a78bfa) border-box; border: 1px solid transparent; animation: spin-border 6s linear infinite; box-shadow: 0 20px 80px rgba(124, 58, 237, 0.15); }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin-border { to { --ang: 360deg; } }
.l-plan-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #fff; color: #000; font-weight: 800; font-size: 11.5px; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.l-plan-top { display: grid; gap: 2px; }
.l-plan-top > span { color: var(--faint); font-size: 13px; font-weight: 600; }
.l-plan-name { font-family: var(--display); font-size: 18px; }
.l-plan-save { margin: -6px 0 0; min-height: 20px; color: #86efac; font-size: 13px; font-weight: 700; }
.l-plan-inc { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid #1c1c1c; }
.l-plan-inc > span { color: var(--faint); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.l-plan-price { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.02em; }
.l-plan-price small { font-family: "Manrope", sans-serif; font-size: 14px; color: var(--faint); font-weight: 600; margin-left: 4px; }
.l-plan-sub { margin: 0; color: var(--muted); }
.l-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.l-plan li { display: flex; align-items: flex-start; gap: 9px; font-weight: 600; font-size: 14px; line-height: 1.35; }
.l-plan li svg.i { flex: none; margin-top: 1px; }
.l-plan li svg.i { width: 16px; height: 16px; color: var(--green); }
.l-plan li.off { color: #4a4a4a; }
.l-plan li.off svg.i { color: #3a3a3a; }
.l-plan li.mod { align-items: center; }
.l-plan li.mod .m-ico svg.i { width: 13px; height: 13px; color: var(--k); margin: 0; }
.l-plan .btn { width: 100%; }
.l-note { text-align: center; color: var(--faint); margin: 22px 0 0; font-size: 13.5px; }

/* ── FAQ ── */
.l-faq { display: grid; gap: 10px; }
.l-faq details { border: 1px solid var(--line); border-radius: 16px; background: #0a0a0a; transition: border-color 0.3s; }
.l-faq details[open] { border-color: #333; }
.l-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; font-weight: 700; font-size: 15px; }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary svg.i { transition: transform 0.3s; color: var(--muted); flex: none; }
.l-faq details[open] summary svg.i { transform: rotate(45deg); }
.l-faq details p { margin: 0; padding: 0 20px 18px; color: var(--muted); line-height: 1.65; animation: fade-down 0.35s ease-out; }
@keyframes fade-down { from { opacity: 0; transform: translateY(-6px); } }

/* ── Final CTA ── */
.l-final { padding: 110px 16px 80px; }
/* A slowly spinning gradient border, two drifting glows and the bot's avatar. */
.l-final-in { position: relative; isolation: isolate; max-width: 900px; margin: 0 auto; text-align: center; border: 1px solid transparent; border-radius: 32px; padding: 56px 24px 60px; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.25), transparent 60%) padding-box, linear-gradient(#080808, #080808) padding-box, conic-gradient(from var(--ang, 0deg), #262626 0 55%, #a78bfa 70%, #60a5fa 80%, #262626 95%) border-box; animation: spin-border 8s linear infinite; display: grid; justify-items: center; gap: 16px; }
.l-final-orb { position: absolute; z-index: -1; width: 260px; height: 260px; border-radius: 50%; filter: blur(60px); opacity: 0.35; pointer-events: none; }
.l-final-orb.a { background: #7c3aed; left: -60px; bottom: -120px; animation: l-orb 9s ease-in-out infinite; }
.l-final-orb.b { background: #2563eb; right: -60px; top: -120px; animation: l-orb 11s ease-in-out infinite reverse; }
@keyframes l-orb { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(80px, -40px); } }
.l-final-ava { position: relative; width: 76px; height: 76px; margin-bottom: 6px; animation: l-bob 4s ease-in-out infinite; }
.l-final-ava img { width: 100%; height: 100%; border-radius: 22px; display: block; box-shadow: 0 16px 50px -10px rgba(139, 92, 246, 0.7); }
.l-final-ava::before, .l-final-ava::after { content: ""; position: absolute; inset: 0; border-radius: 22px; border: 1px solid rgba(167, 139, 250, 0.6); animation: l-ring 3s ease-out infinite; }
.l-final-ava::after { animation-delay: 1.5s; }
@keyframes l-ring { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.7); opacity: 0; } }
.l-final-in h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4.2vw, 48px); letter-spacing: -0.02em; }
.l-final-in p { margin: 0 0 10px; color: var(--muted); font-size: 16px; }
.l-final-in .l-cta { justify-content: center; }


/* ── Responsive ── */
@media (max-width: 1000px) {
    .l-hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .l-links { display: none; }
    .l-plans, .l-plans.three { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
    .l-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .l-hero { padding-top: 96px; min-height: auto; }
    .l-steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .l-steps::before { display: none; }
    .l-sec { padding-top: 70px; }
    .l-nav .btn:not(.white) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
    .l-aurora i, .l-ticker-track, .l-shine, .l-plan.best, .l-scan-line { animation: none; }
}

/* ══ Discord look-alike (colours and sizes of the real client) ══════════ */
.dc { --dc-bg: #313338; --dc-side: #2b2d31; --dc-rail: #1e1f22; --dc-text: #dbdee1; --dc-muted: #949ba4; --dc-line: #3f4147;
    font-family: "Noto Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: var(--dc-text); background: var(--dc-bg);
    border-radius: 12px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); font-size: 14.5px; line-height: 1.375; text-align: left; }
.dc .hash { color: #80848e; font-size: 20px; font-weight: 400; line-height: 1; margin-right: 6px; }
.dc-top { display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 16px; border-bottom: 1px solid #26272b; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); flex: none; }
.dc-top b { color: #f2f3f5; font-size: 15px; }
.dc-top i { width: 1px; height: 22px; background: var(--dc-line); margin: 0 12px; }
.dc-top > span:last-child:not(.hash) { color: var(--dc-muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dc-msgs { display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 0 14px; overflow: hidden; }
.dc-msg { display: flex; gap: 16px; padding: 3px 16px; margin-top: 14px; opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.35s, background 0.3s; }
.dc-msg.cont { margin-top: 0; padding-left: 72px; }
.dc-msg.show { opacity: 1; transform: none; }
.dc-msg:hover { background: #2e3035; }
.dc-ava { width: 40px; height: 40px; border-radius: 50%; flex: none; margin-top: 2px; }
.dc-body { min-width: 0; flex: 1; }
.dc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dc-name { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 5px; }
.dc-bot { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; padding: 1px 4px; border-radius: 3px; line-height: 15px; letter-spacing: 0.01em; }
.dc-head time { color: var(--dc-muted); font-size: 12px; }
.dc-body p { margin: 2px 0 0; color: var(--dc-text); overflow-wrap: anywhere; }
.dc-mention { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-code { background: #2b2d31; border-radius: 4px; padding: 1px 4px; font-family: Consolas, "Courier New", monospace; font-size: 85%; }
.dc-msg.scanning .dc-attach .l-scan-line { opacity: 1; animation: scan 1.1s ease-in-out infinite; }
.dc-msg.removed { opacity: 0; transform: translateX(24px); background: rgba(218, 55, 60, 0.12); transition: opacity 0.45s, transform 0.45s; }
.dc-attach { position: relative; margin-top: 6px; max-width: 300px; border-radius: 8px; overflow: hidden; background: #fff; color: #111; padding: 12px 14px 14px; display: grid; gap: 6px; font-family: Arial, sans-serif; }
.dc-attach .src { color: #0d47a1; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; }
.dc-attach b { font-size: 14px; line-height: 1.3; }
.dc-attach span { font-size: 12.5px; color: #333; }

/* embeds */
.dc-embed { margin-top: 4px; max-width: 460px; background: #2b2d31; border-left: 4px solid #8b5cf6; border-radius: 4px; padding: 8px 14px 12px 12px; display: grid; gap: 6px; }
.dc-panel .dc-embed, .l-mon .dc-embed { background: #2b2d31; }
.dc-e-author { font-size: 13px; font-weight: 600; color: #f2f3f5; }
.dc-e-title { font-weight: 700; color: #f2f3f5; font-size: 15px; }
.dc-e-desc { font-size: 14px; }
.dc-e-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.dc-e-field { flex: 1 1 100%; min-width: 0; font-size: 14px; }
.dc-e-field.inline { flex: 1 1 120px; }
.dc-e-field b { display: block; font-size: 13.5px; color: #f2f3f5; margin-bottom: 1px; }
.dc-e-foot { font-size: 12px; color: var(--dc-muted); margin-top: 2px; }
.dc-quote { border-left: 4px solid #4e5058; padding-left: 10px; display: grid; gap: 1px; margin-top: 2px; }
.dc-quote .fill { color: #23a55a; letter-spacing: -1px; font-size: 13px; }
.dc-sys { display: flex; align-items: center; gap: 4px; padding: 4px 16px 4px 28px; color: var(--dc-muted); font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; }
.dc-sys.show { opacity: 1; transform: none; }
.dc-sys .arrow { color: #23a55a; font-weight: 700; margin-right: 10px; }
.dc-sys b { color: #f2f3f5; font-weight: 600; }
.dc-sys time { margin-left: auto; font-size: 11.5px; }

/* the hero app window */
.dc-app { display: grid; grid-template-columns: 64px 196px 1fr; height: 470px; border: 1px solid #1f1f22; }
.dc-rail { background: var(--dc-rail); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.dc-srv { width: 44px; height: 44px; border-radius: 50%; background: var(--dc-bg); display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #dbdee1; position: relative; }
.dc-srv.home { background: #5865f2; color: #fff; border-radius: 14px; }
.dc-srv.active { border-radius: 14px; background: #d97706; color: #fff; }
.dc-srv.active::before { content: ""; position: absolute; left: -10px; width: 4px; height: 36px; border-radius: 0 4px 4px 0; background: #fff; }
.dc-srv.add { color: #23a55a; font-size: 22px; font-weight: 400; }
/* Real game icons as server icons (round, the active one square-ish like in Discord). */
.dc-srv.img { background: #111; }
.dc-srv.img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.dc-sep { width: 30px; height: 2px; background: #35363c; border-radius: 1px; }
.dc-side { background: var(--dc-side); display: flex; flex-direction: column; gap: 2px; padding: 0 8px; min-width: 0; }
.dc-guild { display: flex; align-items: center; justify-content: space-between; height: 48px; margin: 0 -8px 8px; padding: 0 16px; border-bottom: 1px solid #1f2023; font-weight: 700; color: #f2f3f5; font-size: 15px; }
.dc-guild svg.i { width: 16px; height: 16px; }
.dc-cat { color: var(--dc-muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; margin: 14px 0 4px 6px; }
.dc-ch { display: flex; align-items: center; padding: 5px 8px; border-radius: 4px; color: var(--dc-muted); font-size: 15px; white-space: nowrap; }
.dc-ch.active { background: #404249; color: #fff; }
.dc-badge { margin-left: auto; background: #f23f43; color: #fff; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 0 6px; line-height: 16px; transform: scale(0); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.dc-badge.on { transform: scale(1); }
.dc-ch:has(.dc-badge.on) { color: #f2f3f5; font-weight: 600; }
.dc-main { display: flex; flex-direction: column; min-width: 0; }
.dc-main .dc-msgs { flex: 1; }
.dc-input { margin: 0 16px 20px; background: #383a40; border-radius: 8px; padding: 11px 16px; color: #6d6f78; font-size: 15px; display: flex; align-items: center; gap: 14px; flex: none; }
.dc-input .plus { width: 24px; height: 24px; border-radius: 50%; background: #b5bac1; color: #383a40; display: grid; place-items: center; font-weight: 700; font-size: 18px; line-height: 1; }

.l-hero-in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); }

/* smaller Discord panels inside feature rows */
.dc-panel { display: flex; flex-direction: column; height: 100%; min-height: 360px; }
.dc-panel .dc-msgs { flex: 1; }

/* ══ Feature rows ═════════════════════════════════════════════════════ */
.l-rows { display: grid; gap: 110px; }
.l-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.l-row:nth-child(even) .l-row-text { order: 2; }
.l-row-text { display: grid; gap: 16px; align-content: center; }
.l-row-n { font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--faint); letter-spacing: 0.08em; }
.l-row-text h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.02em; }
.l-row-text p { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.7; }
.l-row-text ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.l-row-text li { position: relative; padding-left: 22px; color: #d4d4d4; font-weight: 600; }
.l-row-text li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 10px; height: 2px; background: #fff; }
.l-row-demo { min-width: 0; }

/* 02: picture → text */
.l-ocr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.l-ocr-img { position: relative; background: #fff; color: #111; border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; align-content: start; overflow: hidden; font-family: Arial, sans-serif; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.l-ocr-img .src { display: flex; align-items: center; gap: 6px; color: #0d47a1; font-weight: 700; font-size: 12px; }
.l-ocr-img .src i { width: 14px; height: 14px; border-radius: 50%; background: #0d47a1; }
.l-ocr-img .src small { margin-left: auto; color: #888; font-weight: 400; }
.l-ocr-img b { font-size: 15px; line-height: 1.35; }
.l-ocr-img .photo { height: 110px; border-radius: 6px; background: linear-gradient(160deg, #6b7c5a, #3f4b36 45%, #20261c); }
.l-ocr.scanning .l-ocr-img .l-scan-line { opacity: 1; animation: scan-tall 1.4s ease-in-out infinite; }
@keyframes scan-tall { from { transform: translateY(-40px); } to { transform: translateY(330px); } }
.l-ocr-out { border: 1px solid #262626; border-radius: 12px; background: #0b0b0b; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-family: Consolas, "Courier New", monospace; }
.l-ocr-label { font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.l-ocr-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #bdbdbd; flex: 1; }
.l-ocr-text .hot { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border-radius: 3px; }
.l-ocr-verdict { display: flex; gap: 8px; align-items: flex-start; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13px; color: #fca5a5; opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; }
.l-ocr-verdict.show { opacity: 1; transform: none; }
.l-ocr-verdict svg.i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.l-scan-line { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(180deg, transparent, rgba(34, 197, 94, 0.28), transparent); border-bottom: 2px solid rgba(34, 197, 94, 0.9); opacity: 0; pointer-events: none; }
@keyframes scan { from { transform: translateY(-40px); } to { transform: translateY(140px); } }

/* 03: status message + member list */
.l-mon { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px; align-items: start; }
.l-mon .dc-panel { min-height: 0; }
.dc-members { background: var(--dc-side); padding: 16px 10px; display: grid; gap: 4px; align-content: start; }
.dc-m-cat { color: var(--dc-muted); font-size: 11.5px; font-weight: 700; margin: 0 6px 6px; }
.dc-member { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 4px; min-width: 0; }
.dc-member:hover { background: #35373c; }
.dc-m-ava { position: relative; flex: none; }
.dc-m-ava img { width: 32px; height: 32px; border-radius: 50%; display: block; }
.dc-m-ava i { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: #23a55a; border: 3px solid var(--dc-side); }
.dc-m-t { min-width: 0; }
.dc-m-t b { display: flex; align-items: center; gap: 5px; color: #f23f43; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.dc-m-t small { display: block; color: var(--dc-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* small four at the end of features */
.l-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 110px; }
.l-mini-item { --c: #a78bfa; position: relative; overflow: hidden; padding: 22px; display: grid; gap: 10px; align-content: start; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(240px 150px at 0% 0%, color-mix(in srgb, var(--c) 11%, transparent), transparent 70%), linear-gradient(180deg, #0e0e0e, #080808); transition: border-color 0.3s, transform 0.3s; }
:is(.l-mini-item).m-levels { --c: #fbbf24; }
:is(.l-mini-item).m-community { --c: #f472b6; }
:is(.l-mini-item).m-branding { --c: #2dd4bf; }
:is(.l-mini-item).m-core { --c: #60a5fa; }
.l-mini-item:hover { border-color: color-mix(in srgb, var(--c) 45%, #222); transform: translateY(-3px); }
.l-mini-item .m-ico { margin-bottom: 6px; animation: l-breathe 3.2s ease-in-out infinite; }
.l-mini-item:nth-child(2) .m-ico { animation-delay: -0.8s; }
.l-mini-item:nth-child(3) .m-ico { animation-delay: -1.6s; }
.l-mini-item:nth-child(4) .m-ico { animation-delay: -2.4s; }
@keyframes l-breathe { 0%, 100% { box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--k) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.07); } 50% { box-shadow: 0 8px 30px -4px color-mix(in srgb, var(--k) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.07); } }
.l-mini-item:hover .m-ico { transform: rotate(-8deg) scale(1.08); }
.l-mini-item b { font-family: var(--display); font-size: 16px; }
.l-mini-item p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14.5px; }

@media (max-width: 1150px) {
    .dc-app { grid-template-columns: 64px 1fr; }
    .dc-app .dc-side { display: none; }
}
@media (max-width: 1000px) {
    /* The hero stacks too (a later rule above set two columns for all widths). */
    .l-hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .l-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .l-row:nth-child(even) .l-row-text { order: 0; }
    .l-rows { gap: 80px; }
    .l-mini { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

}
@media (max-width: 700px) {
    .dc-app { grid-template-columns: minmax(0, 1fr); height: 460px; }
    .dc-app .dc-rail { display: none; }
    .dc-msg { gap: 12px; padding: 3px 12px; }
    .dc-msg.cont { padding-left: 64px; }
    .l-ocr, .l-mon { grid-template-columns: minmax(0, 1fr); }
    .l-mini { grid-template-columns: minmax(0, 1fr); }

}

/* long chats never push the header/input out */
.dc-main .dc-msgs, .dc-panel .dc-msgs { min-height: 0; }
.dc-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; padding: 0 3px; user-select: none; }

/* ══ Fixed heights: animations never move the page ═══════════════════ */
.dc-panel { height: 460px; min-height: 0; }
.l-mon .dc-panel { height: auto; }
.l-ocr { height: 380px; }
.l-ocr-img, .l-ocr-out { min-height: 0; overflow: hidden; }

/* ══ Discord buttons, modals, ephemeral replies ══════════════════════ */
.dc-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dc-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #fff; background: #4e5058; transition: filter 0.15s, transform 0.1s, opacity 0.2s; user-select: none; }
.dc-btn .emo { font-size: 15px; }
.dc-btn.blurple { background: #5865f2; }
.dc-btn.green { background: #248046; }
.dc-btn.red { background: #da373c; }
.dc-btn.pressed { filter: brightness(0.82); transform: translateY(1px); }
.dc-btn.disabled { opacity: 0.5; }

.scene { position: relative; }
.scene-layer { position: absolute; inset: 48px 0 0; pointer-events: none; }
.dc-modal-wrap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0); transition: background 0.25s; padding: 14px; }
.dc-modal-wrap.show { background: rgba(0, 0, 0, 0.62); }
.dc-modal { width: 100%; max-width: 420px; background: #313338; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); transform: scale(0.9); opacity: 0; transition: transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.2s; }
.dc-modal-wrap.show .dc-modal { transform: none; opacity: 1; }
.dc-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px; }
.dc-modal-head b { color: #f2f3f5; font-size: 18px; }
.dc-modal-head span { color: #b5bac1; }
.dc-modal-body { padding: 8px 16px 16px; display: grid; gap: 14px; }
.dc-modal-body label { display: grid; gap: 8px; }
.dc-modal-body label > span { color: #b5bac1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.dc-modal-body label em { color: #f23f43; font-style: normal; margin-left: 4px; }
.dc-textarea { min-height: 40px; background: #1e1f22; border-radius: 3px; padding: 9px 10px; color: #dbdee1; font-size: 14.5px; line-height: 1.4; }
.dc-textarea:empty::after { content: "|"; color: #949ba4; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.dc-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 14px 16px; background: #2b2d31; }
.dc-modal-foot .cancel { color: #fff; font-size: 14px; }

.dc-eph { background: rgba(88, 101, 242, 0.07); }
.dc-eph-note { display: block; margin-top: 4px; color: #949ba4; font-size: 12px; }
.dc-eph-note u { color: #00a8fc; text-decoration: none; }

/* the mouse */
.scene-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 22px; opacity: 0; pointer-events: none; transform: translate(60%, 80%); transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.3s; }
.scene-cursor.on { opacity: 1; }
.scene-cursor i { position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 95%, 52% 89%, 37% 55%, 66% 55%); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); transition: transform 0.12s; transform-origin: 0 0; }
.scene-cursor.down i { transform: scale(0.82); }

/* the DM that pops up at the end of the application scene */
.scene-dm { position: absolute; right: 14px; bottom: 14px; width: min(320px, calc(100% - 28px)); background: #111214; border: 1px solid #2b2d31; border-radius: 10px; padding: 12px 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(14px); transition: opacity 0.3s, transform 0.3s; }
.scene-dm.show { opacity: 1; transform: none; }
.scene-dm .dm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.scene-dm .dm-head img { width: 22px; height: 22px; border-radius: 50%; }
.scene-dm .dm-head b { color: #f2f3f5; font-size: 14px; }
.scene-dm .dm-head span { color: #949ba4; font-size: 12px; margin-left: auto; }
.scene-dm p { margin: 0; font-size: 14px; color: #dbdee1; }
.scene-dm p.q { margin-top: 4px; border-left: 4px solid #4e5058; padding-left: 10px; }

@media (max-width: 700px) {
    .dc-panel, .scene { height: 500px; }
    .l-ocr { height: auto; }
    .l-ocr-img { height: 330px; }
    .l-ocr-out { height: 250px; }
}

/* ══ Levels / giveaway / welcome ═════════════════════════════════════ */
.dc-card { display: block; margin-top: 6px; width: min(100%, 440px); border-radius: 8px; }
.dc-cmd { color: #c9cdfb; background: rgba(88, 101, 242, 0.3); border-radius: 3px; padding: 0 3px; font-weight: 500; }
.dc-ts { background: #3f4147; border-radius: 3px; padding: 0 3px; }
.dc-body { position: relative; }
.xp-pop { position: absolute; right: 0; top: 0; color: #a78bfa; font-weight: 800; font-size: 13px; animation: xp-up 1.4s ease-out forwards; pointer-events: none; }
@keyframes xp-up { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
.confetti { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; animation: confetti-fall 2s cubic-bezier(0.25, 0.6, 0.4, 1) forwards; }
@keyframes confetti-fall { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), 420px) rotate(var(--rot)); opacity: 0; } }

/* ══ Mini web panel ══════════════════════════════════════════════════ */
.pm { position: relative; height: 460px; display: grid; grid-template-columns: 190px 1fr; background: #0a0a0a; border: 1px solid #1f1f1f; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.pm-side { border-right: 1px solid #1f1f1f; padding: 14px 10px; display: grid; gap: 2px; align-content: start; }
.pm-brand { display: flex; align-items: center; gap: 8px; padding: 2px 6px 12px; }
.pm-brand > i { width: 26px; height: 26px; }
.pm-brand b { font-family: var(--display); font-size: 12px; }
.pm-nav { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pm-nav i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; opacity: 0.7; }
.pm-nav.active { background: #1c1c1c; color: #fff; }
.pm-main { position: relative; padding: 0 18px 18px; display: grid; gap: 12px; align-content: start; overflow: hidden; }
.pm-top { height: 44px; display: flex; align-items: center; border-bottom: 1px solid #1f1f1f; margin: 0 -18px; padding: 0 18px; font-size: 12.5px; }
.pm-top span { color: var(--muted); margin-right: 4px; }
.pm-h1 { font-family: var(--display); font-weight: 800; font-size: 22px; margin-top: 4px; }
.pm-card { border: 1px solid #1f1f1f; border-radius: 14px; background: #0d0d0d; padding: 14px; display: grid; gap: 10px; }
.pm-card > b { font-size: 13px; }
.pm-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pm-toggle { display: flex; align-items: center; justify-content: space-between; border: 1px solid #1f1f1f; border-radius: 10px; padding: 9px 10px; font-size: 12.5px; font-weight: 600; transition: border-color 0.2s; }
.pm-toggle.changed { border-color: rgba(245, 158, 11, 0.55); }
.pm-toggle i { position: relative; width: 34px; height: 20px; border-radius: 99px; background: #2a2a2a; transition: background 0.2s; flex: none; }
.pm-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #737373; transition: transform 0.2s, background 0.2s; }
.pm-toggle i.on { background: #fff; }
.pm-toggle i.on::after { transform: translateX(14px); background: #000; }
.pm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-fields small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.pm-input { border: 1px solid #2a2a2a; border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-weight: 700; }
.pm-save { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 90px); display: flex; align-items: center; gap: 8px; background: #141414; border: 1px solid #2a2a2a; border-radius: 999px; padding: 6px 6px 6px 16px; font-size: 12px; font-weight: 700; white-space: nowrap; transition: transform 0.35s cubic-bezier(0.2, 1.2, 0.4, 1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
.pm-save.show { transform: translate(-50%, 0); }
.pm-save > span:first-child { color: var(--muted); margin-right: 4px; }
.pm-btn { border: 1px solid #2f2f2f; border-radius: 999px; padding: 6px 12px; }
.pm-btn.white { background: #fff; color: #000; border-color: #fff; }
.pm-toast { position: absolute; right: 16px; top: 56px; background: #fff; color: #000; font-weight: 800; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s, transform 0.25s; }
.pm-toast.show { opacity: 1; transform: none; }
.pm .scene-cursor { z-index: 6; }

/* ══ Calculator ══════════════════════════════════════════════════════ */
.calc { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 24px; padding: 24px; background: radial-gradient(500px 260px at 100% 50%, rgba(139, 92, 246, 0.09), transparent 70%), linear-gradient(180deg, #0e0e0e, #080808); }
.calc-title { display: block; font-family: var(--display); font-size: 17px; margin-bottom: 16px; }
.calc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
/* A module row: icon, name, price, checkbox; picked rows take the module colour. */
.calc-item { --c: #a78bfa; display: flex; align-items: center; gap: 11px; border: 1px solid #202020; border-radius: 14px; background: rgba(255, 255, 255, 0.02); padding: 9px 12px 9px 9px; text-align: left; color: var(--text); transition: border-color 0.2s, background 0.2s; }
.calc-item:hover { border-color: #353535; background: rgba(255, 255, 255, 0.035); }
.calc-item .box { width: 20px; height: 20px; border-radius: 7px; border: 1.5px solid #3a3a3a; display: grid; place-items: center; flex: none; transition: background 0.15s, border-color 0.15s; }
.calc-item .box svg.i { width: 13px; height: 13px; color: #0a0a0a; stroke-width: 3; opacity: 0; transform: scale(0.5); transition: opacity 0.15s, transform 0.2s; }
.calc-item.on { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 9%, #0b0b0b); }
.calc-item.on .box { background: var(--c); border-color: var(--c); }
.calc-item.on .box svg.i { opacity: 1; transform: none; }
.calc-item .t { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; }
.calc-item em { font-style: normal; color: var(--muted); font-weight: 700; font-size: 13px; white-space: nowrap; }
.calc-item.on em { color: var(--text); }
.calc-right { border-left: 1px solid var(--line); padding-left: 26px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.calc-right small { color: var(--faint); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.calc-total { font-family: var(--display); font-weight: 800; font-size: 46px; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-per { color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.calc-verdict { min-height: 44px; color: var(--muted); font-weight: 600; line-height: 1.5; }
.calc-verdict .good { color: #86efac; display: flex; gap: 8px; align-items: flex-start; }
.calc-verdict .good svg.i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.calc-right .btn { align-self: flex-start; margin-top: 6px; }

/* ══ Servers with us ═════════════════════════════════════════════════ */
.l-showcase { padding: 34px 0 0; display: grid; gap: 16px; }
.l-showcase > p { margin: 0; text-align: center; color: var(--faint); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.sc-track-wrap { overflow: hidden; padding: 14px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sc-track { display: flex; align-items: center; gap: 14px; width: max-content; animation: marquee 60s linear infinite; }
.sc-track-wrap:hover .sc-track, .sc-track:hover { animation-play-state: paused; }
.sc-item { --sc-edge: rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; height: 76px; box-sizing: border-box; padding: 0 24px 0 14px; border-radius: 16px; border: 1px solid var(--sc-edge); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), #0b0b0c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: transform 0.3s ease, border-color 0.3s, opacity 0.3s; }
.sc-item img, .sc-ph { width: 46px; height: 46px; border-radius: 13px; flex: none; border: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; object-fit: cover; }
.sc-ph { display: grid; place-items: center; background: #161618; font-weight: 600; color: #cfcfd4; }
.sc-txt { display: grid; gap: 4px; justify-items: start; }
.sc-item b { display: block; font-size: 14.5px; font-weight: 500; color: #fff; white-space: nowrap; letter-spacing: 0.005em; }
.sc-free { opacity: 0.75; }
.sc-item:hover { transform: translateY(-2px); opacity: 1; --sc-edge: rgba(255, 255, 255, 0.16); }
.sc-chip { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.2; }
.sc-chip svg.i { width: 12px; height: 12px; flex: none; stroke-width: 1.4; }
.sc-chip span { background: var(--sc-txt); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.sc-chip svg.i { color: var(--sc-ico); }
.sc-sponsor, .sc-premium { border-color: transparent; background: radial-gradient(120% 140% at 0% 0%, var(--sc-tint), transparent 60%) padding-box, linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)) padding-box, linear-gradient(#0b0b0c, #0b0b0c) padding-box, var(--sc-ring) border-box; background-clip: padding-box, padding-box, padding-box, border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 22px var(--sc-glow); }
.sc-sponsor { --sc-ring: linear-gradient(135deg, rgba(217, 184, 108, 0.75), rgba(217, 184, 108, 0.4) 40%, rgba(138, 109, 47, 0.08)); --sc-txt: linear-gradient(90deg, #f3dca2, #d1aa5c); --sc-ico: #e8cf94; --sc-sheen: rgba(240, 212, 150, 0.2); --sc-tint: rgba(217, 184, 108, 0.12); --sc-glow: rgba(217, 184, 108, 0.16); }
.sc-premium { --sc-ring: linear-gradient(135deg, rgba(185, 168, 255, 0.65), rgba(185, 168, 255, 0.3) 40%, rgba(185, 168, 255, 0.06)); --sc-txt: linear-gradient(90deg, #e0d8ff, #a898ea); --sc-ico: #c4b6ff; --sc-sheen: rgba(200, 188, 255, 0.14); --sc-tint: rgba(185, 168, 255, 0.07); --sc-glow: rgba(185, 168, 255, 0.07); }
.sc-sponsor:hover { --sc-ring: linear-gradient(135deg, rgba(217, 184, 108, 0.95), rgba(217, 184, 108, 0.5) 40%, rgba(138, 109, 47, 0.12)); --sc-glow: rgba(217, 184, 108, 0.26); }
.sc-premium:hover { --sc-ring: linear-gradient(135deg, rgba(185, 168, 255, 0.9), rgba(185, 168, 255, 0.4) 40%, rgba(185, 168, 255, 0.1)); --sc-glow: rgba(185, 168, 255, 0.14); }
.sc-sponsor::after, .sc-premium::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, var(--sc-sheen) 50%, transparent 65%); transform: translateX(-120%); animation: sc-sheen 6s ease-in-out infinite; }
@keyframes sc-sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (max-width: 640px) { .sc-item { height: 66px; padding: 0 18px 0 12px; gap: 12px; } .sc-item img, .sc-ph { width: 40px; height: 40px; border-radius: 11px; } .sc-track { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .sc-sponsor::after, .sc-premium::after { animation: none; display: none; } .sc-item { transition: none; } .sc-item:hover { transform: none; } }

@media (max-width: 900px) {
    .calc { grid-template-columns: minmax(0, 1fr); }
    .calc-right { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
}
@media (max-width: 700px) {
    .pm { grid-template-columns: minmax(0, 1fr); height: 500px; }
    .pm-side { display: none; }
}

/* ══ Fixes: hero chat never grows, mini panel fits its box ════════════ */
/* The grid row would size to the messages and push the input out. */
.dc-app { grid-template-rows: minmax(0, 1fr); }
.dc-app > * { min-height: 0; overflow: hidden; }

.pm-brand span { width: 26px; height: 26px; flex: none; color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 9px; }
.pm-nav svg.i { width: 14px; height: 14px; flex: none; }
.pm-main { padding-bottom: 70px; }
.pm-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pm-toggle { padding: 7px 9px; min-width: 0; }
.pm-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-card { padding: 12px; gap: 8px; }
.pm-h1 { font-size: 20px; }
/* save bar: stays inside the panel's main column */
.pm-save { left: 14px; right: 14px; bottom: 12px; transform: translateY(80px); justify-content: flex-end; padding: 6px 6px 6px 14px; }
.pm-save.show { transform: none; }
.pm-save > span:first-child { margin-right: auto; overflow: hidden; text-overflow: ellipsis; }

/* ══ Scenes with a channel list ══════════════════════════════════════ */
.side-scene { display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.side-scene > * { min-height: 0; overflow: hidden; }
.side-scene .dc-main { display: flex; flex-direction: column; }
.side-scene .scene-layer { inset: 48px 0 0 190px; }
.side-list { display: flex; flex-direction: column; gap: 1px; }
.dc-ch { transition: opacity 0.4s, transform 0.4s, max-height 0.4s, background 0.2s; max-height: 40px; }
.dc-ch.voice .spk { font-size: 13px; margin-right: 8px; filter: grayscale(1) brightness(1.6); }
.dc-ch .vname { overflow: hidden; text-overflow: ellipsis; }
.dc-ch.dying { background: rgba(218, 55, 60, 0.18); color: #fca5a5; opacity: 0; transform: translateX(-14px); max-height: 0; padding-block: 0; }
.dc-ch.new { animation: ch-in 0.4s ease-out; }
@keyframes ch-in { from { opacity: 0; transform: translateX(-10px); background: rgba(35, 165, 90, 0.25); } }
.dc-ch.tick .vname { animation: tick 0.6s ease-out; }
@keyframes tick { 0% { color: #23a55a; } 100% { color: inherit; } }
.dc-vc-user { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 32px; color: var(--dc-muted); font-size: 13.5px; animation: ch-in 0.35s ease-out; }
.dc-vc-user img { width: 22px; height: 22px; border-radius: 50%; }
.dc-sys .arrow.red { color: #f23f43; }
.dc-sys .arrow.pink { color: #f47fff; }
.dc-sys.audit { color: #fca5a5; }
.dc-sys.boost { background: rgba(244, 127, 255, 0.06); }

/* voice call view */
.vc-call { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 16px; background: #000; }
.vc-empty { color: var(--dc-muted); font-size: 14px; text-align: center; max-width: 260px; }
.vc-tile { position: relative; width: 150px; height: 100px; border-radius: 8px; background: #2b2d31; display: grid; place-items: center; animation: ch-in 0.35s ease-out; border: 2px solid transparent; transition: border-color 0.15s; }
.vc-tile img { width: 52px; height: 52px; border-radius: 50%; }
.vc-tile span { position: absolute; left: 8px; bottom: 6px; background: rgba(0, 0, 0, 0.6); border-radius: 4px; padding: 1px 6px; font-size: 12px; color: #fff; }
.vc-tile.talk { border-color: #23a55a; }

/* ══ Community tabs ══════════════════════════════════════════════════ */
.cm { display: grid; gap: 10px; }
.cm-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-tab { position: relative; overflow: hidden; border: 1px solid #262626; background: #0a0a0a; color: var(--muted); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 13px; transition: color 0.2s, border-color 0.2s; }
.cm-tab:hover { color: #fff; }
.cm-tab.on { color: #fff; border-color: #fff; }
.cm-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #fff; }
.cm-tab.run .cm-bar { animation: cm-progress 13s linear forwards; }
@keyframes cm-progress { to { width: 100%; } }
.cm-pane { display: none; }
.cm-pane.on { display: block; animation: fade-down 0.35s ease-out; }

.sg-bar { letter-spacing: -2px; font-size: 12px; margin: 2px 0; }
.dc-reacts { display: flex; gap: 4px; margin-top: 6px; }
.dc-react { display: inline-flex; align-items: center; gap: 4px; background: rgba(88, 101, 242, 0.15); border: 1px solid #5865f2; border-radius: 8px; padding: 2px 8px; font-size: 13.5px; color: #dee0fc; }
.dc-react.pop { animation: pop 0.3s ease-out; }
@keyframes pop { 50% { transform: scale(1.25); } }

.roles-card { top: 14px; bottom: auto; }
.rc-label { display: block; color: #b5bac1; font-size: 11px; font-weight: 700; margin: 8px 0 6px; }
.rc-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.rc-role { display: inline-flex; align-items: center; gap: 5px; background: #2b2d31; border-radius: 4px; padding: 2px 7px; font-size: 12.5px; color: #dbdee1; }
.rc-role i { width: 10px; height: 10px; border-radius: 50%; background: #949ba4; }
.rc-role.new { animation: ch-in 0.35s ease-out; }

@media (max-width: 700px) {
    .side-scene { grid-template-columns: 150px minmax(0, 1fr); }
    .side-scene .scene-layer { inset: 48px 0 0 150px; }
    .vc-tile { width: 110px; height: 80px; }
}
/* tabs never wrap (wrapping changed the height and moved the page) */
.cm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cm-tabs::-webkit-scrollbar { display: none; }
.cm-tab { flex: none; white-space: nowrap; }

/* ══ Music (coming soon) ═════════════════════════════════════════════ */
.l-soon { font-style: normal; margin-left: 10px; background: #fff; color: #000; border-radius: 999px; padding: 2px 9px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px; }
.dc-vc-user.talking img { box-shadow: 0 0 0 2px #23a55a; }
.mu-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 4px; }
.mu-eq i { width: 3px; background: #23a55a; border-radius: 1px; animation: eq 0.9s ease-in-out infinite; }
.mu-eq i:nth-child(2) { animation-delay: -0.3s; } .mu-eq i:nth-child(3) { animation-delay: -0.6s; } .mu-eq i:nth-child(4) { animation-delay: -0.15s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.mu-bar { position: relative; height: 4px; border-radius: 4px; background: #4e5058; margin: 8px 0 4px; }
.mu-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #fff; transition: width 0.5s linear; }
.mu-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); transition: left 0.5s linear; }
.mu-time { display: flex; justify-content: space-between; font-size: 12px; color: var(--dc-muted); }
.mu-menu { position: absolute; right: 16px; bottom: 60px; width: 220px; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 8px; padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; }
.mu-menu.show { opacity: 1; transform: none; }
.mu-opt { padding: 8px 10px; border-radius: 4px; color: #dbdee1; font-size: 14px; }
.mu-opt.on, .mu-opt:hover { background: #404249; }

/* giveaway card: server icon on the right, organizer's banner below */
.dc-embed { position: relative; }
.dc-embed:has(.dc-e-thumb) { padding-right: 84px; }
.dc-e-thumb { position: absolute; top: 10px; right: 12px; width: 60px; height: 60px; border-radius: 8px; }
.gw-banner { margin-right: -72px; height: 96px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(120deg, #5865f2, #eb459e 60%, #fbbf24); color: #fff; }
.gw-banner b { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: 0.04em; }
.gw-banner span { font-weight: 700; opacity: 0.9; }

/* ══ Who it's for ════════════════════════════════════════════════════ */
.l-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: end; margin-bottom: 44px; }
.l-intro h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.l-intro-text p { margin: 0 0 12px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.l-intro-text p:last-child { margin-bottom: 0; }
.l-for { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.l-for-card { --accent: #fff; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; padding: 22px; background: #0a0a0a; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.3s, transform 0.3s; }
/* The game colour as a soft glow in the corner instead of a thin stripe. */
.l-for-card::before { content: ""; position: absolute; top: -90px; left: -60px; width: 260px; height: 220px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.l-for-card > * { position: relative; }
.l-for-card:hover { border-color: #333; transform: translateY(-3px); }
.l-for-card { --glow: color-mix(in srgb, var(--accent) 16%, transparent); }
.l-for-head { display: flex; align-items: center; gap: 12px; }
.l-for-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--accent) 14%, #111); border: 1px solid color-mix(in srgb, var(--accent) 35%, #222); color: var(--accent); flex: none; overflow: hidden; }
.l-for-ico svg.i { width: 20px; height: 20px; }
/* Real game icons fill the tile. */
.l-for-ico.img { background: #111; padding: 0; }
.l-for-ico.img img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
.l-for-head > div { display: grid; gap: 2px; min-width: 0; }
.l-for-head b { font-family: var(--display); font-size: 18px; }
.l-for-head small { color: color-mix(in srgb, var(--accent) 70%, #a3a3a3); font-size: 12.5px; font-weight: 700; }
.l-for-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14.5px; }
.l-for-list { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid #1c1c1c; display: grid; gap: 9px; }
.l-for-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 600; color: #e5e5e5; line-height: 1.4; }
.l-for-list li svg.i { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent); }
@media (max-width: 1000px) {
    .l-intro { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .l-for { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 700px) { .l-for { grid-template-columns: minmax(0, 1fr); } }

/* Phones: a long system line in a scene wraps instead of pushing the time out of view. */
@media (max-width: 700px) {
    .dc-sys { flex-wrap: wrap; row-gap: 2px; }
    .l-pill { max-width: 100%; }
}

/* Music scene: the card the bot draws, in miniature */
.mu-card { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; margin: 2px 0 8px; background: radial-gradient(120% 140% at 0% 50%, rgba(139, 92, 246, 0.35), rgba(20, 16, 34, 0.9) 60%); border: 1px solid rgba(139, 92, 246, 0.35); max-width: 380px; }
.mu-card.live { background: radial-gradient(120% 140% at 0% 50%, rgba(249, 115, 22, 0.35), rgba(30, 16, 12, 0.9) 60%); border-color: rgba(249, 115, 22, 0.35); }
.mu-cover { width: 52px; height: 52px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 24px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.mu-card.live .mu-cover { background: linear-gradient(135deg, #f97316, #ef4444); }
.mu-card-t { display: grid; min-width: 0; }
.mu-card-t small { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #f0abfc; }
.mu-card.live .mu-card-t small { color: #fca5a5; }
.mu-card-t b { font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-card-t span { font-size: 12px; color: #b5bac1; }
.mu-live { font-size: 13px; font-weight: 700; color: #f2f3f5; }
.dc-slash { font-size: 12.5px; color: #949ba4; margin-bottom: 2px; }
.dc-slash b { color: #c9cdfb; font-weight: 600; }
[data-scene="music"] .dc-btns { flex-wrap: nowrap; gap: 5px; margin-top: 6px; }
[data-scene="music"] .dc-btn { height: 28px; padding: 0 9px; }
.mu-meta { margin-top: 8px; font-size: 12.5px; color: #b5bac1; }

/* Live week numbers */
.l-week { max-width: var(--l-max); margin: 0 auto; padding: 0 16px 30px; }
.l-week-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px 28px; background: radial-gradient(90% 160% at 0% 0%, rgba(34, 197, 94, 0.08), transparent 60%), linear-gradient(180deg, #0f0f0f, #080808); }
/* The dot hangs to the left so the title itself sits exactly in the centre. */
.l-week-head { position: relative; display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 600; }
.l-week-head .dot { position: absolute; left: -20px; top: 50%; margin-top: -4px; }
.l-week-head b { color: var(--text); font-family: var(--display); font-weight: 800; font-size: 15px; }
.l-week-head .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); animation: l-pulse 1.8s ease-in-out infinite; }
@keyframes l-pulse { 50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.04); } }
.l-week-main { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 6vw, 80px); }
.l-week-main > div { display: grid; gap: 4px; }
.l-week-main b { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5vw, 56px); line-height: 1; letter-spacing: -0.02em; }
.l-week-main .red b { color: #f87171; }
.l-week-main span { color: var(--muted); font-weight: 600; }
.l-week-sep { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, #2a2a2a, transparent); }

/* Panel scene (a copy of the real web panel) */
.pv { position: relative; height: 470px; display: grid; grid-template-columns: 178px 1fr; background: #0a0a0a; border: 1px solid #1f1f1f; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); font-size: 12px; }
.pv-side { border-right: 1px solid #1f1f1f; padding: 14px 10px; display: grid; gap: 2px; align-content: start; }
.pv-nav { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: #a3a3a3; font-weight: 600; }
.pv-nav svg.i { width: 14px; height: 14px; }
.pv-nav em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 800; color: #6b6b6b; border: 1px solid #2a2a2a; border-radius: 999px; padding: 0 6px; }
.pv-nav.active { background: #1a1a1a; color: #fff; }
.pv-label { margin: 10px 8px 4px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; color: #6b6b6b; }
.pv-main { position: relative; padding: 12px 16px; display: grid; align-content: start; gap: 10px; min-width: 0; }
.pv-top { color: #6b6b6b; font-size: 11px; }
.pv-top b { color: #fff; }
.pv-h1 { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 20px; }
.pv-h1 svg.i { width: 18px; height: 18px; }
.pv-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid #1f1f1f; border-radius: 12px; background: #0f0f0f; overflow: hidden; }
.pv-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; color: #a3a3a3; font-weight: 700; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.pv-tab .dot { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; }
.pv-tab.on { background: #fff; color: #000; }
.pv-view { display: grid; gap: 10px; animation: pv-in 0.35s ease-out; }
.pv-view.hidden { display: none; }
@keyframes pv-in { from { opacity: 0; transform: translateY(6px); } }
.pv-hero { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #1f1f1f; border-radius: 14px; background: radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, 0.16), transparent 55%), #0f0f0f; }
.pv-hero b { display: block; font-family: var(--display); font-size: 13px; }
.pv-hero p { margin: 2px 0 0; color: #a3a3a3; font-size: 11px; }
.pv-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: #1a1a1a; border: 1px solid #2a2a2a; color: #c4b5fd; }
.pv-ico svg.i { width: 14px; height: 14px; }
.pv-ico.big { width: 34px; height: 34px; border-radius: 10px; background: rgba(139, 92, 246, 0.16); border-color: rgba(139, 92, 246, 0.35); }
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pv-rule { border: 1px solid #1f1f1f; border-radius: 14px; background: #0f0f0f; padding: 10px; display: grid; gap: 8px; transition: opacity 0.25s; }
.pv-rule.off { opacity: 0.55; }
.pv-rule.off .pv-rule-bottom { visibility: hidden; }
.pv-rule-top { display: flex; align-items: flex-start; gap: 8px; }
.pv-rule-top > div { flex: 1; min-width: 0; }
.pv-rule-top b { display: block; font-size: 12px; }
.pv-rule-top p { margin: 1px 0 0; color: #a3a3a3; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-sw { width: 30px; height: 17px; border-radius: 999px; background: #2a2a2a; position: relative; flex: none; transition: background 0.2s; margin-top: 2px; }
.pv-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #8a8a8a; transition: transform 0.2s, background 0.2s; }
.pv-sw.on { background: #fff; }
.pv-sw.on::after { transform: translateX(13px); background: #000; }
.pv-extra { padding: 6px 8px; border-radius: 9px; background: #1a1a1a; color: #a3a3a3; font-size: 11px; font-weight: 600; }
.pv-num { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 6px; border: 1px solid #333; background: #000; color: #fff; font-weight: 800; text-align: center; transition: border-color 0.2s; }
.pv-num.editing { border-color: #fff; }
.pv-seg { display: inline-flex; padding: 2px; border-radius: 999px; border: 1px solid #2a2a2a; background: #1a1a1a; }
.pv-seg span { padding: 3px 8px; border-radius: 999px; color: #a3a3a3; font-weight: 700; font-size: 10.5px; transition: background 0.2s, color 0.2s; }
.pv-seg span.on { background: #fff; color: #000; }
.pv-ladder { display: flex; align-items: stretch; gap: 6px; padding: 12px; border: 1px solid #1f1f1f; border-radius: 14px; background: #0f0f0f; }
.pv-step { flex: 1; display: grid; justify-items: center; gap: 5px; padding: 10px 4px; border-radius: 12px; background: #1a1a1a; border: 1px solid #2a2a2a; color: #a3a3a3; font-size: 11px; text-align: center; }
.pv-step b { color: #fff; font-family: var(--display); font-size: 13px; }
.pv-step-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.pv-step-ico svg.i { width: 14px; height: 14px; }
.pv-step.warn .pv-step-ico { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.pv-step.mute .pv-step-ico { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.pv-step.kick .pv-step-ico { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.pv-step.ban .pv-step-ico { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.pv-arrow { align-self: center; color: #6b6b6b; font-weight: 800; }
.pv-save { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 14px; border-radius: 999px; background: #111; border: 1px solid #2a2a2a; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); transform: translateY(160%); transition: transform 0.25s, background 0.25s, border-color 0.25s; }
.pv-save.show { transform: none; }
.pv-save-t { flex: 1; font-weight: 700; }
.pv-save.done { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.5); }
.pv-save.done .pv-save-t { color: #86efac; }
.pv-save.done .pv-save-btn { background: #22c55e; color: #000; min-width: 34px; text-align: center; }
/* The panel scene adapts to its own width (the column it sits in), not the screen. */
.l-row-demo { container: demo / inline-size; }
.pv-main { overflow: hidden; }
.pv-rule, .pv-grid > * { min-width: 0; }
.pv-step > div { white-space: nowrap; }
@container demo (max-width: 760px) {
    /* Menu becomes a rail of icons. */
    .pv { grid-template-columns: 52px 1fr; }
    .pv-side { padding: 14px 6px; }
    .pv-side .pm-brand b, .pv-nav span, .pv-nav em, .pv-label { display: none; }
    .pv-nav { justify-content: center; padding: 9px 0; }
    .pv-tab:nth-child(3) { display: none; }
}
@container demo (max-width: 640px) {
    .pv { height: 540px; }
    .pv-grid { grid-template-columns: 1fr; }
    .pv-rule[data-r="scam"] { display: none; }
    .pv-ladder { gap: 4px; padding: 8px; }
    .pv-step { padding: 8px 2px; font-size: 10.5px; }
    .pv-step b { font-size: 12px; }
    .pv-arrow { font-size: 10px; }
    .pv-hero p { display: none; }
    .pv-hero b { font-size: 12px; }
}
@container demo (max-width: 470px) {
    .pv { grid-template-columns: 1fr; }
    .pv-side { display: none; }
    .pv-tab:nth-child(2) { display: none; }
    .pv-arrow { display: none; }
}

/* ── New scenes: streams, events, invites, game servers ── */
.dc-h2 { font-size: 17px; font-weight: 700; color: #f2f3f5; margin: 2px 0 4px; line-height: 1.3; }
.dc-link { color: #00a8fc; }
.dc-role { color: #f0b232; background: rgba(240, 178, 50, 0.12); border-radius: 3px; padding: 0 3px; font-weight: 500; }
.st-author { display: inline-flex; align-items: center; gap: 8px; }
.st-author img { width: 22px; height: 22px; border-radius: 50%; }
.st-foot { display: inline-flex; align-items: center; gap: 6px; }
.st-ico { display: inline-block; width: 16px; height: 12px; border-radius: 3px; background: #ff0033; position: relative; }
.st-ico.yt::after { content: ""; position: absolute; left: 6px; top: 3px; border-left: 5px solid #fff; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.st-ico.tw { background: #9146ff; }
.st-ico.tw::after { content: ""; position: absolute; left: 5px; top: 3px; width: 2px; height: 5px; background: #fff; box-shadow: 4px 0 0 #fff; }
.st-thumb { position: relative; margin-top: 10px; max-width: 250px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; display: grid; place-items: center; }
.st-thumb.yt { background: radial-gradient(circle at 25% 30%, rgba(252, 165, 165, 0.45), transparent 45%), linear-gradient(135deg, #7f1d1d, #1c1917 70%); }
.st-thumb.tw { background: radial-gradient(circle at 70% 35%, rgba(196, 181, 253, 0.4), transparent 45%), linear-gradient(135deg, #4c1d95, #0f172a 75%); }
.st-art { position: absolute; left: 14px; bottom: 10px; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.st-play { width: 54px; height: 38px; border-radius: 11px; background: #ff0033; position: relative; box-shadow: 0 6px 20px rgba(255, 0, 51, 0.45); animation: stPlay 2.4s ease-in-out infinite; }
.st-play::after { content: ""; position: absolute; left: 22px; top: 11px; border-left: 14px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.st-len { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 4px; }
.st-live { position: absolute; left: 10px; top: 10px; background: #e11d48; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; animation: stLive 1.3s ease-in-out infinite; }
.st-count { display: inline-block; font-weight: 700; }
.st-count.bump { animation: stBump 0.45s ease-out; }
.st-reward { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: rgba(240, 178, 50, 0.1); border: 1px solid rgba(240, 178, 50, 0.35); animation: stGlow 1.6s ease-in-out 2; }
.inv-row { opacity: 0; transform: translateX(-8px); animation: invIn 0.4s ease-out forwards; margin: 2px 0; }
.scene-toast { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 12px); background: #111214; border: 1px solid #2b2d31; color: #dbdee1; font-size: 13.5px; padding: 9px 14px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s, transform 0.3s; white-space: nowrap; }
.scene-toast.show { opacity: 1; transform: translate(-50%, 0); }
[data-scene="events"] .dc-e-fields, [data-scene="gameops"] .dc-e-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-scene="gameops"] .dc-e-field { font-size: 13px; }
[data-scene="gameops"] .dc-code { font-size: 11px; }
[data-scene="events"] .dc-e-field { font-size: 13px; }
[data-scene="events"] .dc-e-field b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-scene="events"] .ev-names { display: flex; flex-wrap: wrap; gap: 2px 4px; }
[data-scene="streams"] .dc-msg, [data-scene="events"] .dc-msg { margin-top: 8px; }
@keyframes stPlay { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes stLive { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes stBump { 0% { transform: scale(1); color: #fff; } 40% { transform: scale(1.3); color: #a78bfa; } 100% { transform: scale(1); } }
@keyframes stGlow { 0%, 100% { box-shadow: 0 0 0 rgba(240, 178, 50, 0); } 50% { box-shadow: 0 0 22px rgba(240, 178, 50, 0.35); } }
@keyframes invIn { to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .st-art { font-size: 16px; } .scene-toast { white-space: normal; width: calc(100% - 28px); } }

/* Mini cards: the new things get a small "новое" tag */
.l-mini-item .l-new { position: absolute; top: 14px; right: 14px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; background: #fff; color: #000; border-radius: 999px; padding: 2px 8px; font-weight: 700; }
.l-mini-item { position: relative; }

/* Mini cards: the line icon moves too, each card a little later */
:is(.l-mini-item).m-protection { --c: #f87171; }
.l-mini-item .m-ico svg.i { animation: l-mini-icon 3.6s ease-in-out infinite; }
.l-mini-item:nth-child(4) .m-ico, .l-mini-item:nth-child(4) .m-ico svg.i { animation-delay: -2.4s; }
.l-mini-item:nth-child(5) .m-ico, .l-mini-item:nth-child(5) .m-ico svg.i { animation-delay: -0.4s; }
.l-mini-item:nth-child(6) .m-ico, .l-mini-item:nth-child(6) .m-ico svg.i { animation-delay: -1.2s; }
.l-mini-item:nth-child(7) .m-ico, .l-mini-item:nth-child(7) .m-ico svg.i { animation-delay: -2s; }
.l-mini-item:nth-child(8) .m-ico, .l-mini-item:nth-child(8) .m-ico svg.i { animation-delay: -2.8s; }
.l-mini-item:nth-child(2) .m-ico svg.i { animation-delay: -0.8s; }
.l-mini-item:nth-child(3) .m-ico svg.i { animation-delay: -1.6s; }
.l-mini-item .l-new { background: linear-gradient(90deg, #fff 0%, #fff 40%, #c4b5fd 50%, #fff 60%, #fff 100%); background-size: 250% 100%; animation: shine 3s linear infinite; }
@keyframes l-mini-icon { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-2px) rotate(-6deg); } 60% { transform: translateY(1px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .l-mini-item .m-ico svg.i, .l-mini-item .l-new { animation: none; } }
@media (max-width: 640px) {
    [data-scene="events"] .dc-e-fields, [data-scene="gameops"] .dc-e-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Batch 2 scenes: tournament, steam, team report, pictures */
[data-scene="tourney"] .dc-e-fields, [data-scene="steam"] .dc-e-fields, [data-scene="staffrep"] .dc-e-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-scene="tourney"] .dc-e-field.full, [data-scene="tourney"] .dc-e-field:not(.inline), [data-scene="staffrep"] .dc-e-field:not(.inline) { grid-column: 1 / -1; }
[data-scene="steam"] .dc-e-field, [data-scene="tourney"] .dc-e-field, [data-scene="staffrep"] .dc-e-field { font-size: 13px; }
.tn-names { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.tn-img { max-width: 100%; }
.tn-img.flash { animation: tnFlash 0.6s ease-out; }
@keyframes tnFlash { 0% { filter: brightness(1.6) saturate(1.3); } 100% { filter: none; } }
.pic-news { max-height: 330px; object-fit: cover; object-position: top; }
.rep-idle { margin-top: 8px; color: #b5bac1; }
.scene-dm.wide { width: min(360px, calc(100% - 28px)); }
.scene-dm .dm-sm { font-size: 13px; color: #b5bac1; margin: 2px 0 8px; }
.scene-dm .sub { color: #949ba4; font-size: 12px; }
.scene-dm .dc-btn { height: 28px; padding: 0 10px; }
.dm-thanks { margin: 6px 0 0; color: #fcd34d; font-weight: 600; animation: invIn 0.4s ease-out forwards; }
@media (max-width: 640px) {
    [data-scene="tourney"] .dc-e-fields, [data-scene="steam"] .dc-e-fields, [data-scene="staffrep"] .dc-e-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Official Discord server link: icon in the menu, text link in the footer. */
.l-dc { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #a3a3a3; transition: color .15s, background .15s; flex: none; }
.l-dc:hover { color: #fff; background: #5865f2; }
.l-dc svg { width: 19px; height: 19px; fill: currentColor; }

/* Ticket card with the author's avatar, "-#" lines, select menus, threads */
.dc-embed { position: relative; }
.dc-embed.has-thumb { padding-right: 84px; }
.dc-e-thumb { position: absolute; top: 10px; right: 12px; width: 60px; height: 60px; border-radius: 8px; object-fit: cover; }
.dc-sub { font-size: 12px; color: var(--dc-muted); margin: 1px 0 2px; }
.dc-h2 { font-size: 18px; font-weight: 800; color: #f2f3f5; margin: 2px 0 2px; }
.dc-select { margin-top: 8px; max-width: 400px; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 8px; background: #1e1f22; border: 1px solid #111214; color: #949ba4; font-size: 14px; }
.dc-select i { font-style: normal; font-size: 16px; color: #b5bac1; }
.scene.in-thread .dc-top .hash { color: #949ba4; }
.scene.in-thread .dc-top { background: linear-gradient(90deg, rgba(88, 101, 242, .12), transparent 60%); }
/* Private room: seats badge and "the door is locked" */
.vc-limit { margin-left: auto; font-size: 11px; font-weight: 700; color: #b5bac1; background: #1e1f22; border-radius: 6px; padding: 1px 6px; }
.vc-denied { flex-basis: 100%; text-align: center; color: #f87171; font-size: 13px; font-weight: 600; animation: vcShake .45s ease-in-out; }
@keyframes vcShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.vc-call[hidden], .side-scene .dc-msgs[hidden] { display: none; }
.vc-toast { position: absolute; left: 8px; right: 8px; bottom: 8px; background: #2b2d31; border: 1px solid #3f4147; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); transform: translateY(12px); opacity: 0; transition: transform .25s, opacity .25s; }
.vc-toast.show { transform: none; opacity: 1; }
.vc-toast .dc-msg { margin: 0; padding: 8px 10px; }
.dc-btn.icon { padding: 0; width: 52px; justify-content: center; }
.dc-btn.icon .emo { font-size: 17px; }
.dc-btn.icon { width: 44px; }
.side-scene .dc-btns { gap: 6px; }
.vp-legend { font-size: 12.5px; line-height: 1.6; color: #dbdee1; }
@media (max-width: 560px) { .side-scene .scene-layer { inset: 48px 0 0 0; } }


/* ── Phones: safe areas, a nav that fits 320 px, a smaller promo card ───────── */
@media (max-width: 900px) {
    .l-nav-in { padding: calc(10px + var(--safe-t, 0px)) max(16px, var(--safe-r, 0px)) 10px max(16px, var(--safe-l, 0px)); }
    body:has(.l-nav) { padding-bottom: var(--safe-b, 0px); }
}
@media (max-width: 700px) { .l-hero { padding-top: calc(96px + var(--safe-t, 0px)); } }
@media (max-width: 420px) {
    .l-nav .l-dc { display: none; }
    .l-nav .btn { padding-left: 14px; padding-right: 14px; }
    .l-nav-in { gap: 8px; }
}