:root {
  color-scheme: dark;
  --bg: #0b0807;
  --bg-2: #0c0e10;
  --panel: rgba(231, 236, 246, .035);
  --panel-solid: #0f1013;
  --panel-hi: rgba(231, 236, 246, .07);
  --line: rgba(255, 255, 255, .09);
  --line-hi: rgba(255, 255, 255, .35);
  --ink: #eceef3;
  --muted: #9497a0;
  --dim: #5b5f66;
  --ember: #dfeaf5;
  --flame: #f0f3fa;
  --amber: #ffffff;
  --blood: #c7dae4;
  --ok: #4be08a;
  --on-fire: #070d13;
  --fire: linear-gradient(100deg, var(--blood) 0%, var(--ember) 35%, var(--flame) 70%, var(--amber) 100%);

  --f-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-blood: 'Rubik Wet Paint', 'Geist', system-ui, sans-serif;
  --f-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(16px, 4vw, 56px);
  --r: 22px;
  --r-sm: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
@media (pointer: coarse) { input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea, select { font-size: max(16px, 1em) !important; } }
body.is-loading { overflow: hidden; height: 100vh; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--ember); color: var(--on-fire); }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.inline-ic { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; color: var(--flame); }
@media (hover: hover) and (pointer: fine) { body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } body.has-cursor input, body.has-cursor textarea { cursor: text; } }

.grain { position: fixed; inset: -50%; z-index: 95; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-5%,4%)} 50%{transform:translate(4%,-6%)} 75%{transform:translate(-6%,-2%)} 100%{transform:translate(0,0)} }
.aura { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.aura i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(60px); opacity: .5; will-change: transform; }
.aura i:nth-child(1) { left: -20vmax; top: 10%; background: radial-gradient(closest-side, rgba(199, 218, 228, .55), transparent); animation: auraA 26s ease-in-out infinite alternate; }
.aura i:nth-child(2) { right: -25vmax; top: -15%; background: radial-gradient(closest-side, rgba(218, 229, 244, .38), transparent); animation: auraB 34s ease-in-out infinite alternate; }
.aura i:nth-child(3) { left: 30%; bottom: -35vmax; background: radial-gradient(closest-side, rgba(220, 232, 243, .42), transparent); animation: auraC 22s ease-in-out infinite alternate; }
.aura b { position: absolute; inset: auto 0 0; height: 45vh; background: radial-gradient(120% 100% at 50% 100%, rgba(220, 233, 242, .16), transparent 70%); animation: auraHeat 5s ease-in-out infinite alternate; }
@keyframes auraA { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(35vw, 20vh) scale(1.2); } 100% { transform: translate(10vw, 55vh) scale(.9); } }
@keyframes auraB { 0% { transform: translate(0, 0) scale(1.1); } 50% { transform: translate(-30vw, 30vh) scale(.85); } 100% { transform: translate(-10vw, 60vh) scale(1.15); } }
@keyframes auraC { 0% { transform: translate(0, 0) scale(.9); } 100% { transform: translate(-35vw, -25vh) scale(1.25); } }
@keyframes auraHeat { 0% { opacity: .55; } 40% { opacity: .9; } 55% { opacity: .7; } 100% { opacity: 1; } }
.embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

.cursor { position: fixed; inset: 0; z-index: 400; pointer-events: none; display: none; }
body.has-cursor .cursor { display: block; }
.cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--flame); box-shadow: 0 0 12px 2px var(--ember); }
.cursor__ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid rgba(240, 243, 250, .5); display: grid; place-items: center; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .4s, border-color .4s; }
.cursor__label { font: 700 10px/1 var(--f-display); letter-spacing: .08em; color: var(--on-fire); opacity: 0; transition: opacity .3s; text-transform: uppercase; }
.cursor.is-hover .cursor__ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(223, 234, 245, .12); border-color: var(--ember); }
.cursor.is-label .cursor__ring { width: 80px; height: 80px; margin: -40px 0 0 -40px; background: var(--fire); border-color: transparent; }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-label .cursor__dot { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  body.has-cursor:has(dialog:modal) .cursor { display: none; }
  body.has-cursor dialog:modal, body.has-cursor dialog:modal * { cursor: auto; }
  body.has-cursor dialog:modal :is(a, button, label, summary, select, [role="button"], [data-cursor]) { cursor: pointer; }
  body.has-cursor dialog:modal :is(input, textarea) { cursor: text; }
}

.loader { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; }
.loader__ring { position: absolute; width: min(56vmin, 360px); transform: rotate(-90deg); }
.loader__track { fill: none; stroke: var(--line); stroke-width: 1; }
.loader__progress { fill: none; stroke: var(--ember); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px var(--ember)); }
.loader__word { display: flex; overflow: hidden; font: 900 clamp(30px, 7vmin, 56px)/1 var(--f-display); letter-spacing: -.02em; padding: .1em 0; }
.loader__word span { display: inline-block; }
.loader__count { position: absolute; margin-top: 120px; font: 500 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .2em; }

.glass { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.label, .eyebrow { font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--flame); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--fire); transform: rotate(45deg); }
.title { margin: 0 0 18px; font: 900 clamp(36px, 6.6vw, 96px)/.95 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.title .word { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em 0 .1em; margin: -.04em 0 -.1em; }
.title .char { display: inline-block; will-change: transform; }
.lead { max-width: 58ch; margin: 0 0 clamp(28px, 4vw, 48px); color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); }
.section { position: relative; z-index: 5; padding: clamp(80px, 11vw, 150px) var(--pad); }

.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border-radius: 99px; font: 700 13px/1 var(--f-body); letter-spacing: .01em; border: 1px solid transparent; transition: border-color .3s, color .3s, opacity .3s; white-space: nowrap; }
.btn__icon { width: 16px; height: 16px; flex: none; }
.btn--fire { background: var(--fire); background-size: 180% 100%; color: var(--on-fire); box-shadow: 0 10px 34px -12px rgba(223, 234, 245, .8); animation: fireShift 4s ease-in-out infinite alternate; }
@keyframes fireShift { to { background-position: 100% 0; } }
.btn__fill { position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); border-radius: 50% 50% 0 0 / 30% 30% 0 0; transition: transform .55s var(--ease), border-radius .55s var(--ease); }
.btn:hover .btn__fill { transform: none; border-radius: 0; }
.btn--glass { background: rgba(231, 236, 246, .06); border-color: var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--glass:hover { border-color: var(--line-hi); background: rgba(231, 236, 246, .1); }
.btn--sm { padding: 11px 16px; font-size: 12px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; animation: none; }
.icon-btn { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(231, 236, 246, .06); border: 1px solid var(--line); transition: background .3s, border-color .3s, transform .3s var(--ease); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--line-hi); }
.icon-btn:active { transform: scale(.94); }
.icon-btn--fire { background: var(--fire); color: var(--on-fire); border-color: transparent; }
.link-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--f-body); color: var(--amber); padding: 6px 0; }
.link-btn svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.link-btn:hover svg { transform: translate(3px, -3px); }
.link-btn--dim { color: var(--dim); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 99px; background: rgba(11, 8, 7, .55); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.chip__sep { width: 1px; height: 10px; background: var(--line-hi); }
body.is-live .chip__dot, .live-dot { background: #ff2d2d; animation: livePulse 1.6s infinite; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 45, 45, .7); } 70% { box-shadow: 0 0 0 9px rgba(255, 45, 45, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 45, 45, 0); } }
.tag { font: 700 10px/1 var(--f-mono); padding: 5px 8px; border-radius: 6px; background: var(--fire); color: var(--on-fire); letter-spacing: .08em; }
.seg { padding: 9px 14px; border-radius: 99px; font: 600 12px/1 var(--f-body); color: var(--muted); border: 1px solid var(--line); transition: background .3s, color .3s, border-color .3s; }
.seg:hover { color: var(--ink); }
.seg.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.segs { display: flex; gap: 6px; flex-wrap: wrap; }

.av { --a: #dfeaf5; --b: #ffffff; position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 30%; background: linear-gradient(135deg, var(--a), var(--b)); color: rgba(5, 9, 15, .85); flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.av svg { width: 58%; height: 58%; }
.av--img { background: #000; overflow: hidden; }
.av--img img { width: 100%; height: 100%; object-fit: cover; }
.av--sm { width: 28px; height: 28px; }
.av--lg { width: 64px; height: 64px; }
.av--xl { width: 96px; height: 96px; }
.av--ghost { background: var(--panel-hi); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line); }
.av-stack { display: flex; }
.av-stack .av { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg); }
.av-stack .av:first-child { margin-left: 0; }
.av-stack .more { margin-left: 6px; align-self: center; font: 600 12px/1 var(--f-mono); color: var(--muted); }

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--pad) 14px; transition: transform .6s var(--ease), background .4s; }
.nav.is-scrolled { background: rgba(11, 8, 7, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-hidden:focus-within { transform: none; }
.nav__brand { display: flex; align-items: center; gap: 10px; font: 900 16px/1 var(--f-display); letter-spacing: -.02em; }
.nav__brand img { width: 36px; height: 36px; border-radius: 11px; object-fit: cover; box-shadow: 0 0 18px rgba(223, 234, 245, .4); }
.nav__links { display: flex; gap: 4px; padding: 5px; border-radius: 99px; background: rgba(231, 236, 246, .04); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav__links a { font: 600 13px/1 var(--f-body); color: var(--muted); padding: 10px 14px; border-radius: 99px; transition: color .3s, background .3s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); background: rgba(231, 236, 246, .08); }
.nav__right { display: flex; align-items: center; gap: 10px; }
.online-pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-mono); color: var(--muted); padding: 10px 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(11, 8, 7, .5); }
.online-pill b { color: var(--ink); }
.online-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.ember-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 9px; border-radius: 99px; background: rgba(223, 234, 245, .12); border: 1px solid rgba(223, 234, 245, .35); font: 700 13px/1 var(--f-mono); color: var(--amber); }
.ember-chip svg { width: 15px; height: 15px; color: var(--flame); }
.nav__me { position: relative; display: flex; }
.nav__me .av { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-hi); }
.nav__acc { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(231, 236, 246, .06); border: 1px solid var(--line-hi); transition: background .3s, border-color .3s, transform .3s var(--ease); }
.nav__acc svg { width: 19px; height: 19px; }
.nav__acc:hover { background: rgba(223, 234, 245, .16); border-color: var(--ember); }
.nav__acc:active { transform: scale(.94); }
.nav__lvl { position: absolute; right: -6px; bottom: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 700 10px/1 var(--f-mono); }
.lang { display: flex; border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.lang__btn { font: 600 10px/1 var(--f-mono); padding: 7px 9px; border-radius: 99px; color: var(--muted); }
.lang__btn.is-active { background: var(--ink); color: var(--bg); }

.hero { position: relative; height: 100vh; height: 100svh; min-height: 680px; overflow: hidden; z-index: 3; }
.hero__fire { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__stage { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.emblem { position: relative; width: min(68vmin, 640px); aspect-ratio: 1; margin-top: -6vh; pointer-events: auto; will-change: transform; }
.emblem__glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(218, 229, 244, .45), rgba(214, 228, 240, 0) 70%); filter: blur(30px); animation: glow 3.2s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: scale(1.06); } }
.emblem__text { position: absolute; inset: -9%; width: 118%; height: 118%; max-width: none; overflow: visible; }
.emblem__text text { font: 700 10.5px/1 var(--f-display); letter-spacing: 4px; fill: rgba(226, 228, 244, .85); paint-order: stroke; stroke: rgba(11, 20, 29, .55); stroke-width: 2px; }
.emblem__tilt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.emblem__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; -webkit-mask-image: radial-gradient(circle closest-side, #000 89%, rgba(0, 0, 0, .55) 94%, transparent 99%); mask-image: radial-gradient(circle closest-side, #000 89%, rgba(0, 0, 0, .55) 94%, transparent 99%); user-select: none; -webkit-user-drag: none; }
.emblem__shine { position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at var(--sx, 30%) var(--sy, 25%), rgba(255, 255, 255, .25), transparent 40%); }
.hero__bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 90px var(--pad) clamp(22px, 4vh, 40px); background: linear-gradient(0deg, rgba(11, 8, 7, .9), rgba(11, 8, 7, .45) 60%, transparent); }
.hero__copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.hero__claim { margin: 0; font: 900 clamp(28px, 3.6vw, 56px)/.98 var(--f-display); letter-spacing: -.035em; }
.hero__claim em { font-style: normal; background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.next-card { width: min(340px, 100%); padding: 18px; display: flex; flex-direction: column; gap: 4px; flex: none; }
.next-card__top { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.next-card__day { font: 800 22px/1.15 var(--f-display); letter-spacing: -.02em; margin-top: 6px; }
.next-card__game { color: var(--muted); font-size: 14px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.countdown div { text-align: center; padding: 10px 2px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.countdown b { display: block; font: 700 22px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.countdown small { display: block; margin-top: 5px; font: 500 9px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

.ticker { position: relative; z-index: 5; overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-2); }
.ticker__row { display: flex; white-space: nowrap; padding: 18px 0; }
.ticker__track { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex: none; will-change: transform; }
.ticker__track span { font: 900 clamp(24px, 3.4vw, 46px)/1 var(--f-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .35); }
.ticker__track span:nth-of-type(odd) { color: var(--ink); -webkit-text-stroke: 0; }
.ticker__track svg { width: clamp(20px, 2.4vw, 32px); height: clamp(20px, 2.4vw, 32px); color: var(--ember); flex: none; }

.hub__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.hub__head .lead { margin-bottom: clamp(24px, 3vw, 40px); }
.hub__online { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(24px, 3vw, 40px); color: var(--muted); }
.mode-tag { font: 600 10px/1 var(--f-mono); padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line-hi); color: var(--amber); letter-spacing: .08em; }
.earn { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
.earn__item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); min-width: 110px; }
.earn__item b { font: 700 16px/1 var(--f-mono); color: var(--amber); }
.earn__item span { font-size: 12px; color: var(--muted); }

.bento { display: grid; gap: 14px; grid-template-columns: 1fr 1.6fr; grid-template-areas: "profile chat" "board chat"; }
.bento--arena { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "matches matches matches" "wheel quiz predict" "wheel games predict" "shop shop bot"; }
.tile { position: relative; min-width: 0; border-radius: var(--r); padding: clamp(18px, 1.8vw, 24px); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; overflow: hidden; isolation: isolate; }
.tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(234, 240, 248, .09), transparent 60%); opacity: 0; transition: opacity .4s; }
.tile:hover::before { opacity: 1; }
.tile__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tile__title { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 15px/1.2 var(--f-display); letter-spacing: -.01em; }
.tile--profile { grid-area: profile; }
.tile--chat { grid-area: chat; height: 640px; }
.tile--hype { grid-area: hype; }
.tile--board { grid-area: board; }
.tile--wheel { grid-area: wheel; }
.tile--quiz { grid-area: quiz; }
.tile--predict { grid-area: predict; }
.tile--games { grid-area: games; }
.tile--bot { grid-area: bot; }
.tile--shop { grid-area: shop; }
.tile--matches { grid-area: matches; }
.nick--ice { background: linear-gradient(100deg, #bfefff, #5fc8ff 55%, #e9fbff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nick--toxic { background: linear-gradient(100deg, #b6ff3b, #39ff6a 50%, #d7ff7a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nick--gold { background: linear-gradient(100deg, #8a5a12, #ffd36a 40%, #fff1b8 55%, #d49a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pod__nick.is-fire, .board__nick.is-fire, .item__demo.is-fire { background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nbadge { display: inline-block; width: 13px; height: 13px; margin: 0 4px 0 4px; vertical-align: -1px; fill: var(--flame); color: var(--flame); }
.av.av--fire { box-shadow: 0 0 0 2px #dfeaf5, 0 0 12px 2px rgba(223, 234, 245, .65); }
.av.av--gold { box-shadow: 0 0 0 2px #ffd36a, 0 0 14px 3px rgba(255, 200, 80, .6); }
.item__demo { display: block; margin: 2px 0 6px; font-weight: 700; font-size: 15px; }
.item.is-active { border-color: var(--line-hi); }
.lvl-ring[data-open-join] { cursor: pointer; }
.lvl-ring[data-open-join]:hover .av { filter: brightness(1.15); }
.msg__mod { display: inline-block; margin: 0 6px 0 2px; padding: 1px 6px; border-radius: 6px; font: 700 10px/1.5 var(--f-mono); letter-spacing: .06em; color: var(--on-fire); background: var(--ember); vertical-align: 1px; }
.sec-bg { position: absolute; top: 0; right: 0; width: min(78%, 1200px); height: min(82vh, 760px); z-index: -1; pointer-events: none; overflow: hidden; opacity: .55;
  -webkit-mask: linear-gradient(90deg, transparent, #000 38%), linear-gradient(180deg, #000 45%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 38%) intersect, linear-gradient(180deg, #000 45%, transparent); }
.sec-bg--logo { opacity: .34; }
.sec-bg--logo video { object-position: 70% 50%; }
.sec-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; animation: secZoom 24s ease-in-out infinite alternate; }
@keyframes secZoom { from { transform: scale(1.02); } to { transform: scale(1.14) translateX(-2%); } }
@media (max-width: 760px) { .sec-bg { width: 100%; height: 62vh; opacity: .42; -webkit-mask: linear-gradient(180deg, #000 30%, transparent); mask: linear-gradient(180deg, #000 30%, transparent); } }
.matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.match { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.match.is-past { opacity: .72; }
.match__av { position: relative; display: flex; }
.match__av img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ember); }
.match__av i { position: absolute; left: 28px; bottom: -2px; font: 800 9px/1 var(--f-mono); font-style: normal; padding: 3px 4px; border-radius: 4px; background: var(--fire); color: #fff; }
.match.is-next { border-color: rgba(223, 234, 245, .5); background: linear-gradient(90deg, rgba(199, 218, 228, .18), rgba(255,255,255,.02) 60%); animation: nextGlow 2.4s ease-in-out infinite; }
.match.is-next .match__av img { animation: livePulse 1.8s infinite; }
@keyframes nextGlow { 50% { box-shadow: 0 0 28px -8px rgba(220, 232, 243, .7); } }
.match__date { display: grid; text-align: center; font-size: 12px; min-width: 52px; }
.match__date b { font-size: 18px; color: var(--ember); }
.match__body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.match__title { font-weight: 600; overflow-wrap: anywhere; }
.match__side { display: flex; align-items: center; gap: 12px; justify-self: end; }
.match__res { font-family: var(--f-mono); }
.match__sep { padding: 6px 2px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 560px) { .match { grid-template-columns: auto 1fr; } .match__date { grid-column: 1; grid-row: 1; } .match__av { grid-column: 2; grid-row: 1; justify-self: end; } .match__body { grid-column: 1 / -1; } .match__side { grid-column: 1 / -1; justify-self: start; } }

.profile-out { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.profile-out__art { width: 100%; display: grid; place-items: center; padding: 18px 0 4px; }
.profile-out p { margin: 0; }
.profile-in { display: flex; flex-direction: column; gap: 16px; }
.profile-in__head { display: flex; align-items: center; gap: 14px; }
.lvl-ring { position: relative; width: 84px; height: 84px; display: grid; place-items: center; flex: none; }
.lvl-ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lvl-ring__track { fill: none; stroke: var(--line); stroke-width: 5; }
.lvl-ring__bar { fill: none; stroke: var(--flame); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); filter: drop-shadow(0 0 4px var(--ember)); }
.profile-in__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.profile-in__nick { font: 800 20px/1.1 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.profile-in__nick.is-fire { background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rank { align-self: flex-start; font: 600 11px/1 var(--f-mono); padding: 5px 8px; border-radius: 6px; background: rgba(223, 234, 245, .14); color: var(--amber); letter-spacing: .06em; }
.xp__row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.xp__bar, .heat__bar, .goal__bar { position: relative; height: 8px; border-radius: 99px; background: rgba(231, 236, 246, .07); overflow: hidden; }
.xp__bar span, .heat__bar span, .goal__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: var(--fire); transition: width 1s var(--ease); }
.profile-in__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profile-in__stats div { padding: 12px 10px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .25); border: 1px solid var(--line); min-width: 0; }
.profile-in__stats b { display: block; font: 700 20px/1 var(--f-mono); }
.profile-in__stats small { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; font: 600 11px/1 var(--f-body); background: rgba(231, 236, 246, .05); border: 1px solid var(--line); color: var(--muted); }
.badge svg { width: 13px; height: 13px; color: var(--flame); }
.badge.is-locked { opacity: .35; }
.profile-in__actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; }
.profile-in__actions .link-btn { white-space: nowrap; }

.chat__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; margin-right: -6px; scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; overscroll-behavior: contain; }
.msg { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 7px 8px; border-radius: 12px; transition: background .2s; }
.msg:hover { background: rgba(231, 236, 246, .04); }
.msg__body { min-width: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.msg__nick { font-weight: 700; margin-right: 6px; }
.msg__nick.is-fire { background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; }
.msg__lvl { font: 600 10px/1 var(--f-mono); padding: 2px 5px; border-radius: 5px; background: rgba(231, 236, 246, .07); color: var(--muted); margin-right: 6px; vertical-align: 1px; }
.msg__time { font: 500 10px/1 var(--f-mono); color: var(--dim); margin-left: 6px; }
.msg__del { margin-left: 6px; font: 600 10px/1 var(--f-mono); color: var(--dim); }
.msg__del:hover { color: var(--ember); }
.msg.is-new { animation: msgIn .5s var(--ease); }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }
.emote { display: inline-block; width: 22px; height: 22px; vertical-align: -6px; margin: 0 1px; }
.emote--flame { color: var(--flame); }
.emote--skull, .emote--crown { color: var(--amber); }
.emote--img { border-radius: 6px; object-fit: cover; }
.emote--txt { width: auto; height: auto; vertical-align: 0; padding: 1px 6px; border-radius: 5px; background: var(--fire); color: var(--on-fire); font: 800 11px/1.5 var(--f-display); }
.chat__emotes { display: flex; gap: 6px; flex-wrap: wrap; }
.chat__emotes button { height: 32px; min-width: 32px; padding: 0 8px; border-radius: 9px; display: grid; place-items: center; background: rgba(231, 236, 246, .05); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s; }
.chat__emotes button:hover { transform: translateY(-2px); border-color: var(--line-hi); }
.chat__emotes .emote { margin: 0; }
.chat__emotes button.is-locked { opacity: .3; }
.chat__form { display: flex; gap: 8px; }
.chat__form input, .games__form input, .field input, .field__extra { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); outline: none; transition: border-color .3s; }
.chat__form input:focus, .games__form input:focus, .field input:focus, .field__extra:focus { border-color: var(--flame); }
.chat__form button { width: 44px; height: 44px; }
.chat__lock { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; display: flex; justify-content: center; align-items: center; background: linear-gradient(0deg, var(--panel-solid) 55%, transparent); }
.chat__empty { margin: auto; text-align: center; color: var(--muted); font-size: 14px; max-width: 26ch; }

.reactor { position: relative; flex: 1; min-height: 260px; display: grid; place-items: center; }
.reactor__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.reactor__core { position: relative; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #ffffff, var(--ember) 55%, var(--blood)); color: var(--on-fire); box-shadow: 0 0 60px rgba(223, 234, 245, .55), inset 0 -10px 30px rgba(105, 167, 199, .5); transition: transform .15s; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.reactor__core svg { width: 44%; height: 44%; position: relative; z-index: 1; }
.reactor__core:active { transform: scale(.93); }
.reactor__ring { position: absolute; inset: -16px; border-radius: 50%; border: 1px solid rgba(240, 243, 250, .45); animation: ring 2.4s var(--ease) infinite; }
.reactor__ring--2 { animation-delay: 1.2s; }
@keyframes ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.hype__total { display: flex; flex-direction: column; gap: 4px; }
.hype__total b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.hype__total span { font-size: 13px; color: var(--muted); }
.heat { display: flex; align-items: center; gap: 10px; }
.heat__bar { flex: 1; }
.heat__bar span { transition: width .3s; }

.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.board li { display: grid; grid-template-columns: 22px 28px 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.board li.is-me { background: rgba(223, 234, 245, .1); box-shadow: inset 0 0 0 1px rgba(223, 234, 245, .3); }
.board__pos { font: 700 12px/1 var(--f-mono); color: var(--dim); text-align: center; }
.podium[hidden] + .board li:nth-child(1) .board__pos { color: var(--amber); }
.podium[hidden] + .board li:nth-child(2) .board__pos { color: #cdd1dc; }
.podium[hidden] + .board li:nth-child(3) .board__pos { color: #e8ecf3; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; padding-top: 26px; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.pod .pod__av { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-hi); }
.pod--1 .pod__av { width: 62px; height: 62px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--amber), 0 0 38px -4px var(--ember); }
.pod.is-me .pod__av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ember); }
.pod__crown { position: absolute; top: -24px; left: 50%; width: 24px; height: 24px; margin-left: -12px; color: var(--amber); filter: drop-shadow(0 2px 10px rgba(240, 243, 250, .6)); animation: crown 2.6s var(--ease) infinite; }
@keyframes crown { 50% { transform: translateY(-4px) rotate(-6deg); } }
.pod__nick { font-weight: 600; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod__xp { font: 600 11px/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.pod__block { width: 100%; margin-top: 4px; border-radius: 14px 14px 6px 6px; display: grid; justify-items: center; padding-top: 10px; font: 900 22px/1 var(--f-display); color: rgba(231, 236, 246, .45); background: linear-gradient(180deg, rgba(231, 236, 246, .08), rgba(231, 236, 246, .015)); border: 1px solid var(--line); }
.pod--1 .pod__block { height: 104px; color: var(--on-fire); background: var(--fire); border: 0; box-shadow: 0 -12px 40px -14px var(--ember); }
.pod--2 .pod__block { height: 74px; }
.pod--3 .pod__block { height: 56px; }
.board__nick { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__xp { font: 600 12px/1 var(--f-mono); color: var(--muted); }

.wheel { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 6px auto 0; }
.wheel canvas { width: 100%; height: 100%; filter: drop-shadow(0 20px 40px rgba(223, 234, 245, .25)); }
.wheel__pin { position: absolute; top: -6px; left: 50%; width: 26px; height: 34px; transform: translateX(-50%); z-index: 2; background: var(--ink); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.wheel__btn { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bg); border: 2px solid var(--flame); font: 800 clamp(11px, 1.2vw, 14px)/1 var(--f-display); text-transform: uppercase; box-shadow: 0 0 30px rgba(223, 234, 245, .5); transition: transform .3s var(--ease), opacity .3s; }
.wheel__btn:hover { transform: translate(-50%, -50%) scale(1.06); }
.wheel__btn[disabled] { opacity: .55; pointer-events: none; }
.wheel__result { margin: 0; text-align: center; min-height: 1.5em; color: var(--amber); font-size: 14px; }

.quiz__q { margin: 0 0 4px; font: 700 17px/1.3 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.quiz__opts { display: flex; flex-direction: column; gap: 8px; }
.opt { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border-radius: 12px; text-align: left; background: rgba(231, 236, 246, .04); border: 1px solid var(--line); font-weight: 600; font-size: 14px; overflow: hidden; isolation: isolate; transition: border-color .3s, transform .3s var(--ease); }
.opt:hover:not([disabled]) { border-color: var(--line-hi); transform: translateX(3px); }
.opt[disabled] { cursor: default; }
.opt.is-right { border-color: var(--ok); background: rgba(75, 224, 138, .1); }
.opt.is-wrong { border-color: var(--blood); background: rgba(199, 218, 228, .12); }
.opt.is-pick { border-color: var(--flame); }
.opt__fill { position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; background: rgba(223, 234, 245, .16); transition: width .8s var(--ease); }
.opt__pct { font: 600 12px/1 var(--f-mono); color: var(--muted); }
.quiz__done { margin: 0; font-size: 14px; color: var(--muted); }

.status-pill { font: 600 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; background: rgba(75, 224, 138, .12); color: var(--ok); }
.status-pill:empty { display: none; }
.status-pill.is-locked { background: rgba(255, 255, 255, .12); color: var(--amber); }
.status-pill.is-resolved { background: rgba(231, 236, 246, .08); color: var(--muted); }
#predBody { display: flex; flex-direction: column; gap: 12px; }
.pred__q { margin: 0; font: 700 18px/1.25 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.pred__meta { display: flex; justify-content: space-between; color: var(--muted); }
.bet { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bet__amt { display: flex; gap: 4px; flex-wrap: wrap; }
.bet__amt button { padding: 8px 10px; border-radius: 9px; font: 600 12px/1 var(--f-mono); border: 1px solid var(--line); color: var(--muted); }
.bet__amt button.is-active { border-color: var(--flame); color: var(--amber); background: rgba(223, 234, 245, .12); }
.pred__mine { margin: 0; font-size: 13px; color: var(--amber); }
.admin-bar { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--line); margin-top: auto; }
.admin-bar .link-btn svg { width: 16px; height: 16px; }
.empty { margin: 0; color: var(--muted); font-size: 14px; }
.bo-empty { grid-column: 1 / -1; width: 100%; max-width: 620px; margin: 8px auto 0; padding: 28px 24px; text-align: center; border-radius: 18px; }
.bo-empty p { margin: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.ev-empty { padding: 14px 4px; }

.games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.game { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.game__bar { position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; background: linear-gradient(90deg, rgba(223, 234, 245, .2), rgba(223, 234, 245, .04)); transition: width .8s var(--ease); }
.game__name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game__vote { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); font: 700 12px/1 var(--f-mono); transition: border-color .3s, background .3s, color .3s; }
.game__vote svg { width: 14px; height: 14px; }
.game__vote.is-on { background: var(--fire); color: var(--on-fire); border-color: transparent; }
.games__form { display: flex; gap: 8px; }
.games__form input { height: 40px; }

.bot-face { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--fire); color: var(--on-fire); }
.bot-face svg { width: 16px; height: 16px; }
.bot__modes { display: flex; gap: 6px; flex-wrap: wrap; }
.bot__out { flex: 1; min-height: 120px; padding: 16px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.bot__out p { margin: 0; }
.bot__out .caret { display: inline-block; width: 8px; height: 1em; background: var(--flame); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, transform .4s var(--ease); min-width: 0; }
.item:hover { border-color: var(--line-hi); transform: translateY(-3px); }
.item__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(223, 234, 245, .14); color: var(--flame); }
.item__ic svg { width: 22px; height: 22px; }
.item__name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.item__kind { font: 500 11px/1.3 var(--f-mono); color: var(--dim); }
.item__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; gap: 8px; flex-wrap: wrap; }
.item__cost { display: inline-flex; align-items: center; gap: 5px; font: 700 14px/1 var(--f-mono); color: var(--amber); }
.item__cost svg { width: 14px; height: 14px; color: var(--flame); }
.item.is-owned { border-color: rgba(75, 224, 138, .4); }
.redeems { display: flex; flex-direction: column; gap: 6px; }
.redeems h4 { margin: 6px 0 4px; font: 600 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.redeem { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; }
.redeem__st { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--amber); }
.redeem__st.is-done { color: var(--ok); }
.redeem button { font: 600 11px/1 var(--f-mono); color: var(--ok); padding: 6px 8px; border: 1px solid rgba(75, 224, 138, .4); border-radius: 7px; }

.live__layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; }
.phone { position: relative; width: 100%; max-width: 340px; aspect-ratio: 9/18.5; padding: 10px; border-radius: 46px; background: linear-gradient(160deg, #1f2226, #090a0b 60%, #14171d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 120px -40px rgba(223, 234, 245, .6); }
.phone::before { content: ''; position: absolute; top: 18px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 99px; background: #000; z-index: 3; }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: #000; isolation: isolate; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.live__poster { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.live__poster img { width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(.5) saturate(1.4); transform: scale(1.3); }
.phone__top { position: absolute; left: 14px; right: 14px; top: 52px; display: flex; justify-content: space-between; align-items: center; gap: 8px; z-index: 2; }
.phone__viewers { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 99px; background: rgba(0, 0, 0, .45); }
.phone__viewers svg { width: 14px; height: 14px; }
.phone__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 0 16px 60px; }
.phone__ring { position: relative; width: 96px; height: 96px; border-radius: 50%; padding: 4px; background: conic-gradient(from 0deg, #ff2d6a, var(--ember), var(--amber), #25f4ee, #ff2d6a); animation: spin 6s linear infinite; }
.phone__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #000; animation: spin 6s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.phone__handle { font: 800 18px/1.1 var(--f-display); letter-spacing: -.01em; }
.phone__next { color: var(--muted); }
.phone__hearts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.phone__cta { position: absolute; left: 14px; right: 14px; bottom: 44px; z-index: 2; }
.phone__hint { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; color: var(--dim); font-size: 10px; z-index: 2; }
.live__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tt-frame { width: 100%; aspect-ratio: 9/16; min-height: 560px; border: 0; border-radius: var(--r); background: #000; }
.clip.clip--v { aspect-ratio: 9/16; min-height: 0; width: 100%; text-align: left; padding: 0; }
.clip--v .clip__title { font-size: clamp(15px, 1.4vw, 19px); }
.live__side { display: flex; flex-direction: column; gap: 14px; }
.socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.social { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: 14px; transition: border-color .3s, background .3s, translate .4s var(--ease); }
.social svg { width: 20px; height: 20px; color: var(--flame); }
.social:hover { border-color: var(--line-hi); background: var(--panel-hi); translate: 0 -2px; }
.live__rules { margin: 0; font-size: 13px; color: var(--muted); }
.live__rules b { color: var(--ink); }

.events__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.cal { padding: clamp(16px, 2vw, 24px); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__month { font: 800 18px/1 var(--f-display); text-transform: capitalize; letter-spacing: -.01em; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow span { text-align: center; font: 600 10px/1 var(--f-mono); color: var(--dim); text-transform: uppercase; padding: 6px 0; }
.day-cell { position: relative; aspect-ratio: 1; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 600 13px/1 var(--f-mono); color: var(--muted); border: 1px solid transparent; transition: background .3s, border-color .3s, transform .3s var(--ease); }
.day-cell.is-out { opacity: .25; }
.day-cell.is-reg { color: var(--ink); background: rgba(231, 236, 246, .04); }
.day-cell.is-today { border-color: var(--ink); }
.day-cell.is-ev { background: var(--fire); color: var(--on-fire); font-weight: 700; cursor: pointer; }
.day-cell.is-ev:hover { transform: scale(1.06); }
.day-cell.is-sel { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--flame); }
.day-cell i { width: 4px; height: 4px; border-radius: 50%; background: var(--flame); }
.day-cell.is-ev i { background: var(--on-fire); }
.cal__legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--muted); }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.lg--reg { background: rgba(231, 236, 246, .1); }
.lg--ev { background: var(--fire); }
.ev-list { display: flex; flex-direction: column; gap: 10px; }
.ev { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 16px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: border-color .3s, box-shadow .3s; }
.ev.is-sel { border-color: var(--flame); box-shadow: 0 20px 60px -30px rgba(223, 234, 245, .6); }
.ev.is-past { opacity: .5; }
.ev__date { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); padding: 10px 4px; text-align: center; }
.ev__date b { font: 800 26px/1 var(--f-display); }
.ev__date span { font: 600 10px/1.3 var(--f-mono); text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.ev__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ev__top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ev__type { font: 600 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 7px; border-radius: 6px; background: rgba(223, 234, 245, .14); color: var(--amber); }
.ev__when { color: var(--muted); }
.ev__name { margin: 0; font: 800 18px/1.2 var(--f-display); letter-spacing: -.015em; }
.ev__desc { margin: 0; color: var(--muted); font-size: 14px; }
.ev__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ev__count { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.rsvp { padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line-hi); font: 700 12px/1 var(--f-body); color: var(--amber); transition: background .3s, color .3s; }
.rsvp.is-on { background: var(--fire); color: var(--on-fire); border-color: transparent; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 14px; }
.wd { padding: 14px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wd.is-today { border-color: var(--flame); }
.wd.is-off { background: transparent; border-style: dashed; }
.wd__d { font: 600 11px/1 var(--f-mono); text-transform: uppercase; color: var(--muted); letter-spacing: .08em; }
.wd__t { font: 700 20px/1.1 var(--f-mono); }
.wd.is-off .wd__t { color: var(--dim); font-size: 14px; }
.wd__l { font: 500 10px/1.3 var(--f-mono); color: var(--dim); }
.wd__w { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 4px; }

.clips__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.clips__head .title { margin-bottom: 0; }
.bo-streams { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.vod { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: border-color .3s; min-width: 0; }
.vod:hover { border-color: var(--line-hi); }
.vod:first-child { grid-row: span 3; }
.vod__thumb { position: relative; aspect-ratio: 16/8; background: radial-gradient(120% 90% at 20% 110%, hsl(var(--h) 100% 45% / .95), transparent 60%), radial-gradient(70% 60% at 90% 0%, hsl(calc(var(--h) + 24) 90% 35% / .7), transparent 60%), #070809; overflow: hidden; }
.vod:first-child .vod__thumb { aspect-ratio: 16/9; }
.vod__thumb img { position: absolute; right: -4%; bottom: -30%; width: 46%; opacity: .55; mix-blend-mode: luminosity; transition: transform 1s var(--ease); border-radius: 50%; }
.vod:hover .vod__thumb img { transform: scale(1.08) rotate(-4deg); }
.vod__thumb::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
.vod__badges { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; z-index: 1; flex-wrap: wrap; }
.vod__badges span { font: 600 11px/1 var(--f-mono); padding: 6px 8px; border-radius: 7px; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vod__play { position: absolute; right: 14px; bottom: 14px; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--fire); color: var(--on-fire); transition: transform .4s var(--ease); }
.vod__play svg { width: 18px; height: 18px; margin-left: 3px; }
.vod:hover .vod__play { transform: scale(1.12); }
.vod__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.vod__title { margin: 0; font: 800 clamp(16px, 1.5vw, 22px)/1.2 var(--f-display); letter-spacing: -.02em; }
.vod:first-child .vod__title { font-size: clamp(20px, 2.2vw, 30px); }
.chapters { display: flex; flex-direction: column; gap: 4px; }
.chapter { display: flex; gap: 12px; align-items: baseline; font-size: 13px; color: var(--muted); }
.chapter b { font: 600 11px/1 var(--f-mono); color: var(--amber); min-width: 60px; }
.clips__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.clips__grid .clip { aspect-ratio: 9/16; min-height: 0; }
.clips__grid .clip__title { font-size: clamp(16px, 1.5vw, 20px); }
.clip { position: relative; display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); min-height: 220px; isolation: isolate; perspective: 1000px; }
.clip__inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.clip__thumb { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 30% 110%, hsl(var(--h) 100% 45% / .9), transparent 60%), #060809; }
.clip__thumb::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
.clip__body { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.clip__meta { display: flex; gap: 6px; }
.clip__meta span { font: 600 11px/1 var(--f-mono); padding: 6px 8px; border-radius: 7px; background: rgba(0, 0, 0, .55); }
.clip__title { margin: 0; font: 800 clamp(18px, 1.8vw, 24px)/1.1 var(--f-display); letter-spacing: -.02em; max-width: 16ch; }
.clip__play { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .3); transition: background .3s, transform .4s var(--ease); }
.clip__play svg { width: 16px; height: 16px; margin-left: 2px; }
.clip:hover .clip__play { background: var(--ember); border-color: transparent; color: var(--on-fire); transform: scale(1.12); }

.goal { padding: 20px; margin-bottom: 14px; }
.goal__top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.goal__label { font-weight: 700; }
.goal__bar { height: 12px; }
.donate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.donate__card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 200px; padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); overflow: hidden; isolation: isolate; transition: border-color .3s; }
.donate__card:hover { border-color: var(--line-hi); }
.donate__glow { position: absolute; width: 320px; height: 320px; left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(223, 234, 245, .3), transparent 65%); z-index: -1; opacity: 0; transition: opacity .4s; pointer-events: none; }
.donate__card:hover .donate__glow { opacity: 1; }
.donate__card h3 { margin: auto 0 0; font: 900 clamp(24px, 2.4vw, 34px)/1 var(--f-display); letter-spacing: -.03em; }
.donate__card p { margin: 0; color: var(--muted); }

.footer { position: relative; z-index: 5; padding: 40px var(--pad) calc(24px + env(safe-area-inset-bottom, 0px)); overflow: hidden; background: radial-gradient(90% 70% at 50% 100%, rgba(199, 218, 228, .3), transparent 70%), var(--bg); }
.footer__word { display: flex; justify-content: center; font: 900 clamp(56px, 16vw, 290px)/.85 var(--f-display); letter-spacing: -.05em; }
.footer__word span { display: inline-block; background: linear-gradient(0deg, var(--blood), var(--ember) 30%, var(--flame) 55%, var(--amber) 75%, var(--ink)); background-size: 100% 260%; background-position: 0 100%; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1s var(--ease); }
.footer__word:hover span { background-position: 0 0; }
.footer__bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font: 500 11px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--dim); }

.toasts { position: fixed; right: var(--pad); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 150; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(15, 16, 19, .94); border: 1px solid var(--line-hi); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); max-width: min(360px, calc(100vw - 32px)); }
.toast__ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--fire); color: var(--on-fire); flex: none; }
.toast__ic svg { width: 18px; height: 18px; }
.toast > div { min-width: 0; }
.toast b { display: block; font: 700 14px/1.2 var(--f-display); }
.toast > div > span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.float-pts { position: fixed; z-index: 140; pointer-events: none; font: 800 16px/1 var(--f-display); color: var(--amber); text-shadow: 0 0 12px var(--ember); }

.modal { padding: 0; border: 0; background: transparent; color: var(--ink); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: visible; }
.modal::backdrop { background: rgba(5, 3, 2, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal[open] .modal__box { animation: modalIn .5s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.modal__box { position: relative; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 28px; border-radius: 26px; background: var(--panel-solid); border: 1px solid var(--line-hi); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 40px 120px -30px rgba(223, 234, 245, .45); }
.modal__box--wide { width: min(720px, calc(100vw - 32px)); }
.modal__x { position: absolute; right: 16px; top: 16px; }
.modal__title { margin: -6px 0 0; font: 900 26px/1.05 var(--f-display); letter-spacing: -.03em; }
.modal__note { margin: 0; font-size: 12px; }
.field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; font-size: 13px; color: var(--muted); }
.field legend { padding: 0; margin-bottom: 8px; }
.field input { flex: none; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ember); flex: none; }
.check a, .auth__ok a { color: var(--amber); text-decoration: underline; }
.quick-play { position: fixed; z-index: 90; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border: 0; border-radius: 4px; background: var(--fire); color: #fff; font: 700 15px/1.1 var(--f-display, sans-serif); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(220, 233, 242, .8); animation: quickPulse 2.2s ease-in-out infinite; }
.quick-play svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
.quick-play span { display: grid; gap: 3px; text-align: left; }
.quick-play small { font: 500 11px/1.1 var(--f-mono, monospace); text-transform: none; letter-spacing: 0; opacity: .85; }
.quick-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes quickPulse { 0%, 100% { box-shadow: 0 10px 30px -10px rgba(220, 233, 242, .8); } 50% { box-shadow: 0 10px 44px -6px rgba(220, 233, 242, 1); } }
@media (prefers-reduced-motion: reduce) { .quick-play { animation: none; } }
@media (max-width: 1180px) { .quick-play { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }
.auth__test { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line-hi); border-radius: 12px; }
.auth__test .eyebrow { margin: 0; }
.auth__ok { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(75, 224, 138, .1); border: 1px solid rgba(75, 224, 138, .35); font-size: 13px; color: var(--ink); }
.chat__lock--verify { flex-direction: column; text-align: center; gap: 12px; padding-top: 60px; }
.chat__lock--verify p { margin: 0; font-size: 13px; color: var(--ink); max-width: 34ch; }
.chat__lock-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.footer__legal a { color: var(--muted); }
.footer__legal a:hover { color: var(--ink); }
.field__err { color: var(--ember); font-size: 12px; margin-top: -8px; }
.av-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.av-picker button { padding: 6px; border-radius: 16px; border: 1px solid var(--line); display: grid; place-items: center; transition: border-color .3s, transform .3s var(--ease); }
.av-picker button .av { width: 100%; height: auto; aspect-ratio: 1; }
.av-picker .av-up { grid-column: 1 / -1; display: flex; justify-content: flex-start; text-align: left; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 16px; border: 1px dashed var(--line-hi); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink); transition: border-color .3s; }
.av-picker .av-up .av { width: 48px; height: 48px; flex: none; }
.av-up:hover, .av-up.is-active, .av-up:focus-visible { border-color: var(--flame); border-style: solid; }
.av-picker .av-up:hover { transform: none; }
.av-rm { grid-column: 1 / -1; font: 600 12px/1 var(--f-body); color: var(--muted); padding: 8px; }
.av-picker button.is-active { border-color: var(--flame); box-shadow: 0 0 0 1px var(--flame); }
.av-picker button:hover { transform: translateY(-2px); }
.join__preview { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px dashed var(--line); }
.join__preview .mono { font-size: 15px; color: var(--ink); }
.join__sure { display: grid; gap: 0; padding: 12px 14px 2px; border-radius: var(--r-sm); border: 1px solid var(--line-hi); background: rgba(0, 0, 0, .35); }
.join__sure p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.join__sure .link-btn { justify-self: start; min-height: 40px; }
.card-stage { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.card-stage canvas, .card-stage img { width: 100%; height: auto; display: block; }

@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.beam { position: relative; --beam: 0deg; }
.beam::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0 72%, var(--blood) 80%, var(--ember) 88%, var(--amber) 94%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam 5s linear infinite; }
.beam::after { content: ''; position: absolute; inset: -12px; border-radius: calc(var(--r) + 12px); z-index: -1; pointer-events: none; filter: blur(18px); opacity: .45;
  background: conic-gradient(from var(--beam), transparent 0 80%, var(--ember) 90%, transparent 100%); animation: beam 5s linear infinite; }
@keyframes beam { to { --beam: 360deg; } }

.dock { display: none; }
@media (max-width: 1180px) {
  .dock { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 85; display: flex; gap: 2px; padding: 6px; border-radius: 26px; transform: translateX(-50%);
    background: rgba(15, 16, 19, .74); border: 1px solid var(--line); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(231, 236, 246, .05); transition: transform .6s var(--ease), opacity .4s; }
  body.is-loading .dock { transform: translate(-50%, 140%); opacity: 0; }
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="file"]), textarea, [contenteditable="true"]):focus) :is(.dock, .quick-play) { display: none !important; }
  .dock__it { position: relative; display: flex; align-items: center; height: 46px; padding: 0 12px; border-radius: 20px; color: var(--muted); isolation: isolate; transition: color .3s, padding .5s var(--ease); }
  .dock__it svg { width: 22px; height: 22px; flex: none; }
  .dock__it::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fire); opacity: 0; transform: scale(.7); transition: opacity .35s, transform .5s var(--ease); box-shadow: 0 8px 22px -8px var(--ember); }
  .dock__lbl { max-width: 0; overflow: hidden; white-space: nowrap; font: 700 13px/1 var(--f-body); opacity: 0; transition: max-width .5s var(--ease), opacity .3s, margin .5s var(--ease); }
  .dock__it.is-active { color: var(--on-fire); padding: 0 16px 0 13px; }
  .dock__it.is-active::before { opacity: 1; transform: none; }
  .dock__it.is-active .dock__lbl { max-width: 96px; opacity: 1; margin-left: 8px; }
  .dock__dot { position: absolute; top: 9px; left: 30px; width: 8px; height: 8px; border-radius: 50%; background: var(--blood); box-shadow: 0 0 0 2px rgba(15, 16, 19, .9); opacity: 0; transition: opacity .3s; }
  body.is-live .dock__dot { opacity: 1; animation: dockPulse 1.4s infinite; }
  @keyframes dockPulse { 50% { box-shadow: 0 0 0 2px rgba(15, 16, 19, .9), 0 0 0 7px rgba(199, 218, 228, 0); } 0% { box-shadow: 0 0 0 2px rgba(15, 16, 19, .9), 0 0 0 0 rgba(199, 218, 228, .5); } }
  .dock__sep { width: 1px; margin: 10px 4px; background: var(--line); }
  .dock__me { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; }
  .dock__me .av { width: 36px; height: 36px; border-radius: 50%; }
  .dock__me--join { background: var(--fire); color: var(--on-fire); box-shadow: 0 8px 22px -8px var(--ember); animation: joinPulse 2.4s var(--ease) infinite; }
  .dock__me--join svg { width: 20px; height: 20px; }
  @keyframes joinPulse { 0% { box-shadow: 0 0 0 0 rgba(223, 234, 245, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(223, 234, 245, 0); } }
  .toasts { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 430px) { .dock__it, .dock__it.is-active { padding: 0 12px; } .dock__it.is-active .dock__lbl { max-width: 0; opacity: 0; margin-left: 0; } }
@media (max-width: 400px) { .dock__it, .dock__it.is-active { padding: 0 9px; } }
@media (max-width: 350px) { .dock__it, .dock__it.is-active { padding: 0 7px; } }

[data-page]:not([data-page="home"]).section { padding-top: clamp(118px, 13vw, 180px); min-height: 100svh; }

.ptx { position: fixed; inset: 0; z-index: 190; pointer-events: none; visibility: hidden; }
.ptx.is-on { pointer-events: auto; visibility: visible; }
.ptx__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.ptx__fallback { display: none; }
.ptx.is-fallback .ptx__fallback { display: block; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0 calc(100% - 26px), var(--ember) calc(100% - 10px), var(--amber)); transform: translateY(calc((1 - var(--p, 0)) * 102%)); }
.ptx__title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; visibility: hidden; text-align: center; padding: 0 var(--pad); }
.ptx__num { font: 700 13px/1 var(--f-mono); letter-spacing: .3em; color: var(--flame); }
.ptx__name { display: flex; flex-wrap: wrap; justify-content: center; font: 900 clamp(46px, 11vw, 170px)/.9 var(--f-display); letter-spacing: -.045em; text-transform: uppercase; filter: drop-shadow(0 0 26px rgba(223, 234, 245, .5)); }
.ptx__name > span { display: inline-block; overflow: hidden; padding: .08em 0 .18em; }
.ptx__name i { display: inline-block; font-style: normal; background: linear-gradient(180deg, var(--ink) 35%, var(--amber) 75%, var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.portal__head { margin-bottom: clamp(24px, 3vw, 40px); }
.portal__grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "hub hub arena" "stream events bestof" "merch merch plus" "partners partners partners"; }
.pcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 230px; padding: clamp(18px, 2vw, 28px); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: border-color .4s, transform .6s var(--ease); }
.pcard::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(110% 90% at 15% 115%, hsl(var(--h) 100% 45% / .55), transparent 60%), var(--panel); transition: opacity .5s; }
.pcard::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 100%), rgba(234, 240, 248, .16), transparent 60%); opacity: 0; transition: opacity .4s; }
.pcard:hover { border-color: var(--line-hi); transform: translateY(-4px); }
.pcard:hover::after { opacity: 1; }
.pcard--hub { grid-area: hub; min-height: 300px; }
.pcard--wide { grid-area: support; min-height: 150px; }
.pcard:nth-child(2) { grid-area: arena; } .pcard:nth-child(3) { grid-area: stream; } .pcard:nth-child(4) { grid-area: events; } .pcard:nth-child(5) { grid-area: bestof; }
.pcard__no { position: absolute; top: clamp(14px, 1.6vw, 22px); left: clamp(18px, 2vw, 28px); font: 900 clamp(40px, 5vw, 76px)/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .22); letter-spacing: -.04em; transition: -webkit-text-stroke-color .4s; }
.pcard:hover .pcard__no { -webkit-text-stroke-color: var(--flame); }
.pcard__chip { position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px); display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 99px; background: rgba(11, 8, 7, .6); border: 1px solid var(--line); font: 600 11px/1 var(--f-mono); color: var(--muted); }
.pcard__chip b { color: var(--ink); }
.pcard__name { font: 900 clamp(30px, 3.6vw, 56px)/.95 var(--f-display); letter-spacing: -.035em; }
.pcard--hub .pcard__name { font-size: clamp(44px, 6vw, 96px); }
.pcard__desc { color: var(--muted); font-size: 14px; max-width: 34ch; }
.pcard__go { position: absolute; right: clamp(18px, 2vw, 26px); bottom: clamp(18px, 2vw, 26px); width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: rgba(231, 236, 246, .06); border: 1px solid var(--line); transition: background .4s, color .4s, transform .6s var(--ease); }
.pcard:hover .pcard__go { background: var(--fire); color: var(--on-fire); border-color: transparent; transform: rotate(45deg); }

.pcard__art { position: absolute; z-index: -1; pointer-events: none; right: clamp(20px, 2.4vw, 34px); top: clamp(20px, 2.2vw, 30px); transform-origin: top right; transition: transform .8s var(--ease); }
.pcard:hover .pcard__art { transform: scale(1.06) rotate(-2deg); }
.pcard__art i, .pcard__art b { font-style: normal; display: block; }
.pa-chat { top: 64px; right: 96px; transform: none; width: min(46%, 380px); display: flex; flex-direction: column; gap: 8px; }
.pcard:hover .pa-chat { transform: translateY(-4px); }
.pa-msg { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 14px 14px 14px 4px; background: rgba(11, 8, 7, .62); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; line-height: 1.3; color: var(--muted); opacity: calc(1 - var(--i) * .28); transform: scale(calc(1 - var(--i) * .04)); transform-origin: left center; animation: paMsg .8s var(--ease) both; animation-delay: calc((2 - var(--i)) * .12s); }
.pa-msg:last-child { border-color: var(--line-hi); background: rgba(17, 23, 31, .7); }
.pa-msg > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-msg b { color: var(--ink); margin-right: 6px; font-weight: 700; }
@keyframes paMsg { from { opacity: 0; transform: translateY(12px); } }
.pa-wheel { width: 128px; height: 128px; }
.pa-wheel__disc { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--flame); box-shadow: 0 0 40px -6px rgba(223, 234, 245, .7), inset 0 0 0 3px #0e1116;
  background: conic-gradient(#dfeaf5 0 45deg, #141619 0 90deg, #f0f3fa 0 135deg, #1a1e24 0 180deg, #c7dae4 0 225deg, #141619 0 270deg, #ffffff 0 315deg, #1a1e24 0); animation: spin 12s linear infinite; }
.pcard:hover .pa-wheel__disc { animation-duration: 2.4s; }
.pa-wheel__hub { position: absolute; inset: 36%; border-radius: 50%; background: var(--bg); border: 2px solid var(--flame); display: grid !important; place-items: center; color: var(--flame); }
.pa-wheel__hub svg { width: 55%; height: 55%; }
.pa-wheel__pin { position: absolute; left: 50%; top: -8px; width: 16px; height: 20px; margin-left: -8px; background: var(--ink); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 2px 4px #000); }
.pa-live { width: 132px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pa-live__ring { position: relative; width: 96px; height: 96px; border-radius: 50%; padding: 4px; background: conic-gradient(from 0deg, #ff2d6a, var(--ember), var(--amber), #25f4ee, #ff2d6a); animation: spin 5s linear infinite; box-shadow: 0 0 40px -8px rgba(255, 45, 106, .6); }
.pa-live__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #0b0807; animation: spin 5s linear infinite reverse; }
.pa-live__tag { margin-top: -18px; position: relative; padding: 4px 9px; border-radius: 7px; background: #ff2d2d; color: #fff; font: 800 10px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 0 3px #0b0807; max-width: 132px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-live__when { font-size: 11px; color: var(--muted); white-space: nowrap; }
.pa-cal { display: flex; flex-direction: row-reverse; align-items: center; gap: 16px; }
.pa-cal__sheet { position: relative; width: 98px; border-radius: 14px; overflow: hidden; background: #e8eaf0; color: #070d13; text-align: center; transform: rotate(-6deg); box-shadow: 8px 10px 0 -2px rgba(231, 236, 246, .12), 0 20px 40px -14px #000; }
.pcard:hover .pa-cal__sheet { transform: rotate(0); transition: transform .6s var(--ease); }
.pa-cal__mon { padding: 7px 0 6px; background: var(--fire); color: var(--on-fire); font: 800 11px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.pa-cal__day { padding: 6px 0 10px; font: 900 46px/1 var(--f-display); letter-spacing: -.04em; }
.pa-cal__name { max-width: 150px; text-align: right; font-size: 12px; line-height: 1.25; color: var(--amber); display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-vhs__tape { position: relative; width: 150px; height: 100px; border-radius: 12px; overflow: hidden; transform: rotate(5deg); border: 1px solid var(--line-hi); box-shadow: 0 24px 50px -16px #000, 0 0 0 6px rgba(231, 236, 246, .04); }
.pcard:hover .pa-vhs__tape { transform: rotate(0); transition: transform .6s var(--ease); }
.pa-vhs__tape img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.6) saturate(1.6) contrast(1.1) brightness(.75); }
.pa-vhs__tape::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 50%, rgba(199, 218, 228, .35)); }
.pa-vhs__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; display: grid !important; place-items: center; background: var(--fire); color: var(--on-fire); box-shadow: 0 0 30px rgba(223, 234, 245, .7); }
.pa-vhs__play svg { width: 15px; height: 15px; margin-left: 2px; }
.pa-vhs__dur { position: absolute; right: 7px; bottom: 7px; z-index: 1; padding: 3px 6px; border-radius: 5px; background: rgba(0, 0, 0, .7); color: var(--ink); font-size: 10px; }

.next-page { position: relative; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: clamp(60px, 9vw, 120px) var(--pad); border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.next-page::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 120% at 50% 130%, rgba(223, 234, 245, .28), transparent 60%); opacity: .5; transition: opacity .6s; }
.next-page:hover::before { opacity: 1; }
.next-page__label { color: var(--flame); letter-spacing: .25em; text-transform: uppercase; }
.next-page__name { font: 900 clamp(52px, 12vw, 190px)/.9 var(--f-display); letter-spacing: -.05em; text-transform: uppercase; transition: transform .8s var(--ease), color .4s; }
.next-page:hover .next-page__name { transform: translateX(18px); color: var(--amber); }
.next-page__go { position: absolute; right: var(--pad); bottom: clamp(60px, 9vw, 120px); width: clamp(48px, 7vw, 96px); height: clamp(48px, 7vw, 96px); color: var(--flame); transition: transform .8s var(--ease); }
.next-page:hover .next-page__go { transform: rotate(45deg) scale(1.1); }

.sf-note { color: var(--dim); font-size: 11px; }
.vmodal__box { position: relative; width: min(960px, calc(100vw - 32px)); border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--line-hi); }
.vmodal__box video { display: block; width: 100%; max-height: calc(100dvh - 64px); background: #000; }
.vmodal .modal__x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.footer__studio { color: var(--dim); }
.footer__studio:hover { color: var(--amber); }

.title, .hero__claim, .loader__word, .footer__word, .ptx__name, .pcard__name, .next-page__name, .sgate__title, .nav__brand span { font-family: var(--f-blood); font-weight: 400; letter-spacing: .005em; }
.title .word { padding-bottom: .24em; margin-bottom: -.24em; }
.ptx__name > span { padding-bottom: .26em; }
.hero__claim { line-height: 1.04; }
.tile__title, .ev__name, .vod__title, .quiz__q, .pred__q, .profile-in__nick { letter-spacing: .005em; }

.dai-badge { position: absolute; right: 0; top: 4%; z-index: 4; width: 25%; aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: auto;
  background: radial-gradient(circle at 50% 40%, #5285ad, #090c0f 70%); border: 2px solid rgba(240, 243, 250, .55); box-shadow: 0 0 0 6px rgba(11, 8, 7, .65), 0 0 50px -6px rgba(220, 232, 243, .75); transition: transform .5s var(--ease); }
.dai-badge.is-in { opacity: 1; }
.dai-badge:hover { transform: scale(1.08) rotate(-6deg); }
.dai-badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.dai-badge:hover .dai-badge__ring { animation-duration: 4s; }
.dai-badge__ring text { font: 700 21px/1 var(--f-display); letter-spacing: 3.2px; fill: var(--amber); }
.dai-badge__core { position: absolute; inset: 29%; border-radius: 50%; display: grid; place-items: center; background: var(--fire); color: var(--on-fire); box-shadow: inset 0 -6px 14px rgba(105, 167, 199, .5), 0 0 24px rgba(223, 234, 245, .6); animation: daiBeat 2.2s var(--ease) infinite; }
.dai-badge__core svg { width: 58%; height: 58%; }
@keyframes daiBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(.98); } 36% { transform: scale(1.06); } }
.ticker__dai { font: 400 clamp(26px, 3.6vw, 50px)/1 var(--f-blood); background: linear-gradient(180deg, var(--amber), var(--ember) 55%, var(--blood)); -webkit-background-clip: text; background-clip: text; color: transparent; flex: none; }
.wheel__btn--dai { font: 400 clamp(13px, 1.5vw, 19px)/.95 var(--f-blood); text-transform: none; color: var(--amber); letter-spacing: .01em; }
.dai-chat { font-family: var(--f-blood); font-size: 1.15em; color: #f9fbfd; text-shadow: 0 0 14px rgba(220, 233, 242, .65); }
.ptx__quote { font: 400 clamp(20px, 2.6vw, 34px)/1 var(--f-blood); color: #f9fbfd; text-shadow: 0 0 24px rgba(220, 233, 242, .6); opacity: 0; }
.dai { position: relative; z-index: 5; text-align: center; overflow: hidden; padding-block: clamp(90px, 13vw, 190px); }
.dai .eyebrow { justify-content: center; }
.dai__glow { position: absolute; left: 50%; top: 55%; width: min(1100px, 120vw); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(199, 218, 228, .35), rgba(223, 234, 245, .08) 60%, transparent); filter: blur(10px); animation: glow 3.4s ease-in-out infinite alternate; pointer-events: none; }
.dai__quote { position: relative; display: inline-block; margin: 0; cursor: pointer; }
.dai__q { position: relative; z-index: 1; display: inline-flex; flex-wrap: wrap; justify-content: center; row-gap: 0; font: 400 clamp(76px, 17vw, 270px)/1 var(--f-blood); }
.dai__ch { display: inline-block; padding-bottom: .12em; }
.dai__ch i { display: inline-block; font-style: normal; background: linear-gradient(180deg, #edeff8 0%, var(--amber) 32%, var(--ember) 62%, var(--blood) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(216, 231, 241, .45)); transition: transform .4s var(--ease); }
.dai__quote:hover .dai__ch:nth-child(odd) i { transform: translateY(-6px) rotate(-3deg); }
.dai__quote:hover .dai__ch:nth-child(even) i { transform: translateY(4px) rotate(3deg); }
.dai__sp { display: inline-block; width: .3em; }
.dai__w { display: inline-flex; white-space: nowrap; }
.dai__drips { position: absolute; left: 8%; right: 8%; bottom: 14%; height: 0; pointer-events: none; }
.dai__drips i { position: absolute; left: var(--x); top: 0; width: var(--w); height: 0; border-radius: 0 0 99px 99px; background: linear-gradient(180deg, #c7dae4, #80b2c9); box-shadow: 0 0 12px rgba(199, 218, 228, .5); }
.dai__drips i::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: calc(var(--w) * 1.9); height: calc(var(--w) * 2.2); transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #a3c6d7; opacity: 0; }
.dai.is-in .dai__drips i { animation: daiDrip 2.6s cubic-bezier(.55, 0, .7, .4) var(--d) forwards; }
.dai.is-in .dai__drips i::after { animation: daiDrop 2.2s ease-in calc(var(--d) + 2.4s) infinite; }
@keyframes daiDrip { to { height: var(--h); } }
@media (max-width: 760px) { .dai__drips i { --h2: calc(var(--h) * .5); } @keyframes daiDrip { to { height: var(--h2, var(--h)); } } }
@keyframes daiDrop { 0% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 160px) scale(.6); } }
.dai__by { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: clamp(70px, 9vw, 130px) 0 0; }
.dai__by .mono { color: var(--flame); letter-spacing: .3em; font-size: 13px; }
.dai-stamp { position: fixed; inset: 0; z-index: 380; display: grid; place-items: center; pointer-events: none; visibility: hidden; }
.dai-stamp.is-on { visibility: visible; }
body.selo-full .dai-stamp, body[data-route="selo"] .dai-stamp, body[data-route="studio"] .dai-stamp { display: none; }
.dai-stamp__ring { position: absolute; width: 44vmin; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--ember); box-shadow: 0 0 60px var(--ember), inset 0 0 60px var(--blood); opacity: 0; }
.dai-stamp__txt { font: 400 clamp(70px, 15vw, 220px)/1 var(--f-blood); background: linear-gradient(180deg, #edeff8, var(--amber) 30%, var(--ember) 60%, var(--blood)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 40px rgba(212, 229, 239, .7)); transform: rotate(-7deg); white-space: nowrap; }

.nav__links a.nav__plus { color: var(--amber); }
.chip__dot.is-red { background: #ff2d2d; animation: livePulse 1.6s infinite; }
.drop-pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 99px; background: linear-gradient(90deg, rgba(199, 218, 228, .28), rgba(223, 234, 245, .12)); border: 1px solid rgba(223, 234, 245, .5); font: 600 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink); transition: border-color .3s, translate .4s var(--ease); }
.drop-pill b { font: 400 15px/1 var(--f-blood); letter-spacing: 0; color: var(--amber); }
.drop-pill svg { width: 13px; height: 13px; transition: transform .4s var(--ease); }
.drop-pill:hover { border-color: var(--amber); translate: 0 -2px; }
.drop-pill:hover svg { transform: translate(2px, -2px); }
.drop-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff2d2d; animation: livePulse 1.6s infinite; }
.merch__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.merch__head .lead { margin-bottom: 0; }
.drop { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--r); border: 1px solid rgba(223, 234, 245, .5); background: radial-gradient(120% 120% at 100% 0%, rgba(199, 218, 228, .35), transparent 60%), var(--panel-solid); box-shadow: 0 30px 70px -30px rgba(220, 233, 242, .6); min-width: 280px; }
.drop__tag { align-self: flex-start; padding: 4px 8px; border-radius: 6px; background: #ff2d2d; color: #fff; font: 700 10px/1 var(--f-mono); letter-spacing: .14em; }
.drop__name { font: 400 26px/1 var(--f-blood); color: var(--amber); }
.drop__label { color: var(--muted); }
.drop__cd { font-size: 14px; color: var(--muted); }
.drop__cd b { font: 700 30px/1 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.merch__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.prod { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; isolation: isolate; background: radial-gradient(90% 70% at 50% 38%, hsl(calc(10 + var(--h)) 90% 40% / .35), transparent 70%), var(--panel); transition: border-color .4s, transform .6s var(--ease); }
.prod:hover { border-color: var(--line-hi); transform: translateY(-6px); }
.prod--hero { grid-column: span 2; grid-row: span 2; }
.prod--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.prod--wide .prod__art { width: min(300px, 40%); flex: none; padding: 14px; }
.prod--wide .prod__info { flex: 1; }
.prod__art { display: grid; place-items: center; padding: 18px 18px 0; aspect-ratio: 1; }
.part { width: 100%; height: 100%; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); transition: transform .8s var(--ease); }
.part--img { object-fit: cover; border-radius: 14px; }
.prod:hover .part { transform: scale(1.06) rotate(-2deg); }
.prod__badge { position: absolute; top: 14px; left: 14px; padding: 5px 9px; border-radius: 7px; background: var(--fire); color: var(--on-fire); font: 800 11px/1 var(--f-display); letter-spacing: .08em; }
.prod__info { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 18px; }
.prod__name { font: 700 17px/1.2 var(--f-display); }
.prod--hero .prod__name { font: 400 clamp(26px, 2.6vw, 38px)/1 var(--f-blood); }
.prod__price { display: flex; align-items: baseline; gap: 10px; }
.prod__price b { font: 700 20px/1 var(--f-mono); color: var(--amber); }
.prod__price s, .pmodal__price s { color: var(--dim); font: 500 13px/1 var(--f-mono); }
.stockbar { position: relative; display: block; height: 6px; border-radius: 99px; background: rgba(231, 236, 246, .08); overflow: hidden; }
.stockbar > span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--fire); }
.stockbar.is-low > span { background: linear-gradient(90deg, #ff2d2d, var(--ember)); animation: lowPulse 1.4s ease-in-out infinite; }
@keyframes lowPulse { 50% { opacity: .55; } }
.prod__left { font-size: 11px; color: var(--muted); }
.merch__trust { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; color: var(--muted); font-size: 13px; }
.merch__trust > span { display: inline-flex; align-items: center; gap: 8px; }
.merch__trust svg { width: 15px; height: 15px; color: var(--flame); }
.merch__soon { position: relative; max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px); text-align: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.merch__soon-k { margin: 0; font: 800 clamp(40px, 8vw, 96px)/.95 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; }
.merch__soon-t { margin: 14px 0 8px; font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--f-display); color: var(--ink); }
.merch__soon-p { margin: 0 auto 22px; max-width: 52ch; color: var(--muted); font-size: 16px; line-height: 1.55; }
.merch__wish { display: grid; gap: 10px; max-width: 560px; margin: 0 auto; text-align: left; }
.merch__wish textarea { width: 100%; min-height: 96px; resize: vertical; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--ink); font: 400 16px/1.45 var(--f-body); box-sizing: border-box; }
.merch__wish textarea:focus { outline: 2px solid var(--ember); outline-offset: 2px; }
.merch__wish-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.merch__wish-row small { color: var(--dim); }
.merch__wish-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0; font-size: 17px; color: var(--ink); }
.merch__wish-guest { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
.pcard--merch.is-soon .pa-merch { opacity: .6; filter: grayscale(.3) brightness(.85); }
.pmodal { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.pmodal__art { aspect-ratio: 1; display: grid; place-items: center; border-radius: 20px; background: radial-gradient(80% 70% at 50% 40%, rgba(223, 234, 245, .3), transparent 70%), rgba(0, 0, 0, .3); padding: 12px; }
.pmodal__info { display: flex; flex-direction: column; gap: 14px; }
.pmodal__info .tag { align-self: flex-start; }
.pmodal__price { display: flex; align-items: baseline; gap: 10px; }
.pmodal__price b { font: 700 30px/1 var(--f-mono); color: var(--amber); }
.pmodal__stock { display: flex; flex-direction: column; gap: 6px; }
.pmodal__sizes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pmodal__sizes .mono { margin-right: 6px; }
.pmodal__note { margin: 0; font-size: 12px; }
.plus { overflow: hidden; }
.plus__glow { position: absolute; left: 50%; top: 0; width: min(1200px, 130vw); aspect-ratio: 2; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(223, 234, 245, .08) 55%, transparent); pointer-events: none; }
.plus__head { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.plus__head .eyebrow { justify-content: center; }
.plus__title { font-size: clamp(64px, 11vw, 170px); }
.plus__title em { font-style: normal; background: linear-gradient(180deg, #e1e2f4, var(--amber) 40%, var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; animation: plusBeat 2.4s var(--ease) infinite; }
@keyframes plusBeat { 0%, 100% { transform: scale(1) rotate(0); } 15% { transform: scale(1.18) rotate(8deg); } 30% { transform: scale(1); } }
.plus__proof { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--amber); }
.plus__proof svg { width: 18px; height: 18px; }
.plus__toggle { justify-content: center; margin-bottom: clamp(26px, 4vw, 44px); }
.plus__save { margin-left: 4px; padding: 2px 6px; border-radius: 5px; background: var(--fire); color: var(--on-fire); font: 700 10px/1.4 var(--f-mono); }
.plus__tiers { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
.plus__tiers.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.srv-wait { position: fixed; z-index: 300; left: 50%; top: 14px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--r-sm); background: var(--panel-hi, #222); border: 1px solid var(--line-hi); color: var(--ink); font: 600 13px/1.3 var(--f-body); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8); }
.plus__mine { display: flex; align-items: center; gap: 14px; max-width: 1080px; margin: 18px auto 0; padding: 16px 18px; border: 1px solid var(--line-hi); border-radius: var(--r-sm); background: var(--panel); }
.plus__mine[hidden] { display: none; }
.plus__mine-ic { width: 26px; height: 26px; flex: none; color: var(--amber); }
.plus__mine p { flex: 1; display: grid; gap: 4px; margin: 0; }
.plus__mine small { color: var(--muted); font-size: 13px; }
.plus__cancel { max-width: 1080px; margin: 14px auto 0; text-align: center; font-size: 13px; }
@media (max-width: 560px) { .plus__mine { flex-wrap: wrap; } .plus__mine p { flex-basis: calc(100% - 40px); } .plus__mine .btn { width: 100%; } }
.plus__cancel a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.plus__cancel a:hover { color: var(--ink); }
.tier { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px 24px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.tier--pop { border-color: rgba(255, 255, 255, .6); background: radial-gradient(120% 80% at 50% 0%, rgba(240, 243, 250, .18), transparent 60%), var(--panel-solid); box-shadow: 0 40px 90px -40px rgba(226, 233, 246, .7); transform: translateY(-10px); }
.tier__pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 99px; background: var(--fire); color: var(--on-fire); font: 800 11px/1 var(--f-display); letter-spacing: .06em; white-space: nowrap; }
.tier__name { margin: 0; font: 400 34px/1 var(--f-blood); }
.tier--pop .tier__name { color: var(--amber); }
.tier__price { display: flex; align-items: baseline; gap: 6px; }
.tier__price b { font: 700 40px/1 var(--f-mono); }
.tier__price .mono { color: var(--muted); }
.tier__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tier__perks li { display: flex; gap: 10px; font-size: 14px; color: #d2d5dd; line-height: 1.35; }
.tier__perks svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--flame); }
.plus__preview { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: center; max-width: 1080px; margin: clamp(40px, 6vw, 70px) auto 0; padding: 24px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.plus__preview-copy p { margin: 8px 0 0; }
.plus__chat { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.msg--plus { background: linear-gradient(90deg, rgba(255, 255, 255, .1), transparent); box-shadow: inset 2px 0 0 var(--amber); }
.plus-badge { display: inline-block; margin-right: 6px; padding: 2px 5px; border-radius: 5px; background: linear-gradient(135deg, #ffe7a8, #ffa53a); color: #2a1200; font: 800 10px/1.3 var(--f-display); vertical-align: 1px; }
.msg__nick.is-gold { background: linear-gradient(90deg, #fff1c2, #ffc65a, #ff8a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plus__faq { max-width: 760px; margin: clamp(30px, 5vw, 56px) auto 0; display: flex; flex-direction: column; gap: 8px; }
.plus__faq details { border-radius: 14px; border: 1px solid var(--line); background: var(--panel); padding: 14px 18px; }
.plus__faq summary { cursor: pointer; font: 700 15px/1.3 var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.plus__faq summary::after { content: '+'; color: var(--flame); font-family: var(--f-mono); transition: transform .3s; }
.plus__faq details[open] summary::after { transform: rotate(45deg); }
.plus__faq p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.partners__head { max-width: 900px; margin-bottom: clamp(24px, 3vw, 40px); }
.partners__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 150px; padding: 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.kpi b { font: 700 clamp(34px, 4vw, 56px)/1 var(--f-display); letter-spacing: -.01em; }
.kpi span { color: var(--muted); font-size: 13px; }
.kpi--big { grid-column: span 2; grid-row: span 2; background: radial-gradient(100% 80% at 0% 100%, rgba(199, 218, 228, .35), transparent 60%), var(--panel-solid); border-color: rgba(223, 234, 245, .4); }
.kpi--big b { font: 400 clamp(90px, 13vw, 200px)/.9 var(--f-blood); background: linear-gradient(180deg, #edeff8, var(--amber) 35%, var(--ember) 70%, var(--blood)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi--big span { font-size: 16px; }
.kpi__live { position: absolute; top: 18px; right: 18px; padding: 5px 9px; border-radius: 7px; background: #ff2d2d; color: #fff; font: 800 11px/1 var(--f-display); font-style: normal; letter-spacing: .1em; animation: livePulse 1.6s infinite; }
.aud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.aud__item { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 14px; }
.ring { position: relative; width: 74px; height: 74px; flex: none; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring__t { fill: none; stroke: var(--line); stroke-width: 8; }
.ring__b { fill: none; stroke: var(--flame); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px var(--ember)); }
.ring b { font: 700 17px/1 var(--f-mono); color: var(--ink); }
.partners__sub { margin: clamp(40px, 6vw, 70px) 0 18px; font: 400 clamp(30px, 4vw, 52px)/1 var(--f-blood); }
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pack { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); transition: border-color .4s, transform .6s var(--ease); }
.pack:hover { border-color: var(--line-hi); transform: translateY(-4px); }
.pack__no { color: var(--dim); }
.pack__name { margin: 0; font: 700 21px/1.15 var(--f-display); }
.pack p { margin: 0; font-size: 14px; flex: 1; }
.pack__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pack__price { font: 700 19px/1 var(--f-mono); color: var(--amber); }
.pack__price small { font-size: 11px; color: var(--muted); font-weight: 500; }
.whyus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; }
.whyus > div { padding: 20px; border-radius: var(--r); border: 1px dashed var(--line-hi); }
.whyus b { font: 700 18px/1.2 var(--f-display); color: var(--amber); }
.whyus p { margin: 8px 0 0; font-size: 14px; }
.pform { margin-top: clamp(40px, 6vw, 70px); max-width: 860px; }
.pform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pform .btn { align-self: flex-start; }
.pcard--merch { grid-area: merch; min-height: 280px; } .pcard--plus { grid-area: plus; } .pcard--partners { grid-area: partners; min-height: 130px; }
.pa-merch { width: 230px; top: 6px; right: 70px; }
.pa-merch .part { width: 100%; height: auto; }
.pa-plus b { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 30px; background: linear-gradient(135deg, #fff1c2, #ffa53a 55%, #ff5b1f); color: #2a1200; font: 400 52px/1 var(--f-blood); box-shadow: 0 20px 50px -14px rgba(255, 150, 40, .8); transform: rotate(8deg); animation: plusFloat 4s ease-in-out infinite; }
@keyframes plusFloat { 50% { transform: rotate(-4deg) translateY(-8px); } }

.leads__list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.leadc { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.leadc__top, .leadc__foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.leadc__top b { font: 700 16px/1.2 var(--f-display); }
.leadc p { margin: 8px 0; font-size: 14px; color: #d2d5dd; }
.leadc__foot { font-size: 12px; }

@media (max-width: 1180px) {
  .nav__links { display: none; }
  .merch__grid, .packs, .kpis, .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plus__tiers { grid-template-columns: 1fr; max-width: 520px; } .tier--pop { transform: none; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "profile board" "chat chat"; }
  .bento--arena { grid-template-columns: 1fr 1fr; grid-template-areas: "matches matches" "wheel quiz" "wheel predict" "games predict" "shop shop" "bot bot"; }
  .tile--chat { height: 560px; }
  .live__layout, .events__layout { grid-template-columns: 1fr; }
  .week { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .plus__tiers.is-two { grid-template-columns: 1fr; max-width: 520px; }
  .prod--hero { grid-column: 1 / -1; grid-row: auto; }
  .pmodal, .plus__preview, .whyus, .pform__grid { grid-template-columns: 1fr; }
  .kpi--big { grid-column: 1 / -1; grid-row: auto; min-height: 200px; }
  .aud { grid-template-columns: 1fr 1fr; } .aud__item { flex-direction: column; text-align: center; }
  .pa-merch { width: 150px; right: 50%; transform: translateX(50%); top: 54px; }
  .pcard--merch { min-height: 300px; }
  .drop { min-width: 0; width: 100%; }
  .portal__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "hub hub" "arena stream" "events bestof" "merch merch" "plus partners"; }
  .pcard { min-height: 180px; } .pcard--hub { min-height: 240px; } .pcard--wide { min-height: 130px; }
  .pcard__desc { font-size: 12px; } .pcard__go { width: 36px; height: 36px; padding: 9px; }
  .pcard:not(.pcard--hub):not(.pcard--wide) .pcard__go { top: 16px; right: 14px; bottom: auto; }
  .pcard:not(.pcard--hub):not(.pcard--wide) .pcard__chip { display: none; }
  .pcard__name { font-size: clamp(18px, 5vw, 28px); }
  .pcard:not(.pcard--hub):not(.pcard--wide) { min-height: 214px; }
  .pcard:not(.pcard--hub) .pcard__art { right: auto; left: 50%; top: 62px; transform: translateX(-50%) scale(.64); transform-origin: top center; }
  .pcard:not(.pcard--hub):hover .pcard__art { transform: translateX(-50%) scale(.68); }
  .pcard--hub { min-height: 330px; }
  .pa-chat { top: 70px; left: 18px; right: 18px; width: auto; }
  .pa-msg:nth-last-child(3) { display: none; }
  .pa-cal { width: 150px; flex-direction: column; gap: 10px; }
  .pa-cal__name { text-align: center; }
  .pcard--hub .pcard__name, .pcard--wide .pcard__name { font-size: clamp(40px, 12vw, 56px); }
  .bento, .bento--arena { grid-template-columns: 1fr; grid-template-areas: none; }
  .bento > .tile { grid-area: auto; }
  .tile--chat { height: 520px; }
  .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .hero__stage { position: relative; inset: auto; padding: 96px 0 8px; }
  .emblem { width: min(80vw, 420px); margin-top: 0; }
  .hero__bottom { position: relative; flex-direction: column; align-items: stretch; padding-top: 24px; margin-top: auto; }
  .next-card { width: 100%; }
  .shop { grid-template-columns: 1fr 1fr; }
  .bo-streams { grid-template-columns: 1fr; }
  .vod:first-child { grid-row: auto; }
  .clips__grid { grid-template-columns: 1fr 1fr; }
  .tt-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .tt-grid > * { scroll-snap-align: start; }
  .phone { margin: 0 auto; max-width: 300px; }
  .donate { grid-template-columns: 1fr; }
  .week { grid-template-columns: repeat(2, 1fr); }
  .online-pill { display: none; }
  .chip--live .chip__sep, .chip--live [data-i18n="hero.eyebrow"] { display: none; }
  .nav__right { gap: 6px; }
  .nav__join { display: none; }
  .ev { grid-template-columns: 60px 1fr; gap: 12px; }
}
@media (max-width: 420px) {
  .pcard:not(.pcard--hub):not(.pcard--wide) .pcard__desc { display: none; }
  .shop { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .nav__brand span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sec-bg video, .match.is-next, .aura i, .aura b, .grain, .emblem__glow, .btn--fire, .dai-badge__ring, .dai-badge__core, .dai__glow, .dai__drips i, .dai__drips i::after, .pa-wheel__disc, .pa-live__ring, .pa-live__ring img, .reactor__ring, .live-dot, .phone__ring, .phone__ring img, .bot__out .caret, .beam::before, .beam::after, .pod__crown, .dock__dot, .dock__me--join { animation: none !important; }
}

.pcard { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .8 0 0 0 0 .7 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pcard::before { background:
    radial-gradient(70% 60% at 100% 0%, hsl(var(--h) 90% 50% / .18), transparent 70%),
    radial-gradient(110% 90% at 15% 115%, hsl(var(--h) 100% 45% / .55), transparent 60%),
    linear-gradient(180deg, rgba(231, 236, 246, .035), transparent 40%),
    var(--panel); }
.pcard__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pcard__bg::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .09; mix-blend-mode: overlay; }
.pcard__bg::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .11) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(90% 80% at 80% 20%, #000, transparent 75%); mask: radial-gradient(90% 80% at 80% 20%, #000, transparent 75%); }
.pcard__bg i, .pcard__bg b { display: block; font-style: normal; position: absolute; }
.pcard { box-shadow: inset 0 1px 0 rgba(231, 236, 246, .06); }

.pb-hub i { left: calc(46% + (var(--i) * 37px) % 260px); bottom: -40px; width: calc(70px + (var(--i) * 53px) % 120px); height: 22px; border-radius: 12px 12px 12px 4px;
  background: linear-gradient(90deg, hsl(var(--h) 90% 55% / .16), rgba(231, 236, 246, .05)); border: 1px solid rgba(255, 255, 255, .07);
  animation: pbRise calc(9s + var(--i) * 1.3s) linear infinite; animation-delay: calc(var(--i) * -2.1s); }
.pb-hub i:nth-child(3n) { border-radius: 12px 12px 4px 12px; background: linear-gradient(90deg, rgba(231, 236, 246, .05), hsl(var(--h) 90% 55% / .2)); }
@keyframes pbRise { from { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 80% { opacity: .7; } to { transform: translateY(-360px); opacity: 0; } }

.pb-arena i { right: -40%; top: -55%; width: 140%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, hsl(var(--h) 100% 55% / .13) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%); mask: radial-gradient(closest-side, #000 20%, transparent 100%);
  animation: pbSpin 60s linear infinite; }
@keyframes pbSpin { to { transform: rotate(360deg); } }

.pb-live { background: repeating-linear-gradient(0deg, rgba(231, 236, 246, .025) 0 1px, transparent 1px 4px); }
.pb-live i { right: clamp(20px, 2.4vw, 34px); top: clamp(20px, 2.2vw, 30px); width: 76px; height: 76px; margin: 0; border-radius: 50%; border: 1.5px solid hsl(var(--h) 100% 60% / .5);
  animation: pbPulse 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.pb-live i:nth-child(2) { animation-delay: 1.2s; } .pb-live i:nth-child(3) { animation-delay: 2.4s; }
@keyframes pbPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }

.pb-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 18px; inset: 0 0 0 30%; transform: perspective(600px) rotateY(-18deg) rotateX(8deg); transform-origin: right center;
  -webkit-mask: linear-gradient(90deg, transparent, #000 45%); mask: linear-gradient(90deg, transparent, #000 45%); }
.pb-cal i { position: static; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(231, 236, 246, .02); }
.pb-cal i.is-on { background: hsl(var(--h) 100% 55% / .35); border-color: hsl(var(--h) 100% 60% / .6); box-shadow: 0 0 24px hsl(var(--h) 100% 55% / .5); animation: pbBlink 2.4s ease-in-out infinite; }
@keyframes pbBlink { 50% { opacity: .45; } }

.pb-film i { left: -10%; right: -10%; height: 26px; background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(231, 236, 246, .1) 10px 22px, transparent 22px 30px) 0 50% / 30px 10px repeat-x,
    linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35));
  border-block: 1px solid rgba(255, 255, 255, .06); animation: pbFilm 6s linear infinite; }
.pb-film i:nth-child(1) { top: 10px; transform: rotate(-4deg); }
.pb-film i:nth-child(2) { bottom: 26%; transform: rotate(3deg); animation-direction: reverse; opacity: .6; }
@keyframes pbFilm { to { background-position: 300px 50%, 0 0; } }

.pb-merch { display: flex; align-items: center; top: 8%; bottom: auto; height: 70%; }
.pb-merch b { position: relative; flex: none; padding-right: .3em; font: 400 clamp(120px, 16vw, 230px)/1 var(--f-blood); color: transparent; -webkit-text-stroke: 1px hsl(var(--h) 100% 60% / .18); animation: pbMarq 22s linear infinite; }
@keyframes pbMarq { to { transform: translateX(-100%); } }

.pb-plus { background: repeating-linear-gradient(45deg, rgba(255, 196, 90, .05) 0 1px, transparent 1px 18px), repeating-linear-gradient(-45deg, rgba(255, 196, 90, .05) 0 1px, transparent 1px 18px); }
.pb-plus i { inset: -50% auto -50% -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); transform: rotate(20deg); animation: pbSheen 5.5s ease-in-out infinite; }
@keyframes pbSheen { 0%, 30% { left: -60%; } 70%, 100% { left: 130%; } }

.pb-partners svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 75%; }
.pb-partners__area { fill: hsl(var(--h) 100% 55% / .1); }
.pb-partners__line { fill: none; stroke: hsl(var(--h) 100% 60% / .55); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: pbDraw 5s var(--ease) infinite; }
@keyframes pbDraw { 60%, 100% { stroke-dashoffset: 0; } }
.pb-partners i { bottom: 0; left: calc(40% + var(--i) * 5%); width: 2.4%; height: calc(14% + var(--i) * 5%); border-radius: 4px 4px 0 0; background: linear-gradient(hsl(var(--h) 100% 60% / .22), transparent); transform-origin: bottom; animation: pbBar 4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.3s); }
@keyframes pbBar { from { transform: scaleY(.55); } to { transform: scaleY(1); } }

.pcard:hover .pcard__bg::before { -webkit-mask: radial-gradient(90% 90% at var(--mx, 80%) var(--my, 20%), #000, transparent 70%); mask: radial-gradient(90% 90% at var(--mx, 80%) var(--my, 20%), #000, transparent 70%); }
@media (max-width: 700px) { .pb-cal { inset: 0; opacity: .5; } .pb-merch b { font-size: 120px; } .pb-hub i { left: calc(30% + (var(--i) * 37px) % 200px); } .pb-live i { right: auto; left: 50%; top: 62px; width: 50px; height: 50px; margin-left: -25px; } }
@media (prefers-reduced-motion: reduce) { .pcard__bg *, .pcard__bg i, .pcard__bg b { animation: none !important; } .pb-partners__line { stroke-dashoffset: 0; } }
.pb-cal { -webkit-mask: linear-gradient(90deg, transparent, #000 45%), linear-gradient(transparent 30%, #000 0); -webkit-mask: radial-gradient(70% 90% at 85% 25%, #000 30%, transparent 80%); mask: radial-gradient(70% 90% at 85% 25%, #000 30%, transparent 80%); }
.pb-hub i { background: linear-gradient(90deg, hsl(var(--h) 90% 55% / .24), rgba(231, 236, 246, .07)); border-color: rgba(255, 255, 255, .1); }
@media (min-width: 701px) { .pcard--partners .pcard__no { left: auto; right: 90px; top: 50%; transform: translateY(-50%); } }
.pb-hub i { left: var(--x); width: var(--w); margin-left: calc(var(--w) / -2); }
@media (max-width: 700px) { .pb-hub i { left: var(--x); } }

:root {
  --bg: #070606; --bg-2: #0d0a09;
  --panel: rgba(218, 219, 227, .028); --panel-solid: #100d0c; --panel-hi: rgba(218, 219, 227, .06);
  --line: rgba(218, 219, 227, .1); --line-hi: rgba(119, 144, 172, .7);
  --ink: #dddfe7; --muted: #8e9096; --dim: #56585c;
  --blood: #5d7290; --ember: #c7dbe4; --flame: #e3edf5; --amber: #f2f6fb;
  --on-fire: #e7e8ef;
  --fire: linear-gradient(100deg, #405268 0%, #5d7290 40%, #cfe0e8 75%, #e3edf5 100%);
  --r: 2px; --r-sm: 2px;
  --cut: 16px;
  --chamfer: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
body { background: radial-gradient(120% 60% at 50% -10%, #0c1215 0%, transparent 60%), var(--bg); }
::selection { background: var(--blood); color: #fff; }
:focus-visible { outline-color: var(--ember); border-radius: 0; }

.title, .hero__claim, .pcard__name, .sgate__title, .next-page__name, .tile__title, .tier__name, .drop__title, .kpi b {
  font-family: var(--f-display) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: -.01em !important; }
.title { font-size: clamp(42px, 8vw, 128px); line-height: .86; }
.title, .hero__claim, .pcard__name { -webkit-mask: var(--grit) 0 0 / 300px 300px; mask: var(--grit) 0 0 / 300px 300px; }
.title .word { padding: .16em 0 .04em; margin: -.16em 0 -.04em; }
.hero__claim { font-size: clamp(34px, 4.6vw, 74px); line-height: .9; }
html[lang="en"] .hero__claim { font-size: clamp(30px, 4vw, 64px); }
.pcard__name { font-size: clamp(30px, 3.8vw, 60px); line-height: .9; }
.pcard--hub .pcard__name { font-size: clamp(54px, 7.4vw, 120px); }
.tile__title { font-size: 15px; letter-spacing: .06em !important; }
.nav__brand span, .loader__word, .footer__word, .ptx__name { font-family: var(--f-blood); }

.glass, .btn, .icon-btn, .chip, .seg, .nav__brand img, .nav__links, .nav__links a, .online-pill, .ember-chip, .lang, .lang__btn, .countdown div,
.earn__item, .tile, .xp__bar, .heat__bar, .goal__bar, .xp__bar span, .heat__bar span, .goal__fill, .profile-in__stats div, .msg,
.chat__form input, .games__form input, .field input, .field__extra, .board li, .pod__block, .opt, .game, .bot__out, .item, .item__ic, .redeem,
.tt-frame, .social, .day-cell, .ev, .ev__date, .rsvp, .wd, .vod, .clip, .toast, .toast__ic, .modal__box, .auth__ok, .av-picker button, .av-up,
.join__preview, .join__sure, .card-stage, .dock, .dock__it, .pcard, .pcard__chip, .pa-msg, .pa-cal__sheet, .pa-vhs__tape, .nav__studio, .studio__who,
.sf input, .sf select, .sf textarea, .st-act, .st-act b, .st-item, .vmodal__box, .sgate__card, .sgate__crown, .sgate__msg, .sgate__demo,
.drop-pill, .drop, .prod, .part--img, .stockbar, .stockbar > span, .pmodal__art, .tier, .tier__pop, .plus__preview, .plus__chat, .plus__faq details,
.kpi, .aud__item, .pack, .whyus > div, .money__out, .money__bars i, .money__bars s, .leadc, .pb-hub i, .pb-cal i, .dai-chat, .plus-badge { border-radius: 2px !important; }

.pcard, .tile, .prod, .tier, .pack, .kpi, .drop, .ev, .vod, .modal__box, .sgate__card { clip-path: var(--chamfer); }
.pcard::before { background:
    linear-gradient(225deg, var(--blood) 0 calc(var(--cut) * .72), transparent 0) no-repeat,
    radial-gradient(70% 70% at 100% 0%, rgba(93, 114, 144, .14), transparent 70%),
    radial-gradient(100% 80% at 0% 110%, rgba(93, 114, 144, .42), transparent 62%),
    linear-gradient(180deg, rgba(218, 219, 227, .03), transparent 40%), var(--panel-solid); }
.pcard { --h: 193 !important; border-color: rgba(218, 219, 227, .08); box-shadow: none; }
.pcard:hover { border-color: var(--line-hi); transform: translateY(-3px); }
.pcard::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 100%), rgba(123, 148, 174, .2), transparent 60%); }
.pcard__no { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--muted); -webkit-text-stroke: 0; }
.pcard__no::before { content: '[ '; color: var(--blood); } .pcard__no::after { content: ' ]'; color: var(--blood); }
.pcard:hover .pcard__no { color: var(--ink); }
.pcard__desc { text-transform: uppercase; font: 600 11px/1.5 var(--f-mono); letter-spacing: .12em; color: var(--muted); }
.pcard__go { border-radius: 0 !important; clip-path: var(--chamfer); --cut: 8px; background: transparent; border-color: rgba(218, 219, 227, .18); }
.pcard:hover .pcard__go { background: var(--blood); color: #fff; transform: none; }
.tile::before, .prod::before { opacity: .8; }

.btn { border-radius: 0 !important; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font: 700 13px/1 var(--f-display); text-transform: uppercase; letter-spacing: .12em; padding: 16px 26px; }
.btn--fire { background: var(--fire); background-size: 180% 100%; color: #fff; box-shadow: none; }
.btn--fire:hover { filter: brightness(1.15); }
.nav__links a.is-active, .seg.is-active { background: var(--blood) !important; color: #fff !important; }
.chip, .online-pill, .pcard__chip, .drop-pill { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }

.hero__claim .fire, .hero__claim em, .hero__claim b { background: none !important; -webkit-text-fill-color: var(--ember) !important; color: var(--ember) !important; }

.pa-wheel__disc { border-color: #252628; box-shadow: 0 0 50px -10px rgba(93, 114, 144, .8), inset 0 0 0 3px #0c0909;
  background: conic-gradient(#5d7290 0 45deg, #121010 0 90deg, #dadbe3 0 135deg, #1b1716 0 180deg, #495e78 0 225deg, #121010 0 270deg, #c8d9e4 0 315deg, #1b1716 0); }
.pa-plus b { border-radius: 0 !important; background: #0c0909; color: var(--ink); border: 2px solid var(--blood); box-shadow: 0 0 0 6px #0c0909, 0 0 0 7px rgba(179, 18, 27, .5), 0 20px 50px -14px rgba(179, 18, 27, .7);
  font: 700 54px/1 var(--f-display); transform: rotate(-8deg); -webkit-mask: var(--grit) 0 0 / 200px; mask: var(--grit) 0 0 / 200px; }
.pb-plus { background: repeating-linear-gradient(45deg, rgba(218, 219, 227, .04) 0 1px, transparent 1px 18px), repeating-linear-gradient(-45deg, rgba(218, 219, 227, .04) 0 1px, transparent 1px 18px); }
.pb-plus i { background: linear-gradient(90deg, transparent, rgba(176, 196, 210, .14), transparent); }
.pa-cal__sheet { background: var(--ink); } .pa-cal__mon { background: var(--blood) !important; color: #fff !important; }

.dock { background: rgba(10, 8, 8, .86); border-color: rgba(218, 219, 227, .1); }
.nav__links { background: rgba(10, 8, 8, .6); }
.prod { --h: 193 !important; } .prod:nth-child(2n) { --h: 193 !important; }

.selo__frame { position: relative; height: min(78vh, 780px); min-height: 520px; margin-top: clamp(20px, 3vw, 40px); background: radial-gradient(90% 70% at 50% 30%, #111b21, #070404 70%); border: 1px solid var(--line); clip-path: var(--chamfer); overflow: hidden; user-select: none; -webkit-user-select: none; }
.selo__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(225deg, var(--blood) 0 calc(var(--cut) * .72), transparent 0) no-repeat; }
.selo__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.selo__frame canvas:active { cursor: grabbing; }
.selo__tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.selo__load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; font: 600 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); background: radial-gradient(90% 70% at 50% 30%, #111b21, #070404 70%); transition: opacity .8s; z-index: 4; }
.selo__load .selo-meter { width: 180px; }
#seloLoadTxt { max-width: min(460px, calc(100vw - 48px)); padding: 0 24px; line-height: 1.6; text-align: center; }
.selo__load:has(.selo-retry) .selo-meter { display: none; }
.selo__frame.is-ready .selo__load { opacity: 0; pointer-events: none; }

.selo__hud { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(10px, 1.6vw, 18px); gap: 10px; }
.selo__hud > * { pointer-events: none; }
.selo__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.selo__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.selo-panel { background: rgba(10, 6, 6, .72); border: 1px solid var(--line); --cut: 10px; clip-path: var(--chamfer); padding: 10px 14px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); min-width: 0; }
.selo-k { margin: 0; font: 700 10px/1.2 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--blood); }
.selo-k::before { content: '[ '; } .selo-k::after { content: ' ]'; }
.selo-age { width: min(230px, 46vw); }
.selo-age b, .selo-mine b { display: block; font: 700 clamp(18px, 2vw, 24px)/1.05 var(--f-display); text-transform: uppercase; color: var(--ink); margin-top: 3px; }
.selo-age small, .selo-mine small { display: block; font: 500 11px/1.35 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.selo-meter { height: 5px; background: rgba(221, 223, 231, .1); margin: 8px 0 6px; overflow: hidden; }
.selo-meter i { display: block; height: 100%; width: 0; background: var(--fire); transition: width .6s var(--ease); }
.selo-mine { text-align: right; }
.selo-res { display: block; font: 600 13px/1.4 var(--f-mono); color: var(--ink); margin: 4px 0 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.selo-top { width: 210px; display: flex; flex-direction: column; gap: 3px; font: 500 12px/1.35 var(--f-body); }
.selo-top div { display: flex; justify-content: space-between; gap: 8px; }
.selo-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.selo-top em { font: 600 10px/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-style: normal; white-space: nowrap; }
.selo-ev { background: var(--blood); color: #fff; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; --cut: 8px; clip-path: var(--chamfer); animation: seloPulse 1.6s ease-in-out infinite; }
@keyframes seloPulse { 50% { background: #44556c; } }
.selo-feed { align-self: center; margin: 0; padding: 8px 16px; font: 700 clamp(12px, 1.3vw, 15px)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); background: rgba(10, 6, 6, .72); border-left: 3px solid var(--blood); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); max-width: 90%; text-align: center; }
.selo-feed.is-in { opacity: 1; transform: none; }

.selo__bottom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.selo__bottom > * { pointer-events: auto; }
.selo-cam { display: flex; background: rgba(10, 6, 6, .72); border: 1px solid var(--line); }
.selo-cam button { border: 0; background: none; color: var(--muted); font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; padding: 10px 12px; cursor: pointer; }
.selo-cam button[aria-pressed="true"] { background: var(--blood); color: #fff; }
.selo-acts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.selo-acts::-webkit-scrollbar { display: none; }
.selo-acts button { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 66px; padding: 9px 8px 8px; background: rgba(10, 6, 6, .78); border: 1px solid var(--line); color: var(--ink); cursor: pointer; --cut: 8px; clip-path: var(--chamfer); transition: background .2s, border-color .2s, transform .1s; }
.selo-acts button span { font-size: 19px; line-height: 1; filter: grayscale(.35) contrast(1.1); }
.selo-acts button b { font: 700 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.selo-acts button:hover { border-color: var(--line-hi); background: rgba(52, 66, 83, .85); }
.selo-acts button:active { transform: scale(.96); }
.selo-acts button.is-main { background: var(--blood); border-color: var(--blood); }
.selo-acts button.is-main:hover { background: var(--ember); }
.selo-say { display: flex; gap: 6px; flex: 1 1 220px; max-width: 360px; }
.selo-say input { flex: 1; min-width: 0; font: 500 14px/1 var(--f-body); color: var(--ink); background: rgba(10, 6, 6, .8); border: 1px solid var(--line); padding: 11px 12px; }
.selo-say input:focus-visible { outline: 2px solid var(--ember); outline-offset: 0; }
.selo-gate { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; background: rgba(10, 6, 6, .85); border: 1px solid var(--line-hi); --cut: 10px; clip-path: var(--chamfer); }
.selo-gate b { display: block; font: 700 18px/1.1 var(--f-display); text-transform: uppercase; }
.selo-gate span { font-size: 13px; color: var(--muted); }
.selo-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; background: rgba(14, 27, 30, .82); border: 1px dashed var(--blood); }
.selo-admin button { font: 700 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line-hi); padding: 8px 10px; cursor: pointer; }
.selo-admin button:hover { background: var(--blood); }
.selo-acts button:focus-visible, .selo-cam button:focus-visible, .selo-admin button:focus-visible, .selo-pop button:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }

.selo-pl { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; will-change: transform; transition: opacity .3s; }
.selo-pl__nm { font: 700 9.5px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink); background: rgba(8, 5, 5, .72); padding: 3px 6px; white-space: nowrap; border-left: 2px solid rgba(221, 223, 231, .3); }
.selo-pl.is-me .selo-pl__nm { background: var(--blood); color: #fff; border-color: #fff; }
.selo-pl.is-npc .selo-pl__nm { color: var(--muted); border-color: transparent; font-style: italic; }
.selo-pl__bub { position: relative; max-width: 170px; font: 600 12px/1.25 var(--f-body); color: #0b0e10; background: var(--ink); padding: 6px 10px; text-align: center; overflow-wrap: anywhere; --cut: 6px; clip-path: var(--chamfer); }
.selo-pl__bub.is-pop { animation: seloBub .25s var(--ease) both; }
@keyframes seloBub { from { transform: scale(.6); opacity: 0; } }
.selo-float { position: absolute; left: 0; top: 0; font: 800 14px/1 var(--f-mono); color: #ffffff; text-shadow: 0 0 10px rgba(227, 237, 245, .8), 0 2px 4px #000; pointer-events: none; white-space: nowrap; }
.selo-pop { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 8px; background: rgba(10, 6, 6, .92); border: 1px solid var(--line-hi); z-index: 3; white-space: nowrap; }
.selo-pop b { font: 700 13px/1 var(--f-display); text-transform: uppercase; padding: 0 6px; }
.selo-pop button { font: 700 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--blood); border: 0; padding: 9px 10px; cursor: pointer; }
.selo-pop button[disabled] { background: rgba(221, 223, 231, .12); color: var(--muted); cursor: default; }
.selo-pop button[data-pop="close"] { background: none; color: var(--muted); }

.selo__left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.selo-online { font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: rgba(10, 6, 6, .72); padding: 6px 9px; border-left: 2px solid var(--blood); }
.selo-online::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #e5eff5; box-shadow: 0 0 8px #e5eff5; vertical-align: 0; }
.selo-room { position: absolute; top: clamp(10px, 1.6vw, 18px); left: 50%; transform: translateX(-50%); max-width: calc(100% - 520px); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: rgba(10, 6, 6, .82); border: 1px solid var(--line-hi); --cut: 10px; clip-path: var(--chamfer); pointer-events: auto !important; }
.selo-room[hidden] { display: none; }
.selo-room b { font: 400 clamp(18px, 2.2vw, 26px)/1 var(--f-blood); color: #f8fbfc; text-shadow: 0 0 16px rgba(218, 233, 241, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.selo-card, .selo-shop { position: absolute; left: 50%; bottom: clamp(84px, 11vw, 104px); transform: translateX(-50%); width: min(440px, calc(100% - 20px)); z-index: 3; background: rgba(10, 6, 6, .94); border: 1px solid var(--line-hi); --cut: 12px; clip-path: var(--chamfer); padding: 14px 16px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: seloCardIn .25s var(--ease) both; }
.selo-card[hidden], .selo-shop[hidden] { display: none; }
@keyframes seloCardIn { from { transform: translate(-50%, 12px); } }
.selo-card__head b { display: block; font: 400 clamp(22px, 2.6vw, 30px)/1 var(--f-blood); color: var(--ink); }
.selo-card__head small { display: block; margin-top: 6px; font: 600 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.selo-card__body p { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.selo-card__row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.selo-card__row button, .selo-shop__tabs button, .selo-shop__head .is-x { font: 700 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line-hi); padding: 10px 12px; cursor: pointer; }
.selo-card__row button:hover:not([disabled]), .selo-shop__tabs button:hover { background: rgba(74, 98, 126, .6); }
.selo-card__row button.is-main { background: var(--blood); border-color: var(--blood); color: #fff; }
.selo-card__row button.is-main:hover { background: var(--ember); }
.selo-card__row button[disabled] { color: var(--muted); cursor: default; }
.selo-card__row .is-x, .selo-shop__head .is-x { margin-left: auto; border-color: transparent; color: var(--muted); }
.selo-swatch { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.selo-swatch button { width: 26px; height: 26px; border: 2px solid rgba(221, 223, 231, .2); cursor: pointer; padding: 0; }
.selo-swatch button.is-on { border-color: #fff; box-shadow: 0 0 0 2px var(--blood); }
.selo-shop { width: min(560px, calc(100% - 20px)); }
.selo-shop__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.selo-shop__head small { font: 600 11px/1 var(--f-mono); color: var(--amber); letter-spacing: .06em; }
.selo-shop__tabs { display: flex; }
.selo-shop__tabs button + button { border-left: 0; }
.selo-shop__tabs button.is-on { background: var(--blood); border-color: var(--blood); color: #fff; }
.selo-shop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-top: 12px; max-height: min(42vh, 300px); overflow-y: auto; overscroll-behavior: contain; }
.selo-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 10px; background: rgba(221, 223, 231, .04); border: 1px solid var(--line); color: var(--ink); cursor: pointer; --cut: 7px; clip-path: var(--chamfer); }
.selo-item b { font: 700 12px/1.2 var(--f-body); }
.selo-item span { font: 700 11px/1 var(--f-mono); color: var(--amber); }
.selo-item:hover:not([disabled]) { border-color: var(--blood); background: rgba(74, 98, 126, .35); }
.selo-item[disabled] { opacity: .45; cursor: default; }
.selo-item.is-owned { border-color: var(--blood); opacity: 1; }
.selo-item.is-owned span { color: #f8fbfc; }
.selo-card button:focus-visible, .selo-shop button:focus-visible, .selo-room button:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.selo-pl.is-king .selo-pl__nm { font: 400 15px/1 var(--f-blood); letter-spacing: .02em; color: #ecf3f8; background: rgba(7, 13, 15, .85); border-left-color: var(--blood); text-shadow: 0 0 10px rgba(218, 233, 241, .7); padding: 4px 8px; }

.selo__how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(24px, 3vw, 44px); }
.selo__how > div { border-top: 1px solid var(--line); padding-top: 14px; }
.selo__how p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.selo__how .selo-no { margin: 0; font: 700 11px/1 var(--f-mono); letter-spacing: .2em; color: var(--blood); }
@media (max-width: 900px) { .selo__how { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .selo__frame { height: 74vh; min-height: 460px; }
  .selo__how { grid-template-columns: 1fr; }
  .selo-top { display: none !important; }
  .selo-age { width: 150px; padding: 8px 10px; }
  .selo-mine { padding: 8px 10px; }
  .selo-res { font-size: 12px; }
  .selo-say { max-width: none; }
  .selo-card, .selo-shop { bottom: 128px; padding: 12px; }
  .selo-shop__grid { grid-template-columns: 1fr 1fr; max-height: 36vh; }
  .selo-room { top: auto; bottom: 150px; max-width: calc(100% - 20px); padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) { .selo-ev, .selo-card, .selo-shop { animation: none; } .selo-feed, .selo__load { transition: none; } }
.selo__godot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #070606; }
.selo__frame.is-godot canvas, .selo__frame.is-godot .selo__tags, .selo__frame.is-godot .selo__hud, .selo__frame.is-godot .selo-card, .selo__frame.is-godot .selo-shop { display: none !important; }


.emblem__live { position: absolute; left: 21%; top: 23%; width: 58%; height: 58%; border-radius: 50%; overflow: hidden; opacity: 0; transition: opacity 1.4s var(--ease);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 80%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 80%, transparent 100%); }
.emblem__live.is-on { opacity: 1; }
.emblem__video { position: absolute; left: 50%; top: 50%; width: 155%; height: 87%; transform: translate(-50%, -50%); object-fit: cover; background: #000; }
.emblem__live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 34px 14px rgba(7, 12, 17, .9); pointer-events: none; }

.trailer__head, .trailer__frame { max-width: 1200px; margin-left: auto; margin-right: auto; }
.trailer__head { margin-bottom: clamp(20px, 3vw, 36px); }
.trailer__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; border: 1px solid var(--line);
  box-shadow: 0 50px 120px -50px rgba(215, 229, 241, .45), 0 0 0 1px rgba(223, 234, 245, .08); }
.trailer__frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(11, 8, 7, .55) 100%); transition: opacity .5s; }
.trailer__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.trailer__play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px 16px 20px; border: 0; border-radius: 999px;
  background: var(--fire); color: #fff; font: 700 15px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 10px rgba(223, 234, 245, .16), 0 20px 50px rgba(0, 0, 0, .55); transition: transform .35s var(--ease), opacity .4s; }
.trailer__play svg { width: 20px; height: 20px; }
.trailer__play:hover { transform: translate(-50%, -50%) scale(1.05); }
.trailer__sound { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: rgba(14, 16, 18, .5); border: 1px solid rgba(231, 236, 246, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .3s, transform .3s; cursor: pointer; }
.trailer__sound:hover { background: rgba(199, 218, 228, .6); transform: scale(1.06); }
.trailer__sound svg { width: 20px; height: 20px; }
.trailer.is-sound .trailer__play { opacity: 0; pointer-events: none; }
.trailer.is-sound .trailer__sound { background: var(--fire); border-color: transparent; }
.trailer.is-sound .trailer__frame::after { opacity: 0; }
.trailer__play:focus-visible, .trailer__sound:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
@media (max-width: 640px) { .trailer__play { padding: 12px 18px 12px 14px; font-size: 13px; } }

:root { --f-display: 'Geist', system-ui, sans-serif; --f-serif: 'Playfair Display', Georgia, serif; --f-mono: 'Geist Mono', ui-monospace, monospace; --r: 22px; --r-sm: 14px; }
body { font-family: 'Geist', var(--f-body); letter-spacing: -.005em; }

.title { font-family: var(--f-display) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -.055em !important;
  font-size: clamp(44px, 7.4vw, 118px) !important; line-height: .94 !important; -webkit-mask: none !important; mask: none !important; }
.title .char { background: linear-gradient(180deg, #fff 10%, #e4e7ee 45%, #9c9ea4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.title .word.is-accent { font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: -.03em; padding-right: .06em; margin-left: .12em; }
.title .word.is-accent .char { background: linear-gradient(100deg, #ffffff 0%, #e3edf5 35%, #c7dbe4 60%, #ffffff 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  animation: accentFlow 6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.12s); filter: drop-shadow(0 0 26px rgba(227, 237, 245, .35)); }
@keyframes accentFlow { to { background-position: 100% 0; } }
.lead { color: #9ea0a5; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; letter-spacing: -.01em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 7px 14px 7px 11px; border-radius: 99px; font: 500 12px/1 var(--f-display); letter-spacing: .02em; text-transform: none; color: #e1e4eb;
  background: linear-gradient(rgba(13, 15, 17, .6), rgba(13, 15, 17, .6)) padding-box, linear-gradient(120deg, rgba(233, 241, 248, .7), rgba(255, 255, 255, .12) 40%, rgba(233, 241, 248, .4)) border-box; border: 1px solid transparent; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.eyebrow::before { width: 7px; height: 7px; border-radius: 50%; transform: none; background: var(--flame); box-shadow: 0 0 0 0 rgba(227, 237, 245, .6); animation: livePulse 2s infinite; }

.pcard, .tile, .prod, .tier, .pack, .kpi, .drop, .ev, .vod, .modal__box, .sgate__card { clip-path: none !important; }
.tile, .ev, .vod, .prod, .tier, .drop, .kpi, .earn__item, .pcard { border-radius: var(--r) !important; }
.tile, .ev, .earn__item { background: linear-gradient(180deg, rgba(235, 239, 248, .045), rgba(235, 239, 248, .015)) !important; border: 1px solid rgba(231, 236, 246, .08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.tile::after, .ev::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(236, 242, 249, .9), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tile:hover::after, .ev:hover::after { opacity: 1; }
.tile__title { font: 600 15px/1.2 var(--f-display) !important; text-transform: none !important; letter-spacing: -.01em !important; color: #e9ebf1; }
.match, .msg, .opt, .item, .board li, .day-cell, .field input, .chat__form input, .games__form input, .seg, .chip, .online-pill, .ember-chip, .lang, .lang__btn, .icon-btn, .nav__links a, .dock, .dock__it, .toast, .redeem, .game { border-radius: var(--r-sm) !important; }
.nav__links { border-radius: 99px !important; padding: 5px !important; background: rgba(14, 10, 9, .55) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nav__links a { border-radius: 99px !important; font: 500 14px/1 var(--f-display); letter-spacing: -.01em; }
.chip, .online-pill, .pcard__chip, .drop-pill { font-family: var(--f-display) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500; }

.btn { clip-path: none !important; border-radius: 99px !important; font: 600 14px/1 var(--f-display) !important; text-transform: none !important; letter-spacing: -.005em !important; padding: 15px 26px !important; }
.btn--fire { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 12px 40px -12px rgba(220, 233, 242, .9) !important; }
.btn::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); animation: btnShine 4.5s ease-in-out infinite; }
@keyframes btnShine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.nav__join, .dock__me--join { clip-path: none !important; border-radius: 99px !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--f-display) !important; }

.title { word-spacing: .14em; }
.quick-play { border-radius: 18px !important; text-transform: none !important; letter-spacing: -.01em !important; font-family: var(--f-display) !important; font-weight: 600 !important; }
.quick-play small { font-family: var(--f-display) !important; text-transform: none; letter-spacing: 0; opacity: .85; }

.pcard__name { font-family: var(--f-display) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -.045em !important; line-height: .95 !important;
  -webkit-mask: none !important; mask: none !important; font-size: clamp(30px, 3.4vw, 54px) !important; overflow-wrap: anywhere; hyphens: auto;
  background: linear-gradient(180deg, #fff 15%, #a7a9af); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcard--hub .pcard__name, .pcard--wide .pcard__name { font-size: clamp(48px, 6.6vw, 104px) !important; }
.pcard__no { font-family: var(--f-mono) !important; letter-spacing: .08em !important; }
.pcard__desc { text-transform: none !important; font: 400 14px/1.5 var(--f-display) !important; letter-spacing: 0 !important; }
.pcard__go { clip-path: none !important; border-radius: 99px !important; }
@media (max-width: 700px) {
  .pcard__name { font-size: clamp(20px, 6.4vw, 30px) !important; letter-spacing: -.035em !important; }
  .pcard--hub .pcard__name, .pcard--wide .pcard__name { font-size: clamp(38px, 11vw, 54px) !important; }
}


.nav__plusm { display: none; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 10px; border-radius: 99px; font: 600 13px/1 var(--f-display); color: #fff; white-space: nowrap;
  background: linear-gradient(rgba(14, 19, 24, .7), rgba(14, 19, 24, .7)) padding-box, linear-gradient(120deg, #ffffff, #e3edf5, #5d7290) border-box; border: 1px solid transparent; box-shadow: 0 0 22px -6px rgba(227, 237, 245, .8); }
.nav__plusm svg { width: 15px; height: 15px; color: #ffffff; }
@media (max-width: 1180px) { .nav__plusm { display: inline-flex; } }

.tier__name { font-family: var(--f-display) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -.04em !important; }
.tier__price b { font-family: var(--f-display) !important; font-weight: 600; letter-spacing: -.04em; }
.tier__mo { margin: -6px 0 4px; font-size: 12px; }

body.selo-full { overflow: hidden; }
body.selo-full .selo__frame.is-godot { position: fixed; inset: 0; z-index: 250; width: 100vw; height: 100vh; height: 100dvh; min-height: 0; margin: 0; border: 0; border-radius: 0 !important; clip-path: none !important; background: #070606; }
body.selo-full .selo__frame.is-godot::after { display: none; }
body.selo-full .selo__frame.is-godot .selo__godot { position: relative; inset: auto; width: 100%; height: 100%; border: 0; }
body.selo-full .selo__frame.is-godot { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
body.selo-full .embers, body.selo-full .grain { display: none; }
.selo-retry { font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-fire); background: var(--ember); border-radius: 99px; padding: 12px 18px; cursor: pointer; }
body.selo-full .quick-play, body.selo-full .dock, body.selo-full .nav, body.selo-full .cursor, body.selo-full .next-page, body.selo-full .footer { display: none !important; }
.selo__close { display: none; }
body.selo-full .selo__close { display: grid; place-items: center; position: absolute; z-index: 5; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(231, 236, 246, .18); background: rgba(10, 7, 6, .55); color: #e7e8ef; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; }
.selo__close svg { width: 16px; height: 16px; }
@media (pointer: coarse) { body.selo-full .selo__frame.is-play .selo__godot ~ .selo__close { display: none; } }
.selo__note { position: absolute; z-index: 5; left: 50%; top: calc(50px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); width: max-content; max-width: min(440px, calc(100% - 32px)); padding: 9px 14px; border-radius: 14px; border: 1px solid rgba(231, 236, 246, .18); background: rgba(10, 7, 6, .78); color: #e7e8ef; font: 500 13px/1.35 var(--f-body), system-ui, sans-serif; text-align: center; pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.hero__claim { font-family: var(--f-display) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -.045em !important; line-height: .98 !important;
  -webkit-mask: none !important; mask: none !important; font-size: clamp(36px, 4.4vw, 70px) !important; color: #eaecf2; }
html[lang="en"] .hero__claim { font-size: clamp(34px, 4vw, 64px) !important; }
.hero__claim em { font-family: var(--f-serif); font-style: italic !important; font-weight: 500; letter-spacing: -.02em; background: linear-gradient(100deg, #ffffff, #e3edf5 45%, #c7dbe4) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; padding-right: .06em; }
.hero__free { margin: 10px 0 0; font: 500 13px/1.3 var(--f-display); color: var(--muted); }
.trailer__lead { margin: 6px 0 16px; max-width: 62ch; }
.trailer__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.trailer__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; font: 500 13px/1 var(--f-display); color: #e0e3ea;
  background: rgba(235, 239, 248, .05); border: 1px solid rgba(231, 236, 246, .1); }
.trailer__facts svg { width: 15px; height: 15px; color: var(--flame); fill: currentColor; }
.pcard__no::before, .pcard__no::after { content: none !important; }
.pcard__no { color: rgba(231, 236, 246, .45) !important; font-size: 12px !important; }
@media (max-width: 760px) {
  .hero__stage { padding-top: 76px !important; }
  .emblem { width: min(64vw, 330px) !important; }
  .hero__bottom { padding-top: 12px !important; gap: 14px !important; }
  .hero__claim { font-size: clamp(34px, 9.6vw, 44px) !important; }
}

@media (pointer: coarse) {
  .lang__btn { min-width: 40px; min-height: 36px; }
  .footer a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; }
}

@media (max-width: 760px) {
  .portal__grid { grid-template-areas: "hub hub" "arena stream" "events bestof" "merch merch" "plus plus"; }
  .pcard--plus { min-height: 200px; }
}

.mono, .match__date, .kpi b { font-family: var(--f-mono) !important; }
@media (prefers-reduced-motion: reduce) { .title .word.is-accent .char, .btn::after { animation: none; } }

.pb-hub { -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 22%, #000 58%); mask-image: linear-gradient(to top, transparent 0, transparent 22%, #000 58%); }

.nav__links a { transition: color .25s, background .25s, text-shadow .25s, box-shadow .25s; }
.nav__links a:hover:not(.is-active) { color: #fff; text-shadow: 0 0 10px rgba(249, 251, 253, .85), 0 0 22px rgba(220, 233, 242, .45); box-shadow: inset 0 0 0 1px rgba(249, 251, 253, .35), 0 0 18px rgba(220, 233, 242, .18); }
@media (prefers-reduced-motion: reduce) { .nav__links a { transition: none; } }

.nav__brand, .nav__brand img, .nav__right > *, .ember-chip svg { flex: none; }
.nav__links a, .ember-chip { white-space: nowrap; }
@media (min-width: 1181px) and (max-width: 1300px) { .online-pill { display: none; } .nav__links a { padding: 10px 11px; } }
@media (max-width: 700px) { .nav__plusm { min-width: 36px; padding: 0 10px; justify-content: center; } .nav__plusm > span { display: none; } }
.nav__plusm.is-active { background: linear-gradient(120deg, #e7eff7, #c7dae4) padding-box, linear-gradient(120deg, #ffffff, #e3edf5, #5d7290) border-box; }
.nav__plusm.is-active svg { color: #fff; }

body:has(.quick-play:not([hidden])) .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 1180px) {
  body:has(.quick-play:not([hidden])) .footer { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
  body:has(.quick-play:not([hidden])) .toasts { bottom: calc(152px + env(safe-area-inset-bottom, 0px)); }
}

:root { --pad-l: max(var(--pad), env(safe-area-inset-left, 0px)); --pad-r: max(var(--pad), env(safe-area-inset-right, 0px)); }
.nav { padding-left: var(--pad-l); padding-right: var(--pad-r); }
.section, .footer, .next-page, .hero__bottom { padding-left: var(--pad-l); padding-right: var(--pad-r); }
.toasts, .next-page__go { right: var(--pad-r); }

@media (max-width: 760px) {
  body.hero-in .quick-play { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); padding: 13px; border-radius: 50% !important; }
  body.hero-in .quick-play span { display: none; }
}

.sx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sx-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sx-fi { width: 20px; height: 20px; flex: none; fill: currentColor; }

.nav__studio { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 11px; border-radius: 99px; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(223, 234, 245, .14)); border: 1px solid rgba(255, 255, 255, .45); color: var(--amber); font: 600 13px/1 var(--f-display); white-space: nowrap; }
.nav__studio svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav__studio:hover { border-color: var(--amber); background: rgba(255, 255, 255, .22); }
@media (max-width: 760px) {
  .nav__studio { width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center; border-radius: 50% !important; }
  .nav__studio span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 420px) {
  .nav { gap: 10px; }
  .nav__right { gap: 4px; }
  .ember-chip { padding: 8px 8px 8px 6px; gap: 4px; }
}
@media (max-width: 420px) and (pointer: coarse) { .nav .lang__btn { min-width: 36px; } }
@media (max-width: 400px) {
  .nav { --pad-l: max(12px, env(safe-area-inset-left, 0px)); --pad-r: max(12px, env(safe-area-inset-right, 0px)); }
  .nav .lang { padding: 2px; }
  .nav__me .av { width: 36px; height: 36px; }
  .ember-chip { font-size: 12px; }
}
@media (max-width: 359px) {
  .nav { gap: 8px; }
  .ember-chip { padding: 8px 6px 8px 5px; }
}
@media (max-width: 351px) { body.is-admin .nav__plusm { display: none; } }
@media (max-width: 319px) {
  .nav { --pad-l: max(8px, env(safe-area-inset-left, 0px)); --pad-r: max(8px, env(safe-area-inset-right, 0px)); gap: 6px; }
  .nav__right { gap: 2px; }
}

body[data-route="studio"] .dock, body[data-route="studio"] .quick-play, body[data-route="studio"] .next-page { display: none !important; }
body.studio-in .nav, body.studio-in .footer { display: none !important; }
.studio.section { padding-bottom: 40px; }
body.studio-in .studio.section { padding: 0; min-height: 100vh; min-height: 100svh; }
.studio { --sx-r: 18px; --sx-red: #ffffff; --sx-green: #6fe8a2; color: var(--ink); }

.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(231, 236, 246, .06); color: var(--ink); font: 650 15px/1.15 var(--f-display); text-align: center; text-decoration: none; transition: background .2s, border-color .2s, transform .1s; cursor: pointer; }
.sx-btn:hover { background: rgba(231, 236, 246, .1); }
.sx-btn:active { transform: scale(.985); }
.sx-btn--fire { position: relative; overflow: hidden; border: 0; color: #070d13; background: linear-gradient(100deg, #c7dae4 0%, #dfeaf5 38%, #f0f3fa 78%, #ffffff 100%); box-shadow: 0 12px 36px -14px rgba(220, 233, 242, .9); }
.sx-btn--fire:hover { background: linear-gradient(100deg, #d8e5ec 0%, #e7eff7 38%, #ffffff 78%, #ffffff 100%); }
.sx-btn--big { width: 100%; min-height: 56px; border-radius: 16px; font-size: 17px; }
.sx-btn--sm { min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.sx-btn--block { width: 100%; }
.sx-btn--danger { background: transparent; border-color: rgba(255, 255, 255, .5); color: var(--sx-red); }
.sx-btn--danger:hover { background: rgba(255, 255, 255, .1); }
.sx-btn--ok { background: rgba(75, 224, 138, .12); border-color: rgba(75, 224, 138, .45); color: var(--sx-green); }
.sx-btn--ghost { background: transparent; }
.sx-btn[disabled], .sx-btn.is-off { opacity: .45; pointer-events: none; }
.sx-btn--fire.is-idle { background: rgba(231, 236, 246, .08); color: var(--muted); box-shadow: none; }
.sx-btn--fire.is-idle:hover { background: rgba(231, 236, 246, .12); }
.sx-btn .sx-i { width: 18px; height: 18px; }
.sx-btn__prog { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, .28); transition: width .25s; pointer-events: none; }
.sx-btn > span { position: relative; }
.sx-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--amber); font: 600 15px/1.2 var(--f-display); text-decoration: none; cursor: pointer; }
.sx-link .sx-i { width: 16px; height: 16px; }
.sx-link--dim { color: var(--muted); }

.sx-gate { min-height: calc(100vh - 220px); min-height: calc(100svh - 220px); display: grid; place-items: center; padding: 4px 0 30px; }
.sx-gate__card { width: min(460px, 100%); padding: 26px 20px; border-radius: 26px; background: #0f1013; border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 50px 140px -40px rgba(223, 234, 245, .45); display: flex; flex-direction: column; gap: 14px; }
.sx-gate__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #dfeaf5, #f0f3fa); color: #070d13; }
.sx-gate__ic .sx-i { width: 26px; height: 26px; stroke-width: 2.2; }
.sx-gate__roles { align-self: stretch; }
.sx-gate__title { margin: 4px 0 0; font: 700 30px/1.05 var(--f-display); letter-spacing: -.03em; }
.sx-gate__lead { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.sx-gate__draft { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .3); color: var(--amber); font-size: 14px; line-height: 1.45; }
.sx-gate__form { display: flex; flex-direction: column; gap: 14px; margin-top: 2px; }
.sx-gate__err { padding: 12px 14px; border-radius: 14px; background: rgba(241, 246, 250, .1); border: 1px solid rgba(255, 255, 255, .45); color: #ffffff; font-size: 15px; line-height: 1.4; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sx-gate__msg { padding: 14px; border-radius: 14px; border: 1px dashed var(--line-hi); color: var(--muted); font-size: 15px; line-height: 1.45; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sx-gate__msg p { margin: 0; }
.sx-gate__demo { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px dashed rgba(255, 255, 255, .4); }
.sx-gate__demo p { margin: 0; color: var(--amber); font: 600 14px/1.3 var(--f-display); }
.sx-gate__demo p.sx-f__ex { color: var(--dim); font: 500 13px/1.4 var(--f-body); text-transform: none; letter-spacing: 0; }
.sx-gate__help { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.5; }
.sx-gate__help b { color: var(--muted); }
.sx-gate__back { align-self: center; }
.sx-pw { position: relative; display: block; }
.sx-pw .sx-in { padding-right: 56px; }
.sx-pw__eye { position: absolute; right: 5px; top: 5px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); }
.sx-pw__eye[aria-pressed="true"] { color: var(--amber); }
.sx-mod { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--ember); color: var(--on-fire); font: 700 10px/1.5 var(--f-mono); letter-spacing: .06em; vertical-align: 1px; }

.sx-top { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 6px; height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0 8px; background: rgba(11, 8, 7, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.sx-top__site { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 2px; border-radius: 12px; color: var(--muted); font: 500 15px/1 var(--f-display); }
.sx-top__site:hover { color: var(--ink); }
.sx-top__brand { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 6px; font: 700 17px/1 var(--f-display); letter-spacing: -.01em; }
.sx-top__brand .sx-i { color: var(--amber); }
.sx-top__right { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; }
.sx-langs { flex: none; }
.sx-langs .lang__btn { min-width: 38px; min-height: 34px; font-size: 11px; }
.sx-av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #dfeaf5, #f0f3fa); color: #070d13 !important; font: 800 16px/1 var(--f-display) !important; }
.sx-av.is-helper { background: linear-gradient(135deg, #5b6cff, #9f7bff); color: #fff !important; }
.sx-menu { position: absolute; right: 0; top: 52px; z-index: 90; width: 260px; padding: 8px; border-radius: 18px; background: #14161a; border: 1px solid var(--line-hi); box-shadow: 0 30px 60px -20px #000; }
.sx-menu p { margin: 0; padding: 8px 10px 10px; color: var(--muted); font-size: 13px; line-height: 1.4; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.sx-menu p b { display: block; color: var(--ink); font: 600 15px/1.3 var(--f-display); }
.sx-menu button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; font: 600 15px/1 var(--f-display); text-align: left; }
.sx-menu button:hover { background: rgba(231, 236, 246, .07); }
@media (max-width: 380px) { .sx-top__site span { display: none; } }

.sx { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.sx[data-view="home"] .sx-card { display: none; }
@media (max-width: 1023px) {
  .sx[data-view="card"] .sx-home { display: none; }
  .studio__panel.is-card .sx-top { display: none; }
}
@media (min-width: 1024px) {
  .sx { padding: 0 28px; }
  .sx[data-view="home"] .sx-home { max-width: 1120px; margin: 0 auto; }
  .sx[data-view="card"] { display: grid; grid-template-columns: 380px minmax(0, 1fr); max-width: none; padding: 0; }
  .sx[data-view="card"] .sx-home { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; padding: 16px 16px 30px; border-right: 1px solid var(--line); scrollbar-width: thin; }
  .sx[data-view="card"] .sx-card { padding: 0 32px; min-width: 0; }
}

.sx-home { display: flex; flex-direction: column; gap: 14px; padding: 12px 0 44px; min-width: 0; }
.sx-home > * { flex-shrink: 0; }
.sx-mode { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .07); color: var(--amber); font-size: 14px; line-height: 1.35; }
.sx-hello { margin: 2px 0 0; font: 500 17px/1.3 var(--f-display); color: var(--muted); }
.sx-hello b { color: var(--ink); font-weight: 700; }
.sx-hello small { color: var(--dim); font-size: 14px; }
.sx-h { margin: 8px 0 0; font: 700 22px/1.15 var(--f-display); letter-spacing: -.02em; }
.sx-cap { margin: 10px 0 -4px; font: 600 12px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

.sx-live { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(235, 239, 248, .055), rgba(235, 239, 248, .015)); }
.sx-live.is-on { border-color: rgba(233, 242, 247, .6); box-shadow: 0 20px 60px -34px rgba(220, 233, 242, .9); }
.sx-live__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sx-live__top small { font: 500 12px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--dim); text-align: right; }
.sx-live__see { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 500 16px/1.35 var(--f-display); }
.sx-live__see > span:first-child { color: var(--muted); }
.sx-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 11px; border-radius: 99px; background: rgba(231, 236, 246, .09); color: #cacdd3; font: 700 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.sx-pill.is-live { background: #cddee7; color: var(--on-fire); }
.sx-pill.is-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--on-fire); animation: livePulse 1.8s infinite; }
.sx-live__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; color: var(--muted); font-size: 14px; line-height: 1.35; text-align: left; border-top: 1px solid var(--line); padding-top: 8px; }
.sx-live__row > span { flex: 1; min-width: 0; }
.sx-live__row .sx-i { width: 18px; height: 18px; }
.sx-live__warn { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .32); color: var(--amber); font-size: 14px; line-height: 1.4; }
.sx-live__warn p { margin: 0; }
.sx-live__btn.is-end { background: transparent; border: 1px solid rgba(255, 255, 255, .6); color: #ffffff; box-shadow: none; }
.sx-live__btn.is-end:hover { background: rgba(255, 255, 255, .1); }

.sx-todo { border-radius: 18px; border: 1px solid rgba(240, 243, 250, .42); background: rgba(226, 234, 246, .06); overflow: hidden; }
.sx-todo__h { margin: 0; padding: 12px 14px 8px; font: 600 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--flame); }
.sx-todo__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sx-todo__row > span { flex: 1; min-width: 0; font: 600 15px/1.3 var(--f-display); }
.sx-todo__row small { display: block; margin-top: 2px; color: var(--muted); font: 400 13px/1.3 var(--f-body); overflow: hidden; text-overflow: ellipsis; }
.sx-todo__row .sx-btn { flex: none; }
.sx-todo.is-soft { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); }
.sx-todo.is-soft .sx-todo__h { color: var(--amber, #ffffff); }
.sx-todo__row.is-soft > span { font-weight: 500; }
.sx-todo--done { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(75, 224, 138, .3); background: rgba(75, 224, 138, .05); color: var(--sx-green); font: 600 15px/1.2 var(--f-display); }

.sx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sx-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 116px; padding: 14px; border-radius: var(--sx-r); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(235, 239, 248, .065), rgba(235, 239, 248, .02)); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; min-width: 0; }
.sx-tile:hover { border-color: var(--line-hi); }
.sx-tile__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(226, 234, 246, .14); color: var(--flame); margin-bottom: auto; }
.sx-tile b { font: 700 16px/1.2 var(--f-display); letter-spacing: -.01em; margin-top: 10px; }
.sx-tile small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.sx-tile.is-hot { border-color: rgba(241, 246, 250, .6); background: linear-gradient(180deg, rgba(242, 247, 250, .12), rgba(235, 239, 248, .02)); }
.sx-tile.is-hot small { color: #ffffff; }
.sx-badge { position: absolute; top: 12px; right: 12px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: #d4e3ea; color: var(--on-fire); font: 700 13px/24px var(--f-display); text-align: center; }
.sx-tile[aria-current="page"], .sx-row[aria-current="page"] { background: rgba(226, 234, 246, .13); box-shadow: inset 3px 0 0 var(--ember); }
@media (min-width: 1024px) { .sx[data-view="home"] .sx-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sx-list { border-radius: var(--sx-r); border: 1px solid var(--line); background: rgba(235, 239, 248, .03); overflow: hidden; }
.sx-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 12px 10px 14px; border-top: 1px solid var(--line); text-align: left; cursor: pointer; }
.sx-row:first-child { border-top: 0; }
.sx-row:hover { background: rgba(231, 236, 246, .04); }
.sx-row__ic { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; background: rgba(231, 236, 246, .07); color: #cacdd3; }
.sx-row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sx-row__t b { font: 600 16px/1.25 var(--f-display); }
.sx-row__t small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.sx-row__t small.is-amber { color: var(--amber); }
.sx-row > .sx-i:last-child { color: var(--dim); width: 18px; height: 18px; }
.sx-row .sx-badge { position: static; }
.sx-row.is-dim .sx-row__ic, .sx-row.is-dim .sx-row__t b { opacity: .55; }
.sx-tag { flex: none; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, .14); color: var(--amber); font: 700 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.sx-tag--dim { background: rgba(231, 236, 246, .08); color: var(--muted); }
.sx-tag--red { background: rgba(241, 246, 250, .16); color: #ffffff; }
.sx-tag--green { background: rgba(75, 224, 138, .14); color: var(--sx-green); }
body.is-admin .nav__join { display: none; }
.sx-logout { margin-top: 6px; }

@media (min-width: 1024px) {
  .sx[data-view="card"] .sx-hello, .sx[data-view="card"] .sx-mode, .sx[data-view="card"] .sx-live__top small { display: none; }
  .sx[data-view="card"] .sx-live { padding: 14px; gap: 10px; }
  .sx[data-view="card"] .sx-tiles { grid-template-columns: 1fr; gap: 0; border-radius: var(--sx-r); border: 1px solid var(--line); overflow: hidden; }
  .sx[data-view="card"] .sx-tile { flex-direction: row; align-items: center; min-height: 52px; padding: 8px 12px 8px 14px; gap: 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
  .sx[data-view="card"] .sx-tile:first-child { border-top: 0; }
  .sx[data-view="card"] .sx-tile__ic { width: 32px; height: 32px; margin: 0; border-radius: 10px; }
  .sx[data-view="card"] .sx-tile__ic .sx-i { width: 18px; height: 18px; }
  .sx[data-view="card"] .sx-tile b { margin: 0; font-size: 15px; font-weight: 600; }
  .sx[data-view="card"] .sx-tile small, .sx[data-view="card"] .sx-row__t small { display: none; }
  .sx[data-view="card"] .sx-badge { position: static; margin-left: auto; }
  .sx[data-view="card"] .sx-row { min-height: 50px; }
  .sx[data-view="card"] .sx-row__ic { width: 32px; height: 32px; }
  .sx[data-view="card"] .sx-h { font-size: 13px; font: 600 12px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 10px 0 -4px; }
}

.sx-card { min-width: 0; }
.sx-card__in { display: flex; flex-direction: column; min-height: calc(100vh - 0px); min-height: 100svh; max-width: 640px; margin: 0 auto; }
.sx-card__top { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 6px; height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 4px 0; margin: 0 -16px; background: rgba(11, 8, 7, .93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.sx-back { justify-self: start; display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 12px 0 4px; border-radius: 12px; font: 500 16px/1 var(--f-display); }
.sx-card__title { margin: 0; max-width: 58vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font: 700 17px/1.2 var(--f-display); letter-spacing: -.01em; }
.sx-card__more { justify-self: end; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); }
.sx-card__more:hover { background: rgba(231, 236, 246, .06); color: var(--ink); }
.sx-card__body { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 18px 0 28px; min-width: 0; }
@media (min-width: 1024px) {
  .sx-card__in { min-height: calc(100vh - 60px); }
  .sx-card__top { top: 60px; margin: 0; padding: 0; height: 60px; background: rgba(11, 8, 7, .93); }
  .sx-card__title { max-width: 380px; font-size: 19px; }
}
.sx-sec { display: flex; flex-direction: column; gap: 12px; }
.sx-sec__h { margin: 4px 0 0; font: 700 19px/1.2 var(--f-display); letter-spacing: -.01em; }
.sx-sec__h small { color: var(--muted); font: 500 14px/1.3 var(--f-body); letter-spacing: 0; }
.sx-top-link { align-self: flex-start; margin: -6px 0 -8px; }
.sx-intro { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.sx-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sx-f__l { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 600 16px/1.25 var(--f-display); color: var(--ink); }
.sx-f__l small { color: var(--dim); font: 400 14px/1.2 var(--f-body); }
.sx-lang { font: 700 10px/1 var(--f-mono); font-style: normal; padding: 4px 6px; border-radius: 6px; background: rgba(231, 236, 246, .09); color: var(--muted); letter-spacing: .08em; }
.sx-in { display: block; width: 100%; min-width: 0; height: 54px; padding: 0 16px; border-radius: 14px; background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .15); color: var(--ink); font: 500 17px/1.3 var(--f-body); outline: none; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
textarea.sx-in { height: auto; min-height: 100px; padding: 14px 16px; resize: vertical; line-height: 1.45; }
.sx-in:focus { border-color: var(--flame); box-shadow: 0 0 0 3px rgba(240, 243, 250, .18); }
.sx-in.is-err { border-color: #ffffff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.sx-in::placeholder { color: #64676e; }
.sx-in[type="date"], .sx-in[type="time"], .sx-in[type="datetime-local"] { color-scheme: dark; }
.sx-in--num { max-width: 180px; }
.sx-in--sm { height: 48px; font-size: 16px; }
.sx-f__ex { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.4; }
.sx-f__err { margin: 0; color: var(--sx-red); font: 600 14px/1.35 var(--f-display); }
.sx-en { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-height: 32px; font-size: 14px; color: var(--muted); }
.sx-en > i { font: 700 10px/1 var(--f-mono); font-style: normal; padding: 4px 6px; border-radius: 6px; background: rgba(120, 170, 255, .14); color: #a9c4ff; letter-spacing: .08em; }
.sx-en b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.sx-en b.is-empty { color: var(--dim); font-weight: 400; }
.sx-en button { min-height: 32px; padding: 0 4px; color: var(--amber) !important; font-weight: 600; }
.sx-en__nudge { flex-basis: 100%; color: var(--amber); font-size: 13px; }
.sx-en__nudge.is-calm { color: var(--muted); }
.sx-en .sx-in { flex: 1 1 200px; height: 48px; font-size: 16px; }

.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(231, 236, 246, .04); font: 600 15px/1.1 var(--f-display); cursor: pointer; transition: background .15s, border-color .15s; }
.sx-chip:hover { border-color: rgba(255, 255, 255, .3); }
.sx-chip[aria-checked="true"], .sx-chip.is-on { border-color: var(--flame); background: rgba(226, 234, 246, .17); box-shadow: inset 0 0 0 1px rgba(240, 243, 250, .55); color: #fff; }
.sx-chip .sx-i { width: 18px; height: 18px; }
.sx-chip--wide { flex: 1 1 140px; }
.sx-seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .38); border: 1px solid var(--line); }
.sx-seg > button { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 8px; border-radius: 12px; font: 600 15px/1.1 var(--f-display); color: var(--muted); cursor: pointer; }
.sx-seg > button[aria-checked="true"], .sx-seg > button[aria-selected="true"] { background: #e8eaef; color: #0d0f11 !important; }

.sx-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; -webkit-mask: linear-gradient(90deg, #000 82%, transparent); mask: linear-gradient(90deg, #000 82%, transparent); }
.sx-days::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .sx-days { margin: 0; padding: 2px 0 4px; scroll-padding-inline: 0; } }
.sx-day { flex: none; width: 72px; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(231, 236, 246, .04); scroll-snap-align: start; cursor: pointer; }
.sx-day small { font: 700 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sx-day b { font: 700 21px/1 var(--f-display); }
.sx-day[aria-checked="true"] { border-color: var(--flame); background: rgba(226, 234, 246, .17); box-shadow: inset 0 0 0 1px rgba(240, 243, 250, .55); }
.sx-day[aria-checked="true"] small { color: var(--amber); }
.sx-day--other { width: auto; padding: 0 16px; flex-direction: row; font: 600 14px/1.1 var(--f-display); }
@media (hover: hover) and (pointer: fine) { .sx-days { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 4px; -webkit-mask: none; mask: none; } }
.sx-other { display: flex; gap: 8px; align-items: center; }

.sx-step { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .32); align-self: flex-start; }
.sx-step button { width: 50px; height: 46px; border-radius: 12px; font: 600 24px/1 var(--f-display); background: rgba(231, 236, 246, .07); cursor: pointer; }
.sx-step button:hover { background: rgba(231, 236, 246, .12); }
.sx-step output { min-width: 104px; padding: 0 6px; text-align: center; font: 700 18px/1.1 var(--f-display); }
.sx-sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 52px; text-align: left; font: 600 16px/1.3 var(--f-display); cursor: pointer; }
.sx-sw > span:first-child { flex: 1; min-width: 0; }
.sx-sw small { display: block; color: var(--muted); font: 400 13px/1.3 var(--f-body); }
.sx-sw__t { position: relative; flex: none; width: 54px; height: 32px; border-radius: 99px; background: rgba(231, 236, 246, .16); transition: background .2s; }
.sx-sw__t::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.sx-sw[aria-checked="true"] .sx-sw__t { background: #e7eff7; }
.sx-sw[aria-checked="true"] .sx-sw__t::after { transform: translateX(22px); }

.sx-more { border-top: 1px solid var(--line); }
.sx-more > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 54px; font: 600 16px/1.2 var(--f-display); color: var(--muted); cursor: pointer; }
.sx-more > summary::-webkit-details-marker { display: none; }
.sx-more > summary .sx-i { width: 18px; height: 18px; transition: transform .2s; }
.sx-more[open] > summary .sx-i { transform: rotate(90deg); }
.sx-more__in { display: flex; flex-direction: column; gap: 20px; padding: 4px 0 8px; }

.sx-sws { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sx-swatch { width: 48px; height: 48px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .18); cursor: pointer; background: var(--c, #333); }
.sx-swatch[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(240, 243, 250, .6); }
.sx-swatch--hue { background: radial-gradient(120% 90% at 30% 110%, hsl(var(--h) 100% 45%), #060809 75%); }
.sx-swatch--other { position: relative; overflow: hidden; display: grid; place-items: center; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.sx-swatch--other input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.sx-prev { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--sx-r); border: 1px dashed rgba(240, 243, 250, .5); background: rgba(226, 234, 246, .04); min-width: 0; }
.sx-prev__h { display: flex; align-items: center; gap: 8px; font: 600 12px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--flame); }
.sx-prev__h .sx-i { width: 16px; height: 16px; }
.sx-prev .matches, .sx-prev .ev { margin: 0; }
.sx-prev .match { pointer-events: none; }
.sx-prev .ev { pointer-events: none; }
.sx-pcard { padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sx-pcard small { font: 600 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sx-pcard b { font: 700 18px/1.25 var(--f-display); overflow-wrap: anywhere; }

.sx-bar { position: sticky; bottom: 0; z-index: 7; display: flex; flex-direction: column; gap: 8px; margin: 0 -16px; padding: 14px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(11, 8, 7, 0), rgba(11, 8, 7, .95) 24%); }
@media (min-width: 1024px) { .sx-bar { margin: 0; padding-left: 0; padding-right: 0; } }
.sx-bar__st { margin: 0; min-height: 20px; font: 600 14px/1.35 var(--f-display); color: var(--muted); }
.sx-bar__st.is-amber { color: var(--amber); }
.sx-bar__st.is-red { color: var(--sx-red); }
.sx-bar__st.is-green { color: var(--sx-green); }
.sx-bar__note { margin: 0; color: var(--muted); font-size: 13px; }

.sx-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sx-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(235, 239, 248, .035); text-align: left; cursor: pointer; min-width: 0; }
.sx-item:hover { border-color: var(--line-hi); }
.sx-item__th { width: 48px; height: 48px; flex: none; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 30% 110%, hsl(var(--h, 209) 100% 45%), #060809 75%); color: #fff; font: 700 13px/1 var(--f-display); }
.sx-item__th--v { width: 38px; height: 58px; border-radius: 10px; }
.sx-item__th--date { flex-direction: column; background: rgba(231, 236, 246, .07); color: var(--ink); gap: 2px; display: flex; justify-content: center; align-items: center; }
.sx-item__th--date small { font: 700 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--amber); }
.sx-item__th--date b { font: 700 17px/1 var(--f-display); }
.sx-item__th svg.part { width: 100%; height: 100%; }
.sx-item__th img { width: 100%; height: 100%; object-fit: cover; }
.sx-item__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-item__t b { font: 600 16px/1.25 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-item__t small { color: var(--muted); font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.sx-item__t .sx-wish { font: 500 16px/1.4 var(--f-body); white-space: normal; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; }
.sx-item > .sx-i:last-child { color: var(--dim); width: 18px; height: 18px; }
.sx-item.is-sort { cursor: default; }
.sx-mv { display: flex; gap: 6px; flex: none; }
.sx-mv button { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; background: rgba(231, 236, 246, .05); cursor: pointer; }
.sx-mv button[disabled] { opacity: .3; pointer-events: none; }
.sx-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; border-radius: 16px; border: 1px dashed var(--line-hi); color: var(--muted); font-size: 16px; text-align: center; }
.sx-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(231, 236, 246, .05); color: var(--muted); font-size: 14px; line-height: 1.45; }
.sx-note .sx-i { margin-top: 1px; width: 18px; height: 18px; }
.sx-note p { margin: 0; }
.sx-note.is-amber { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .32); color: var(--amber); }
.sx-note.is-green { background: rgba(75, 224, 138, .07); border: 1px solid rgba(75, 224, 138, .3); color: var(--sx-green); }
.sx-note.is-red { background: rgba(241, 246, 250, .08); border: 1px solid rgba(255, 255, 255, .4); color: #ffffff; }
.sx-del { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.sx-greyed { opacity: .45; pointer-events: none; filter: saturate(.4); }
.sx-row2 { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.sx-row2 > * { flex: 1 1 140px; min-width: 0; }
.sx-x { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.sx-x:hover { color: var(--sx-red); border-color: rgba(255, 255, 255, .5); }

.sx-done { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 0 6px; text-align: center; }
.sx-done__ring { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; border: 3px solid #4be08a; color: #4be08a; box-shadow: 0 0 44px -8px rgba(75, 224, 138, .65); animation: sxPop .45s var(--ease); }
.sx-done__ring .sx-i { width: 40px; height: 40px; stroke-width: 2.6; }
.sx-done h3 { margin: 0; font: 800 30px/1.05 var(--f-display); letter-spacing: -.02em; }
.sx-done > p { margin: 0; max-width: 36ch; color: var(--muted); font-size: 16px; line-height: 1.45; }
.sx-done > p b { color: var(--ink); }
.sx-done .sx-prev { align-self: stretch; text-align: left; }
.sx-done__btns { display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.sx-done__undo { color: var(--muted); font-size: 14px; }
.sx-done h3:focus { outline: none; }
.sx-done h3:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }

.sx-sheet { position: fixed; inset: 0; z-index: 220; display: flex; align-items: flex-end; justify-content: center; }
.sx-sheet__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sx-sheet__box { position: relative; width: min(520px, 100%); max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: #141619; border: 1px solid var(--line-hi); border-bottom: 0; animation: sxUp .28s var(--ease); }
.sx-sheet__box h3 { margin: 0; font: 700 21px/1.2 var(--f-display); letter-spacing: -.01em; }
.sx-sheet__box > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.45; }
.sx-sheet__box > p b { color: var(--ink); }
.sx-sheet__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
@media (min-width: 700px) { .sx-sheet { align-items: center; } .sx-sheet__box { border-radius: 24px; border-bottom: 1px solid var(--line-hi); } }
.sx-toast { position: fixed; left: 50%; top: calc(66px + env(safe-area-inset-top, 0px)); z-index: 230; transform: translateX(-50%); width: min(480px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; min-height: 56px; border-radius: 16px; background: #181b20; border: 1px solid var(--line-hi); box-shadow: 0 24px 60px -20px #000; font: 600 15px/1.3 var(--f-display); animation: sxDown .25s var(--ease); }
.sx-toast > span { flex: 1; min-width: 0; }
.sx-toast small { display: block; margin-top: 2px; color: var(--muted); font: 500 13px/1.3 var(--f-body); }
.sx-toast button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .15); color: var(--amber) !important; font: 700 14px/1 var(--f-display); cursor: pointer; }
.sx-toast.is-ok { border-color: rgba(75, 224, 138, .45); }
.sx-toast.is-err { border-color: rgba(255, 255, 255, .55); }
@keyframes sxUp { from { transform: translateY(40px); opacity: 0; } }
@keyframes sxDown { from { transform: translate(-50%, -14px); opacity: 0; } }
@keyframes sxPop { from { transform: scale(.6); opacity: 0; } }

.sx-kind { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 100px; padding: 14px; border-radius: var(--sx-r); border: 1px solid var(--line); background: rgba(235, 239, 248, .04); text-align: left; cursor: pointer; }
.sx-kind:hover { border-color: var(--line-hi); }
.sx-kind > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-kind b { font: 700 17px/1.2 var(--f-display); }
.sx-kind small { color: var(--muted); font-size: 14px; line-height: 1.35; }
.sx-pg { position: relative; flex: none; width: 78px; height: 68px; padding: 7px; border-radius: 10px; background: #0c0908; border: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 4px; }
.sx-pg::before { content: ''; position: absolute; left: 7px; right: 7px; top: 5px; height: 3px; border-radius: 2px; background: rgba(231, 236, 246, .14); }
.sx-pg i { display: block; border-radius: 4px; background: rgba(231, 236, 246, .1); }
.sx-pg i.is-hot { background: linear-gradient(135deg, #dfeaf5, #ffffff); box-shadow: 0 0 12px rgba(226, 234, 246, .8); animation: sxGlow 1.6s ease-in-out infinite alternate; }
.sx-pg--clips { grid-template-columns: repeat(4, 1fr); padding-top: 14px; }
.sx-pg--streams { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; padding-top: 14px; }
.sx-pg--streams i:first-child { grid-row: span 2; }
.sx-pg--tiktok { grid-template-columns: repeat(3, 1fr); padding-top: 14px; }
.sx-pg--big { width: 100%; height: 120px; padding: 12px; gap: 8px; }
.sx-pg--big::before { left: 12px; right: 12px; top: 8px; height: 4px; }
.sx-pg--big.sx-pg--clips, .sx-pg--big.sx-pg--streams, .sx-pg--big.sx-pg--tiktok { padding-top: 22px; }
@keyframes sxGlow { to { box-shadow: 0 0 22px rgba(226, 234, 246, 1); filter: brightness(1.15); } }
.sx-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 130px; padding: 18px; border-radius: var(--sx-r); border: 2px dashed rgba(240, 243, 250, .5); background: rgba(226, 234, 246, .05); color: var(--ink); text-align: center; cursor: pointer; font: 600 17px/1.3 var(--f-display); }
.sx-drop .sx-i { width: 30px; height: 30px; color: var(--flame); }
.sx-drop.is-over, .sx-drop:hover { background: rgba(226, 234, 246, .1); }
.sx-drop small { color: var(--muted); font: 400 14px/1.3 var(--f-body); }
.sx-file { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--sx-r); border: 1px solid var(--line); background: rgba(235, 239, 248, .04); }
.sx-file__frame { width: 64px; height: 84px; flex: none; border-radius: 10px; overflow: hidden; background: #000; }
.sx-file__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-file > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-file b { font: 600 15px/1.3 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-file small { color: var(--muted); font-size: 13px; }
.sx-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sx-tt { width: 100%; max-width: 325px; height: 575px; border: 0; border-radius: 14px; background: #000; align-self: center; }
.sx-clipmini { --h: 209; position: relative; width: 120px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 30% 110%, hsl(var(--h) 100% 45%), #060809 75%); display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; gap: 4px; border: 1px solid var(--line); }
.sx-clipmini--wide { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; }
.sx-clipmini small { font: 600 11px/1.2 var(--f-mono); color: rgba(255, 255, 255, .8); }
.sx-clipmini b { font: 700 14px/1.25 var(--f-display); color: #fff; overflow-wrap: anywhere; }

.sx-rows { display: flex; flex-direction: column; gap: 10px; }
.sx-rowf { display: flex; gap: 8px; align-items: flex-start; }
.sx-rowf > .sx-f { flex: 1; min-width: 0; }
.sx-rowf .sx-in--t { width: 112px; flex: none; }
.sx-rowf .sx-x { margin-top: 5px; }

.sx-ans { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: rgba(235, 239, 248, .03); }
.sx-ans.is-right { border-color: rgba(75, 224, 138, .5); background: rgba(75, 224, 138, .06); }
.sx-ans__mark { flex: none; width: 44px; height: 54px; display: grid; place-items: center; cursor: pointer; }
.sx-ans__mark i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); display: grid; place-items: center; }
.sx-ans.is-right .sx-ans__mark i { border-color: #4be08a; background: #4be08a; color: #08130c; }
.sx-ans__mark .sx-i { width: 16px; height: 16px; stroke-width: 3; }
.sx-ans > .sx-f { flex: 1; min-width: 0; }
.sx-ans__ok { color: var(--sx-green); font: 600 13px/1 var(--f-display); }

.sx-wheel { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sx-wheel svg { width: 150px; height: 150px; flex: none; }
.sx-wheel ul { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
.sx-wheel li { display: flex; align-items: center; gap: 8px; }
.sx-wheel li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sx-wheel li b { color: var(--ink); font-weight: 600; margin-left: auto; }
.sx-sector { display: flex; flex-direction: column; gap: 14px; padding: 8px 14px; border-radius: var(--sx-r); border: 1px solid var(--line); background: rgba(235, 239, 248, .03); }
.sx-sector__h { display: flex; align-items: center; gap: 10px; font: 700 16px/1.2 var(--f-display); }
.sx-sector__h i { width: 14px; height: 14px; border-radius: 4px; }
.sx-sector__h .sx-x { margin-left: auto; }
.sx-sector__tog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; text-align: left; cursor: pointer; }
.sx-sector__tog > i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.sx-sector__tog > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sx-sector__tog b { font: 700 16px/1.2 var(--f-display); }
.sx-sector__tog small { color: var(--muted); font: 400 13px/1.3 var(--f-body); }
.sx-sector__tog .sx-i { color: var(--dim); width: 18px; height: 18px; transition: transform .2s; }
.sx-sector__tog[aria-expanded="true"] .sx-i { transform: rotate(90deg); }

.sx-msg { display: flex; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(235, 239, 248, .03); }
.sx-msg__av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: rgba(231, 236, 246, .1); font: 700 14px/1 var(--f-display); }
.sx-msg__av img { width: 100%; height: 100%; object-fit: cover; }
.sx-msg__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sx-msg__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 600 14px/1.2 var(--f-display); }
.sx-msg__top small { color: var(--dim); font: 400 12px/1 var(--f-mono); }
.sx-msg__tx { margin: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.sx-msg__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-msg__acts .sx-btn { min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 11px; }
.sx-msg--gone { padding: 10px 14px; color: var(--dim); font-size: 14px; border-style: dashed; background: transparent; }

.sx-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: rgba(235, 239, 248, .03); font: 600 16px/1.2 var(--f-display); }
.sx-opt > i { position: absolute; inset: 0 auto 0 0; background: rgba(226, 234, 246, .2); }
.sx-opt > span { position: relative; }
.sx-opt small { color: var(--muted); font: 500 13px/1 var(--f-mono); }

.sx-price { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(235, 239, 248, .03); }
.sx-price.is-changed, .sx-day-row.is-changed { border-color: rgba(255, 255, 255, .6); box-shadow: inset 3px 0 0 var(--amber); }
.sx-price__top { display: flex; align-items: center; gap: 10px; }
.sx-price__top > b { flex: 1; min-width: 0; font: 600 16px/1.25 var(--f-display); }
.sx-price__ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(226, 234, 246, .13); color: var(--flame); }
.sx-price__ic svg { width: 18px; height: 18px; fill: currentColor; }
.sx-price__bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sx-price__bot .sx-sw { width: auto; min-height: 44px; font-size: 14px; gap: 10px; }
.sx-price.is-hidden > .sx-price__top > b { color: var(--dim); text-decoration: line-through; }

.sx-day-row { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--sx-r); border: 1px solid var(--line); background: rgba(235, 239, 248, .035); }
.sx-day-row.is-off { padding: 10px 14px; background: transparent; }
.sx-day-row__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sx-day-row__top > b { flex: 1 1 110px; font: 700 17px/1.2 var(--f-display); }
.sx-day-row .sx-seg { flex: 0 0 auto; }
.sx-day-row .sx-seg > button { min-height: 42px; padding: 0 12px; font-size: 14px; }
.sx-timebtn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .3); font: 700 17px/1 var(--f-display); cursor: pointer; align-self: flex-start; }
.sx-timebtn small { color: var(--muted); font: 500 13px/1 var(--f-body); }

.sx-art { display: grid; place-items: center; padding: 6px; border-radius: var(--sx-r); background: radial-gradient(70% 70% at 50% 40%, rgba(226, 234, 246, .16), transparent 70%), rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.sx-art svg.part, .sx-art img { width: min(220px, 70%); height: auto; aspect-ratio: 1; object-fit: contain; }
.sx-pict { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sx-pict button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(231, 236, 246, .03); font: 600 13px/1.1 var(--f-display); cursor: pointer; min-height: 46px; }
.sx-pict button svg.part { width: 58px; height: 58px; }
.sx-pict button[aria-checked="true"] { border-color: var(--flame); background: rgba(226, 234, 246, .15); box-shadow: inset 0 0 0 1px rgba(240, 243, 250, .55); }
.sx-drop-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--sx-r); border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }
.sx-drop-card > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-drop-card b { font: 700 16px/1.25 var(--f-display); }
.sx-drop-card small { color: var(--muted); font-size: 13px; }

.sx-copy { padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .4); border: 1px solid var(--line); font: 500 14px/1.6 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); margin: 0; }

.sx-mrow { display: flex; flex-direction: column; gap: 8px; }
.sx-mrow__top { display: flex; justify-content: space-between; gap: 10px; font: 600 15px/1.3 var(--f-display); }
.sx-mrow__top b { font: 700 16px/1.2 var(--f-mono); color: var(--amber); }
.sx-mrow__ctl { display: flex; align-items: center; gap: 8px; }
.sx-mrow__ctl input { flex: 1; min-width: 0; accent-color: var(--ember); height: 32px; }
.sx-mrow__ctl button { width: 46px; height: 46px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: rgba(231, 236, 246, .06); font: 600 22px/1 var(--f-display); cursor: pointer; }
.sx-total { padding: 18px; border-radius: var(--sx-r); background: radial-gradient(100% 100% at 100% 0%, rgba(240, 243, 250, .2), transparent 60%), rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .35); display: flex; flex-direction: column; gap: 6px; }
.sx-total b { font: 700 40px/1 var(--f-display); letter-spacing: -.03em; color: #ffffff; }
.sx-total small { color: var(--muted); font-size: 14px; }

.sx-soc { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--sx-r); border: 1px solid var(--line); background: rgba(235, 239, 248, .03); }
.sx-soc__top { display: flex; align-items: center; gap: 10px; }
.sx-soc__top > b { flex: 1; font: 600 16px/1.2 var(--f-display); }
.sx-soc__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(231, 236, 246, .08); }
.sx-soc__ic svg { width: 18px; height: 18px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .sx-sheet__box, .sx-toast, .sx-done__ring, .sx-pg i.is-hot, .sx-pill.is-live::before { animation: none !important; }
}
.sx-kind--radio[aria-checked="true"] { border-color: var(--flame); background: rgba(226, 234, 246, .12); box-shadow: inset 0 0 0 1px rgba(240, 243, 250, .5); }
.sx-kind--radio > .sx-i:last-child { color: var(--flame); }

.sx-card__right { justify-self: end; display: flex; align-items: center; gap: 2px; min-width: 0; }
.sx-card__lang { min-width: 44px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); font: 700 12px/1 var(--f-mono); letter-spacing: .06em; }
.sx-card__lang:hover { color: var(--ink); background: rgba(231, 236, 246, .06); }
@media (min-width: 1024px) { .sx-card__lang { display: none; } }
.sx-card__title:focus { outline: none; }
.sx-card__title:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }
.sx-pcard .sx-pcard__m { margin-top: 2px; color: var(--muted) !important; text-transform: none; letter-spacing: 0; font: 500 14px/1.35 var(--f-body); }
.sx-stale { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sx-stale li { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(231, 236, 246, .05); border: 1px solid var(--line); font-size: 15px; line-height: 1.35; }
.sx-stale s { color: var(--dim); }
.sx-stale b { color: var(--ink); font-weight: 600; }
.sx-stale b::before { content: '→ '; color: var(--amber); }
.sx-newbar { height: 44px; margin: -8px 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.sx-newbar > span { color: var(--dim); font-size: 13px; line-height: 1.3; }
.sx-newbar.is-on { position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 6; }
.sx-newbar .sx-btn { box-shadow: 0 12px 30px -10px #000; }
@media (min-width: 1024px) { .sx-newbar.is-on { top: 126px; } }
.sx-msg--gone { align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sx-msg--gone .sx-btn { min-height: 38px; }
.sx-mv--sm { gap: 4px; }
.sx-mv--sm button { width: 40px; height: 40px; border-radius: 11px; }
.sx-day-row .sx-seg > button { flex: 1 1 auto; padding: 0 14px; white-space: nowrap; }
@media (max-width: 1023px) { .sx-done { padding-top: 70px; } }

.gold-coin { width: 1em; height: 1em; flex: none; display: block; }
.gold-coin .gold-coin__o { fill: #d49a2a; stroke: #8a5a12; stroke-width: 1; }
.gold-coin .gold-coin__i { fill: #ffc65a; stroke: #fff1c2; stroke-opacity: .55; stroke-width: .8; }
.gold-coin .gold-coin__s { fill: #fff1c2; }
.gold-chip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 3px; width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid rgba(255, 198, 90, .38); background: linear-gradient(120deg, rgba(255, 198, 90, .15), rgba(138, 90, 18, .1) 60%, rgba(0, 0, 0, .25)); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.gold-chip:hover { border-color: #ffc65a; }
.gold-chip:active { transform: scale(.985); }
.gold-chip:focus-visible { outline: 2px solid #ffc65a; outline-offset: 2px; }
.gold-chip__coin { grid-row: 1 / 3; font-size: 34px; display: flex; filter: drop-shadow(0 4px 10px rgba(212, 154, 42, .45)); }
.gold-chip__t { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.gold-chip__t b { font: 700 22px/1 var(--f-mono); color: #ffe7a8; }
.gold-chip__t small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffc65a; }
.gold-chip__sub { grid-column: 2; font-size: 12px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gold-chip__sub.is-grace { white-space: normal; }
.gold-chip__plus { grid-column: 3; grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 20px/1 var(--f-mono); color: #1a1000; background: linear-gradient(160deg, #ffe7a8, #ffc65a 55%, #d49a2a); box-shadow: 0 6px 18px -6px rgba(212, 154, 42, .8); }
.msg__body .gold-title { display: inline-block; margin: 0 6px 0 2px; padding: 1px 7px; border-radius: 6px; font: 700 10px/1.5 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: #1a1000; background: linear-gradient(100deg, #ffe7a8, #ffc65a 60%, #d49a2a); vertical-align: 1px; }
.gold-modal .gold-sheet { gap: 14px; }
.gold-sheet__main, .gold-sheet__foot { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gold-sheet__foot:empty { display: none; }
.gold-sheet__have { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 12px 7px 9px; border-radius: 99px; border: 1px solid rgba(255, 198, 90, .4); background: rgba(255, 198, 90, .1); font: 700 14px/1 var(--f-mono); color: #ffe7a8; }
.gold-sheet__have .gold-coin { font-size: 18px; }
.gold-sheet__lead { margin: 0; font-size: 14px; line-height: 1.45; }
.gold-sheet__packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding-top: 8px; }
@media (min-width: 640px) { .gold-sheet__packs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gold-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 22px 10px 12px; border-radius: 16px; border: 1px solid rgba(255, 198, 90, .25); background: radial-gradient(120% 80% at 50% 0%, rgba(255, 198, 90, .16), rgba(0, 0, 0, .3) 70%); color: var(--ink); cursor: pointer; text-align: center; transition: transform .2s var(--ease), border-color .2s; }
.gold-pack:hover { transform: translateY(-2px); border-color: #ffc65a; }
.gold-pack:focus-visible { outline: 2px solid #ffc65a; outline-offset: 2px; }
.gold-pack.is-popular, .gold-pack.is-best { border-color: #ffc65a; box-shadow: 0 0 0 1px rgba(255, 198, 90, .5), 0 18px 40px -20px rgba(212, 154, 42, .7); }
.gold-pack__tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; padding: 3px 9px; border-radius: 99px; font: 700 10px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #1a1000; background: linear-gradient(100deg, #ffe7a8, #ffc65a); }
.gold-pack.is-best .gold-pack__tag { background: linear-gradient(100deg, #fff1c2, #d49a2a); }
.gold-pack__coin { font-size: 34px; display: flex; margin-bottom: 2px; filter: drop-shadow(0 6px 12px rgba(212, 154, 42, .45)); }
.gold-pack__n { font: 800 24px/1 var(--f-mono); color: #ffe7a8; }
.gold-pack__c { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffc65a; }
.gold-pack__bonus { min-height: 18px; font: 700 11px/18px var(--f-mono); color: var(--ok); }
.gold-pack__extra { display: flex; flex-direction: column; gap: 1px; max-width: 100%; margin-top: 2px; font: 600 11px/1.3 var(--f-body); color: #ffe7a8; }
.gold-pack__extra small { font: 700 9px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #ffc65a; }
.gold-pack__extra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gold-pack__price { margin-top: auto; padding-top: 2px; font: 700 15px/1.2 var(--f-display); color: var(--ink); }
.gold-pack__cta { margin-top: 6px; width: 100%; padding: 9px 6px; border-radius: 10px; font: 700 12px/1.1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: #1a1000; background: linear-gradient(160deg, #ffe7a8, #ffc65a 55%, #d49a2a); }
.gold-pack.is-soon .gold-pack__cta { color: var(--muted); background: rgba(255, 236, 222, .06); }
.gold-sheet__msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 198, 90, .1); border: 1px solid rgba(255, 198, 90, .3); color: #ffe7a8; font-size: 14px; line-height: 1.4; }
.gold-sheet__demo { margin: 0; font-size: 12px; line-height: 1.4; color: #ffc65a; }
.gold-sheet__note { margin: 0; font-size: 12px; line-height: 1.4; }
.gold-sheet__plus { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(255, 198, 90, .3); font-size: 13px; line-height: 1.4; color: var(--muted); }
.gold-sheet__plus b { color: #ffe7a8; font-weight: 700; white-space: nowrap; }
.tier__gold.gold-line { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(255, 198, 90, .45); background: linear-gradient(120deg, #1d160a, #120d06); box-shadow: inset 0 1px 0 rgba(255, 231, 168, .12); font-size: 13px; font-weight: 600; line-height: 1.3; color: #ffe7a8; text-align: left; }
.gold-line .gold-coin { font-size: 20px; }
.tier__excl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 8px 0 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: #ffe7a8; }
.tier__excl small { flex-basis: 100%; font: 700 10px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #ffc65a; }
@media (prefers-reduced-motion: reduce) { .gold-chip, .gold-pack { transition: none; } }

.selo-lock { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; background: radial-gradient(90% 70% at 50% 30%, #111b21, #070404 70%); }
.selo-lock__box { display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 460px; text-align: center; }
.selo-lock__box .eyebrow { margin: 0; }
.selo-lock__ic, .plus-ask__ic { width: 40px; height: 40px; color: var(--amber); }
.selo-lock__title { margin: 0; font: 700 clamp(22px, 3vw, 30px)/1.1 var(--f-display); text-transform: uppercase; }
.selo-lock__text { margin: 0; max-width: 42ch; color: var(--muted); font-size: 15px; line-height: 1.5; }
.selo-lock__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
@media (max-width: 480px) { .selo-lock__row { flex-direction: column; align-self: stretch; } }
.chat__lock--plus p { max-width: 30ch; }
.plus-ask__box { align-items: center; text-align: center; }
.plus-ask__box .eyebrow, .plus-ask__box .modal__title, .plus-ask__box p { margin: 0; }
.plus__req { max-width: 60ch; margin: 0 auto 22px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.tier__up { margin: 0; font-size: 13px; line-height: 1.4; }
.plus__req[hidden] { display: none; }
.plus__mine.is-over { border-color: var(--ember); }
.selo__frame.is-locked { height: auto; min-height: 0; }
.selo__frame.is-locked .selo-lock { position: relative; inset: auto; padding: 48px 24px; }
@media (max-width: 720px), (max-height: 560px) {
  .selo__frame.is-locked .selo-lock { place-items: start center; padding: 22px 16px 24px; }
  .selo__frame.is-locked .selo-lock__box { gap: 10px; }
  .selo__frame.is-locked .selo-lock__ic { width: 32px; height: 32px; }
}
.plus__mine.is-top { margin: 0 auto 18px; }
.gold-sheet__lock { display: grid; justify-items: start; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 198, 90, .35); background: rgba(255, 198, 90, .06); }
.gold-sheet__lock p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }

:root{--bg:#040b20;--bg-2:#06102e;--panel-solid:#071337;--ink:#eef1f6;--blood:#5d7290;--ember:#c7dbe4;--flame:#e3edf5;--amber:#f2f6fb;--on-fire:#0b1d4d;--fire:linear-gradient(100deg, #384456 0%, #5d7290 40%, #c7dbe4 75%, #e3edf5 100%);--line-hi:rgba(199, 219, 228, .7)}
body{background:radial-gradient(120% 60% at 50% -10%, #101930 0%, transparent 60%), var(--bg)}
::selection{background:var(--blood)}
.pod__nick.is-fire,.board__nick.is-fire,.item__demo.is-fire,.profile-in__nick.is-fire,.msg__nick.is-fire{background:linear-gradient(100deg, #657c9c 0%, #c7dbe4 45%, #e3edf5 100%);-webkit-background-clip:text;background-clip:text}

:root{--f-blood:'Geist', system-ui, sans-serif}
.nav__brand span, .loader__word, .footer__word, .ptx__name, .dai__q, .dai-stamp__txt{font-family:var(--f-blood) !important;font-weight:800;letter-spacing:-.02em}

.lang[hidden]{display:none !important}
html[lang="de"] .hero__claim { font-size: clamp(30px, 4vw, 64px) !important; }
.loader__word { font-size: clamp(18.0px, 4.20vmin, 33.6px); }
.footer__word { font-size: clamp(33.6px, 9.60vw, 174.0px); }

.trailer__still{display:block;width:100%;height:100%;object-fit:cover}
.selo__frame.is-soon canvas,.selo__frame.is-soon .selo__hud,.selo__frame.is-soon .selo__tags,.selo__frame.is-soon .selo__load{display:none !important}
.selo-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;z-index:3}
.selo-soon img{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--ember),0 0 40px -6px var(--ember)}
.selo-soon b{font-family:var(--f-blood);font-weight:400;font-size:clamp(30px,5vw,56px);line-height:1;color:var(--ink)}
.selo-soon span{color:var(--muted);font-size:16px;max-width:36ch}