/* NEO Universe · the projection room of NEO Studio final: warm obsidian, amber and copper light, poster headlines in Instrument Serif
   with an italic ending, mono slates, grain and viewfinder corners. Calm, grouped and compact; nothing said twice. */
:root {
  --bg: #0E0B09; --bg2: #16110D; --panel: #1C1611; --panel2: #241C15; --line: rgba(255, 226, 196, .1); --line2: rgba(255, 226, 196, .18);
  --ink: #F6EEE4; --soft: rgba(246, 238, 228, .66); --mute: rgba(246, 238, 228, .44);
  --amber: #FFB070; --copper: #E0732A; --rust: #C9544A; --teal: #5FB3BE; --green: #3FA06B;
  --serif: "Instrument Serif", Georgia, serif; --sans: Inter, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --r: 14px; --gut: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { /* the room stays dark on purpose: it is a screening room */ }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(1200px 700px at 78% -10%, rgba(224, 115, 42, .16), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(95, 179, 190, .07), transparent 60%); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .035; will-change: auto;
  background-image: 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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; }
img, video { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--panel); padding: 8px 12px; border-radius: 8px; }
.mono, .slate { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.slate { display: inline-flex; align-items: center; gap: 8px; }
.slate::before { content: ""; width: 18px; height: 1px; background: var(--amber); }
em { font-style: italic; }
main { position: relative; z-index: 1; min-height: 70vh; }

/* top bar */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; padding: 14px var(--gut);
  background: linear-gradient(var(--bg) 40%, rgba(14, 11, 9, .7)); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 22px/1 var(--serif); }
.brand em { color: var(--amber); }
.nav { display: flex; gap: 22px; margin-left: 12px; }
.nav a { text-decoration: none; color: var(--soft); font-size: 14px; } .nav a:hover, .nav a.on { color: var(--ink); }
.top-act { margin-left: auto; display: flex; gap: 10px; align-items: center; }
@media (max-width: 640px) { .nav { display: none; } .brand span { font-size: 19px; } }

/* buttons, fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  background: var(--copper); color: #1A0E05; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s; white-space: nowrap; }
.btn:hover { background: var(--amber); } .btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line2); } .btn.ghost:hover { background: rgba(255, 255, 255, .05); }
.btn.s { min-height: 32px; padding: 0 13px; font-size: 13px; } .btn.xl { min-height: 52px; padding: 0 26px; font-size: 15px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { background: none; border: 0; padding: 0; color: var(--amber); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
label.f { display: grid; gap: 6px; font-size: 13px; color: var(--soft); }
.in, textarea.in, select.in { width: 100%; background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; padding: 11px 13px; color: var(--ink); font-size: 15px; }
textarea.in { min-height: 120px; resize: vertical; line-height: 1.5; }
.in:focus { border-color: var(--amber); outline: none; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--soft); cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--copper); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .between { justify-content: space-between; } .grow { flex: 1; }
.stack { display: grid; gap: 14px; } .muted { color: var(--soft); } .small { font-size: 13px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }

/* poster type */
.poster { font: 400 clamp(40px, 6.4vw, 92px)/.98 var(--serif); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.poster em { color: var(--amber); }
.h2 { font: 400 clamp(32px, 4.2vw, 58px)/1.02 var(--serif); margin: 0; text-wrap: balance; } .h2 em { color: var(--amber); }
.h3 { font: 400 26px/1.1 var(--serif); margin: 0; }
.lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--soft); max-width: 58ch; margin: 0; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(36px, 7vw, 96px) var(--gut) clamp(40px, 6vw, 80px); max-width: 1320px; margin: 0 auto; }
.hero-copy { display: grid; gap: 22px; }
.hero-screen { position: relative; aspect-ratio: 4/3.4; border-radius: 22px; background: radial-gradient(70% 60% at 50% 40%, rgba(255, 176, 112, .22), transparent 70%), linear-gradient(180deg, #221810, #120d09);
  border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.hero-screen img.robot { width: 58%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); animation: float 6s ease-in-out infinite; position: relative; z-index: 2; }
.hero-screen .beam { position: absolute; top: -20%; left: 50%; width: 70%; height: 140%; transform: translateX(-50%); background: conic-gradient(from 180deg at 50% 0, transparent 160deg, rgba(255, 190, 130, .16) 180deg, transparent 200deg); }
.hero-screen .floor { position: absolute; bottom: 9%; left: 50%; width: 60%; height: 22px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .6), transparent 70%); }
.hero-screen .orbit { position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed rgba(255, 190, 130, .18); animation: spin 60s linear infinite; }
.hero-screen .orbit i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 18px var(--amber); }
.hero-screen figcaption { position: absolute; bottom: 14px; left: 18px; right: 18px; display: flex; justify-content: space-between; }
.vf { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255, 226, 196, .5); z-index: 3; }
.vf.tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; } .vf.tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.vf.bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; } .vf.br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
@keyframes float { 50% { transform: translateY(-12px); } } @keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; } .hero-screen { aspect-ratio: 4/3; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* sections */
.sec { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--line); position: relative; }
.sec-head { display: grid; gap: 14px; margin-bottom: 36px; max-width: 760px; }
.num { position: absolute; right: var(--gut); top: 28px; font: italic 400 clamp(64px, 10vw, 150px)/1 var(--serif); color: rgba(255, 176, 112, .09); pointer-events: none; }
.cycle { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; counter-reset: c; }
.cycle li { position: relative; padding: 18px 14px 0 0; border-top: 1px solid var(--line2); }
.cycle li::before { counter-increment: c; content: "0" counter(c); display: block; font: 500 11px var(--mono); color: var(--amber); margin-bottom: 8px; }
.cycle li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.cycle b { font: 400 22px/1.1 var(--serif); display: block; } .cycle span { font-size: 13px; color: var(--soft); }
@media (max-width: 900px) { .cycle { grid-template-columns: 1fr 1fr; gap: 22px 16px; } }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .three { grid-template-columns: 1fr; } }
.card { position: relative; background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.card .k { font: 500 11px var(--mono); color: var(--amber); letter-spacing: .14em; text-transform: uppercase; }
.card h3 { font: 400 26px/1.1 var(--serif); margin: 10px 0 8px; } .card p { margin: 0; color: var(--soft); font-size: 14px; }
.eco { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; }
.eco .arrow { align-self: center; color: var(--amber); font: 400 26px var(--serif); }
@media (max-width: 860px) { .eco { grid-template-columns: 1fr; } .eco .arrow { transform: rotate(90deg); justify-self: center; } }
.eco .card.hl { border-color: rgba(255, 176, 112, .45); box-shadow: 0 0 0 1px rgba(255, 176, 112, .15), 0 30px 60px -30px rgba(224, 115, 42, .45); }

/* discovery */
.disc-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.disc-bar .in { max-width: 360px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line2); background: transparent; border-radius: 999px; padding: 6px 13px; font-size: 13px; color: var(--soft); cursor: pointer; }
.chip.on, .chip:hover { color: #1A0E05; background: var(--amber); border-color: var(--amber); }
.chip small { opacity: .7; margin-left: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.pc { display: grid; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .2s, border-color .2s; }
.pc:hover { transform: translateY(-3px); border-color: var(--line2); }
.pc .cv { aspect-ratio: 16/10; background: linear-gradient(135deg, #2a1c12, #120d09); position: relative; overflow: hidden; }
.pc .cv img { width: 100%; height: 100%; object-fit: cover; }
.pc .cv .ph { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 46px var(--serif); color: rgba(255, 176, 112, .4); }
.pc .cv .tag { position: absolute; top: 10px; left: 10px; }
.pc .bd { padding: 14px 16px 16px; display: grid; gap: 6px; }
.pc h3 { margin: 0; font: 400 23px/1.1 var(--serif); } .pc p { margin: 0; font-size: 13px; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); }
.av { width: 26px; height: 26px; border-radius: 50%; background: var(--panel2) center/cover; flex: none; display: grid; place-items: center; font-size: 12px; color: var(--amber); border: 1px solid var(--line2); overflow: hidden; }
.av.l { width: 84px; height: 84px; font: 400 36px var(--serif); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(14, 11, 9, .72); border: 1px solid var(--line2); color: var(--ink); backdrop-filter: blur(6px); }
.pill.amber { color: var(--amber); border-color: rgba(255, 176, 112, .4); } .pill.green { color: #7FD3A0; border-color: rgba(63, 160, 107, .5); }
.pill.mute { color: var(--mute); }
.empty { border: 1px dashed var(--line2); border-radius: var(--r); padding: 40px 24px; text-align: center; display: grid; gap: 12px; justify-items: center; color: var(--soft); }
.empty img { width: 110px; opacity: .9; }

/* project page */
.pp-hero { position: relative; min-height: min(72vh, 680px); display: grid; align-items: end; overflow: hidden; border-bottom: 1px solid var(--line); }
.pp-hero .bgimg { position: absolute; inset: 0; background: center/cover; filter: saturate(1.05); }
.pp-hero .bgimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 11, 9, .15), rgba(14, 11, 9, .55) 55%, var(--bg)); }
.pp-hero .wrap { position: relative; padding-bottom: 44px; display: grid; gap: 16px; width: 100%; }
.pp-hero .poster { font-size: clamp(42px, 7vw, 104px); }
.pp-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); padding: 44px 0 80px; }
@media (max-width: 960px) { .pp-body { grid-template-columns: 1fr; } }
.story { font-size: 17px; line-height: 1.7; color: rgba(246, 238, 228, .86); white-space: pre-wrap; max-width: 68ch; }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 28px; }
.gal figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gal img, .gal video { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #000; }
.gal figcaption { padding: 8px 12px; font-size: 13px; color: var(--soft); }
.gal a.doc { display: grid; place-items: center; aspect-ratio: 16/10; text-decoration: none; font: 500 12px var(--mono); color: var(--amber); }
.side { display: grid; gap: 16px; align-content: start; position: sticky; top: 84px; }
.stages { display: flex; gap: 4px; } .stages i { flex: 1; height: 4px; border-radius: 4px; background: var(--line2); } .stages i.on { background: var(--amber); }
.offer { border: 1px solid rgba(255, 176, 112, .3); }
.price { font: 400 40px/1 var(--serif); } .price small { font: 500 12px var(--mono); color: var(--soft); margin-left: 6px; }
.terms { display: grid; gap: 6px; font-size: 13px; color: var(--soft); border-top: 1px solid var(--line); padding-top: 12px; }
.timeline { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; }
.timeline li { position: relative; padding: 0 0 22px 26px; border-left: 1px solid var(--line2); }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--amber); }
.timeline li.ms::before { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.timeline h4 { margin: 2px 0 4px; font: 400 21px/1.15 var(--serif); } .timeline p { margin: 0; color: var(--soft); font-size: 14px; white-space: pre-wrap; }
.preview-band { background: repeating-linear-gradient(-45deg, rgba(255, 176, 112, .12) 0 12px, transparent 12px 24px); border-bottom: 1px solid rgba(255, 176, 112, .3); padding: 10px var(--gut); font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* creator profile */
.cr-hero { position: relative; padding: 0 0 26px; border-bottom: 1px solid var(--line); }
.cr-cover { height: clamp(160px, 26vw, 300px); background: linear-gradient(135deg, #3a2312, #120d09) center/cover; position: relative; }
.cr-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--bg)); }
.cr-id { display: flex; gap: 20px; align-items: flex-end; margin-top: -48px; position: relative; flex-wrap: wrap; }

/* studio (the creator's private side) */
.studio { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; padding: 30px 0 80px; }
@media (max-width: 860px) { .studio { grid-template-columns: 1fr; } }
.side-nav { display: grid; gap: 4px; align-content: start; position: sticky; top: 84px; }
@media (max-width: 860px) { .side-nav { position: static; grid-auto-flow: column; overflow-x: auto; } }
.side-nav a { text-decoration: none; padding: 10px 14px; border-radius: 10px; color: var(--soft); font-size: 14px; white-space: nowrap; }
.side-nav a.on, .side-nav a:hover { background: var(--panel); color: var(--ink); }
.side-nav a.on { box-shadow: inset 2px 0 0 var(--amber); }
.list { display: grid; gap: 10px; }
.li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
.li .th { width: 96px; aspect-ratio: 16/10; border-radius: 8px; background: var(--panel2) center/cover; }
.li h3 { margin: 0 0 4px; font: 400 21px/1.1 var(--serif); }
@media (max-width: 560px) { .li { grid-template-columns: 64px minmax(0, 1fr); } .li .th { width: 64px; } .li > :last-child { grid-column: 1 / -1; } }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 14px; color: var(--soft); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--amber); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
.media-ed { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.media-ed .mi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: grid; }
.media-ed .mi .pv { aspect-ratio: 16/10; background: #000 center/cover; display: grid; place-items: center; font: 500 11px var(--mono); color: var(--amber); }
.media-ed .mi .ct { padding: 10px; display: grid; gap: 8px; font-size: 13px; }
.drop { border: 1px dashed var(--line2); border-radius: 12px; display: grid; place-items: center; padding: 26px; text-align: center; color: var(--soft); cursor: pointer; min-height: 140px; }
.drop:hover { border-color: var(--amber); color: var(--ink); }
.vis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 720px) { .vis { grid-template-columns: 1fr 1fr; } }
.vis label { border: 1px solid var(--line2); border-radius: 12px; padding: 14px; cursor: pointer; display: grid; gap: 4px; }
.vis label b { font: 400 20px var(--serif); } .vis label span { font-size: 12.5px; color: var(--soft); }
.vis input { position: absolute; opacity: 0; } .vis label:has(input:checked) { border-color: var(--amber); background: rgba(255, 176, 112, .07); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.table th { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.auth { max-width: 440px; margin: 0 auto; padding: clamp(40px, 8vw, 90px) var(--gut); display: grid; gap: 18px; }
.auth .robot { width: 120px; margin: 0 auto -6px; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 80; background: var(--panel2); border: 1px solid var(--line2);
  border-radius: 999px; padding: 10px 18px; font-size: 14px; transition: .25s; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translateX(-50%); } .toast.err { border-color: var(--rust); }
.foot { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 26px var(--gut); border-top: 1px solid var(--line); font: 400 18px var(--serif); }
.foot em { color: var(--amber); }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--amber); animation: spin 1s linear infinite; margin: 60px auto; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .7s; } .reveal.in { opacity: 1; transform: none; }

/* ===== v2 ===== */
.trailer { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); background: #000; margin-bottom: 30px; box-shadow: 0 40px 80px -40px rgba(224, 115, 42, .45); }
.trailer iframe, .trailer video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0; margin: 28px 0 0; border-top: 1px solid var(--line); }
.facts div { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 14px; white-space: pre-wrap; } .facts a { color: var(--ink); }
.premiere { border-color: rgba(255, 176, 112, .45); background: radial-gradient(120% 100% at 50% 0, rgba(224, 115, 42, .22), transparent 70%), var(--panel); }
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.cd span { display: grid; justify-items: center; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 10px; padding: 8px 2px; }
.cd b { font: 400 30px/1 var(--serif); color: var(--amber); } .cd small { font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
.creators { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.crc { display: grid; justify-items: center; gap: 8px; padding: 20px 12px; text-decoration: none; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s; }
.crc:hover { border-color: var(--line2); } .crc b { font: 400 20px/1.1 var(--serif); }
.bellw { position: relative; }
.bell { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.bell i { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--copper); color: #1A0E05; font: 600 10px/17px var(--sans); font-style: normal; padding: 0 4px; }
.bellp { position: absolute; right: 0; top: 46px; width: min(340px, calc(100vw - 32px)); max-height: 420px; overflow: auto; background: var(--panel2); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); z-index: 50; }
.bellp a { display: grid; gap: 4px; padding: 12px 14px; text-decoration: none; border-bottom: 1px solid var(--line); font-size: 14px; }
.bellp a.un { box-shadow: inset 3px 0 0 var(--amber); } .bellp a:hover { background: rgba(255, 255, 255, .03); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; } .kpi b { font: 400 34px/1 var(--serif); }
.funnel { display: grid; gap: 8px; margin-top: 12px; }
.funnel span { width: var(--w); min-width: max-content; padding: 9px 12px; border-radius: 8px; font-size: 13px; background: linear-gradient(90deg, rgba(224, 115, 42, .55), rgba(224, 115, 42, .18)); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin-top: 12px; }
.bars i { flex: 1; height: var(--h); min-height: 2px; background: linear-gradient(var(--amber), var(--copper)); border-radius: 3px 3px 0 0; }
.dlg { background: var(--panel2); color: var(--ink); border: 1px solid var(--line2); border-radius: 16px; padding: 22px; width: min(440px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.rail + .rail { border-top: 0; padding-top: 0; }

/* ===== v3 ===== */
.comments { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.comments li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.comments p { margin: 6px 0 0; color: rgba(246, 238, 228, .86); white-space: pre-wrap; }

/* ===== v4 ===== */
.ver { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); color: #08151a; font: 700 11px/1 var(--sans); margin-left: 6px; vertical-align: middle; }
.hero-acts { margin-top: 4px; } .like.on { color: var(--amber); border-color: rgba(255, 176, 112, .5); }
.ptabs { margin-top: 0; } .links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.links a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
.links a .mono { grid-column: 1; color: var(--mute); text-transform: none; letter-spacing: 0; } .links a:hover { border-color: var(--line2); }
.stats { display: flex; gap: 28px; margin-top: 18px; } .stats div { display: grid; } .stats b { font: 400 30px/1 var(--serif); } .stats span { font-size: 12.5px; color: var(--soft); }
.tabl { text-decoration: none; padding: 10px 14px; color: var(--soft); border-bottom: 2px solid transparent; white-space: nowrap; } .tabl.on { color: var(--ink); border-bottom-color: var(--amber); }
.comm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; } @media (max-width: 920px) { .comm-grid { grid-template-columns: 1fr; } }
.post { display: grid; gap: 8px; margin-bottom: 12px; } .post p { margin: 4px 0; color: rgba(246, 238, 228, .88); }
.pm { width: 100%; max-height: 520px; object-fit: cover; border-radius: 10px; background: #000; }
.note.un { box-shadow: inset 3px 0 0 var(--amber); }
.bellp a.all { text-align: center; color: var(--amber); font-size: 13px; border-bottom: 0; }
.wiz { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; } @media (max-width: 760px) { .wiz { grid-template-columns: 1fr; } }
.wsteps { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; align-content: start; }
.wsteps li { display: grid; grid-template-columns: 30px 1fr; gap: 0 10px; padding: 10px; border-radius: 10px; color: var(--mute); }
.wsteps i { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font: 500 12px var(--mono); font-style: normal; }
.wsteps b { font-weight: 600; font-size: 14px; } .wsteps span { font-size: 12px; }
.wsteps li.on { background: var(--panel); color: var(--ink); } .wsteps li.on i { background: var(--copper); color: #1A0E05; border-color: var(--copper); }
.wsteps li.done { color: var(--soft); } .wsteps li.done i { border-color: var(--amber); color: var(--amber); }
.checklist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: 14px; }

/* ===== v5: Explorar ===== */
.xhero { position: relative; min-height: min(78vh, 720px); display: grid; align-items: end; overflow: hidden; border-bottom: 1px solid var(--line); }
.xhero-bg, .nhero-bg { position: absolute; inset: 0; background: #120d09 center/cover; transform: scale(1.04); }
.xhero-bg::after, .nhero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 11, 9, .92) 0, rgba(14, 11, 9, .4) 60%, rgba(14, 11, 9, .15)), linear-gradient(180deg, transparent 50%, var(--bg)); }
.xhero-in { position: relative; display: grid; gap: 16px; padding-top: 80px; padding-bottom: 34px; width: 100%; } .xhero .poster { max-width: 14ch; }
.xhero-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; max-width: 760px; }
.xhero-more a { aspect-ratio: 16/10; border-radius: 10px; background: #1c1611 center/cover; border: 1px solid var(--line2); position: relative; overflow: hidden; text-decoration: none; }
.xhero-more a span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font: 400 15px/1.1 var(--serif); background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
@media (max-width: 640px) { .xhero-more { grid-template-columns: repeat(2, 1fr); } }
.xsearch { display: flex; gap: 10px; margin: 26px 0 18px; } .xsearch .in { flex: 1; min-height: 52px; font-size: 16px; border-radius: 999px; padding: 0 22px; }
.niches { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 26px; }
.niche { display: grid; gap: 4px; padding: 16px; border-radius: 14px; text-decoration: none; border: 1px solid var(--line); background: linear-gradient(135deg, var(--nc, rgba(224, 115, 42, .22)), var(--panel) 70%); transition: transform .2s, border-color .2s; }
.niche:hover { transform: translateY(-2px); border-color: var(--line2); } .niche b { font: 400 22px/1.1 var(--serif); } .niche span { font-size: 12.5px; color: var(--soft); }
.n-cine { --nc: rgba(224, 115, 42, .3); } .n-anime { --nc: rgba(192, 122, 168, .32); } .n-videojuegos { --nc: rgba(63, 160, 107, .32); } .n-musica { --nc: rgba(224, 90, 155, .28); }
.n-marca { --nc: rgba(255, 176, 112, .28); } .n-moda { --nc: rgba(201, 84, 74, .28); } .n-arte { --nc: rgba(217, 164, 65, .28); } .n-inmobiliaria { --nc: rgba(200, 167, 122, .26); } .n-tecnologia { --nc: rgba(79, 176, 255, .26); }
.xrail { margin-top: 34px; } .xrail-h { margin-bottom: 14px; }
.xscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 280px); gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.xscroll .pc { scroll-snap-align: start; }
.price-tag { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: var(--copper); color: #1A0E05; font: 600 12px var(--sans); }
.nhero { position: relative; min-height: 340px; display: grid; align-items: end; overflow: hidden; border-bottom: 1px solid var(--line); }
.nhero-in { position: relative; display: grid; gap: 10px; padding: 70px 0 30px; }
.xstrip { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.pill.demo { color: #08151a; background: var(--teal); border-color: var(--teal); }

/* ===== v6: watch · listen · play · read ===== */
.content-block { margin-bottom: 30px; }
.eps { display: grid; gap: 10px; margin-top: 14px; }
.ep { display: grid; grid-template-columns: 168px 1fr; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; }
.ep:hover { border-color: var(--line2); } .ep b { display: block; font: 400 19px/1.15 var(--serif); }
.ep-th { position: relative; aspect-ratio: 16/9; border-radius: 8px; background: #000 center/cover; display: grid; place-items: center; font-size: 22px; color: #fff; overflow: hidden; }
.ep-th.read { background: linear-gradient(135deg, #2a2016, #120d09); color: var(--amber); }
.ep-th i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--copper); }
.ep.locked { opacity: .72; } .ep.locked .ep-th { filter: grayscale(.4); }
@media (max-width: 560px) { .ep { grid-template-columns: 120px 1fr; } }
.tracks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 2px; }
.tracks li { display: grid; grid-template-columns: 36px 30px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; }
.tracks li:hover, .tracks li.now { background: var(--panel); } .tracks li.now b { color: var(--amber); }
.tracks button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.tracks li.locked { opacity: .65; }
.builds { display: grid; gap: 10px; margin-top: 14px; }
.build { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.build b { display: block; font: 400 20px var(--serif); } .build.locked { opacity: .8; }
.mbar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 70; width: min(980px, calc(100vw - 24px)); display: grid; grid-template-columns: 48px minmax(0, 1fr) auto minmax(80px, 1.2fr) auto auto; gap: 12px; align-items: center;
  padding: 8px 12px; border-radius: 16px; background: rgba(36, 28, 21, .94); backdrop-filter: blur(14px); border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.mbar[hidden] { display: none; } body.has-mbar main { padding-bottom: 90px; }
.mbar img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; } .mb-t { display: grid; min-width: 0; } .mb-t b, .mb-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-t span { font-size: 12px; color: var(--soft); } .mb-c { display: flex; gap: 4px; }
.mbar button { background: none; border: 0; color: var(--ink); font-size: 16px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; } .mbar button:hover { background: rgba(255, 255, 255, .06); }
.mbar .mb-main { background: var(--copper); color: #1A0E05; } .mbar input[type=range] { accent-color: var(--copper); width: 100%; }
@media (max-width: 640px) { .mbar { grid-template-columns: 40px 1fr auto auto; } .mbar input[type=range], #mb-time { display: none; } }
.watch .screen { position: relative; background: #000; } .watch video { width: 100%; max-height: 78vh; display: block; background: #000; }
.flyer { position: absolute; inset: 0 0 60px; pointer-events: none; overflow: hidden; }
.fm { position: absolute; right: -40%; white-space: nowrap; font: 600 18px var(--sans); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); animation: fly 7s linear forwards; }
.fm.mine { color: var(--amber); } @keyframes fly { to { right: 120%; } }
.watch-below { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; padding-top: 20px; padding-bottom: 60px; }
@media (max-width: 860px) { .watch-below { grid-template-columns: 1fr; } }
.watch-main { display: grid; gap: 12px; align-content: start; } .watch-list { display: grid; gap: 4px; align-content: start; }
.watch-list a { padding: 10px 12px; border-radius: 10px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); font-size: 14px; } .watch-list a.on { border-color: var(--amber); color: var(--amber); }
.reader { max-width: 900px; margin: 0 auto; } .reader-top { position: sticky; top: 64px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px var(--gut); background: rgba(14, 11, 9, .9); backdrop-filter: blur(8px); }
.pages { display: grid; gap: 4px; padding: 0 var(--gut); } .pages img { width: 100%; border-radius: 4px; } .pages iframe { width: 100%; height: 85vh; border: 0; border-radius: 8px; background: #fff; }
.playroom iframe { width: 100%; height: calc(100vh - 140px); border: 0; display: block; background: #000; }
.prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .5); } .prog i { display: block; height: 100%; background: var(--copper); }
.nav { gap: 18px; } @media (max-width: 1100px) { .nav { gap: 12px; font-size: 13px; } }

/* ===== v7: Universe's own way ===== */
.lifeline { list-style: none; display: flex; gap: 0; padding: 0; margin: 10px 0 0; max-width: 560px; }
.lifeline li { flex: 1; position: relative; display: grid; justify-items: start; gap: 6px; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.lifeline li i { width: 100%; height: 3px; border-radius: 3px; background: var(--line2); }
.lifeline li.done i { background: rgba(255, 176, 112, .55); } .lifeline li.now i { background: var(--amber); box-shadow: 0 0 10px var(--amber); } .lifeline li.now { color: var(--amber); }
.pc .lifeline { margin: 0 0 4px; } .pc .lifeline span { display: none; }
.u-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; } @media (max-width: 920px) { .u-grid { grid-template-columns: 1fr; } }
.rec-by { font-size: 12.5px; color: var(--amber); } .rec-by a { color: var(--amber); }
.nworlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.nworlds.small-w { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 10px; }
.nworld { position: relative; min-height: 190px; border-radius: 16px; overflow: hidden; display: grid; align-items: end; text-decoration: none; border: 1px solid var(--line); }
.small-w .nworld { min-height: 120px; }
.nw-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--nc, #3a2312), #120d09) center/cover; transition: transform .5s; }
.nw-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 11, 9, .1), rgba(14, 11, 9, .88)), linear-gradient(135deg, var(--nc, transparent), transparent 60%); }
.nworld:hover .nw-bg { transform: scale(1.05); }
.nw-in { position: relative; display: grid; gap: 4px; padding: 16px; } .nw-in b { font: 400 28px/1 var(--serif); } .small-w .nw-in b { font-size: 21px; } .nw-in > span { font-size: 13px; color: var(--soft); }
.calls { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .calls.row3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .calls.row3 { grid-template-columns: 1fr; } }
.call { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: var(--panel); border: 1px solid rgba(255, 176, 112, .22); }
.call h3 { margin: 0; font: 400 22px/1.1 var(--serif); } .call h3 a { text-decoration: none; } .call p { margin: 0; font-size: 14px; color: rgba(246, 238, 228, .82); }
.side .call { background: var(--panel); }

/* ===== v8: the room ===== */
.nav-live::before { content: "●"; color: #FF5A4E; margin-right: 6px; font-size: 10px; vertical-align: middle; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; } .evs.past { opacity: .7; }
.evc { display: grid; text-decoration: none; border-radius: 14px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.evc.live { border-color: rgba(255, 90, 78, .5); box-shadow: 0 20px 50px -30px rgba(255, 90, 78, .6); }
.evc-cv { aspect-ratio: 16/8; background: #120d09 center/cover; position: relative; }
.evc-bd { display: grid; gap: 6px; padding: 12px 14px 14px; } .evc-bd b { font: 400 22px/1.1 var(--serif); }
.onair { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: #E2463C; color: #fff; font: 700 11px var(--mono); letter-spacing: .1em; }
.onair.big { position: absolute; top: 16px; left: 16px; z-index: 3; }
.room { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: calc(100vh - 64px); }
@media (max-width: 960px) { .room { grid-template-columns: 1fr; } .room-side { height: 70vh; } }
.room-stage { position: relative; overflow: hidden; background: #050403; display: grid; place-items: center; }
.room-bg { position: absolute; inset: -20px; background: center/cover; filter: blur(30px) brightness(.35) saturate(1.2); }
.room-screen { position: relative; z-index: 2; width: 100%; height: 100%; display: grid; place-items: center; }
.room-screen video, .room-screen .lgame { width: 100%; max-height: calc(100vh - 64px); background: #000; border: 0; } .room-screen .lgame { height: calc(100vh - 64px); }
.pre { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 30px; max-width: 720px; }
.cd.big { grid-template-columns: repeat(4, minmax(80px, 1fr)); } .cd.big b { font-size: 54px; }
.room-side { display: grid; grid-template-rows: auto 1fr auto auto auto; border-left: 1px solid var(--line); background: var(--bg2); height: calc(100vh - 64px); position: sticky; top: 64px; }
.room-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.room-chat { list-style: none; margin: 0; padding: 12px 16px; overflow-y: auto; display: grid; gap: 8px; align-content: start; font-size: 14px; }
.room-chat b { color: var(--amber); font-weight: 600; margin-right: 4px; } .room-chat .m-host b { color: var(--teal); }
.room-chat .m-stage { background: rgba(255, 176, 112, .1); border: 1px solid rgba(255, 176, 112, .3); border-radius: 10px; padding: 8px 10px; }
.room-say { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); } .room-acts { padding: 0 12px 12px; }
.spot { position: absolute; z-index: 4; left: 50%; bottom: 8%; transform: translateX(-50%); width: min(560px, 90%); padding: 16px 20px; border-radius: 16px; text-align: center;
  background: rgba(36, 28, 21, .92); border: 1px solid rgba(255, 176, 112, .5); box-shadow: 0 0 60px rgba(255, 176, 112, .35); animation: rise .5s; }
.spot b { display: block; font: 400 26px var(--serif); color: var(--amber); } .spot p { margin: 4px 0 0; } @keyframes rise { from { transform: translate(-50%, 20px); opacity: 0; } }
.claps { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.claps span { position: absolute; bottom: 0; font-size: 30px; animation: up 2.4s ease-out forwards; } @keyframes up { to { transform: translateY(-70vh) scale(1.4); opacity: 0; } }
.evbanner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-radius: 999px; text-decoration: none; justify-self: start;
  background: rgba(14, 11, 9, .7); border: 1px solid rgba(255, 176, 112, .45); font: 500 12px var(--mono); letter-spacing: .08em; color: var(--amber); backdrop-filter: blur(6px); }
.evbanner.live { border-color: #E2463C; color: #FF8A80; } .evbanner b { font: 400 18px var(--serif); color: var(--ink); letter-spacing: 0; } .evbanner span { color: var(--soft); }
.poll .opt { position: relative; display: flex; justify-content: space-between; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line2); background: transparent; color: var(--ink); cursor: pointer; overflow: hidden; text-align: left; }
.poll .opt span { position: absolute; inset: 0 auto 0 0; background: rgba(224, 115, 42, .25); } .poll .opt b, .poll .opt i { position: relative; font-style: normal; } .poll .opt.on { border-color: var(--amber); }
.ideas { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.ideas li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; } .ideas li p { margin: 2px 0 0; font-size: 14px; color: rgba(246, 238, 228, .86); }
.ideas li.chosen { background: rgba(63, 160, 107, .08); border-radius: 10px; padding: 8px; }
.vote { border: 1px solid var(--line2); background: transparent; color: var(--ink); border-radius: 10px; padding: 6px 10px; cursor: pointer; font: 600 13px var(--sans); } .vote.on { border-color: var(--amber); color: var(--amber); }

/* ===== v9: the shared moment ===== */
.gmoment { position: sticky; top: 64px; z-index: 39; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 9px var(--gut); text-decoration: none;
  background: linear-gradient(90deg, rgba(226, 70, 60, .22), rgba(224, 115, 42, .18) 40%, rgba(14, 11, 9, .9)); border-bottom: 1px solid rgba(255, 138, 128, .35); backdrop-filter: blur(8px); }
.gmoment .onair { position: static; } .gmoment b { font: 400 19px var(--serif); } .gmoment span { font-size: 13px; color: var(--soft); }
.gmoment em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--amber); } .gmoment .mono { color: #FF8A80; font-size: 12px; }

/* ===== v10: groups and watching together ===== */
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gcard { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; }
.gcard:hover { border-color: var(--line2); } .g-cv { position: relative; width: 76px; height: 76px; border-radius: 12px; background: linear-gradient(135deg, #3a2312, #120d09) center/cover; }
.g-cv .onair { font-size: 9px; top: auto; bottom: 4px; left: 4px; padding: 2px 6px; } .g-bd { display: grid; gap: 3px; } .g-bd b { font: 400 21px/1.1 var(--serif); }
.ghero { position: relative; min-height: 300px; display: grid; align-items: end; overflow: hidden; border-bottom: 1px solid var(--line); }
.gchat-wrap { display: grid; grid-template-rows: 1fr auto; height: min(70vh, 680px); background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.gchat { list-style: none; margin: 0; padding: 14px; overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.gm { max-width: 78%; padding: 8px 12px; border-radius: 14px; background: var(--panel); display: grid; gap: 2px; } .gm.mine { justify-self: end; background: rgba(224, 115, 42, .16); }
.gm b { font-size: 13px; color: var(--amber); } .gm p { margin: 0; white-space: pre-wrap; } .gm .mono { font-size: 10px; justify-self: end; }
.gm.k-join, .gm.k-room { background: none; max-width: none; justify-self: center; }
.gshare { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .25); text-decoration: none; font: 400 17px var(--serif); }
.gshare span { width: 56px; height: 36px; border-radius: 6px; background: center/cover; }
.tap { position: absolute; z-index: 5; } .together { justify-self: start; margin: -4px 0 4px 8px; }
.tracks li { grid-template-columns: 36px 30px 1fr auto auto auto; }

/* ===== v11: worlds — each niche wraps you in its own atmosphere (color, light, texture, type). Nothing mixed. ===== */
body { transition: background-color .8s ease; }
body::before, body::after { transition: opacity .8s ease, background .8s ease; }
body.world-in main { animation: worldIn .8s ease; } @keyframes worldIn { from { opacity: .35; } }
.top { transition: background .8s ease; }

/* film: a dark theatre, projector light, grain and letterbox */
body[data-world="cine"] { --bg: #0B0807; --bg2: #120D0B; --panel: #1A1210; --panel2: #23170F; --amber: #F2B36B; --copper: #D9622B; --line: rgba(255, 214, 170, .1); }
body[data-world="cine"]::before { background: radial-gradient(900px 600px at 50% -15%, rgba(255, 210, 150, .2), transparent 60%), radial-gradient(1200px 500px at 50% 120%, rgba(160, 30, 20, .25), transparent 60%); }
body[data-world="cine"]::after { opacity: .09; }
body[data-world="cine"] .nhero::before, body[data-world="cine"] .xhero::before, body[data-world="cine"] .pp-hero::before { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
  box-shadow: inset 0 46px 0 #000, inset 0 -46px 0 #000; }
body[data-world="cine"] .poster, body[data-world="cine"] .h2 { letter-spacing: -.02em; }

/* anime: night sky, violet and sakura, soft stars, rounded type */
body[data-world="anime"] { --bg: #0E0A1C; --bg2: #140F27; --panel: #1C1533; --panel2: #251C42; --amber: #FFB3D9; --copper: #C07AFF; --ink: #F5F0FF; --soft: rgba(245, 240, 255, .68); --line: rgba(220, 200, 255, .12); --line2: rgba(220, 200, 255, .2);
  --serif: "M PLUS Rounded 1c", "Instrument Serif", sans-serif; }
body[data-world="anime"]::before { background: radial-gradient(700px 500px at 80% -10%, rgba(192, 122, 255, .3), transparent 60%), radial-gradient(800px 500px at 0% 100%, rgba(255, 140, 200, .18), transparent 60%),
  radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent), radial-gradient(1px 1px at 40% 70%, #fff, transparent),
  radial-gradient(1px 1px at 85% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 10% 80%, #fff, transparent), radial-gradient(1px 1px at 55% 45%, #fff, transparent); }
body[data-world="anime"] .poster, body[data-world="anime"] .h2, body[data-world="anime"] .h3 { font-weight: 800; letter-spacing: -.02em; }
body[data-world="anime"] .btn { border-radius: 14px; }

/* games: dark green screen, neon accents, a pixel grid */
body[data-world="videojuegos"] { --bg: #06100C; --bg2: #0A1812; --panel: #0F2019; --panel2: #142A20; --amber: #7CFFB2; --copper: #3FD68A; --ink: #E9FFF3; --soft: rgba(233, 255, 243, .64); --line: rgba(124, 255, 178, .12); --line2: rgba(124, 255, 178, .22);
  --serif: "Space Grotesk", "Instrument Serif", sans-serif; }
body[data-world="videojuegos"]::before { background: linear-gradient(rgba(124, 255, 178, .04) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, rgba(124, 255, 178, .04) 1px, transparent 1px) 0 0/28px 28px,
  radial-gradient(900px 500px at 80% -10%, rgba(63, 214, 138, .22), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(143, 107, 255, .16), transparent 60%); }
body[data-world="videojuegos"] .poster, body[data-world="videojuegos"] .h2, body[data-world="videojuegos"] .h3 { font-weight: 700; letter-spacing: -.03em; text-transform: none; }
body[data-world="videojuegos"] .btn { border-radius: 6px; box-shadow: 0 0 0 1px rgba(124, 255, 178, .2), 0 0 18px rgba(63, 214, 138, .25); }
body[data-world="videojuegos"] .pc, body[data-world="videojuegos"] .card { border-radius: 6px; }

/* music: deep night, magenta and teal waves */
body[data-world="musica"] { --bg: #0C0814; --bg2: #120C1D; --panel: #1A1129; --panel2: #221636; --amber: #FF9AD5; --copper: #E0479B; --line: rgba(255, 170, 220, .12);
  --serif: "Syne", "Instrument Serif", sans-serif; }
body[data-world="musica"]::before { background: radial-gradient(900px 400px at 50% -10%, rgba(224, 71, 155, .3), transparent 60%),
  repeating-radial-gradient(circle at 50% 120%, rgba(95, 179, 190, .07) 0 2px, transparent 2px 26px); }
body[data-world="musica"] .poster, body[data-world="musica"] .h2, body[data-world="musica"] .h3 { font-weight: 700; letter-spacing: -.02em; }

/* brands & products: warm studio light, cream and copper */
body[data-world="marca"] { --bg: #120D09; --bg2: #19120C; --panel: #221810; --panel2: #2C1F14; --amber: #FFC48A; --copper: #E0732A; }
body[data-world="marca"]::before { background: radial-gradient(1000px 600px at 70% -10%, rgba(255, 196, 138, .22), transparent 60%), radial-gradient(800px 500px at 0% 100%, rgba(224, 115, 42, .14), transparent 60%); }

/* fashion: linen, rose, slow light */
body[data-world="moda"] { --bg: #140D0E; --bg2: #1B1213; --panel: #241819; --panel2: #2E1F20; --amber: #F4C7B8; --copper: #C9544A; --line: rgba(244, 199, 184, .12); }
body[data-world="moda"]::before { background: radial-gradient(900px 600px at 30% -10%, rgba(244, 199, 184, .2), transparent 60%),
  repeating-linear-gradient(45deg, rgba(244, 199, 184, .025) 0 2px, transparent 2px 6px); }
body[data-world="moda"] .poster, body[data-world="moda"] .h2 { font-style: italic; }

/* art & design: gold and indigo, paper texture */
body[data-world="arte"] { --bg: #0D0C14; --bg2: #13121D; --panel: #1B1A28; --panel2: #232234; --amber: #E8C26A; --copper: #8FA8FF; --line: rgba(232, 194, 106, .12); }
body[data-world="arte"]::before { background: radial-gradient(800px 500px at 80% -10%, rgba(143, 168, 255, .22), transparent 60%), radial-gradient(700px 500px at 10% 110%, rgba(232, 194, 106, .16), transparent 60%); }

/* real estate: sand, sea and daylight */
body[data-world="inmobiliaria"] { --bg: #0B1112; --bg2: #0F181A; --panel: #152225; --panel2: #1B2C30; --amber: #E8D3A8; --copper: #4FB0B8; --line: rgba(232, 211, 168, .12); }
body[data-world="inmobiliaria"]::before { background: radial-gradient(1000px 500px at 50% -15%, rgba(232, 211, 168, .2), transparent 60%), linear-gradient(180deg, transparent 70%, rgba(79, 176, 184, .1)); }

/* the doors to the worlds */
.portals { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 8px; }
.portal { position: relative; min-height: 260px; border-radius: 20px; overflow: hidden; display: grid; align-items: end; text-decoration: none; border: 1px solid var(--line); isolation: isolate; }
.portal-bg { position: absolute; inset: 0; z-index: -2; background: #120d09 center/cover; transition: transform .8s ease, filter .8s ease; filter: saturate(.8) brightness(.7); }
.portal-glow { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .85)), radial-gradient(120% 80% at 0% 100%, var(--pw, rgba(224, 115, 42, .45)), transparent 60%); transition: opacity .6s; }
.portal:hover .portal-bg { transform: scale(1.07); filter: saturate(1.1) brightness(.85); }
.portal-in { display: grid; gap: 6px; padding: 20px; } .portal-in b { font: 400 38px/1 var(--serif); } .portal-in > span:not(.mono):not(.pill) { color: rgba(255, 255, 255, .78); font-size: 14px; }
.portal[data-w="cine"] { --pw: rgba(217, 98, 43, .55); } .portal[data-w="cine"] b { font-family: "Instrument Serif", serif; }
.portal[data-w="anime"] { --pw: rgba(192, 122, 255, .6); } .portal[data-w="anime"] b { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 32px; }
.portal[data-w="videojuegos"] { --pw: rgba(63, 214, 138, .55); } .portal[data-w="videojuegos"] b { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 34px; }
.portal[data-w="musica"] { --pw: rgba(224, 71, 155, .55); } .portal[data-w="musica"] b { font-family: "Syne", sans-serif; font-weight: 700; font-size: 34px; }
.portal[data-w="marca"] { --pw: rgba(255, 196, 138, .5); } .portal[data-w="moda"] { --pw: rgba(244, 199, 184, .45); } .portal[data-w="moda"] b { font-style: italic; }
.portal[data-w="arte"] { --pw: rgba(143, 168, 255, .5); } .portal[data-w="inmobiliaria"] { --pw: rgba(79, 176, 184, .5); }
.gmoment .mono { color: var(--amber); }

/* ===== v12: stars and unions ===== */
.uhero { padding: clamp(46px, 7vw, 100px) 0 30px; } .uhero .wrap { display: grid; gap: 14px; }
.unions { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.ucard { position: relative; min-height: 300px; border-radius: 20px; overflow: hidden; display: grid; align-items: end; text-decoration: none; border: 1px solid var(--line2); isolation: isolate; }
.u-split { position: absolute; inset: 0; z-index: -2; display: flex; } .u-split span { flex: 1; background: #1c1611 center/cover; filter: brightness(.6) saturate(1.1); transition: transform .8s; }
.u-split span + span { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); margin-left: -8%; }
.ucard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .88)); }
.ucard:hover .u-split span { transform: scale(1.05); }
.u-in { display: grid; gap: 6px; padding: 22px; } .u-x { font: 400 clamp(30px, 3.6vw, 44px)/1 var(--serif); } .u-x i, .u-names i { color: var(--amber); font-style: normal; margin: 0 .25em; }
.u-t { font: italic 400 22px var(--serif); color: var(--amber); }
.ureveal { position: relative; min-height: calc(100vh - 64px); display: grid; place-items: center; overflow: hidden; }
.u-halves { position: absolute; inset: 0; display: flex; } .u-halves span { flex: 1; background: #120d09 center/cover; filter: brightness(.4) saturate(1.15); animation: halfIn 1.4s ease both; }
.u-halves span:first-child { animation-name: halfL; } .u-halves span:last-child { animation-name: halfR; }
@keyframes halfL { from { transform: translateX(-30%); opacity: 0; } } @keyframes halfR { from { transform: translateX(30%); opacity: 0; } }
.u-center { position: relative; display: grid; gap: 18px; justify-items: center; text-align: center; padding: 60px var(--gut); }
.u-names { font: 400 clamp(46px, 8vw, 120px)/.95 var(--serif); margin: 0; text-wrap: balance; } .u-names a { text-decoration: none; }
.star { position: relative; min-height: min(80vh, 760px); display: grid; align-items: end; overflow: hidden; border-bottom: 1px solid var(--line); }
.star-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #3a2312, #120d09) center/cover; transform: scale(1.05); }
.star-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .25) 70%), linear-gradient(180deg, transparent 40%, var(--bg)); }
.star-in { position: relative; display: grid; gap: 18px; padding: 90px var(--gut) 40px; }
.star-av { width: 132px; height: 132px; font: 400 60px var(--serif); border: 2px solid var(--amber); box-shadow: 0 0 50px rgba(255, 176, 112, .35); flex: none; }
.star-name { font: 400 clamp(54px, 9vw, 140px)/.9 var(--serif); margin: 0; letter-spacing: -.02em; }
.star-stats { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; } .star-stats div { display: grid; } .star-stats b { font: 400 40px/1 var(--serif); } .star-stats span { font-size: 12.5px; color: var(--soft); }
@media (max-width: 640px) { .star-av { width: 88px; height: 88px; } }
.sig-card { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border-radius: 22px; overflow: hidden; text-decoration: none; border: 1px solid var(--line2); background: var(--panel); }
.sig-cv { min-height: 340px; background: #120d09 center/cover; } .sig-in { display: grid; gap: 12px; align-content: center; padding: 30px; }
@media (max-width: 760px) { .sig-card { grid-template-columns: 1fr; } }

/* ===== v13: the world bar and shared signatures ===== */
.worldbar { position: sticky; top: 64px; z-index: 38; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px var(--gut);
  background: rgba(14, 11, 9, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
body[data-world] .worldbar { background: color-mix(in srgb, var(--bg) 85%, transparent); }
.worldbar::-webkit-scrollbar { display: none; }
.worldbar a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-size: 14px; color: var(--soft); border: 1px solid transparent; transition: .3s; }
.worldbar a i { width: 9px; height: 9px; border-radius: 50%; background: var(--wc, var(--amber)); box-shadow: 0 0 10px var(--wc, var(--amber)); }
.worldbar a:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.worldbar a.on { color: var(--ink); border-color: var(--wc, var(--amber)); background: color-mix(in srgb, var(--wc, #E0732A) 18%, transparent); }
.worldbar a[data-w="cine"] { --wc: #D9622B; } .worldbar a[data-w="anime"] { --wc: #C07AFF; } .worldbar a[data-w="videojuegos"] { --wc: #3FD68A; } .worldbar a[data-w="musica"] { --wc: #E0479B; }
.worldbar a[data-w="marca"] { --wc: #FFC48A; } .worldbar a[data-w="moda"] { --wc: #F4C7B8; } .worldbar a[data-w="arte"] { --wc: #8FA8FF; } .worldbar a[data-w="inmobiliaria"] { --wc: #4FB0B8; }
.gmoment { top: 116px; }
.xsign { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; text-decoration: none; font: 400 22px var(--serif); }
.xsign i { color: var(--amber); font-style: normal; font-size: 26px; margin: 0 4px; } .xsign .av { width: 34px; height: 34px; }

/* ===== v14: the creator's club ===== */
.club-door { position: relative; min-height: min(72vh, 680px); display: grid; align-items: end; overflow: hidden; }
.club-door-in { position: relative; display: grid; gap: 18px; padding: 90px var(--gut) 30px; }
.corridor { position: sticky; top: 116px; z-index: 30; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gut);
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.corridor a { position: relative; display: grid; gap: 2px; padding: 14px 26px 12px 0; margin-right: 26px; text-decoration: none; white-space: nowrap; font: 400 22px var(--serif); color: var(--soft); transition: color .3s; }
.corridor a .mono { font-size: 10px; } .corridor a::after { content: ""; position: absolute; left: 0; right: 26px; bottom: 0; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.corridor a.on { color: var(--ink); } .corridor a.on::after { transform: scaleX(1); }
.corridor a:not(:last-child)::before { content: "→"; position: absolute; right: 0; top: 50%; transform: translateY(-30%); color: var(--mute); font-size: 14px; }
.club-room { padding-top: 30px; padding-bottom: 90px; min-height: 60vh; }
.club-room.enter { animation: deeper .7s cubic-bezier(.2, .7, .2, 1); } @keyframes deeper { from { opacity: 0; transform: scale(1.02) translateY(14px); } }
.welcome { margin: 0 0 22px; padding: 22px 26px; border-left: 3px solid var(--amber); font: italic 400 clamp(22px, 2.4vw, 30px)/1.3 var(--serif); background: color-mix(in srgb, var(--amber) 6%, transparent); border-radius: 0 14px 14px 0; }
.welcome cite { display: block; margin-top: 10px; font: 500 12px var(--mono); font-style: normal; color: var(--soft); letter-spacing: .1em; }
.pieces { display: grid; gap: 10px; } .piece { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.piece > span { aspect-ratio: 16/10; border-radius: 8px; background: #000 center/cover; } .piece b { display: block; font: 400 19px var(--serif); }
/* club textures */
body[data-texture="grano"]::after { opacity: .12; }
body[data-texture="estrellas"]::before { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 75%, #fff, transparent), radial-gradient(1px 1px at 85% 55%, #fff, transparent), radial-gradient(800px 500px at 70% -10%, color-mix(in srgb, var(--amber) 25%, transparent), transparent 60%); }
body[data-texture="pixeles"]::before { background: linear-gradient(color-mix(in srgb, var(--amber) 6%, transparent) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, color-mix(in srgb, var(--amber) 6%, transparent) 1px, transparent 1px) 0 0/24px 24px; }
body[data-texture="ondas"]::before { background: repeating-radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--amber) 8%, transparent) 0 2px, transparent 2px 24px); }
body[data-texture="lino"]::before { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--amber) 4%, transparent) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--amber) 3%, transparent) 0 2px, transparent 2px 6px); }
body[data-texture="papel"]::after { opacity: .08; }

/* ===== v15: the push ===== */
.pushbox { display: flex; gap: 16px; align-items: center; margin-top: 6px; max-width: 620px; }
.pushbtn { position: relative; display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; border: 2px solid var(--amber); cursor: pointer;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--amber) 35%, transparent), transparent 70%), rgba(0, 0, 0, .35); color: var(--ink); flex: none; transition: transform .2s; }
.pushbtn span { font-size: 26px; line-height: 1; color: var(--amber); } .pushbtn b { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.pushbtn:hover { transform: translateY(-3px); box-shadow: 0 0 30px color-mix(in srgb, var(--amber) 45%, transparent); } .pushbtn.done { background: color-mix(in srgb, var(--amber) 25%, transparent); }
.pushbtn.fly span { animation: lift .9s ease-out; } @keyframes lift { 50% { transform: translateY(-26px) scale(1.3); opacity: .4; } }
.pushbtn[disabled] { opacity: .6; cursor: default; }
.pushmeter { display: grid; gap: 6px; flex: 1; } .pm-bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pm-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--copper), var(--amber)); box-shadow: 0 0 12px var(--amber); transition: width .8s; }
.highlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.highlist li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.highlist li:first-child { border-color: var(--amber); box-shadow: 0 0 30px -10px var(--amber); }
.highlist .hn { font: 400 34px var(--serif); color: var(--amber); text-align: center; } .highlist a { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.highlist .hcv { width: 72px; aspect-ratio: 16/10; border-radius: 8px; background: #000 center/cover; flex: none; } .highlist b { display: block; font: 400 20px var(--serif); }

/* ===== v16: big rooms and direct messages ===== */
.talk { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; height: min(74vh, 760px); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg2); }
@media (max-width: 760px) { .talk { grid-template-columns: 1fr; height: auto; } .talk-list { max-height: 220px; } .talk-main { height: 70vh; } }
.talk-list { display: grid; align-content: start; gap: 4px; padding: 14px; border-right: 1px solid var(--line); overflow-y: auto; }
.talk-list .k { margin-bottom: 6px; } .talk-list a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; } .talk-list a:hover { background: rgba(255, 255, 255, .04); }
.talk-list a.on { background: color-mix(in srgb, var(--amber) 14%, transparent); box-shadow: inset 2px 0 0 var(--amber); } .talk-list b { font-weight: 600; font-size: 15px; }
.talk-main { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; } .talk-head { display: grid; gap: 2px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.talk-head b { font: 400 24px var(--serif); } .talk-main .gchat { min-height: 0; }
.who-btn { background: none; border: 0; padding: 0; color: var(--amber); font: 600 13px var(--sans); cursor: pointer; justify-self: start; } .who-btn:hover { text-decoration: underline; }

/* ===== v17: lived universe ===== */
.herebox { position: fixed; left: 16px; bottom: 16px; z-index: 65; display: grid; gap: 8px; justify-items: start; }
body.has-mbar .herebox { bottom: 92px; }
.here-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line2); cursor: pointer; color: var(--ink);
  background: color-mix(in srgb, var(--panel2) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(0, 0, 0, .45); font: 500 13px var(--sans); }
.here-pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 var(--amber); animation: pulseDot 2s infinite; }
@keyframes pulseDot { 70% { box-shadow: 0 0 0 10px transparent; } }
.here-list { order: -1; width: min(320px, calc(100vw - 32px)); max-height: 50vh; overflow-y: auto; display: grid; gap: 4px; padding: 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--panel2) 96%, transparent); border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.here-list .k { margin-bottom: 6px; } .here-p { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; }
.here-p:hover { background: rgba(255, 255, 255, .05); } .here-p span:last-child { display: grid; } .here-p.met .av { border-color: var(--amber); box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 60%, transparent); }
.here-p .small { color: var(--amber); }
.pulse ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; } .pulse a { display: grid; grid-template-columns: 22px 1fr; gap: 8px; text-decoration: none; font-size: 14px; }
.pulse i { font-style: normal; color: var(--amber); text-align: center; } .pulse .beat { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: pulseDot 1.6s infinite; }

/* ===== v18: the agenda ===== */
.agenda { display: grid; gap: 18px; } .agenda h4 { margin: 0 0 8px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.ag { display: grid; grid-template-columns: 64px 150px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); margin-bottom: 6px; transition: border-color .2s, transform .2s; }
.ag:hover { border-color: var(--line2); transform: translateX(3px); } .ag.now { border-color: var(--amber); box-shadow: 0 0 30px -12px var(--amber); }
.ag-t { font: 400 22px var(--serif); } .ag.now .ag-t { color: var(--amber); animation: blink 1.6s infinite; }
.ag-k { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); } .ag-b { display: grid; } .ag-b b { font: 400 19px/1.15 var(--serif); }
@media (max-width: 640px) { .ag { grid-template-columns: 56px 1fr; } .ag-k, .ag .mono { grid-column: 2; } }
.side .ag { grid-template-columns: 54px 1fr; } .side .ag-k, .side .ag .mono { display: none; }
.board { margin-top: 8px; } .board ol { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 3px; max-height: 160px; overflow-y: auto; }
.board li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; font-size: 13px; } .board li:first-child b { color: var(--amber); }

/* ===== v19: rooms inside events; heat ===== */
.room-side { grid-template-rows: auto auto 1fr auto auto auto auto; }
.evrooms { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.evrooms button { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--soft); font-size: 13px; cursor: pointer; }
.evrooms button span { margin-left: 4px; font: 500 11px var(--mono); color: var(--amber); } .evrooms button.on { color: var(--ink); border-color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
.evrooms .mk { border-style: dashed; }
.heat { position: absolute; z-index: 6; top: 16px; right: 16px; width: min(320px, 50%); display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
.heat-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; } .heat-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFB070, #FF5A2E); transition: width 1.2s; }
.room-stage.warm { box-shadow: inset 0 -120px 160px -80px rgba(255, 120, 40, .35); }
.room-stage.hot { box-shadow: inset 0 -200px 200px -60px rgba(255, 90, 30, .55); animation: glowpulse 2.2s ease-in-out infinite; }
@keyframes glowpulse { 50% { box-shadow: inset 0 -240px 240px -40px rgba(255, 110, 40, .7); } }
.embers { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 1s; } .room-stage.hot .embers { opacity: 1; }
.embers i { position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%; background: #FFB070; box-shadow: 0 0 10px #FF7A2E; animation: ember 4s linear infinite; }
.embers i:nth-child(odd) { animation-duration: 5.5s; } .embers i:nth-child(3n) { width: 3px; height: 3px; }
.embers i:nth-child(1) { left: 53%; animation-delay: -0.37s; }
.embers i:nth-child(2) { left: 6%; animation-delay: -0.74s; }
.embers i:nth-child(3) { left: 59%; animation-delay: -1.11s; }
.embers i:nth-child(4) { left: 12%; animation-delay: -1.48s; }
.embers i:nth-child(5) { left: 65%; animation-delay: -1.85s; }
.embers i:nth-child(6) { left: 18%; animation-delay: -2.22s; }
.embers i:nth-child(7) { left: 71%; animation-delay: -2.59s; }
.embers i:nth-child(8) { left: 24%; animation-delay: -2.96s; }
.embers i:nth-child(9) { left: 77%; animation-delay: -3.33s; }
.embers i:nth-child(10) { left: 30%; animation-delay: -3.70s; }
.embers i:nth-child(11) { left: 83%; animation-delay: -0.07s; }
.embers i:nth-child(12) { left: 36%; animation-delay: -0.44s; }
.embers i:nth-child(13) { left: 89%; animation-delay: -0.81s; }
.embers i:nth-child(14) { left: 42%; animation-delay: -1.18s; }
.embers i:nth-child(15) { left: 95%; animation-delay: -1.55s; }
.embers i:nth-child(16) { left: 48%; animation-delay: -1.92s; }
.embers i:nth-child(17) { left: 1%; animation-delay: -2.29s; }
.embers i:nth-child(18) { left: 54%; animation-delay: -2.66s; }

@keyframes ember { to { transform: translate(20px, -90vh); opacity: 0; } }

/* ===== v20: worlds crossing ===== */
.xworlds { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-self: start; }
.xworlds i { font: 500 11px var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--wc, var(--amber)); color: var(--wc, var(--amber)); background: rgba(0, 0, 0, .35); }
.xworlds b { color: var(--amber); } .xworlds i[data-w="cine"] { --wc: #F2B36B; } .xworlds i[data-w="anime"] { --wc: #C07AFF; } .xworlds i[data-w="videojuegos"] { --wc: #3FD68A; }
.xworlds i[data-w="musica"] { --wc: #FF9AD5; } .xworlds i[data-w="marca"] { --wc: #FFC48A; } .xworlds i[data-w="moda"] { --wc: #F4C7B8; } .xworlds i[data-w="arte"] { --wc: #8FA8FF; } .xworlds i[data-w="inmobiliaria"] { --wc: #4FB0B8; }

/* ===== v21: talk, decide live, NEO ===== */
.talk-btn { user-select: none; touch-action: none; } .talk-btn.rec { background: #E2463C; color: #fff; animation: blink 1s infinite; }
.m-voice .vplay { background: none; border: 1px solid var(--line2); border-radius: 999px; color: var(--amber); padding: 2px 10px; cursor: pointer; font-size: 12px; }
.livevote { position: absolute; z-index: 7; left: 50%; top: 18%; transform: translateX(-50%); width: min(560px, 90%); display: grid; gap: 10px; padding: 18px 20px; border-radius: 18px;
  background: rgba(14, 11, 9, .9); border: 1px solid var(--amber); box-shadow: 0 0 60px color-mix(in srgb, var(--amber) 35%, transparent); text-align: center; animation: rise .4s; }
.livevote b { font: 400 26px var(--serif); } .lv-opts { display: grid; gap: 8px; }
.lv-opts button { position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: transparent; color: var(--ink); cursor: pointer; font-size: 15px; }
.lv-opts i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--amber) 30%, transparent); transition: width .6s; } .lv-opts span, .lv-opts em { position: relative; font-style: normal; } .lv-opts .on { border-color: var(--amber); }
.neo-cta { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--ink); cursor: pointer; font-size: 13px; white-space: nowrap; }
.neo-cta b { color: var(--amber); letter-spacing: .06em; } .neo-cta:hover { background: color-mix(in srgb, var(--amber) 26%, transparent); }
.neo-dlg { width: min(560px, calc(100vw - 32px)); padding: 30px; }
@media (max-width: 640px) { .neo-cta { padding: 6px 10px; font-size: 12px; } }

/* ===== v22: native worlds ===== */
.nh { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.nh-in { position: relative; display: grid; gap: 18px; padding: 50px var(--gut) 30px; }
.nh-join { padding: 16px var(--gut) 26px; }
.native { padding-top: 30px; padding-bottom: 90px; }
.native-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; } @media (max-width: 980px) { .native-grid { grid-template-columns: 1fr; } }
.nat-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 14px; } .nat-items { margin-bottom: 30px; }
.nat-side { display: grid; gap: 14px; align-content: start; position: sticky; top: 130px; } @media (max-width: 980px) { .nat-side { position: static; } }
.nat-side .agenda { gap: 10px; margin-top: 10px; } .nat-side .ag { grid-template-columns: 54px 1fr; } .nat-side .ag-k, .nat-side .ag .mono { display: none; }
.highlist.mini li { grid-template-columns: 30px 1fr auto; padding: 6px 8px; } .highlist.mini .hn { font-size: 24px; }
.peeps { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; margin-top: 10px; } .peeps a { display: grid; justify-items: center; gap: 4px; text-decoration: none; font-size: 11.5px; text-align: center; }
.peeps .av { width: 46px; height: 46px; } .unions.compact { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 30px; } .unions.compact .ucard { min-height: 220px; }
.nat-more summary { cursor: pointer; color: var(--soft); font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 10px 0; }
.ni { text-decoration: none; display: grid; gap: 6px; } .ni b { font: 400 18px/1.15 var(--serif); } .ni-cv { display: block; background: #120d09 center/cover; }

/* cine: a theatre */
.nh-cine { background: radial-gradient(ellipse at 50% 0, rgba(255, 210, 150, .15), transparent 60%), #050302; padding-top: 18px; }
.marquee { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto 18px; width: fit-content; padding: 10px 26px; border: 2px solid #F2B36B; border-radius: 6px;
  background: #1a0e06; box-shadow: 0 0 40px rgba(242, 179, 107, .35); } .marquee b { font: 400 clamp(26px, 3.4vw, 44px) var(--serif); letter-spacing: .06em; text-transform: uppercase; color: #FFE2B8; }
.bulbs { width: 80px; height: 10px; background: radial-gradient(circle, #FFD58A 3px, transparent 4px) 0 0/16px 10px; filter: drop-shadow(0 0 6px #FFB070); animation: bulbs 1.2s steps(2) infinite; }
@keyframes bulbs { 50% { opacity: .45; } }
.theatre { position: relative; display: grid; grid-template-columns: 9% 1fr 9%; align-items: stretch; width: min(1200px, 100%); margin: 0 auto; }
.curtain { background: repeating-linear-gradient(90deg, #5a0f0c 0 14px, #7a1612 14px 26px, #4a0c0a 26px 34px); box-shadow: inset 0 -40px 60px rgba(0, 0, 0, .6); }
.curtain.l { border-radius: 0 0 40% 0; } .curtain.r { border-radius: 0 0 0 40%; }
.screen { position: relative; aspect-ratio: 2.39/1; min-height: 300px; background: #120d09 center/cover; box-shadow: 0 0 120px rgba(255, 220, 170, .25); }
.screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .1) 65%); }
.screen-in { position: relative; z-index: 2; display: grid; gap: 12px; align-content: center; height: 100%; padding: 30px clamp(20px, 4vw, 60px); max-width: 640px; }
.seats { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; width: min(900px, 90%); margin: 18px auto 0; opacity: .55; }
.seats i { height: 18px; border-radius: 8px 8px 3px 3px; background: #3a0c0a; box-shadow: inset 0 3px 0 #5a1612; }
.nat-poster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.ni-poster .ni-cv { aspect-ratio: 2/3; border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); transition: transform .3s; } .ni-poster:hover .ni-cv { transform: translateY(-6px) rotate(-.5deg); }

/* música: a stage with records */
.nh-musica { background: radial-gradient(ellipse at 50% 120%, rgba(224, 71, 155, .35), transparent 60%), #08050d; }
.stagelights { position: absolute; inset: 0; pointer-events: none; } .stagelights i { position: absolute; top: -10%; width: 22%; height: 130%; background: linear-gradient(180deg, rgba(255, 154, 213, .25), transparent 70%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); transform-origin: top; animation: sweep 6s ease-in-out infinite alternate; }
.stagelights i:nth-child(1) { left: 5%; } .stagelights i:nth-child(2) { left: 28%; animation-delay: -2s; background: linear-gradient(180deg, rgba(95, 179, 190, .25), transparent 70%); }
.stagelights i:nth-child(3) { left: 52%; animation-delay: -4s; } .stagelights i:nth-child(4) { left: 75%; animation-delay: -1s; background: linear-gradient(180deg, rgba(95, 179, 190, .22), transparent 70%); }
@keyframes sweep { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.vinyl-hero { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 50px); align-items: center; } @media (max-width: 720px) { .vinyl-hero { grid-template-columns: 1fr; } }
.vinyl { position: relative; width: clamp(200px, 26vw, 320px); aspect-ratio: 1; border-radius: 50%; background: #111 center/cover; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); animation: spin 7s linear infinite; }
.vinyl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(0, 0, 0, .55) 0 2px, rgba(0, 0, 0, .35) 2px 4px); mask: radial-gradient(circle, transparent 30%, #000 31%); }
.vinyl i { position: absolute; inset: 46%; border-radius: 50%; background: #0c0814; }
.eq { display: flex; gap: 4px; align-items: flex-end; height: 40px; } .eq i { flex: 1; background: linear-gradient(var(--amber), var(--copper)); border-radius: 2px; animation: eq 1s ease-in-out infinite alternate; }
.eq i:nth-child(3n) { animation-duration: .7s; } .eq i:nth-child(4n) { animation-duration: 1.3s; } .eq i:nth-child(5n) { animation-delay: -.4s; } @keyframes eq { from { height: 10%; } to { height: 100%; } }
.nat-vinyl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px; }
.sleeve { position: relative; display: block; aspect-ratio: 1; background: #1a1129 center/cover; border-radius: 4px; box-shadow: 0 14px 30px rgba(0, 0, 0, .6); z-index: 1; }
.disc { position: absolute; z-index: -1; top: 4%; left: 30%; width: 92%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 2px, #1c1c1c 2px 4px); transition: left .5s; }
.ni-vinyl:hover .disc { left: 48%; }

/* videojuegos: an arcade launcher */
.nh-games { background: #030806; } .crt { position: relative; border-radius: 26px; overflow: hidden; background: #06100c center/cover; border: 10px solid #111; box-shadow: 0 0 0 2px #2a2a2a, 0 0 80px rgba(63, 214, 138, .3); min-height: 340px; }
.crt::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 4px), linear-gradient(90deg, rgba(3, 8, 6, .9), rgba(3, 8, 6, .3)); z-index: 1; }
.crt-in { position: relative; z-index: 2; display: grid; gap: 12px; align-content: center; min-height: 320px; padding: 30px clamp(20px, 4vw, 60px); max-width: 640px; }
.press { font: 700 14px var(--mono); letter-spacing: .3em; color: var(--amber); animation: blink 1.1s steps(2) infinite; }
.nat-tile { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ni-tile .ni-cv { position: relative; aspect-ratio: 16/9; border-radius: 8px; border: 1px solid var(--line2); transition: box-shadow .3s; } .ni-tile:hover .ni-cv { box-shadow: 0 0 0 2px var(--amber), 0 0 30px color-mix(in srgb, var(--amber) 45%, transparent); }
.play { position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; border-radius: 4px; background: var(--amber); color: #04100a; font: 700 11px var(--mono); opacity: 0; transition: opacity .2s; } .ni-tile:hover .play { opacity: 1; }

/* anime: manga panels under the night sky */
.manga { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 8px; min-height: 340px; }
.mg { border: 3px solid #F5F0FF; border-radius: 4px; background: #1C1533 center/cover; } .mg.big { grid-row: span 2; } .mg.tx { display: grid; gap: 10px; align-content: center; padding: 22px; background: rgba(28, 21, 51, .85); }
.mg.s1 { background: radial-gradient(circle at 30% 40%, rgba(255, 179, 217, .35), transparent 60%), #1C1533; min-height: 90px; } .mg.s2 { display: none; }
.nat-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-flow: dense; gap: 8px; }
.ni-panel { position: relative; border: 3px solid #F5F0FF; border-radius: 3px; overflow: hidden; } .ni-panel.wide { grid-column: span 2; } .ni-panel .ni-cv { aspect-ratio: 4/3; height: 100%; }
.bubble { position: absolute; left: 10px; bottom: 10px; max-width: 80%; padding: 8px 12px; border-radius: 18px; background: #F5F0FF; color: #1C1533; font: 800 14px var(--serif); }

/* arte: a gallery */
.gallery-wall { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; } @media (max-width: 760px) { .gallery-wall { grid-template-columns: 1fr; } }
.frame { display: block; aspect-ratio: 4/3; background: #1B1A28 center/cover; border: 14px solid #2b2216; outline: 2px solid #d9b56a; box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.placard { display: grid; gap: 10px; padding: 18px; border-left: 2px solid var(--amber); }
.nat-frame { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; }
.ni-frame .ni-cv { aspect-ratio: 4/5; border: 10px solid #2b2216; outline: 1px solid #d9b56a; box-shadow: 0 20px 40px rgba(0, 0, 0, .55); } .placa { display: grid; font-size: 12px; color: var(--soft); }

/* moda: the runway */
.runway-hero { position: relative; min-height: 420px; display: grid; align-items: end; background: #140D0E center/cover; }
.runway-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 13, 14, .2), rgba(20, 13, 14, .9)), linear-gradient(90deg, transparent 42%, rgba(244, 199, 184, .14) 42% 58%, transparent 58%); }
.nat-runway { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 16px; overflow-x: auto; padding-bottom: 10px; }
.ni-look .ni-cv { aspect-ratio: 3/5; border-radius: 2px; }

/* marcas: a shop window */
.showcase { position: relative; display: grid; gap: 12px; padding: 40px; min-height: 320px; align-content: end; border-radius: 6px; background: #221810 center/cover; border: 2px solid rgba(255, 196, 138, .3); box-shadow: inset 0 0 120px rgba(0, 0, 0, .7); }
.showcase > * { position: relative; } .showcase::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(18, 13, 9, .9)); border-radius: 6px; }
.nat-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.ni-shelf .ni-cv { aspect-ratio: 1; border-radius: 10px; box-shadow: 0 16px 0 -8px rgba(255, 196, 138, .15); }

/* inmobiliaria: a plan */
.blueprint { position: relative; display: grid; gap: 12px; padding: 40px; min-height: 320px; align-content: end; border-radius: 10px; background: #0f2a2e center/cover; border: 1px solid rgba(79, 176, 184, .4); }
.blueprint::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(rgba(232, 211, 168, .07) 1px, transparent 1px) 0 0/30px 30px, linear-gradient(90deg, rgba(232, 211, 168, .07) 1px, transparent 1px) 0 0/30px 30px, linear-gradient(180deg, rgba(11, 17, 18, .3), rgba(11, 17, 18, .92)); }
.blueprint > * { position: relative; } .nat-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ni-lot .ni-cv { aspect-ratio: 4/3; border-radius: 6px; border: 1px dashed rgba(232, 211, 168, .5); }

.here-list[hidden], .livevote[hidden], .bellp[hidden] { display: none !important; }


/* ===== v23: industry bases, Universe woven in ===== */
.chip-ev, .chip-here, .chip-push, .chip-club { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 11.5px var(--sans); text-decoration: none; white-space: nowrap; }
.chip-ev { background: rgba(255, 255, 255, .1); color: var(--ink); } .chip-ev.live { background: #E2463C; color: #fff; }
.chip-here { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); } .chip-push { background: rgba(255, 255, 255, .08); color: var(--ink); }
.chip-club { border: 1px solid var(--line2); color: var(--ink); }
.xrow { margin: 0 0 30px; } .xrow h3 { margin: 0 0 10px; font: 600 20px var(--sans); } .nf-more { font-size: 13px; color: var(--amber); margin-left: 10px; text-decoration: none; }
.xrow-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px); gap: 8px; overflow-x: auto; overflow-y: visible; padding: 6px 0 70px; margin-bottom: -60px; scrollbar-width: none; }
/* Netflix / Crunchyroll */
.nf-bill { position: relative; min-height: min(80vh, 760px); display: grid; align-items: end; overflow: hidden; }
.nf-bill-bg { position: absolute; inset: 0; background: center/cover; } .nf-bill-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .85) 10%, transparent 65%), linear-gradient(180deg, transparent 55%, var(--bg)); }
.nf-bill-in { position: relative; display: grid; gap: 14px; padding: 0 4% 9%; max-width: 680px; } .nf-play { background: #fff; color: #000; } .nf-play:hover { background: #ddd; }
.nf-life { gap: 8px; } .nf-rows { position: relative; z-index: 2; margin-top: -60px; padding: 0 4% 60px; }
.nf-card { position: relative; } .nf-cv { position: relative; display: block; aspect-ratio: 16/9; border-radius: 6px; background: #111 center/cover; transition: transform .3s .1s, box-shadow .3s; }
.nf-prog { position: absolute; left: 0; bottom: 0; height: 3px; background: #E2463C; }
.nf-pop { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; display: grid; gap: 6px; padding: 10px 12px; border-radius: 0 0 8px 8px; background: #181818; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: .25s .1s; }
.nf-card:hover, .nf-card:focus-within { z-index: 5; } .nf-card:hover .nf-cv, .nf-card:focus-within .nf-cv { transform: scale(1.12) translateY(-8%); border-radius: 6px 6px 0 0; box-shadow: 0 20px 40px rgba(0, 0, 0, .7); }
.nf-card:hover .nf-pop, .nf-card:focus-within .nf-pop { opacity: 1; pointer-events: auto; transform: scale(1.12) translateY(calc(-8% - 1px)); transform-origin: top; }
.nf-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; text-decoration: none; cursor: pointer; } .nf-btn.play { background: #fff; color: #000; border-color: #fff; }
.nf-top { display: grid; grid-template-columns: 90px 1fr; align-items: end; } .nf-num { font: 900 140px/0.8 var(--sans); color: transparent; -webkit-text-stroke: 3px rgba(255, 255, 255, .5); margin-right: -14px; }
.nf .xrow-track:has(.nf-top) { grid-auto-columns: minmax(330px, 360px); }
.nf-modal { width: min(860px, calc(100vw - 24px)); max-height: 92vh; padding: 0; border: 0; border-radius: 10px; background: #181818; color: var(--ink); overflow: auto; } .nf-modal::backdrop { background: rgba(0, 0, 0, .7); }
.nf-m-hero { position: relative; aspect-ratio: 16/8; background: center/cover; display: grid; align-items: end; } .nf-m-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #181818); }
.nf-m-in { position: relative; z-index: 2; display: grid; gap: 12px; padding: 30px; } .nf-x { position: absolute; z-index: 3; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #181818; color: #fff; cursor: pointer; }
.nf-m-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; padding: 0 30px 30px; } @media (max-width: 640px) { .nf-m-body { grid-template-columns: 1fr; } }
.nf-eps { list-style: none; padding: 0; margin: 10px 0 0; display: grid; } .nf-eps a { display: grid; grid-template-columns: 26px 130px 1fr; gap: 14px; align-items: center; padding: 12px 8px; border-bottom: 1px solid #333; text-decoration: none; } .nf-eps a:hover { background: #222; }
.nf-ep-cv { aspect-ratio: 16/9; border-radius: 4px; background: #000 center/cover; display: grid; place-items: center; font-size: 18px; }
.nf-agenda .ag { background: rgba(255, 255, 255, .04); }
.nf.cr .nf-play { background: var(--amber); color: #120a1e; } .nf.cr .nf-pop { background: #1C1533; }
/* Steam */
.st { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; padding: 22px 4% 60px; } @media (max-width: 900px) { .st { grid-template-columns: 1fr; } .st-side { display: none; } }
.st-side { display: grid; gap: 6px; align-content: start; position: sticky; top: 130px; font-size: 13px; } .st-side .k { margin-top: 14px; }
.st-side a { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 4px; text-decoration: none; } .st-side a:hover { background: rgba(255, 255, 255, .06); }
.st-side a > span:first-child:not(.av) { width: 32px; height: 18px; background: #000 center/cover; border-radius: 2px; flex: none; }
.st-h { margin: 0 0 10px; font: 600 14px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.st-feat { position: relative; display: grid; grid-template-columns: 1.7fr 1fr; background: rgba(0, 0, 0, .35); border-radius: 6px; overflow: hidden; box-shadow: 0 0 40px rgba(0, 0, 0, .5); } @media (max-width: 760px) { .st-feat { grid-template-columns: 1fr; } }
.st-cap { aspect-ratio: 16/9; background: #000 center/cover; } .st-info { display: grid; gap: 10px; align-content: start; padding: 16px; } .st-info b { font: 600 24px var(--sans); }
.st-tag { padding: 2px 8px; border-radius: 3px; background: rgba(255, 255, 255, .1); font-size: 11.5px; } .st-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 8px; border-radius: 4px; background: rgba(0, 0, 0, .4); }
.st-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; } .st-dots i { width: 16px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .3); cursor: pointer; } .st-dots i.on { background: var(--amber); }
.st-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 14px 0 22px; }
.st-live a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 4px; background: rgba(255, 255, 255, .05); text-decoration: none; border-left: 3px solid var(--line2); } .st-live a.now { border-left-color: #E2463C; }
.st-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--amber); flex-wrap: wrap; } .st-tabs button { padding: 10px 16px; border: 0; background: rgba(255, 255, 255, .05); color: var(--soft); cursor: pointer; font-size: 14px; } .st-tabs button.on { background: var(--amber); color: #04100a; }
.st-list { display: grid; gap: 4px; margin-top: 8px; } .st-row { display: grid; grid-template-columns: 184px 1fr auto; gap: 14px; align-items: center; padding: 6px; border-radius: 3px; background: rgba(0, 0, 0, .25); text-decoration: none; }
.st-row:hover { background: rgba(255, 255, 255, .08); } .st-rcv { aspect-ratio: 184/69; background: #000 center/cover; } .st-rt { display: grid; gap: 4px; } .st-rt b { font-size: 16px; } .st-price { padding: 6px 10px; border-radius: 3px; background: rgba(0, 0, 0, .4); color: var(--amber); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .st-row { grid-template-columns: 110px 1fr; } .st-price { grid-column: 2; justify-self: start; } }
/* Spotify */
.sp { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 8px; padding: 8px; min-height: calc(100vh - 130px); } @media (max-width: 860px) { .sp { grid-template-columns: 1fr; } .sp-side { display: none; } }
.sp-side, .sp-main { border-radius: 8px; background: color-mix(in srgb, var(--panel) 80%, #000); } .sp-side { display: grid; gap: 2px; align-content: start; padding: 14px 10px; }
.sp-side a { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 6px; text-decoration: none; } .sp-side a:hover { background: rgba(255, 255, 255, .06); } .sp-side a > span:last-child { display: grid; }
.sp-side .av { width: 46px; height: 46px; } .sp-side .sq { width: 46px; height: 46px; border-radius: 4px; background: #000 center/cover; flex: none; }
.sp-main { padding: 22px 24px 60px; background: linear-gradient(180deg, color-mix(in srgb, var(--copper) 30%, transparent), transparent 320px), color-mix(in srgb, var(--panel) 80%, #000); }
.sp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 30px; }
.sp-tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--ink); cursor: pointer; text-align: left; overflow: hidden; }
.sp-tile span { width: 64px; height: 64px; background: #000 center/cover; flex: none; } .sp-tile b { font-size: 14px; } .sp-tile i { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #000; font-style: normal; opacity: 0; transition: .2s; }
.sp-tile:hover { background: rgba(255, 255, 255, .16); } .sp-tile:hover i { opacity: 1; }
.sp .xrow-track { grid-auto-columns: minmax(170px, 190px); padding-bottom: 10px; margin-bottom: 0; }
.sp-card { display: grid; gap: 6px; padding: 12px; border-radius: 8px; transition: background .2s; } .sp-card:hover { background: rgba(255, 255, 255, .07); } .sp-card a { text-decoration: none; }
.sp-cv { position: relative; aspect-ratio: 1; border-radius: 6px; background: #000 center/cover; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.sp-play { position: absolute; right: 8px; bottom: 8px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--amber); color: #000; font-size: 16px; cursor: pointer; opacity: 0; transform: translateY(8px); transition: .25s; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.sp-card:hover .sp-play { opacity: 1; transform: none; }
.sp-ev { display: grid; gap: 4px; padding: 14px; border-radius: 8px; background: rgba(255, 255, 255, .06); text-decoration: none; } .sp-ev.now { background: color-mix(in srgb, var(--amber) 22%, transparent); }
.sp-artist { display: grid; justify-items: center; gap: 6px; padding: 12px; border-radius: 8px; text-decoration: none; text-align: center; } .sp-artist:hover { background: rgba(255, 255, 255, .07); } .sp-artist .av { width: 150px; height: 150px; }

/* ===== v24: the integral explorer ===== */
.ix-bill { min-height: min(72vh, 680px); } .ix-rows { margin-top: -40px; }
.ix-card { position: relative; } .ix-cv { position: relative; display: block; border-radius: 6px; background: #111 center/cover; transition: transform .3s .1s, box-shadow .3s; }
.ix-poster .ix-cv { aspect-ratio: 2/3; } .ix-wide .ix-cv { aspect-ratio: 16/9; } .ix-capsule .ix-cv { aspect-ratio: 460/215; } .ix-square .ix-cv { aspect-ratio: 1; } .ix-frame .ix-cv { aspect-ratio: 4/5; border: 6px solid #2b2216; } .ix-tall .ix-cv { aspect-ratio: 3/5; }
.ix-live { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: #E2463C; color: #fff; font: 700 10.5px var(--sans); }
.ix-pop { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; display: grid; gap: 6px; padding: 10px 12px; border-radius: 0 0 8px 8px; background: var(--panel2); opacity: 0; pointer-events: none; transition: .25s .1s; }
.ix-card:hover, .ix-card:focus-within { z-index: 5; } .ix-card:hover .ix-cv, .ix-card:focus-within .ix-cv { transform: scale(1.08); border-radius: 6px 6px 0 0; box-shadow: 0 20px 40px rgba(0, 0, 0, .7); }
.ix-card:hover .ix-pop, .ix-card:focus-within .ix-pop { opacity: 1; pointer-events: auto; transform: scale(1.08); transform-origin: top; }
.ix .xrow-track { grid-auto-columns: minmax(240px, 280px); } .ix-w-cine .xrow-track:not(.ix-evs):not(.ix-xo):not(.ix-people), .ix-w-moda .xrow-track:not(.ix-evs):not(.ix-xo):not(.ix-people) { grid-auto-columns: minmax(170px, 200px); }
.ix-w-musica .xrow-track:not(.ix-evs):not(.ix-xo):not(.ix-people), .ix-w-marca .xrow-track:not(.ix-evs):not(.ix-xo):not(.ix-people) { grid-auto-columns: minmax(180px, 210px); }
.ix-ev { display: grid; gap: 4px; padding: 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; } .ix-ev.now { border-color: #E2463C; box-shadow: 0 0 30px -10px #E2463C; } .ix-ev b { font: 400 18px/1.15 var(--serif); }
.ix-xo { grid-auto-columns: minmax(300px, 340px) !important; padding-bottom: 10px !important; margin-bottom: 0 !important; } .ix-xo .ucard { min-height: 220px; }
.ix-people { grid-auto-columns: 130px !important; padding-bottom: 10px !important; margin-bottom: 0 !important; } .ix-person { display: grid; justify-items: center; gap: 6px; text-align: center; text-decoration: none; } .ix-person .av { width: 96px; height: 96px; }
.ix-tabs { margin-bottom: 8px; } .ix-grid { display: grid; gap: 6px; }
.ix-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 16px; align-items: center; padding: 8px; border-radius: 6px; background: var(--panel); text-decoration: none; border: 1px solid transparent; }
.ix-row:hover { border-color: var(--line2); } .ix-rcv { display: block; border-radius: 4px; background: #000 center/cover; } .ix-rcv.ix-poster { aspect-ratio: 16/9; } .ix-rcv { aspect-ratio: 16/9; }
.ix-rt { display: grid; gap: 4px; } .ix-rt b { font: 400 20px var(--serif); } .ix-rt .lifeline { margin: 0; max-width: 260px; } .ix-rt .lifeline span { display: none; }
@media (max-width: 600px) { .ix-row { grid-template-columns: 110px 1fr; } .ix-row .st-price { grid-column: 2; justify-self: start; } }

/* ===== v25: a hall of creators' worlds ===== */
.cw-bill .nf-bill-bg::after { background: linear-gradient(90deg, rgba(0, 0, 0, .88) 10%, transparent 70%), linear-gradient(180deg, transparent 55%, var(--bg)), radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--ca) 35%, transparent), transparent 70%); }
.cw-bill .poster { font-size: clamp(48px, 7vw, 110px); } .cw-bill .star-av { border-color: var(--ca); box-shadow: 0 0 50px color-mix(in srgb, var(--ca) 50%, transparent); }
.cw-track { grid-auto-columns: minmax(330px, 380px) !important; padding-bottom: 10px !important; margin-bottom: 0 !important; }
.cw { position: relative; display: grid; align-content: space-between; min-height: 300px; border-radius: 18px; overflow: hidden; text-decoration: none; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--ca) 35%, transparent); background: var(--cb, #120d09); transition: transform .3s, box-shadow .3s; }
.cw:hover, .cw:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--ca) 60%, transparent); }
.cw-bg { position: absolute; inset: 0; z-index: -2; background: center/cover; filter: brightness(.55) saturate(1.1); transition: transform .8s, filter .4s; } .cw:hover .cw-bg { transform: scale(1.06); filter: brightness(.35); }
.cw::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .85)), radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--ca) 30%, transparent), transparent 70%); }
.cw-top { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px; }
.cw-id { display: flex; gap: 12px; align-items: center; padding: 0 16px; } .cw-id b { display: block; font: 400 28px/1.05 var(--serif); } .cw-av { width: 58px; height: 58px; border: 2px solid var(--ca); flex: none; }
.cw-id .mono { color: var(--ca); }
.cw-works { display: flex; gap: 6px; padding: 12px 16px 16px; } .cw-works i { width: 25%; aspect-ratio: 16/10; border-radius: 6px; background: #000 center/cover; border: 1px solid rgba(255, 255, 255, .15); }
.cw-pop { position: absolute; inset: 0; z-index: 1; display: grid; gap: 8px; align-content: end; padding: 18px; background: rgba(8, 6, 5, .82); opacity: 0; transition: opacity .3s; } .cw:hover .cw-pop, .cw:focus-visible .cw-pop { opacity: 1; }
.cw-enter { margin-top: 6px; font-weight: 700; color: var(--ca); }
.cw-row { border-left: 3px solid var(--ca); } .cw-mini { display: flex; gap: 4px; } .cw-mini i { width: 54px; aspect-ratio: 16/10; border-radius: 4px; background: #000 center/cover; }
@media (max-width: 600px) { .cw-mini { display: none; } }

/* ===== v26: the moment, kept ===== */
.evrooms, #subchat, #subsay { display: none !important; }
.rp-bar { position: absolute; z-index: 8; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .65); backdrop-filter: blur(8px); }
.rp-bar input[type=range] { flex: 1; accent-color: var(--amber); } .rp-bar select { width: auto; padding: 6px 8px; }
.replay .room-side { grid-template-rows: auto 1fr; } .hl { display: grid; gap: 4px; margin-top: 10px; max-height: 180px; overflow-y: auto; }
.hl button { text-align: left; background: none; border: 0; border-left: 2px solid var(--line2); padding: 4px 8px; color: var(--ink); cursor: pointer; font-size: 13px; } .hl button:hover { border-left-color: var(--amber); }
.moments { margin-bottom: 28px; } .mo-list { display: grid; gap: 8px; }
.mo { display: grid; grid-template-columns: 90px 1fr auto; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; }
.mo .mono { grid-row: span 2; } .mo b { font: 400 19px var(--serif); } .mo .small { grid-column: 2; } .mo-go { grid-row: 1 / span 2; grid-column: 3; color: var(--amber); font-weight: 600; }
.mo.now { border-color: #E2463C; } .mo:hover { border-color: var(--line2); }

.rp-start { position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 30px; text-align: center; background: radial-gradient(circle, rgba(0, 0, 0, .55), rgba(0, 0, 0, .85)); animation: rise .5s; }
.replay .heat { top: 16px; }

.replay { min-height: calc(100vh - 116px); } .replay .room-stage { height: calc(100vh - 116px); } .replay .room-screen video { max-height: calc(100vh - 220px); }
.replay .room-side { height: calc(100vh - 116px); }

/* ===== v28: creator and work, together ===== */
.pc2-feat { display: grid; gap: 6px; padding: 14px 16px; border-left: 3px solid var(--ca, var(--amber)); background: rgba(0, 0, 0, .35); border-radius: 0 12px 12px 0; max-width: 560px; }
.cw-work { display: grid; gap: 2px; padding: 0 16px 8px; } .cw-work b { font: 400 22px/1.1 var(--serif); } .cw-work .mono { color: var(--ca); }
.pc2 .ix-cv { position: relative; } .pc2-who { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 8px; align-items: center; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
.pc2-who .av { width: 30px; height: 30px; } .pc2-who b { display: block; font-size: 12.5px; } .pc2-who .mono { font-size: 9.5px; }
.pc2-t { display: grid; gap: 2px; padding: 8px 2px 0; } .pc2-t b { font: 400 19px/1.15 var(--serif); }
.pc2-track { padding-bottom: 80px !important; }
.ix-w-cine .pc2-track, .ix-w-moda .pc2-track { grid-auto-columns: minmax(200px, 230px) !important; } .ix-w-musica .pc2-track, .ix-w-marca .pc2-track { grid-auto-columns: minmax(210px, 240px) !important; }

/* ===== v29: trajectory of time machines ===== */
.tray { list-style: none; padding: 0 0 0 18px; margin: 0; display: grid; gap: 10px; border-left: 2px solid var(--line2); }
.tray li { position: relative; } .tray li::before { content: ""; position: absolute; left: -25px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel2); border: 2px solid var(--amber); }
.tray li.live::before { background: #E2463C; border-color: #E2463C; box-shadow: 0 0 12px #E2463C; } .tray li.next::before { border-style: dashed; }
.tray a { display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; }
.tray a:hover { border-color: var(--amber); } .tray-cv { position: relative; aspect-ratio: 16/9; border-radius: 8px; background: #000 center/cover; display: grid; place-items: center; }
.tray-play { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .65); color: var(--amber); font-size: 18px; } .tray li.live .tray-play { color: #FF8A80; }
.tray-b { display: grid; gap: 2px; } .tray-b b { font: 400 19px/1.15 var(--serif); } .tray-go { color: var(--amber); font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) { .tray a { grid-template-columns: 96px 1fr; } .tray-go { grid-column: 2; } }

/* ===== v30: rooms always open, global ===== */
.room-always { position: absolute; z-index: 5; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 6px 8px 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .72); }
.room-always .mono { color: #7CE38B; }
.gpill { color: #7CE38B !important; font-weight: 600; white-space: nowrap; margin-right: 8px; }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.room-card { aspect-ratio: 16/10; border-radius: 14px; background: #111 center/cover; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 14px; text-decoration: none; border: 1px solid var(--line); }
.room-card:hover { border-color: #7CE38B; } .room-card .mono { color: #7CE38B; } .room-card b { font: 400 21px/1.15 var(--serif); }
.tray-go object a { display: block; color: #7CE38B; font-weight: 500; margin-top: 4px; }

/* ===== v34: clear like Netflix, creator-linked like YouTube, atmospheric per world ===== */
.p34 { padding-bottom: 80px; }
.h34 { position: relative; min-height: min(68vh, 620px); display: flex; align-items: flex-end; background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.05) 100%), linear-gradient(0deg, var(--bg-0, #0b0b0d) 0%, transparent 35%), var(--bg) center/cover no-repeat; }
.h34-in { padding: 0 var(--gut, 32px) 56px; max-width: 640px; display: grid; gap: 12px; }
.h34-k { font: 600 12px/1 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.h34 h1 { margin: 0; font: 400 clamp(38px, 6vw, 76px)/1 var(--serif); }
.h34 p { margin: 0; font-size: 17px; color: rgba(255,255,255,.85); }
.h34-who, .t34-who { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.h34-who .av { width: 30px; height: 30px; } .h34-who span { font-weight: 600; }
.h34-act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.rows34 { display: grid; gap: 30px; margin-top: 24px; }
.r34 { padding: 0 var(--gut, 32px); }
.r34-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.r34-h h2 { margin: 0; font: 600 20px/1.2 var(--sans, inherit); }
.r34-h a { color: var(--muted, #aaa); font-size: 14px; text-decoration: none; } .r34-h a:hover { color: var(--amber); }
.r34-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 260px); gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.t34 { display: grid; gap: 6px; scroll-snap-align: start; min-width: 0; }
.t34-cv { position: relative; display: block; aspect-ratio: 16/9; border-radius: 10px; background: #111 center/cover; transition: transform .18s ease, box-shadow .18s ease; }
.t34-poster .t34-cv, .t34-tall .t34-cv { aspect-ratio: 2/3; } .t34-square .t34-cv, .t34-frame .t34-cv { aspect-ratio: 1/1; } .t34-capsule .t34-cv { aspect-ratio: 46/21; }
.r34-track:has(.t34-poster), .r34-track:has(.t34-tall) { grid-auto-columns: minmax(160px, 185px); }
.r34-track:has(.t34-square), .r34-track:has(.t34-frame) { grid-auto-columns: minmax(180px, 200px); }
.t34-cv:hover { transform: scale(1.03); box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 2px var(--amber); }
.t34-t { font-weight: 600; font-size: 15px; line-height: 1.25; color: inherit; text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.t34-who { font-size: 13px; color: var(--muted, #aaa); } .t34-who .av { width: 22px; height: 22px; font-size: 11px; } .t34-who:hover { color: #fff; }
.b34 { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 6px; font: 700 11px/1.3 var(--sans, inherit); background: rgba(0,0,0,.75); color: #fff; }
.b34.new { background: var(--amber); color: #111; } .b34.live { background: #E2463C; }
.t34-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.25); border-radius: 0 0 10px 10px; overflow: hidden; } .t34-prog b { display: block; height: 100%; background: #E2463C; }
.g34 { display: flex; gap: 8px; overflow-x: auto; padding: 18px var(--gut, 32px) 0; }
.g34 a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line, #333); white-space: nowrap; text-decoration: none; color: inherit; font-size: 14px; }
.g34 a.on, .g34 a:hover { background: #fff; color: #111; border-color: #fff; }
.grid34 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 14px; }
.cr34 { grid-auto-columns: 130px !important; } .cr34-i { display: grid; justify-items: center; gap: 6px; text-align: center; text-decoration: none; color: inherit; }
.cr34-av { width: 96px !important; height: 96px !important; font-size: 32px; border: 2px solid transparent; } .cr34-i:hover .cr34-av { border-color: var(--amber); }
@media (max-width: 640px) { .h34-in { padding: 0 16px 36px; } .r34, .g34 { padding-left: 16px; padding-right: 16px; } .r34-track { grid-auto-columns: minmax(200px, 72vw); } }

/* ===== v35: the work page ===== */
.wp35 .h34 { min-height: min(62vh, 560px); }
.ev35 { display: inline-block; justify-self: start; padding: 5px 10px; border-radius: 6px; background: rgba(0,0,0,.6); font-size: 13px; font-weight: 600; } .ev35.live { background: #E2463C; }
.lk34, .lk34 { font-size: 12px; color: var(--amber); white-space: nowrap; } .lk35 {}
.tl35 { list-style: none; margin: 0; padding: 0; max-width: 820px; } .tl35 a { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 8px; color: inherit; text-decoration: none; }
.tl35 a:hover { background: rgba(255,255,255,.07); } .tl35 .n { color: var(--muted,#aaa); text-align: right; } .tl35 .tt { display: grid; } .tl35 .d { color: var(--muted,#aaa); font-variant-numeric: tabular-nums; }
.gm35 { display: grid; gap: 10px; max-width: 820px; } .gm35-i { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line,#333); } .gm35-i > div { display: grid; gap: 2px; }
.ep35 { list-style: none; margin: 0; padding: 0; max-width: 820px; } .ep35 a { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line,#333); color: inherit; text-decoration: none; } .ep35 a:hover { background: rgba(255,255,255,.05); } .ep35-n { font: 400 22px var(--serif); color: var(--muted,#aaa); } .ep35 .tt { display: grid; }
.ep35g { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 14px; } .ep35c { display: grid; gap: 8px; color: inherit; text-decoration: none; } .ep35c .tt { display: grid; gap: 2px; }
.ep35-th { position: relative; aspect-ratio: 16/9; border-radius: 10px; background: #111 center/cover; display: grid; place-items: center; transition: box-shadow .15s; } .ep35c:hover .ep35-th { box-shadow: 0 0 0 2px var(--amber); }
.ep35-th .pl { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.65); opacity: 0; transition: opacity .15s; } .ep35c:hover .pl { opacity: 1; }
.ep35-th .d { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.75); font-size: 12px; }
.ab35 p { max-width: 760px; line-height: 1.6; margin: 0; color: rgba(255,255,255,.85); }
.mo35 { aspect-ratio: 16/9; border-radius: 10px; background: #111 center/cover; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 12px; color: #fff; text-decoration: none; } .mo35 b { font: 400 18px/1.15 var(--serif); }
.cm35 { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line,#333); max-width: 900px; } .cm35 > div:nth-child(2) { display: grid; gap: 2px; }
.cm35-av { width: 64px !important; height: 64px !important; font-size: 24px; }
@media (max-width: 640px) { .cm35 { grid-template-columns: auto 1fr; } .cm35 .btn { grid-column: 1 / -1; } }

/* ===== v36: creator channel ===== */
.ch36-ban { height: clamp(160px, 26vw, 300px); background: #111 center/cover; }
.ch36-id { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 0 var(--gut, 32px); margin-top: -48px; position: relative; }
.ch36-av { width: 128px !important; height: 128px !important; font-size: 44px; border: 4px solid var(--bg-0, #0b0b0d); }
.ch36-meta { display: grid; gap: 4px; padding-top: 44px; } .ch36-meta h1 { margin: 0; font: 600 clamp(26px, 3.4vw, 40px)/1.1 var(--sans, inherit); } .ch36-meta p { margin: 4px 0 0; max-width: 620px; }
.ch36-v { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ca); color: #111; font-size: 13px; vertical-align: middle; }
.ch36-act { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 44px; } .ch36-act .btn:first-child:not(.ghost) { background: var(--ca); border-color: var(--ca); color: #111; }
.ch36-tabs { display: flex; gap: 6px; padding: 18px var(--gut, 32px) 0; border-bottom: 1px solid var(--line, #333); overflow-x: auto; }
.ch36-tabs a { padding: 10px 14px; color: var(--muted, #aaa); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; } .ch36-tabs a.on, .ch36-tabs a:hover { color: #fff; border-color: var(--ca); }
@media (max-width: 720px) { .ch36-id { grid-template-columns: 1fr; padding: 0 16px; } .ch36-meta, .ch36-act { padding-top: 0; } .ch36-av { width: 96px !important; height: 96px !important; } }

/* ===== v37: Steam-like games, Spotify-like music ===== */
.st37-car { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(520px, 760px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.st37-f { display: grid; grid-template-columns: 1.6fr 1fr; background: rgba(255,255,255,.05); border-radius: 6px; overflow: hidden; color: inherit; text-decoration: none; scroll-snap-align: start; box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.st37-fi { aspect-ratio: 16/9; background: #111 center/cover; } .st37-fb { display: grid; align-content: start; gap: 8px; padding: 16px; } .st37-fb > b:first-child { font-size: 20px; } .st37-pr { margin-top: auto; color: #BEEE11; }
.st37-wrap { display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: start; }
.st37-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line, #333); } .st37-tabs a { padding: 10px 16px; color: var(--muted, #aaa); text-decoration: none; font-weight: 600; } .st37-tabs a.on { color: #fff; background: rgba(255,255,255,.08); border-radius: 6px 6px 0 0; }
.st37-list { display: grid; gap: 4px; margin-top: 6px; }
.st37-r { display: grid; grid-template-columns: 184px 1fr auto; gap: 14px; align-items: center; padding: 6px; border-radius: 4px; background: rgba(255,255,255,.04); color: inherit; text-decoration: none; } .st37-r:hover { background: rgba(255,255,255,.1); }
.st37-cap { aspect-ratio: 46/21; background: #111 center/cover; border-radius: 3px; } .st37-b { display: grid; gap: 4px; } .st37-b > b { font-size: 16px; }
.st37-tags { display: flex; gap: 4px; flex-wrap: wrap; } .st37-tags i { font-style: normal; font-size: 11px; padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,.1); color: var(--muted, #bbb); text-transform: capitalize; }
.st37-p { display: grid; justify-items: end; gap: 4px; padding-right: 8px; } .st37-p b { color: #BEEE11; } .b34s { font-size: 11px; color: var(--amber); font-weight: 700; }
.st37-side { display: grid; gap: 4px; padding: 14px; border-radius: 6px; background: rgba(255,255,255,.04); } .st37-side h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted, #aaa); }
.st37-side a { padding: 6px 8px; border-radius: 4px; color: inherit; text-decoration: none; text-transform: capitalize; } .st37-side a:hover { background: rgba(255,255,255,.1); }
.sp37-tr { grid-auto-columns: minmax(170px, 190px) !important; } .sp37 { display: grid; gap: 6px; padding: 10px; border-radius: 8px; transition: background .15s; } .sp37:hover { background: rgba(255,255,255,.07); }
.sp37-cv { position: relative; aspect-ratio: 1/1; border-radius: 6px; background: #111 center/cover; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sp37-pl { position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #1ED760; color: #111; opacity: 0; transform: translateY(6px); transition: all .18s; } .sp37:hover .sp37-pl { opacity: 1; transform: none; }
@media (max-width: 860px) { .st37-wrap { grid-template-columns: 1fr; } .st37-car { grid-auto-columns: 88vw; } .st37-f { grid-template-columns: 1fr; } .st37-r { grid-template-columns: 120px 1fr; } .st37-p { grid-column: 2; justify-items: start; } }

/* ===== v38: each world like its reference ===== */
.cr38-tr { grid-auto-columns: minmax(170px, 190px) !important; } .cr38 { display: grid; gap: 6px; }
.cr38-cv { position: relative; display: block; aspect-ratio: 2/3; background: #111 center/cover; overflow: hidden; }
.cr38-ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12px; background: rgba(0,0,0,.86); opacity: 0; transition: opacity .18s; color: #fff; }
.cr38:hover .cr38-ov { opacity: 1; } .cr38-go { color: #F47521; font-weight: 700; }
.ne38 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .ne38-i { display: grid; grid-template-columns: 160px 1fr; gap: 12px; color: inherit; text-decoration: none; }
.ne38-th { aspect-ratio: 16/9; background: #111 center/cover; display: grid; place-items: center; } .ne38-th span { opacity: 0; color: #F47521; font-size: 26px; transition: opacity .15s; } .ne38-i:hover .ne38-th span { opacity: 1; } .ne38-b { display: grid; align-content: start; gap: 3px; }
.gg38 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .gg38 a { padding: 22px 14px; text-align: center; background: linear-gradient(135deg, rgba(244,117,33,.22), rgba(255,255,255,.04)); color: inherit; text-decoration: none; font-weight: 700; } .gg38 a:hover { background: #F47521; color: #111; }
body[data-world="anime"] .cr34-av { border-radius: 50%; }
.tp38 { grid-auto-columns: minmax(200px, 230px) !important; } .tp38-i { display: grid; grid-template-columns: 70px 1fr; align-items: end; text-decoration: none; }
.tp38-n { font: 900 120px/0.8 var(--sans, inherit); color: transparent; -webkit-text-stroke: 3px rgba(255,255,255,.7); margin-right: -14px; z-index: 1; } .tp38-cv { position: relative; aspect-ratio: 2/3; border-radius: 4px; background: #111 center/cover; }
.ms38 { columns: 4 240px; column-gap: 12px; } .ms38-i { position: relative; display: block; margin-bottom: 12px; break-inside: avoid; border-radius: 6px; overflow: hidden; } .ms38-i img { display: block; width: 100%; height: auto; }
.ms38-ov { position: absolute; inset: auto 0 0 0; display: grid; gap: 4px; padding: 30px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,.85)); opacity: 0; transition: opacity .18s; color: #fff; } .ms38-i:hover .ms38-ov { opacity: 1; }
.ms38-moda .ms38-i { border-radius: 0; } .ms38-moda .ms38-ov b { font: 400 20px var(--serif); letter-spacing: .04em; text-transform: uppercase; }
.ph38 { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 900px; } .ph38 li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; } .ph38 li:hover { background: rgba(255,255,255,.05); }
.ph38 a { display: grid; grid-template-columns: 28px 72px 1fr; gap: 14px; align-items: center; color: inherit; text-decoration: none; } .ph38-n { color: var(--muted,#aaa); font-weight: 700; } .ph38-cv { aspect-ratio: 1/1; border-radius: 10px; background: #111 center/cover; } .ph38-b { display: grid; gap: 2px; }
.ph38-up { display: grid; justify-items: center; gap: 2px; width: 58px; padding: 8px 0; border-radius: 10px; border: 1px solid var(--line,#444); background: transparent; color: inherit; cursor: pointer; } .ph38-up:hover { border-color: #FF6154; color: #FF6154; }
.ab38 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px 18px; } .ab38-i { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.ab38-cv { position: relative; aspect-ratio: 20/19; border-radius: 14px; background: #111 center/cover; transition: transform .18s; } .ab38-i:hover .ab38-cv { transform: scale(1.02); } .ab38-b { display: grid; gap: 2px; }

/* ===== v39: community inside the creator page ===== */
.cm39 { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--ca) 22%, transparent), rgba(255,255,255,.03)); border: 1px solid var(--line, #333); }
.cm39 h2 { margin: 4px 0; font: 400 34px/1.1 var(--serif); } .cm39 p { margin: 4px 0 0; max-width: 640px; } .cm39 .btn { background: var(--ca); border-color: var(--ca); color: #111; }
.pl39 { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 760px; } .pl39 a { display: block; padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,.04); color: inherit; text-decoration: none; } .pl39 a:hover { background: rgba(255,255,255,.09); }

/* ===== v40: the creator as the star ===== */
.ch40-stage { position: relative; min-height: min(64vh, 560px); display: grid; place-items: end center; text-align: center;
  background: linear-gradient(0deg, var(--bg-0, #0b0b0d) 2%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 100%), var(--bn) center/cover no-repeat; }
.ch40-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 70%, color-mix(in srgb, var(--ca) 28%, transparent), transparent 70%); pointer-events: none; }
.ch40-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; padding: 0 16px 34px; max-width: 760px; }
.ch40-av { width: 150px !important; height: 150px !important; font-size: 54px; border: 4px solid var(--ca); box-shadow: 0 0 0 6px rgba(0,0,0,.4), 0 18px 50px rgba(0,0,0,.6); }
.ch40-in h1 { margin: 0; font: 400 clamp(40px, 6.5vw, 84px)/1 var(--serif); }
.ch40-sub { color: rgba(255,255,255,.75); font-weight: 600; } .ch40-in p { margin: 0; color: rgba(255,255,255,.85); }
.ch40-act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; } .ch40-act .btn:first-child:not(.ghost) { background: var(--ca); border-color: var(--ca); color: #111; min-width: 140px; }
.ch40-tabs { justify-content: center; }
.po40 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; } .sp40-g { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; }
.sp40-lat { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; max-width: 820px; } .sp40-lat h3 { margin: 6px 0; font: 400 34px/1.1 var(--serif); } .sp40-lat p { margin: 0 0 12px; }
.sh40 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 16px; } .sh40-i { display: grid; gap: 6px; }
.sh40-cv { position: relative; aspect-ratio: 1/1; border-radius: 10px; background: #111 center/cover; } .sh40-p { font-size: 17px; }
@media (max-width: 640px) { .ch40-av { width: 110px !important; height: 110px !important; } .sp40-lat { grid-template-columns: 1fr; } }

/* ===== v41: creator feed first ===== */
.fd40 { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.fd40-n { padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--ca) 14%, transparent); color: inherit; text-decoration: none; font-weight: 600; }
.fd40-i { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line,#333); color: inherit; text-decoration: none; }
.fd40-i:hover { border-color: var(--ca); } .fd40-i > span:last-child { display: grid; gap: 4px; } .fd40-i b { font: 400 22px/1.15 var(--serif); }
.fd40-cv { aspect-ratio: 16/9; border-radius: 8px; background: #111 center/cover; }
@media (max-width: 640px) { .fd40-i { grid-template-columns: 110px 1fr; } }

/* ===== v42: collabs up front ===== */
.col41 .unions { gap: 14px; } .col41 .r34-h h2 { color: var(--ca); }
.sh41 { display: grid; gap: 4px; color: inherit; text-decoration: none; } .sh41 .sh40-cv { aspect-ratio: 1/1; }

/* ===== v43: feed — the next premiere as a stage, the rest as a richer timeline ===== */
.fd42-hero { position: relative; display: grid; align-items: end; min-height: 360px; max-width: 1100px; margin: 0 auto; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none;
  background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.1) 100%), var(--bg) center/cover; box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--ca) 45%, transparent); }
.fd42-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--ca) 35%, transparent), transparent 70%); pointer-events: none; }
.fd42-in { position: relative; z-index: 1; display: grid; gap: 10px; padding: 34px; max-width: 620px; }
.fd42-k { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--ca); color: #111; font: 800 12px/1 var(--sans, inherit); letter-spacing: .1em; text-transform: uppercase; }
.fd42-in > b { font: 400 clamp(30px, 4vw, 48px)/1.05 var(--serif); }
.fd42-cd { display: flex; gap: 10px; } .fd42-cd span { display: grid; justify-items: center; min-width: 64px; padding: 10px 8px; border-radius: 12px; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.fd42-cd b { font: 700 28px/1 var(--sans, inherit); font-variant-numeric: tabular-nums; } .fd42-cd i { font-style: normal; font-size: 11px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .08em; }
.fd42-meta { color: rgba(255,255,255,.8); font-weight: 600; } .fd42-go { justify-self: start; background: var(--ca) !important; border-color: var(--ca) !important; color: #111 !important; }
.fd40 { gap: 14px; max-width: 1100px; }
.fd40-i { grid-template-columns: 300px 1fr; gap: 22px; padding: 12px; border-radius: 16px; transition: transform .15s, border-color .15s, background .15s; }
.fd40-i:hover { transform: translateY(-2px); background: rgba(255,255,255,.07); }
.fd40-cv { border-radius: 12px; } .fd40-i b { font-size: 26px; } .fd40-i .h34-k { color: var(--ca); }
.fd40-n { padding: 12px 16px; border-left: 3px solid var(--ca); border-radius: 0 10px 10px 0; }
@media (max-width: 640px) { .fd42-in { padding: 20px; } .fd42-cd span { min-width: 52px; } .fd40-i { grid-template-columns: 120px 1fr; } .fd40-i b { font-size: 19px; } }

/* ===== v44: what's inside each feed card ===== */
.fd44 { display: grid; gap: 8px; margin-top: 6px; }
.fd44-st { display: flex; flex-wrap: wrap; gap: 6px; } .fd44-st i { font-style: normal; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.fd42-hero .fd44-st i { background: rgba(0,0,0,.45); }
.fd44-q { display: grid; gap: 2px; padding: 8px 12px; border-left: 2px solid var(--ca); background: rgba(255,255,255,.04); border-radius: 0 8px 8px 0; font-size: 14px; color: rgba(255,255,255,.88); }
.fd44-q b { font: 600 12px/1.2 var(--sans, inherit) !important; color: var(--ca); text-transform: none; }
.fd40-i { align-items: start; } .fd40-i > span:last-child { gap: 6px; }

/* ===== v45: the creator page as one continuous stage — each part in its own space ===== */
.ch40 .rows34 { gap: 0; margin-top: 0; }
.zn45 { padding: 54px 0 46px; border-top: 1px solid var(--line, #2a2a2a); scroll-margin-top: 70px; }
.zn45:first-child { border-top: 0; padding-top: 34px; }
.zn45:nth-child(even) { background: linear-gradient(180deg, color-mix(in srgb, var(--ca) 7%, transparent), transparent 60%); }
.zn45-h { display: flex; align-items: baseline; gap: 14px; padding: 0 var(--gut, 32px) 20px; max-width: 1200px; }
.zn45-n { font: 700 13px/1 var(--mono, monospace); color: var(--ca); letter-spacing: .12em; }
.zn45-h h2 { margin: 0; font: 400 clamp(28px, 3.2vw, 42px)/1.1 var(--serif); }
.zn45 .rows34, .zn45 > .r34 + .r34 { margin-top: 22px; } .zn45 > section + section { margin-top: 26px; }
@media (max-width: 640px) { .zn45 { padding: 36px 0 30px; } .zn45-h { padding: 0 16px 14px; } }

/* ===== v46: the heart that lifts ===== */
.ht46 { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,90,120,.55); background: rgba(255,90,120,.1); color: #fff; font-weight: 700; cursor: pointer; overflow: visible; transition: transform .15s, background .15s; }
.ht46:hover { background: rgba(255,90,120,.22); transform: translateY(-1px); } .ht46-h { color: #FF5A78; font-size: 18px; line-height: 1; } .ht46-n { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.25); font-variant-numeric: tabular-nums; }
.ht46.on .ht46-h { animation: ht46b .5s ease; } @keyframes ht46b { 30% { transform: scale(1.6); } 60% { transform: scale(.9); } }
.ht46-up { position: absolute; bottom: 70%; font-style: normal; color: #FF5A78; font-size: 16px; pointer-events: none; animation: ht46u 1.3s ease-out forwards; } @keyframes ht46u { from { opacity: 1; transform: translateY(0) scale(.8); } to { opacity: 0; transform: translateY(-70px) scale(1.25); } }
/* creator card on every work page */
.cc46 { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--line, #333); color: inherit; text-decoration: none; max-width: 1000px; transition: border-color .15s, transform .15s; }
.cc46:hover { border-color: var(--amber); transform: translateY(-2px); } .cc46-av { width: 72px !important; height: 72px !important; font-size: 28px; } .cc46-b { display: grid; gap: 2px; } .cc46-b b { font: 400 26px/1.1 var(--serif); } .cc46-go { color: var(--amber); font-weight: 700; white-space: nowrap; }
/* Steam store page */
.sg46 { max-width: 1180px; margin: 0 auto; padding: 26px var(--gut, 32px) 10px; } .sg46-crumb { font-size: 13px; color: var(--muted, #8f98a0); } .sg46-crumb a { color: inherit; } .sg46 h1 { margin: 6px 0 14px; font: 500 32px/1.15 var(--sans, inherit); }
.sg46-hero { display: grid; grid-template-columns: 1fr 340px; gap: 16px; background: rgba(0,0,0,.25); padding: 14px; border-radius: 4px; }
.sg46-main { aspect-ratio: 16/9; background: #000 center/contain no-repeat; } .sg46-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; } .sg46-thumbs button { width: 116px; aspect-ratio: 16/9; border: 2px solid transparent; background: #111 center/cover; cursor: pointer; opacity: .65; } .sg46-thumbs .on { border-color: #fff; opacity: 1; }
.sg46-side { display: grid; align-content: start; gap: 10px; font-size: 14px; } .sg46-cap { aspect-ratio: 46/21; background: #111 center/cover; } .sg46-side p { margin: 0; color: #c7d5e0; }
.sg46-side dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; } .sg46-side dt { color: #556772; font-size: 12px; text-transform: uppercase; } .sg46-side dd { margin: 0; } .sg46-side dd a { color: #66c0f4; }
.sg46-tags { display: flex; flex-wrap: wrap; gap: 4px; } .sg46-tags a { padding: 2px 8px; border-radius: 2px; background: rgba(103,193,245,.2); color: #67c1f5; font-size: 12px; text-decoration: none; text-transform: capitalize; }
.sg46-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sg46-ev { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 14px; padding: 14px 18px; border-radius: 4px; background: linear-gradient(90deg, rgba(102,192,244,.25), rgba(102,192,244,.05)); color: #fff; text-decoration: none; } .sg46-ev.live { background: linear-gradient(90deg, rgba(226,70,60,.45), rgba(226,70,60,.08)); } .sg46-evgo { font-weight: 700; }
.sg46-body { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-top: 18px; }
.sg46-buy { position: relative; padding: 16px 18px 30px; margin-bottom: 26px; border-radius: 4px; background: linear-gradient(-60deg, rgba(226,244,255,.1) 5%, rgba(84,107,115,.25) 95%); } .sg46-buy h3 { margin: 0 0 4px; font: 500 20px var(--sans, inherit); }
.sg46-pb { position: absolute; right: 16px; bottom: -16px; display: flex; align-items: stretch; background: #000; padding: 2px; border-radius: 2px; } .sg46-price { display: grid; place-items: center; padding: 0 12px; font-size: 14px; color: #c7d5e0; } .sg46-price.free { color: #BEEE11; }
.sg46-btn { display: grid; place-items: center; padding: 8px 18px; border: 0; border-radius: 2px; background: linear-gradient(to right, #75b022 5%, #588a1b 95%); color: #d2efa9; font-weight: 700; cursor: pointer; text-decoration: none; } .sg46-btn:hover { background: linear-gradient(to right, #8ed629 5%, #6aa621 95%); color: #fff; }
.sg46-h { font: 500 14px var(--sans, inherit); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.15); margin: 26px 0 10px; } .sg46-about { color: #acb2b8; line-height: 1.65; }
.sg46-body .cc46 { grid-template-columns: auto 1fr; } .sg46-body .cc46-go { grid-column: 1 / -1; }
/* Spotify album page */
.sa46-top { display: flex; gap: 24px; align-items: flex-end; padding: 60px var(--gut, 32px) 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 45%, #333) 0%, transparent 100%); }
.sa46-cv { width: 232px; aspect-ratio: 1; background: #111 center/cover; box-shadow: 0 8px 40px rgba(0,0,0,.6); flex: none; } .sa46-meta { display: grid; gap: 8px; } .sa46-meta h1 { margin: 0; font: 900 clamp(36px, 6vw, 88px)/1 var(--sans, inherit); letter-spacing: -.02em; }
.sa46-by { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; } .sa46-bar { display: flex; align-items: center; gap: 14px; padding: 18px var(--gut, 32px); flex-wrap: wrap; }
.sa46-play { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #1ED760; color: #111; font-size: 22px; text-decoration: none; transition: transform .12s; } .sa46-play:hover { transform: scale(1.06); }
/* Crunchyroll series page */
.cs46-ban { position: relative; background: linear-gradient(90deg, rgba(0,0,0,.92) 25%, rgba(0,0,0,.4)), var(--bg) center/cover; } .cs46-in { display: grid; grid-template-columns: 240px 1fr; gap: 28px; padding: 46px var(--gut, 32px); max-width: 1180px; }
.cs46-po { aspect-ratio: 2/3; background: #111 center/cover; box-shadow: 0 12px 40px rgba(0,0,0,.6); } .cs46-meta { display: grid; align-content: center; gap: 10px; } .cs46-meta h1 { margin: 0; font: 700 clamp(30px, 4vw, 48px)/1.1 var(--sans, inherit); } .cs46-meta p { margin: 0; max-width: 640px; color: rgba(255,255,255,.85); }
.cs46-act { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .cs46-btn { padding: 12px 22px; background: #F47521; color: #000; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; } .cs46-btn:hover { background: #ff8a3d; }
.wp46 .r34 { margin-top: 26px; }
@media (max-width: 900px) { .sg46-hero, .sg46-body { grid-template-columns: 1fr; } .sa46-top { flex-direction: column; align-items: flex-start; } .sa46-cv { width: 180px; } .cs46-in { grid-template-columns: 140px 1fr; gap: 16px; } .cc46 { grid-template-columns: auto 1fr; } .cc46-go { grid-column: 1 / -1; } }

/* ===== v47: creator studio ===== */
.st47 { display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - 64px); }
.sn47 { position: sticky; top: 64px; align-self: start; display: grid; gap: 2px; padding: 22px 14px; border-right: 1px solid var(--line, #2a2a2a); min-height: calc(100vh - 64px); }
.sn47 a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--muted, #aaa); text-decoration: none; font-weight: 600; } .sn47 a i { width: 20px; text-align: center; font-style: normal; }
.sn47 a:hover { background: rgba(255,255,255,.05); color: #fff; } .sn47 a.on { background: rgba(255,255,255,.09); color: #fff; box-shadow: inset 3px 0 0 var(--amber); }
.sn47-me { margin-bottom: 14px; padding: 12px !important; background: rgba(255,255,255,.04); } .sn47-me .av { width: 40px; height: 40px; } .sn47-me > span { display: grid; } .sn47-me b { color: #fff; }
.st47-main { padding: 30px clamp(16px, 3vw, 44px) 80px; max-width: 1180px; }
.st47-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .st47-h h1 { margin: 0; font: 400 clamp(30px, 3.4vw, 44px)/1.1 var(--serif); } .st47-h p { margin: 6px 0 0; }
.st47-t { margin: 34px 0 14px; font: 600 19px var(--sans, inherit); }
.kp47 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .kp47-i { display: grid; gap: 4px; padding: 18px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line, #2a2a2a); } .kp47-i b { font: 600 34px/1 var(--sans, inherit); }
.ac47 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .ac47-i { display: grid; gap: 6px; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(242,181,68,.12), rgba(255,255,255,.02)); border: 1px solid var(--line, #2a2a2a); color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.ac47-i:hover { transform: translateY(-2px); border-color: var(--amber); } .ac47-i i { font-style: normal; font-size: 22px; color: var(--amber); } .ac47-i b { font-size: 16px; }
.og47 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .og47-i { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.og47-cv { position: relative; aspect-ratio: 16/10; border-radius: 12px; background: #15151b center/cover; display: grid; place-items: center; font: 400 40px var(--serif); color: var(--muted, #888); transition: box-shadow .15s; } .og47-i:hover .og47-cv { box-shadow: 0 0 0 2px var(--amber); } .og47-cv .pill { position: absolute; left: 8px; top: 8px; }
.pill.green { background: rgba(80,200,120,.2); color: #7CE38B; } .pill.mute { background: rgba(255,255,255,.08); color: var(--muted, #aaa); }
.em47 { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; border: 1px dashed var(--line, #333); border-radius: 16px; text-align: center; }
.ne47 { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: center; padding: 14px; margin-bottom: 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line, #2a2a2a); } .ne47.sm { grid-template-columns: 160px 1fr; }
.ne47-cv { aspect-ratio: 16/9; border-radius: 10px; background: #111 center/cover; } .ne47 > div { display: grid; gap: 8px; justify-items: start; } .ne47 b { font: 400 24px/1.15 var(--serif); }
.ne47 .fd42-cd span { background: rgba(255,255,255,.07); min-width: 54px; padding: 8px 6px; } .ne47 .fd42-cd b { font-size: 22px; }
.nf47 { display: grid; gap: 16px; max-width: 760px; } .wd47 { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.wd47 label { cursor: pointer; } .wd47 input { position: absolute; opacity: 0; } .wd47 label > span { display: grid; gap: 4px; padding: 16px; border-radius: 12px; border: 1px solid var(--line, #333); background: rgba(255,255,255,.03); } .wd47 input:checked + span { border-color: var(--amber); background: rgba(242,181,68,.12); }
.fl47 { display: grid; gap: 6px; font-weight: 600; font-size: 14px; } .fl47 .in, .fl47 textarea, .fl47 select { font-weight: 400; } .ck47 { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.sp47 { position: sticky; top: 64px; z-index: 5; display: flex; gap: 6px; padding: 10px 0; margin-bottom: 8px; background: var(--bg-0, #0b0b0d); overflow-x: auto; }
.sp47 a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line, #333); color: inherit; text-decoration: none; white-space: nowrap; font-size: 14px; } .sp47 a:hover { border-color: var(--amber); } .sp47 i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--amber); color: #111; font: 700 11px var(--sans, inherit); font-style: normal; }
.cd47 { padding: 24px; margin-top: 18px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line, #2a2a2a); scroll-margin-top: 130px; } .cd47 h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 20px var(--sans, inherit); }
.cd47 h2 i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--amber); color: #111; font: 700 14px var(--sans, inherit); font-style: normal; }
.fg47 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; align-items: end; } .fg47 .w2 { grid-column: 1 / -1; } .fg47 .sm { max-width: 220px; }
.in47 { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line, #333); }
.md47 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 10px; } .md47-i { position: relative; aspect-ratio: 16/10; border-radius: 10px; background: #111 center/cover; display: flex; align-items: flex-end; padding: 8px; } .md47-i.cv { box-shadow: 0 0 0 2px var(--amber); }
.md47-x { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; }
.md47-add { display: grid; place-items: center; aspect-ratio: 16/10; border-radius: 10px; border: 1px dashed var(--line, #444); text-align: center; color: var(--muted, #aaa); cursor: pointer; } .md47-add:hover { border-color: var(--amber); color: #fff; }
.it47 { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .it47 li { display: grid; grid-template-columns: 60px 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); } .it47-n { color: var(--muted, #aaa); font-variant-numeric: tabular-nums; }
.of47 { display: grid; gap: 8px; margin-top: 10px; } .of47-i { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.04); } .of47-i.off, .sh40-i.off { opacity: .55; }
.pb47 { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; } .pb47 > div:first-child { display: grid; gap: 6px; justify-items: start; max-width: 560px; } .pb47-a { display: grid; gap: 10px; justify-items: end; }
.cm47 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .pv47 { position: sticky; top: 90px; display: grid; gap: 6px; } .pv47-s { min-height: 380px; border-radius: 18px; overflow: hidden; } .pv47-s .ch40-av { width: 100px !important; height: 100px !important; } .pv47-s h1 { font-size: 40px !important; }
@media (max-width: 900px) { .st47 { grid-template-columns: 1fr; } .sn47 { position: static; min-height: 0; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line, #2a2a2a); padding: 10px; } .sn47 a { white-space: nowrap; } .sn47-me { display: none !important; } .cm47, .ne47 { grid-template-columns: 1fr; } .it47 li, .of47-i { grid-template-columns: 1fr auto; } }
.b34.ok { background: rgba(0,0,0,.75); color: #7CE38B; }

/* ===== v48: premiere chat — GIF reactions, emoji, mentions, visible applause ===== */
.gf48 { display: inline-grid; justify-items: center; gap: 2px; padding: 8px 14px; margin: 4px 0; border-radius: 14px; background: radial-gradient(circle at 50% 30%, rgba(242,181,68,.35), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.12); }
.gf48-e { font-size: 38px; line-height: 1; display: inline-block; } .gf48 b { font: 900 12px/1 var(--sans, inherit); letter-spacing: .06em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.gf48-pop .gf48-e { animation: g48pop 1.1s ease-in-out infinite; } .gf48-shake .gf48-e { animation: g48sh .5s linear infinite; } .gf48-float .gf48-e { animation: g48fl 1.6s ease-in-out infinite; }
.gf48-spin .gf48-e { animation: g48sp 2s linear infinite; } .gf48-pulse .gf48-e { animation: g48pu 1s ease-in-out infinite; }
@keyframes g48pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-8deg); } 60% { transform: scale(.95) rotate(6deg); } }
@keyframes g48sh { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px) rotate(-6deg); } 75% { transform: translateX(3px) rotate(6deg); } }
@keyframes g48fl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes g48sp { to { transform: rotate(360deg); } } @keyframes g48pu { 50% { transform: scale(1.25); filter: drop-shadow(0 0 10px #F2B544); } }
.room-chat li.m-gif { background: transparent; }
.ch48 { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(242,181,68,.14); font-size: 13px; }
.ch48-a { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--amber); color: #111; font-weight: 800; font-size: 11px; } .ch48-c { animation: g48pop 1s ease-in-out 2; display: inline-block; }
.mn48 { color: #66c0f4; font-weight: 700; }
.room-say { position: relative; display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.cp48 { display: flex; gap: 4px; } .cp48-b { min-width: 38px; height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line, #333); background: rgba(255,255,255,.05); color: inherit; font: 800 12px var(--sans, inherit); cursor: pointer; } .cp48-b:hover { border-color: var(--amber); }
.pn48 { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20; padding: 12px; border-radius: 14px; background: #16161d; border: 1px solid var(--line, #333); box-shadow: 0 -10px 40px rgba(0,0,0,.5); max-height: 320px; overflow: auto; }
.pn48-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .pn48-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pn48-g button { border: 0; background: transparent; cursor: pointer; padding: 0; } .pn48-g button:hover .gf48 { border-color: var(--amber); }
.pn48-e { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; } .pn48-e button { font-size: 22px; padding: 6px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; } .pn48-e button:hover { background: rgba(255,255,255,.08); }

/* ===== v49: native players + calmer home ===== */
.wv49-stage { position: relative; background: #000; } .wv49-stage video { display: block; width: 100%; max-height: 78vh; background: #000; }
.wv49-back { position: absolute; left: 18px; top: 14px; color: #fff; text-decoration: none; font-weight: 600; text-shadow: 0 2px 8px #000; opacity: .85; } .wv49-back:hover { opacity: 1; }
.wv49-body { display: grid; grid-template-columns: 1fr 380px; gap: 28px; padding: 22px var(--gut, 32px) 60px; max-width: 1400px; margin: 0 auto; }
.wv49-main { display: grid; gap: 10px; align-content: start; } .wv49-main h1 { margin: 0; font: 600 clamp(22px, 2.4vw, 30px)/1.2 var(--sans, inherit); } .wv49-main .cc46 { margin-top: 18px; }
.wv49-show { color: #F47521; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; } .wv49-k { color: #aaa; font-weight: 600; }
.wv49-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wv49-next { padding: 9px 16px; font-weight: 800; text-decoration: none; } .wv49-cr .wv49-next { background: #F47521; color: #000; text-transform: uppercase; font-size: 13px; } .wv49-nf .wv49-next { background: #fff; color: #000; border-radius: 4px; }
.wv49-list { display: grid; gap: 8px; align-content: start; max-height: 80vh; overflow: auto; } .wv49-lh { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.wv49-list a { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 6px; color: inherit; text-decoration: none; border-radius: 6px; } .wv49-list a:hover { background: rgba(255,255,255,.06); } .wv49-list a > span:last-child { display: grid; gap: 3px; align-content: start; }
.wv49-th { position: relative; aspect-ratio: 16/9; background: #111 center/cover; } .wv49-th i { position: absolute; inset: auto 0 0 0; padding: 3px 6px; font-style: normal; font-size: 11px; font-weight: 800; background: rgba(0,0,0,.8); }
.wv49-cr .wv49-list a.on { background: rgba(244,117,33,.14); box-shadow: inset 3px 0 0 #F47521; } .wv49-cr .wv49-th i { color: #F47521; }
.wv49-nf { background: #141414; } .wv49-nf .wv49-list a.on { background: rgba(255,255,255,.1); } .wv49-nf .wv49-th i { color: #E50914; } .wv49-nf .wv49-main h1 { font-weight: 700; }
.np49 { position: relative; min-height: calc(100vh - 64px); overflow: hidden; } .np49-bg { position: absolute; inset: -40px; background: center/cover; filter: blur(60px) brightness(.45); transform: scale(1.1); }
.np49-in { position: relative; display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 40px; align-items: end; padding: 60px var(--gut, 32px) 30px; max-width: 1200px; }
.np49-cv { aspect-ratio: 1; background: #111 center/cover; box-shadow: 0 20px 60px rgba(0,0,0,.6); border-radius: 6px; } .np49-meta { display: grid; gap: 12px; } .np49-meta h1 { margin: 0; font: 900 clamp(34px, 5vw, 72px)/1 var(--sans, inherit); } .np49-meta a { color: inherit; }
.np49-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 12px; color: #b3b3b3; font-variant-numeric: tabular-nums; } .np49-bar input { accent-color: #1ED760; width: 100%; }
.np49-ctl { display: flex; gap: 22px; align-items: center; } .np49-pp { width: 64px; height: 64px; border-radius: 50%; border: 0; background: #fff; color: #000; font-size: 24px; cursor: pointer; transition: transform .12s; } .np49-pp:hover { transform: scale(1.06); }
.np49-sk { font-size: 26px; color: #b3b3b3; text-decoration: none; } .np49-sk:hover { color: #fff; } .np49-sk.off { opacity: .3; }
.np49-list { position: relative; padding: 10px var(--gut, 32px) 60px; max-width: 1200px; } .np49-list h2 { font: 700 22px var(--sans, inherit); } .np49-list li.on a { color: #1ED760; } .np49-list li.on .n { color: #1ED760; } .np49-list .cc46 { margin-top: 24px; }
.hm49-in { display: grid; gap: 30px; margin-top: 24px; } .hm49-t { margin: 10px var(--gut, 32px) -10px; font: 400 clamp(28px, 3vw, 40px)/1.1 var(--serif); }
.lv49 { display: flex; gap: 12px; align-items: center; overflow-x: auto; padding: 0 var(--gut, 32px); } .lv49-k { color: #E2463C; white-space: nowrap; }
.lv49 a { display: flex; gap: 10px; align-items: center; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(226,70,60,.1); border: 1px solid rgba(226,70,60,.35); color: inherit; text-decoration: none; white-space: nowrap; } .lv49 a > span:last-child { display: grid; } .lv49 b { font-size: 13px; }
.lv49-cv { width: 38px; height: 38px; border-radius: 50%; background: #111 center/cover; box-shadow: 0 0 0 2px #E2463C; } .lv49 .lv49-all { background: transparent; border: 0; color: var(--muted, #aaa); }
.wb49 { margin: 0 var(--gut, 32px); padding: 18px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--wc) 14%, transparent), rgba(255,255,255,.02) 60%); border: 1px solid color-mix(in srgb, var(--wc) 30%, transparent); }
.wb49 header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .wb49 header h2 { margin: 0; font: 600 20px var(--sans, inherit); } .wb49 header a { margin-left: auto; color: var(--wc); font-weight: 700; text-decoration: none; }
.wb49-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wc); box-shadow: 0 0 12px var(--wc); } .wb49-tag { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--wc); color: #111; }
.wb49-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.wb49-feat { position: relative; display: flex; align-items: flex-end; min-height: 280px; border-radius: 14px; background: #111 center/cover; color: #fff; text-decoration: none; padding: 18px; } .wb49-feat > span:last-child { display: grid; gap: 6px; } .wb49-feat b { font: 400 30px/1.05 var(--serif); }
.wb49-list { display: grid; gap: 8px; align-content: start; } .wb49-list a { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; padding: 6px; border-radius: 10px; color: inherit; text-decoration: none; } .wb49-list a:hover { background: rgba(255,255,255,.06); }
.wb49-th { aspect-ratio: 16/10; border-radius: 8px; background: #111 center/cover; } .wb49-list a > span:nth-child(2) { display: grid; gap: 2px; } .b49 { position: static !important; justify-self: start; grid-column: 2; }
.msg49 { position: relative; display: grid; place-items: center; color: inherit; } .msg49 i { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #E2463C; color: #fff; font: 700 10px/16px var(--sans, inherit); font-style: normal; }
@media (max-width: 900px) { .wv49-body, .np49-in, .wb49-in { grid-template-columns: 1fr; } .wv49-list { max-height: none; } }

/* ===== v50: legacy studio inside the new one; floating messages ===== */
.st47-legacy .studio, .st47-legacy .wrap { padding: 0 !important; max-width: none !important; } .st47-legacy > div { min-width: 0; }
.dm50 { position: fixed; right: 20px; bottom: 20px; z-index: 200; width: min(380px, calc(100vw - 24px)); height: min(520px, calc(100vh - 100px)); display: grid; grid-template-rows: auto 1fr auto; border-radius: 16px; overflow: hidden; background: #15151c; border: 1px solid var(--line, #333); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.dm50[hidden] { display: none !important; }
.dm50-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line, #2a2a2a); background: rgba(255,255,255,.03); } .dm50-h b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm50-h button, .dm50-big { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: none; } .dm50-h button:hover, .dm50-big:hover { background: rgba(255,255,255,.08); }
.dm50-body { overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.dm50-t { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; } .dm50-t:hover { background: rgba(255,255,255,.06); }
.dm50-t > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; } .dm50-t .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm50-t.un b { color: #fff; } .dm50-t i { min-width: 20px; height: 20px; border-radius: 10px; background: #E2463C; color: #fff; font: 700 11px/20px var(--sans, inherit); text-align: center; font-style: normal; }
.dm50-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--amber); color: #111; font-weight: 800; }
.dm50-m { align-self: flex-start; max-width: 80%; display: grid; gap: 2px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.08); } .dm50-m.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--amber); color: #111; }
.dm50-m i { font-style: normal; font-size: 10px; opacity: .6; justify-self: end; }
.dm50-say { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line, #2a2a2a); } .dm50-say[hidden] { display: none; } .dm50-say .in { flex: 1; }

/* ===== v52: comics & business ===== */
.gg52 a { background: linear-gradient(135deg, rgba(0,220,100,.2), rgba(255,255,255,.04)); } .gg52 a:hover { background: #00DC64; color: #111; }
.rk52 .ph38-cv { width: 60px; }
body[data-world="comics"] { --amber: #00DC64; } body[data-world="business"] { --amber: #7C9CFF; }

/* ===== v53: categories in every world ===== */
.ct53 { display: flex; gap: 8px; overflow-x: auto; padding: 18px var(--gut, 32px) 4px; scrollbar-width: thin; }
.ct53 a, .ct53 button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line, #333); background: rgba(255,255,255,.03); color: inherit; text-decoration: none; white-space: nowrap; font-size: 14px; font-weight: 600; cursor: pointer; }
.ct53 a:hover, .ct53 button:hover { border-color: var(--amber); } .ct53 a.on, .ct53 button.on { background: var(--amber); border-color: var(--amber); color: #111; }
.ct53 i { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.12); } .ct53 a.on i { background: rgba(0,0,0,.15); }
.ct53-pick { padding: 0; flex-wrap: wrap; } .h34-sm { min-height: 260px !important; }

body[data-world="animacion"] { --amber: #3D7BFF; }
.lv51 { padding-top: 16px; }

/* ===== v55: final polish — phone layout ===== */
html, body { max-width: 100%; overflow-x: clip; }
.p34, .rows34, .hm49-in, .st47-main, .wv49-body, .sg46, .cs46, .sa46, .np49 { min-width: 0; max-width: 100%; }
.rows34 > *, .hm49-in > *, .zn45 > *, .st47 > *, .sg46-hero > *, .sg46-body > *, .wb49-in > *, .wv49-body > * { min-width: 0; }
@media (max-width: 720px) {
  .top { flex-wrap: wrap; gap: 8px; }
  #top-act { gap: 6px; flex-wrap: nowrap; }
  #top-act > a.btn.ghost.s { padding: 6px 9px; font-size: 12px; }
  #top-act > a.btn.ghost.s[href="/biblioteca"] { display: none; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
  .h34 { min-height: 420px; } .h34-in { padding-bottom: 28px; } .h34 h1 { font-size: 34px; }
  .h34-act .btn.xl { padding: 10px 16px; font-size: 15px; }
  .st37-car { grid-auto-columns: 86vw !important; }
  .wb49 { margin: 0 12px; padding: 12px; } .wb49-feat { min-height: 220px; } .wb49-list a { grid-template-columns: 90px 1fr; }
  .ch40-in h1 { font-size: 40px; } .ch40-stage { min-height: 460px; }
  .kp47, .ac47 { grid-template-columns: 1fr 1fr; } .fg47 { grid-template-columns: 1fr; } .fg47 .sm { max-width: none; }
  .dm50 { right: 8px; bottom: 8px; }
}
.st37-wrap > * { min-width: 0; } .st37-tabs { overflow-x: auto; } .st37-tabs a { white-space: nowrap; }

/* ===== v56: the premiere ribbon no longer covers the page; category buttons with more presence ===== */
.gmoment { position: relative !important; top: auto !important; z-index: 1 !important; padding: 7px var(--gut) !important; font-size: 13px; }
.ct53 { position: relative; gap: 10px; padding: 20px var(--gut, 32px) 8px; mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%); }
.ct53 a { position: relative; gap: 8px; padding: 10px 18px 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); font-size: 14.5px; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; }
.ct53 a:hover { transform: translateY(-2px); border-color: var(--amber); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.ct53 a.on { background: var(--amber); color: #111; border-color: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 25%, transparent), 0 10px 26px color-mix(in srgb, var(--amber) 35%, transparent); }
.ct53-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 15px; } .ct53 a.on .ct53-ic { background: rgba(0,0,0,.12); }
.ct53 a:not(:has(i)) { opacity: .62; } .ct53 a:not(:has(i)):hover { opacity: 1; }
.gmoment { margin-top: 0; box-shadow: none; } #worldbar { z-index: 38; }

/* v59: the ribbon slides in, stays a moment, slides away */
.gmoment { overflow: hidden; max-height: 60px; transition: max-height .5s ease, opacity .45s ease, padding .5s ease; }
.gmoment.gm-off { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important; pointer-events: none; }
.gmoment.gm-on { animation: gm59 .6s ease; } @keyframes gm59 { from { max-height: 0; opacity: 0; } to { max-height: 60px; opacity: 1; } }

/* v60: the room's chat fills the space and the message box sits at the bottom, above the actions */
.room-side #evr, .room-side #subchat, .room-side #subsay, .room-side #hostq:empty { display: none !important; }
.room-side { grid-template-rows: auto minmax(0, 1fr) auto auto auto !important; }
.room-side > #chat { min-height: 0; overflow-y: auto; align-self: stretch; }
.room-side > #say { align-self: end; }

/* ===== v61: mini-posts, any GIF, react, Bilibili flying comments on the stage ===== */
.room-chat li.m-post { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.im61 { display: block; max-width: 220px; max-height: 180px; border-radius: 10px; object-fit: cover; }
.fly61 { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.fl61 { position: absolute; left: 100%; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.45);
  color: #fff; font-weight: 700; font-size: 18px; text-shadow: 0 2px 4px rgba(0,0,0,.8); animation: fl61 10s linear forwards; }
.fl61 .fl61-w { font-size: 12px; color: var(--amber); font-weight: 800; } .fl61 .im61 { max-height: 64px; max-width: 90px; } .fl61 .gf48 { padding: 4px 8px; } .fl61 .gf48-e { font-size: 26px; }
@keyframes fl61 { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 120%)); } }
.rx61 { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-radius: 14px; background: #1b1b22; border: 1px solid var(--line, #333); } .rx61[hidden] { display: none; }
.rx61 button { font-size: 24px; padding: 4px 6px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; transition: transform .12s; } .rx61 button:hover { transform: scale(1.25); background: rgba(255,255,255,.06); }
.g61-row { display: flex; gap: 6px; margin-bottom: 8px; } .g61-row .in { flex: 1; } .g61-up { margin-bottom: 10px; display: inline-flex; }
.dlg61 { max-width: 460px; width: calc(100vw - 32px); border-radius: 16px; border: 1px solid var(--line, #333); background: #16161d; color: inherit; padding: 20px; } .dlg61::backdrop { background: rgba(0,0,0,.6); }
.st61 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .st61 input { position: absolute; opacity: 0; } .st61 label > span { display: grid; gap: 2px; justify-items: center; padding: 14px; border-radius: 12px; border: 1px solid var(--line, #333); font-size: 24px; text-align: center; cursor: pointer; }
.st61 b { font-size: 14px; } .st61 i { font-style: normal; font-size: 12px; color: var(--muted, #aaa); } .st61 input:checked + span { border-color: var(--amber); background: rgba(242,181,68,.12); }
.pv61 { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 16/9; }

/* ===== v62: the mini-post composer and flying mini-posts ===== */
.room-say.mp62 { display: grid !important; grid-template-columns: auto 1fr auto; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line, #333); margin: 8px; }
.mp62-h { grid-column: 1 / -1; display: grid; gap: 2px; } .mp62-h b { font-size: 14px; }
.mp62-att { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.mp62-slot { padding: 10px 14px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.25); background: transparent; color: var(--muted, #bbb); font-weight: 700; cursor: pointer; } .mp62-slot:hover { border-color: var(--amber); color: #fff; }
.mp62-chip { position: relative; display: inline-flex; align-items: center; padding: 4px; border-radius: 12px; background: rgba(242,181,68,.12); border: 1px solid var(--amber); }
.mp62-chip .im61 { max-height: 90px; max-width: 140px; } .mp62-rx { font-size: 34px; padding: 4px 10px; }
.mp62-chip button { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #000; color: #fff; font-size: 11px; cursor: pointer; }
.mp62 .btn { opacity: .55; } .mp62.mp62-ready .btn { opacity: 1; box-shadow: 0 0 0 4px rgba(242,181,68,.25); }
.mp62-nudge .mp62-att { animation: nd62 .5s ease; } @keyframes nd62 { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.g62-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 8px; } .g62-res button { padding: 0; border: 0; background: #111; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 1; } .g62-res img { width: 100%; height: 100%; object-fit: cover; }
.rx62 { grid-template-columns: repeat(8, 1fr) !important; }
.fl61 { padding: 8px 14px 8px 10px !important; border-radius: 16px !important; background: rgba(10,10,14,.72) !important; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 24px rgba(0,0,0,.4); backdrop-filter: blur(4px); }
.fl61 .im61 { max-height: 84px !important; max-width: 120px !important; border-radius: 10px; }
.cp63-rx { background: linear-gradient(135deg, #FF5A78, #F2B544) !important; color: #111 !important; border: 0 !important; } #clap { background: linear-gradient(135deg, rgba(255,90,120,.25), rgba(242,181,68,.25)); }

/* ===== v64: a bigger, guiding mini-post composer ===== */
.room-say.mp62 { padding: 16px !important; gap: 10px !important; }
.room-say.mp62 .in { min-height: 46px; font-size: 15px; }
.mp62-att { min-height: 64px; align-items: center; }
.mp62-slot { padding: 14px 18px; font-size: 14px; }
.mp64-next { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.mp64-next span { padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted, #aaa); } .mp64-next span.ok { background: rgba(80,200,120,.2); color: #7CE38B; } .mp64-next span.ok::before { content: "✓ "; }
.mp64-next b { margin-left: auto; color: var(--amber); }
.mp62 .btn { opacity: 1 !important; box-shadow: 0 0 0 4px rgba(242,181,68,.25); }
.cp64-v.rec { background: #E2463C !important; color: #fff !important; animation: pu64 1s ease-in-out infinite; } @keyframes pu64 { 50% { box-shadow: 0 0 0 6px rgba(226,70,60,.3); } }
.room-side .pn48 { max-height: 380px; }

/* ===== v65: the chat becomes the mini-posts space — every message is a small window ===== */
.room-side > #chat { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.room-side > #chat::before { content: "Mini posts del momento"; position: sticky; top: -12px; z-index: 2; margin: -12px -12px 2px; padding: 10px 14px; font: 800 12px/1 var(--sans, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); background: linear-gradient(180deg, var(--bg2, #121216) 70%, transparent); }
.room-side > #chat li { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 6px 18px rgba(0,0,0,.25); font-size: 14.5px; line-height: 1.45; animation: in65 .35s ease; }
.room-side > #chat li > b:first-child { display: block; font-size: 13px; color: var(--amber); }
.room-side > #chat li .im61 { max-width: 100%; max-height: 220px; width: 100%; object-fit: cover; }
.room-side > #chat li .gf48 { justify-self: start; }
.room-side > #chat li.m-join { padding: 4px 10px; background: transparent; border: 0; box-shadow: none; font-size: 12px; opacity: .6; }
.room-side > #chat li.m-cheer { padding: 6px 10px; background: transparent; border: 0; box-shadow: none; }
@keyframes in65 { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.room-side .room-say.mp62 { margin: 10px; }
.room-side .pn48 { bottom: calc(100% + 10px); max-height: 420px; padding: 14px; }
.fl61 { display: inline-grid !important; grid-auto-flow: column; align-items: center; gap: 10px !important; padding: 10px 16px 10px 10px !important; border-radius: 18px !important; font-size: 17px !important; }

/* ===== v66: time machine while consuming ===== */
.tm66 { display: inline-grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; justify-self: start; margin-top: 4px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(242,181,68,.45);
  background: linear-gradient(135deg, rgba(242,181,68,.16), rgba(255,255,255,.03)); color: inherit; text-align: left; cursor: pointer; max-width: 520px; }
.tm66 > span:nth-child(2) { display: grid; gap: 2px; } .tm66-i { font-size: 24px; color: var(--amber); }
.tm66-sw { width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.18); position: relative; transition: background .2s; } .tm66-sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
.tm66[aria-pressed="true"] .tm66-sw { background: var(--amber); } .tm66[aria-pressed="true"] .tm66-sw i { left: 21px; }
.tm66-box { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: 70vh; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line, #2a2a2a); overflow: hidden; }
.tm66-box[hidden] { display: none; } .tm66-h { display: grid; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--line, #2a2a2a); } .tm66-h b { color: var(--amber); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.tm66-list { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.tm66-list li { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 14px; animation: in65 .35s ease; } .tm66-list li > b:first-child { color: var(--amber); font-size: 12.5px; }
.tm66-list li.m-cheer { background: transparent; border: 0; padding: 2px 6px; }
.tm66-list .im61 { max-width: 100%; }
.wv49-stage .tm66-fly, .np49 .tm66-fly { position: absolute; inset: 0; z-index: 7; }
body.tm66-on .wv49-body { grid-template-columns: 1fr 360px; } body.tm66-on .wv49-list { display: none; }
body.tm66-on .np49-list .tl35 { display: none; }

/* ===== v67: the mini-post composer ===== */
.mp67-host { padding: 10px; border-top: 1px solid var(--line, #2a2a2a); background: rgba(0,0,0,.2); }
.mp67 { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.1); }
.mp67-top { display: grid; gap: 3px; } .mp67-top b { font: 800 15px var(--sans, inherit); } .mp67-top span { font-size: 13px; color: var(--muted, #aaa); }
.mp67-prev { min-height: 70px; }
.mp67-empty { display: grid; place-items: center; min-height: 70px; padding: 14px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.18); color: var(--muted, #999); font-size: 13px; text-align: center; }
.mp67-card { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid rgba(242,181,68,.35); }
.mp67-card p { flex-basis: 100%; margin: 0; font-size: 15px; }
.mp67-piece { position: relative; display: inline-flex; } .mp67-piece .im61 { max-height: 140px; max-width: 220px; border-radius: 12px; } .mp67-big { font-size: 46px; line-height: 1; }
.mp67-voice audio { height: 36px; max-width: 240px; }
.mp67-piece > button { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #000; color: #fff; font-size: 11px; cursor: pointer; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.mp67-txt { min-height: 54px; resize: vertical; font-size: 15px; }
.mp67-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mp67-tools [data-t] { padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: inherit; font-weight: 700; cursor: pointer; }
.mp67-tools [data-t]:hover, .mp67-tools [data-t].on { border-color: var(--amber); } .mp67-tools [data-t].done { background: rgba(80,200,120,.18); border-color: rgba(80,200,120,.5); }
.mp67-tools .mp67-rx { background: linear-gradient(135deg, rgba(255,90,120,.3), rgba(242,181,68,.3)); }
.mp67-pub { margin-left: auto; padding: 10px 22px !important; box-shadow: 0 0 0 4px rgba(242,181,68,.22); }
.mp67-panel { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); max-height: 340px; overflow-y: auto; } .mp67-panel[hidden] { display: none; }
.mp67-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .mp67-row .in { flex: 1; min-width: 160px; }
.mp67-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; } .mp67-res button { padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #111; aspect-ratio: 1; cursor: pointer; } .mp67-res img { width: 100%; height: 100%; object-fit: cover; }
.mp67-grid { display: grid; gap: 4px; } .mp67-grid.e, .mp67-grid.r { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); } .mp67-grid.g { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mp67-grid button { border: 0; background: transparent; border-radius: 10px; font-size: 24px; padding: 6px; cursor: pointer; } .mp67-grid button:hover { background: rgba(255,255,255,.08); }
.mp67-voz { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .mp67-voz audio { height: 36px; }
.mp67-dot { width: 12px; height: 12px; border-radius: 50%; background: #E2463C; animation: pu64 1s ease-in-out infinite; } #mp67clock { font-variant-numeric: tabular-nums; }
.room-side { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto !important; }
.tm66-box { grid-template-rows: auto minmax(0, 1fr) auto !important; max-height: none !important; } .tm66-box.off .tm66-list { opacity: .6; }
.tm67-comp { padding: 10px; border-top: 1px solid var(--line, #2a2a2a); }
body.tm66-on .wv49-body, .wv49-body:has(#tm67box) { grid-template-columns: 1fr 420px !important; } .wv49-body:has(#tm67box) .wv49-list { display: none; }
.tm66-list { max-height: 46vh; }

/* v68: «Moments», wider spaces */
.room-side > #chat::before { content: "Moments" !important; }
.wv49-body:has(#tm67box) { grid-template-columns: minmax(0, 1fr) 560px !important; max-width: 1600px; }
.room { grid-template-columns: minmax(0, 1fr) 500px !important; }
.mp67-panel { max-height: 420px; }
@media (max-width: 1100px) { .wv49-body:has(#tm67box) { grid-template-columns: 1fr !important; } .room { grid-template-columns: 1fr !important; } }

/* ===== v69: moments as post cards; collapsible composer; animated reactions ===== */
.mo69-li { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.mo69 { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: #17171d; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.mo69 header { display: flex; align-items: center; gap: 8px; } .mo69 header b { font-size: 14px; color: #fff !important; } .mo69-t { margin-left: auto; font-size: 11px; color: var(--muted, #888); }
.mo69-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--amber); color: #111; font-weight: 800; font-size: 13px; flex: none; }
.mo69 p { margin: 0; font-size: 15px; line-height: 1.4; }
.mo69-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); }
.mo69 footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mo69-rx { display: inline-block; font-size: 30px; line-height: 1; }
.a-pop { animation: g48pop 1.1s ease-in-out infinite; } .a-shake { animation: g48sh .5s linear infinite; } .a-float { animation: g48fl 1.6s ease-in-out infinite; } .a-pulse { animation: g48pu 1s ease-in-out infinite; } .a-spin { animation: g48pop 1.4s ease-in-out infinite; }
.mo69-play { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; font-weight: 700; font-size: 13px; cursor: pointer; } .mo69-play:hover { border-color: var(--amber); }
.mo69-fly { position: absolute; left: 100%; width: 300px; z-index: 8; animation: fl61 12s linear forwards; backdrop-filter: blur(4px); background: rgba(20,20,26,.82); }
.mo69-fly .mo69-img { max-height: 120px; } .mo69-fly p { font-size: 14px; } .mo69-vb { font-size: 18px; }
.mp69-wrap { display: grid; } .mp69-wrap > .mp67 { display: none; } .mp69-wrap.open > .mp67 { display: grid; } .mp69-wrap.open > .mp69-open { display: none; }
.mp69-open { padding: 14px 18px; border-radius: 14px; border: 1px dashed rgba(242,181,68,.6); background: rgba(242,181,68,.1); color: #fff; font: 800 15px var(--sans, inherit); cursor: pointer; text-align: left; } .mp69-open:hover { background: rgba(242,181,68,.18); }
.mp67-top { grid-template-columns: 1fr auto; } .mp67-top b, .mp67-top span { grid-column: 1; } .mp69-x { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
.mp67-grid.r button { font-size: 28px; padding: 8px; }
.st69 { display: inline-flex; align-items: center; gap: 8px; } .st69-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--amber); color: #111; font-weight: 800; }
.wv49-body:not(.viv69) .wv49-list { display: grid !important; } .wv49-body:not(.viv69) { grid-template-columns: 1fr 380px !important; } #tm67box[hidden] { display: none !important; }

/* ===== v70: Twitch-like layout; audio search ===== */
.tw70 { display: grid; grid-template-columns: minmax(0, 1fr) 440px; background: #000; }
.tw70.off { grid-template-columns: 1fr; }
.tw70 > .wv49-stage video { max-height: 80vh; }
.tw70 > #tm67box { border-radius: 0; border: 0; border-left: 1px solid rgba(255,255,255,.08); background: #121217; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 80vh; }
.tw70 > #tm67box .tm66-list { max-height: none; }
.wv49-body:has(#tm67box), .wv49-body, .wv49-body:not(.viv69) { grid-template-columns: minmax(0, 1fr) 380px !important; } .wv49-body .wv49-list { display: grid !important; }
.mp70-res { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; } .mp70-it { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; background: rgba(255,255,255,.04); }
.mp70-it img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; } .mp70-it > span { display: grid; min-width: 0; } .mp70-it b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) { .tw70 { grid-template-columns: 1fr; } .tw70 > #tm67box { max-height: 60vh; height: auto !important; } }

/* ===== v72: community groups (subreddit-like) ===== */
.gr72-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.gr72-c { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line, #2a2a2a); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.gr72-c:hover { border-color: var(--ca, var(--amber)); transform: translateY(-2px); } .gr72-b { display: grid; gap: 3px; } .gr72-b b { font-size: 16px; }
.gr72-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--ca, var(--amber)); color: #111; font: 800 18px var(--sans, inherit); text-transform: uppercase; } .gr72-ic.big { width: 64px; height: 64px; font-size: 28px; border-radius: 16px; }
.gp72 { max-width: 920px; margin: 0 auto; padding: 24px 16px 80px; display: grid; gap: 14px; }
.gp72-h { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(242,181,68,.12), rgba(255,255,255,.03)); border: 1px solid var(--line, #2a2a2a); }
.gp72-h h1 { margin: 0; font: 400 30px/1.1 var(--serif); } .gp72-h p { margin: 4px 0; }
.gp72-new { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line, #2a2a2a); }
.gp72-sort { padding: 0 !important; mask-image: none !important; }
.gp72-list { display: grid; gap: 8px; }
.th72 { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line, #2a2a2a); color: inherit; text-decoration: none; } a.th72:hover { border-color: rgba(255,255,255,.25); }
.th72-b { display: grid; gap: 4px; } .th72-b b { font-size: 17px; } .th72-p { color: rgba(255,255,255,.82); line-height: 1.5; margin: 0; white-space: pre-wrap; } .th72-full h1 { margin: 2px 0; font: 600 24px/1.25 var(--sans, inherit); }
.vt72 { display: grid; justify-items: center; align-content: start; gap: 2px; } .vt72 button { border: 0; background: transparent; color: var(--muted, #888); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.vt72 button:hover { background: rgba(255,255,255,.08); } .vt72 button.on[data-v="1"] { color: #FF6A3D; } .vt72 button.on[data-v="-1"] { color: #7C9CFF; } .vt72 b { font-size: 13px; }
.rp72-list { display: grid; gap: 10px; } .rp72 { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); } .rp72 p { margin: 4px 0 0; white-space: pre-wrap; }
@media (max-width: 640px) { .gp72-h { grid-template-columns: auto 1fr; } .gp72-h .btn { grid-column: 1 / -1; } }

/* ===== v73: groups polished ===== */
.gp72 { max-width: 1180px !important; }
.gp73 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } .gp73-main { display: grid; gap: 14px; min-width: 0; }
.gp73-side { position: sticky; top: 140px; display: grid; gap: 12px; }
.gp73-card { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line, #2a2a2a); color: inherit; text-decoration: none; } .gp73-card p { margin: 0; }
.gp73-rules { margin: 4px 0 0; padding-left: 18px; color: var(--muted, #aaa); display: grid; gap: 2px; }
.gp73-g { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; color: inherit; text-decoration: none; } .gp73-g:hover { background: rgba(255,255,255,.06); } .gp73-g .gr72-ic { width: 32px; height: 32px; font-size: 14px; border-radius: 9px; } .gp73-g > span:last-child { display: grid; }
.gp73-cr b { font: 400 22px var(--serif); } .gp73-cr:hover { border-color: var(--amber); }
.th73-att { gap: 10px; align-items: center; flex-wrap: wrap; } .th73-prev { display: flex; gap: 6px; } .th73-prev img { height: 54px; border-radius: 8px; }
.th73-img { max-width: 520px; } .th73-rm { justify-self: start; color: #E2463C; }
@media (max-width: 900px) { .gp73 { grid-template-columns: 1fr; } .gp73-side { position: static; } }

/* ===== v74: moment composer and cards in groups ===== */
.th74-comp { display: grid; gap: 8px; } .th74-title { font-size: 16px; font-weight: 700; } .th74-comp:not(.open) .th74-title { display: none; }
.th74-comp .mp69-open + .th74-title, .th74-comp.open .th74-title { display: block; }
.th74-body .mo69 { padding: 0; background: transparent; border: 0; box-shadow: none; } .th74-body .mo69 p { font-size: 15px; }
.rp74 .mo69 { position: relative; } .rp74 .mo69 [data-rr] { justify-self: start; color: #E2463C; }
.rp72-list { gap: 12px !important; }
.mp69-wrap:not(.open) #th74c, .mp69-wrap:not(.open) .th74-title { display: none !important; } .mp69-wrap.open .th74-title { display: block !important; }

/* ===== v75: Vivirlo everywhere ===== */
.pr75 { color: #7CE38B; font-weight: 700; } .pr75:empty { display: none; }
.tw75 { background: transparent; } .tw75 > #tm75box { border-radius: 16px; border: 1px solid var(--line, #2a2a2a); max-height: 80vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } #tm75box[hidden] { display: none !important; }
.tw75 > #tm75box .tm66-list { max-height: none; }
.pl75 { position: relative; } .pl75 iframe { width: 100%; height: 76vh; border: 0; display: block; }
.reader .tw75 { grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; } .reader .tw75 > #tm75box { position: sticky; top: 140px; }
.reader { max-width: 1320px !important; } .wp35 .tw75 { grid-template-columns: minmax(0, 1fr) 420px; } .wp35 .tw75 > .h34 { position: relative; }

/* ===== v76: mini profile and friends ===== */
[data-pk] { cursor: pointer; } b[data-pk]:hover { text-decoration: underline; }
.pp76 { position: fixed; z-index: 300; width: 300px; display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: #17171e; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: in65 .2s ease; }
.pp76-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
.pp76-h { display: flex; gap: 12px; align-items: center; } .pp76-h > div { display: grid; gap: 2px; } .pp76-h b { font-size: 16px; }
.pp76-av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--amber); color: #111; font: 800 20px var(--sans, inherit); }
.pp76-u { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pp76-u a { padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.07); color: inherit; text-decoration: none; font-size: 12px; }
.pp76-a { display: flex; flex-wrap: wrap; gap: 6px; }
.fr76 { display: grid; gap: 4px; padding: 4px 4px 0; } .fr76-h { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 6px; } .fr76-h b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--amber); }
.fr76-i { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; } .fr76-i:hover { background: rgba(255,255,255,.05); } .fr76-i > span:nth-child(2) { display: grid; }

/* ===== v77: your universes and groups on Inicio ===== */
#hm77 { display: grid; gap: 30px; }
.cr77 { grid-auto-columns: 150px !important; } .cr77-i { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; color: inherit; text-decoration: none; }
.cr77-av { width: 110px !important; height: 110px !important; font-size: 40px; border: 3px solid transparent; transition: border-color .15s, transform .15s; } .cr77-i:hover .cr77-av { border-color: var(--amber); transform: scale(1.04); }
.cr77-live { position: absolute; top: 88px; padding: 2px 8px; border-radius: 999px; background: #E2463C; color: #fff; font-size: 11px; font-weight: 800; }

/* ===== v80: the floating player ===== */
.mini80 { position: fixed; left: 20px; bottom: 20px; z-index: 250; display: grid; grid-template-columns: 1fr; width: 340px; border-radius: 16px; overflow: hidden; background: #15151c; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: in65 .25s ease; }
.mini80-stage { position: relative; aspect-ratio: 16/9; background: #000; cursor: pointer; } .mini80-stage video, .mini80-stage iframe { width: 100% !important; height: 100% !important; max-height: none !important; display: block; border: 0; }
.mini80-game .mini80-stage { cursor: default; }
.mini80-b { display: grid; gap: 2px; padding: 10px 12px 4px; min-width: 0; } .mini80-t { justify-self: start; max-width: 100%; border: 0; background: none; color: #fff; font: 700 14px var(--sans, inherit); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; } .mini80-t:hover { color: var(--amber); }
.mini80-c { display: flex; gap: 6px; justify-content: flex-end; padding: 0 10px 10px; } .mini80-c button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; } .mini80-c button:hover { background: rgba(255,255,255,.2); }
.mini80-audio { grid-template-columns: 64px 1fr auto; align-items: center; width: 400px; padding: 10px; gap: 10px; } .mini80-audio .mini80-b, .mini80-audio .mini80-c { padding: 0; }
.mini80-cv { width: 64px; height: 64px; border-radius: 8px; background: #111 center/cover; } .mini80-seek { width: 100%; accent-color: #1ED760; } .mini80-audio .mini80-pp { background: #1ED760; color: #111; }
@media (max-width: 640px) { .mini80 { left: 8px; right: 8px; width: auto; bottom: 8px; } }
.mini80 { touch-action: none; cursor: grab; } .mini80.dragging { cursor: grabbing; opacity: .92; transition: none; } .mini80-mute { font-size: 15px; }

/* ===== v82: safe band for flying moments; resizable / pop-out player ===== */
.tm66-fly, .fly61 { inset: 0 0 auto 0 !important; height: 32% !important; overflow: hidden; }
.np49 > .tm66-fly, .tw70 .np49-in .tm66-fly { top: 60px !important; left: var(--gut, 32px) !important; right: auto !important; width: min(360px, 32vw) !important; height: min(360px, 32vw) !important; border-radius: 6px; }
.room-stage .fly61 { height: 30% !important; }
.mini80-video, .mini80-game { resize: both; overflow: hidden; min-width: 260px; min-height: 200px; max-width: 90vw; max-height: 85vh; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }
.mini80-video .mini80-stage, .mini80-game .mini80-stage { aspect-ratio: auto; min-height: 140px; }
.pip82 { margin: 0; background: #000; } .pip82 .mini80 { position: static; width: 100vw !important; height: 100vh !important; max-width: none; max-height: none; border-radius: 0; resize: none; left: 0 !important; top: 0 !important; }
.pip82 .mini80-audio { height: auto !important; } .pip82 .mini80-pip, .pip82 .mini80-go { display: none; }
.mini80-ph { position: fixed; left: 20px; bottom: 20px; z-index: 250; padding: 10px 14px; border-radius: 12px; background: #15151c; border: 1px solid rgba(255,255,255,.14); font-size: 13px; color: var(--muted, #aaa); }
.pip82 .mini80-go { display: grid !important; place-items: center; }

/* ===== v86: the ribbon, in its place ===== */
#gmoment.rb86 { position: relative !important; top: auto !important; z-index: 1 !important; display: flex; align-items: center; gap: 14px; max-height: 0; opacity: 0; overflow: hidden; padding: 0 var(--gut, 32px) !important; transition: max-height .45s ease, opacity .35s ease, padding .45s ease; }
#gmoment.rb86.in { max-height: 52px; opacity: 1; padding: 9px var(--gut, 32px) !important; }
.rb86 em { margin-left: auto; } .rb86-x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: inherit; cursor: pointer; flex: none; }

/* ===== v87: support and subscription ===== */
.tip87 { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255,196,0,.12); color: var(--amber); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tp87 { display: grid; gap: 8px; } .tp87-a { display: flex; flex-wrap: wrap; gap: 8px; } .tp87-a button { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
.tp87-a button.on, .tp87-a button:hover { border-color: var(--amber); color: var(--amber); } .tp87-a .in { width: 140px; }
.ch87 { display: inline-flex; gap: 8px; flex-wrap: wrap; } .ch87-cats { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.md87 { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(0,0,0,.6); padding: 16px; }
.md87-b { position: relative; width: min(440px, 100%); display: grid; gap: 12px; padding: 24px; border-radius: 18px; background: #15151c; border: 1px solid rgba(255,255,255,.12); }
.md87-b h2 { margin: 0; } .md87-x { position: absolute; top: 10px; right: 10px; border: 0; background: none; color: inherit; font-size: 18px; cursor: pointer; }
.ss87 { display: grid; gap: 10px; margin-bottom: 20px; }

/* v88: a supported moment — the amount stands out, inside the card */
.mo69-tip { border: 1px solid rgba(255,196,0,.45) !important; background: linear-gradient(160deg, rgba(255,196,0,.14), rgba(255,196,0,.03) 60%) !important; }
.mo87-amt { display: flex; align-items: baseline; gap: 6px; margin: -2px 0 6px; color: var(--amber); } .mo87-amt b { font-size: 20px; font-weight: 900; } .mo87-amt .small { opacity: .8; }
.mo69-fly.mo69-tip .mo87-amt b { font-size: 16px; }


/* ===== v88: the landing ===== */
.ld88 { display: grid; gap: 72px; padding-bottom: 80px; }
.ld88 h1, .ld88 h2 { font-weight: 900; letter-spacing: -.02em; margin: 0; } .ld88 em { font-style: normal; color: var(--amber); }
.ld88-hero { position: relative; min-height: 78vh; display: grid; align-items: end; overflow: hidden; }
.ld88-bg { position: absolute; inset: 0; background: #0b0b10 center/cover; opacity: .55; } .ld88-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,14,.2), #0a0a0e 92%), linear-gradient(90deg, rgba(10,10,14,.85), transparent 70%); }
.ld88-hc { position: relative; z-index: 1; display: grid; gap: 18px; max-width: 760px; padding: 0 clamp(16px, 5vw, 64px) 64px; }
.ld88-k { font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; color: var(--amber); }
.ld88 h1 { font-size: clamp(38px, 6.5vw, 76px); line-height: 1.02; } .ld88-hc p { font-size: clamp(17px, 2vw, 21px); opacity: .85; margin: 0; max-width: 620px; }
.ld88-cta { display: flex; gap: 12px; flex-wrap: wrap; } .ld88-live a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: inherit; text-decoration: none; font-size: 14px; }
.ld88-dot { width: 9px; height: 9px; border-radius: 50%; background: #E2463C; box-shadow: 0 0 10px #E2463C; animation: pulse 1.4s infinite; }
.ld88-s { display: grid; gap: 22px; padding: 0 clamp(16px, 5vw, 64px); } .ld88-s h2 { font-size: clamp(28px, 4vw, 44px); } .ld88-n { opacity: .65; margin: 0; }
.ld88-w { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ld88-wi { display: grid; gap: 4px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.ld88-wi:hover { transform: translateY(-3px); border-color: var(--amber); } .ld88-wi span { font-size: 26px; } .ld88-wi small { opacity: .6; }
.ld88-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.ld88-c { display: grid; gap: 6px; color: inherit; text-decoration: none; } .ld88-c span { aspect-ratio: 2/3; border-radius: 12px; background: #15151c center/cover; transition: transform .15s; } .ld88-c:hover span { transform: scale(1.03); } .ld88-c small { opacity: .6; }
.ld88-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .ld88-3 > div { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 18px; background: rgba(255,255,255,.04); }
.ld88-3 h3 { margin: 0; } .ld88-3 p, .ld88-split p, .ld88-m p, .ld88-end p { margin: 0; opacity: .8; line-height: 1.55; } .ld88-i { font-size: 22px; color: var(--amber); }
.ld88-split { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; } .ld88-split > div:first-child { display: grid; gap: 14px; }
.ld88-cr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ld88-cr a { display: grid; justify-items: center; gap: 8px; color: inherit; text-decoration: none; text-align: center; } .ld88-av { width: 92px !important; height: 92px !important; font-size: 34px; }
.ld88-money { padding-top: 40px; padding-bottom: 40px; background: linear-gradient(160deg, rgba(255,196,0,.08), transparent 70%); }
.ld88-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .ld88-m > div { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); } .ld88-m b { font-size: 18px; }
.ld88-end { justify-items: center; text-align: center; } .ld88-end p { max-width: 620px; }

/* v88b: collaborate and made with NEO */
.ld88-net { position: relative; aspect-ratio: 4/3; border-radius: 22px; background: radial-gradient(circle at 48% 52%, rgba(255,196,0,.14), transparent 60%), rgba(255,255,255,.03); overflow: hidden; }
.ld88-net svg { position: absolute; inset: 0; width: 100%; height: 100%; } .ld88-net path { stroke: rgba(255,196,0,.35); stroke-width: .4; fill: none; stroke-dasharray: 2 2; animation: dash88 6s linear infinite; }
.ld88-net span { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #15151c; border: 1px solid rgba(255,255,255,.14); font-size: 24px; z-index: 1; animation: float88 5s ease-in-out infinite; }
.ld88-net span:nth-child(2n) { animation-delay: -2s; } .ld88-net .me { width: 76px; height: 76px; color: var(--amber); border-color: var(--amber); box-shadow: 0 0 30px rgba(255,196,0,.35); }
@keyframes dash88 { to { stroke-dashoffset: -40; } } @keyframes float88 { 50% { transform: translate(-50%, calc(-50% - 6px)); } }
.ld88-robot { position: relative; margin: 0; aspect-ratio: 4/3; border-radius: 22px; background: radial-gradient(circle at 50% 40%, rgba(255,196,0,.16), transparent 60%), #0e0e14; overflow: hidden; display: grid; place-items: center; }
.ld88-robot .robot { width: 46%; position: relative; z-index: 1; animation: float88b 4s ease-in-out infinite; } @keyframes float88b { 50% { transform: translateY(-8px); } }
.ld88-robot figcaption { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; justify-content: space-between; font-size: 11px; opacity: .7; z-index: 1; }
.ld88-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; } .ld88-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; }
.ld88-steps li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #111; font-weight: 900; } .ld88-steps span { opacity: .7; }
@media (max-width: 640px) { .ld88-hero { min-height: 70vh; } .ld88-cr { grid-template-columns: repeat(3, 1fr); gap: 10px; } .ld88-av { width: 70px !important; height: 70px !important; } .ld88-neo .ld88-robot { order: 0; } }

.ld88-net, .ld88-robot { aspect-ratio: auto; height: clamp(260px, 32vw, 380px); }