@font-face { font-family: "Julius"; font-style: normal; font-weight: 400; src: url("/App/.About/Media/Font/Julius/400.ttf") format("truetype"); }
/* Hoja raíz de Solaverse (Holo la enlaza después del tema): lo que nombra
   piezas propias de la App por su identidad. */

/* ------------------------------------------------------------------------
   Tema de Solaverse (Plan Ideal, Brand/Theme): la noche serena de la hoja de
   marca (`.About/Media/Ideal/Brand.webp`). Los colores, el cristal y los
   controles se declaran aquí una vez; las piezas los usan por su nombre.
   ------------------------------------------------------------------------ */
:root {
  --solaverse-night: #161b42;
  --solaverse-night-deep: #10143a;
  --solaverse-text: #f3f1ff;
  --solaverse-text-soft: #c4c1e6;
  --solaverse-text-faint: #8f8cb8;
  --solaverse-mint: #8ff0d8;
  --solaverse-lilac: #c3b2ff;
  --solaverse-lilac-deep: #9d88f7;
  --solaverse-peach: #ffd3b0;
  /* El cristal de los paneles y el de la barra: sobre el cielo dan los tonos
     de las ideales (#1B2552 y #161D47). */
  --solaverse-glass: rgb(34 44 87 / 58%);
  --solaverse-glass-bar: rgb(25 32 68 / 62%);
  --solaverse-glass-dense: rgb(30 34 80 / 78%);
  --solaverse-glass-row: rgb(255 255 255 / 4.5%);
  /* El relleno de las píldoras de la barra (menú, monedas, cuenta): casi el de la propia barra, como en las ideales. */
  --solaverse-glass-pill: rgb(255 255 255 / 2%);
  --solaverse-glass-hover: rgb(255 255 255 / 9%);
  --solaverse-edge: rgb(255 255 255 / 12%);
  --solaverse-edge-strong: rgb(214 204 255 / 38%);
  --solaverse-blur: blur(18px) saturate(1.15);
  --solaverse-radius-panel: 2rem;
  --solaverse-radius-card: 1.6rem;
  --solaverse-primary: linear-gradient(90deg, #8ff0d8 0%, #b8c4ff 55%, #c9b2ff 100%);
  --solaverse-primary-text: #1d1f4a;
  --solaverse-selected: linear-gradient(135deg, #b9a4ff 0%, #9a86f4 100%);
  --solaverse-selected-glow: 0 0 1.4rem rgb(176 150 255 / 32%);
  --solaverse-font-title: "Ginora Sans", "Open Sans", sans-serif;
  /* Las secciones (pestañas de la barra, destinos del menú y títulos de
     sección): Julius Sans One, fina y en mayúsculas como el logo (D146). */
  --solaverse-font-section: "Julius", "Open Sans", sans-serif;
  --solaverse-section-spacing: 0.12em;
  /* Los rótulos pequeños de sección dentro de los paneles (How to play,
     Recent rounds, Team…) miden lo mismo en todas las ideales. */
  --solaverse-label-size: 1.65rem;
  /* El marco de todas las pantallas (D151): el mismo hueco arriba de la
     barra, entre la barra y el contenido y debajo del contenido, y el mismo
     margen lateral para la barra y el contenido. Todo sale de estas medidas;
     ninguna página escribe las suyas. */
  --solaverse-gap: 1.8rem;
  --solaverse-side: 4.8rem;
  --solaverse-bar: 5.4rem;
  --solaverse-top: calc(var(--solaverse-gap) * 2 + var(--solaverse-bar));
  --solaverse-frame-width: min(176rem, calc(100vw - var(--solaverse-side) * 2));
  --solaverse-frame-height: calc(100dvh - var(--solaverse-top) - var(--solaverse-gap));
  /* El indicador de carga es un Ghostie que flota (D154). */
  --holo-spinner-image: url("/App/.About/Media/Spinner.webp");
  --holo-spinner-size: 6.4rem;
  --holo-spinner-border: 0;
  --holo-spinner-animation: none;
}

/* El texto corrido es Open Sans, como la hoja de marca y las ideales (D167).
   El tema de Holo pide Inter, que no viaja con la App, y el navegador caía en
   la sans del sistema. Va en los mismos sitios en que el tema lo declara. */
:root[data-holo-theme],
:root[data-holo-theme] :where([data-holo-render]:not([data-holo-render] *)) {
  --holo-font-family: "Open Sans", system-ui, sans-serif;
  /* El interruptor encendido de Holo (Control.Toggle Switch) en menta. */
  --holo-toggle-active: var(--solaverse-mint);
}

.hr-Spinner > .hr-Mark {
  border-radius: 0;
}

/* La escala de las imágenes ideales: están dibujadas a 1832 px de ancho con
   11,7 px por rem. La unidad sigue al ancho de la ventana, también por debajo
   de la escala de Holo, para que en la ventana real de Martín (1239 × 593 en
   Firefox) toda la App se vea como la ideal reducida y quepa sin desplazarse
   (decisión de Martín del 17-10). */
:root {
  font-size: clamp(7.5px, 0.64vw, 12.5px);
}

/* El hueco del icono se ajusta a lo que lleva (icono o avatar) sin recortarlo. */
:is([data-holo-id="Navbar.Account.Face"], [data-holo-id="Navbar.Wallet.Face"]) {
  --holo-part-width: auto;
  --holo-part-overflow: visible;
  --holo-part-clip-path: none;
  --holo-part-contain: none;
  display: flex;
  align-items: center;
}

/* Con un Ghostie bajo control, el botón de cuenta de la barra lleva su avatar
   en un círculo en lugar del icono de wallet. */
:is([data-holo-id="Navbar.Account.Avatar"], [data-holo-id="Navbar.Wallet.Avatar"]) {
  --holo-part-width: 3.6rem;
  --holo-part-height: 3.6rem;
  flex: none;
  inline-size: 3.6rem;
  block-size: 3.6rem;
  --holo-part-overflow: hidden;
  --holo-part-clip-path: none;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 50%;
  background: rgb(255 255 255 / 8%);
}

:is([data-holo-id="Navbar.Account.Avatar"], [data-holo-id="Navbar.Wallet.Avatar"]) img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* El logo de la barra es un botón que pone la App a pantalla completa (Native
   fullscreen): se ve como el logo, sin fondo ni borde de botón, con su ancho y
   centrado. Los estilos de las Parts se cargan después: de ahí los atributos
   repetidos, para que estas reglas manden. */
[data-holo-id="Navbar.Brand"].ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: max-content;
  --holo-trigger-inline-size: max-content;
  justify-self: start;
  inline-size: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

[data-holo-id="Navbar.Brand"].ht-Control\.Trigger.hr-Trigger:is(:hover, :focus-visible) {
  background: transparent;
  filter: brightness(1.12);
}

/* La marca del modo debug (?Mode=Debug, sólo en local, Play.Debug): una
   etiqueta ámbar bajo el final del logo mientras el parámetro siga en la
   dirección. Va fuera del flujo para no mover el logo ni las pestañas. */
[data-holo-id="Navbar.Start"].ht-Layout\.Stack {
  --holo-part-position: relative;
  --holo-part-overflow: visible;
  --holo-part-contain: none;
}

[data-holo-id="Navbar.Debug"].ht-Layout\.Slot {
  --holo-part-position: absolute;
  --holo-part-inset: calc(100% - 1.75rem) 0 auto auto;
  --holo-part-overflow: visible;
  --holo-part-contain: none;
  --holo-part-width: max-content;
  inline-size: max-content;
  pointer-events: none;
}

[data-holo-id="Navbar.Debug.Text"].ht-Content\.Text {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid rgb(255 196 92 / 0.55);
  border-radius: 999px;
  background: rgb(60 40 20 / 0.7);
  color: rgb(255 214 140);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-holo-id="Navbar.Brand.Mark"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-gap: 1.8rem;
  --holo-part-width: max-content;
  display: flex;
  align-items: center;
  inline-size: max-content;
}

/* El logo aprobado el 15-10 (`.About/Media/Ideal/Logo.webp`): sólo las letras
   finas de SOLAVERSE, sin fantasma ni estrella al lado. Un reflejo suave lo
   recorre cada pocos segundos como luz sobre metal; la máscara es el propio
   logo, así que la luz sólo toca las letras. Usa la animación de barrido que
   publica Holo (una App no declara @keyframes) y se queda quieto con
   reduced-motion. */
[data-holo-id="Navbar.Brand.Logo"].ht-Content\.Image[data-holo-part="true"] {
  --holo-part-width: 25.2rem;
  inline-size: 25.2rem;
  block-size: auto;
  flex: none;
}

[data-holo-id="Navbar.Brand.Mark"].ht-Layout\.Stack[data-holo-part="true"] {
  position: relative;
}

[data-holo-id="Navbar.Brand.Mark"].ht-Layout\.Stack[data-holo-part="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, transparent 40%, rgb(255 255 255 / 85%) 50%, rgb(205 236 255 / 40%) 54%, transparent 62%, transparent 100%) 100% 0 / 260% 100% no-repeat;
  mask: url("/App/.About/Media/Logo/Logo.webp") center / contain no-repeat;
  -webkit-mask: url("/App/.About/Media/Logo/Logo.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  animation: holo-transition-activity 7s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite;
}

/* La estrella de la O no viene en la imagen: es `.About/Media/Logo/Star.svg`,
   la curva de la estrella de Initori con ocho caras perla y punto central
   (D147), colocada en el centro del anillo (186,5 × 76,5 de 1061 × 153). */
[data-holo-id="Navbar.Brand.Mark"].ht-Layout\.Stack[data-holo-part="true"]::before {
  content: "";
  position: absolute;
  inset-inline-start: calc((186.5 - 37) / 1061 * 100%);
  inset-block-start: 50%;
  inline-size: calc(74 / 1061 * 100%);
  aspect-ratio: 1;
  translate: 0 -50%;
  pointer-events: none;
  background: url("/App/.About/Media/Logo/Star.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 0.35rem rgb(205 192 255 / 60%));
}

@media (prefers-reduced-motion: reduce) {
  [data-holo-id="Navbar.Brand.Mark"].ht-Layout\.Stack[data-holo-part="true"]::after {
    animation: none;
    opacity: 0;
  }
}

/* La barra de la visión (Visión 1-8): a la izquierda el botón de tres líneas
   y el logo; en el centro las pestañas principales (Play, Create, Vote) con
   icono y texto, la elegida con brillo lila; a la derecha la moneda con el
   saldo y la cuenta. Al pasar el ratón cambia el fondo; nada se eleva. */
[data-holo-id="Navbar"].ht-Navigation\.Navbar[data-holo-part="true"] {
  --holo-part-width: var(--solaverse-frame-width);
  inline-size: var(--solaverse-frame-width);
  max-inline-size: 176rem;
  inset-block-start: var(--solaverse-gap);
  block-size: var(--solaverse-bar);
  min-block-size: var(--solaverse-bar);
  /* El hueco entre los tres grupos lo escribe el motor en línea: va por su
     variable de escape. */
  --holo-part-gap: 1.6rem;
  column-gap: 1.6rem;
  padding-inline: 0.7rem 0.6rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 999px;
  background: var(--solaverse-glass-bar);
  backdrop-filter: var(--solaverse-blur);
  box-shadow: none;
}

:is([data-holo-id="Navbar.Start"], [data-holo-id="Navbar.Center"], [data-holo-id="Navbar.End"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-gap: 1.2rem;
  --holo-part-width: max-content;
  display: flex;
  align-items: center;
  inline-size: max-content;
}

/* Entre el botón del menú y el logo hay más aire que entre las píldoras. */
[data-holo-id="Navbar.Start"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-gap: 3rem;
  gap: 3rem;
}

[data-holo-id="Navbar.Center"].ht-Layout\.Stack[data-holo-part="true"] {
  justify-self: center;
}

[data-holo-id="Navbar.End"].ht-Layout\.Stack[data-holo-part="true"] {
  justify-self: end;
}

[data-holo-id="Navbar.Menu"].ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: 5.4rem;
  --holo-trigger-inline-size: 5.4rem;
  flex: none;
  inline-size: 5.4rem;
  min-inline-size: 5.4rem;
  block-size: 5.4rem;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--solaverse-edge);
  border-radius: 50%;
  background: var(--solaverse-glass-pill);
  color: var(--solaverse-text);
  box-shadow: none;
  cursor: pointer;
}

[data-holo-id="Navbar.Menu"].ht-Control\.Trigger.hr-Trigger:is(:hover, :focus-visible) {
  border-color: rgb(255 255 255 / 30%);
  background: rgb(255 255 255 / 14%);
}

/* Las capas de pantalla completa (menú, Ghost Coin, About, Follow, la cuenta
   con su colección y Play) se colocan en el marco común (D151): Holo centra el
   diálogo y reserva su propio hueco para la barra, así que quedaba pegado a
   ella arriba y con aire de más abajo. */
:is([data-holo-id="Menu.Panel"], [data-holo-id="Coin.Panel"], [data-holo-id="About.Panel"], [data-holo-id="Follow.Panel"], [data-holo-id="Realm.Panel"], [data-holo-id="Wallet.Panel"]:has([data-holo-id="Wallet.Persona"])).ht-Layout\.Modal.ht-Layout\.Modal {
  --holo-modal-glass-padding: var(--solaverse-top) 0 var(--solaverse-gap);
  --holo-modal-height: var(--solaverse-frame-height);
  box-sizing: border-box;
  padding: var(--solaverse-top) 0 var(--solaverse-gap);
  align-items: start;
}

:is([data-holo-id="Menu.Panel"], [data-holo-id="Coin.Panel"], [data-holo-id="About.Panel"], [data-holo-id="Follow.Panel"], [data-holo-id="Realm.Panel"], [data-holo-id="Wallet.Panel"]:has([data-holo-id="Wallet.Persona"])).ht-Layout\.Modal.ht-Layout\.Modal > .hr-Dialog {
  inset-block-start: 0;
  margin-block: 0;
}

/* Las tres líneas se dibujan con la hoja (no con el glifo). Con el menú
   abierto, la barra cambia el botón por el de cerrar (`Navbar.Close`), que
   nace como tres líneas y gira hasta formar la X (D149). La línea de en medio
   es el fondo del icono; las otras dos, sus pseudoelementos. El cambio lo
   decide la propia capa del menú (`:has`), así que no depende de releer la
   barra al navegar. */
[data-holo-id="Navbar.Close"].ht-Control\.Trigger.hr-Trigger.hr-Trigger,
:root:has([data-holo-id="Menu.Panel"]) [data-holo-id="Navbar.Menu"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  display: none;
}

:root:has([data-holo-id="Menu.Panel"]) [data-holo-id="Navbar.Close"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  display: inline-flex;
}

:is([data-holo-id="Navbar.Menu.Icon"], [data-holo-id="Navbar.Close.Icon"]).ht-Content\.Icon {
  --solaverse-bar: 0.18rem;
  --solaverse-bar-gap: 0.66rem;
  position: relative;
  display: block;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  font-size: 0;
  background: linear-gradient(var(--solaverse-text), var(--solaverse-text)) center / 100% var(--solaverse-bar) no-repeat;
  transition: background-size 180ms ease;
}

:is([data-holo-id="Navbar.Menu.Icon"], [data-holo-id="Navbar.Close.Icon"]).ht-Content\.Icon > * {
  display: none;
}

:is([data-holo-id="Navbar.Menu.Icon"], [data-holo-id="Navbar.Close.Icon"]).ht-Content\.Icon::before,
:is([data-holo-id="Navbar.Menu.Icon"], [data-holo-id="Navbar.Close.Icon"]).ht-Content\.Icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(50% - var(--solaverse-bar) / 2);
  block-size: var(--solaverse-bar);
  border-radius: 1rem;
  background: var(--solaverse-text);
  transition: translate 260ms cubic-bezier(0.4, 0, 0.2, 1), rotate 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-holo-id="Navbar.Menu.Icon"].ht-Content\.Icon::before {
  translate: 0 calc(var(--solaverse-bar-gap) * -1);
}

[data-holo-id="Navbar.Menu.Icon"].ht-Content\.Icon::after {
  translate: 0 var(--solaverse-bar-gap);
}

[data-holo-id="Navbar.Close.Icon"].ht-Content\.Icon {
  background-size: 0 var(--solaverse-bar);
}

[data-holo-id="Navbar.Close.Icon"].ht-Content\.Icon::before {
  rotate: 45deg;
}

[data-holo-id="Navbar.Close.Icon"].ht-Content\.Icon::after {
  rotate: -45deg;
}

@starting-style {
  [data-holo-id="Navbar.Close.Icon"].ht-Content\.Icon {
    background-size: 100% var(--solaverse-bar);
  }

  [data-holo-id="Navbar.Close.Icon"].ht-Content\.Icon::before {
    translate: 0 calc(var(--solaverse-bar-gap) * -1);
    rotate: 0deg;
  }

  [data-holo-id="Navbar.Close.Icon"].ht-Content\.Icon::after {
    translate: 0 var(--solaverse-bar-gap);
    rotate: 0deg;
  }
}

[data-holo-id="Navbar.Close"].ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: 5.4rem;
  --holo-trigger-inline-size: 5.4rem;
  flex: none;
  inline-size: 5.4rem;
  min-inline-size: 5.4rem;
  block-size: 5.4rem;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 50%;
  background: rgb(255 255 255 / 9%);
  color: var(--solaverse-text);
  box-shadow: none;
  cursor: pointer;
}

[data-holo-id="Navbar.Close"].ht-Control\.Trigger.hr-Trigger:is(:hover, :focus-visible) {
  border-color: rgb(255 255 255 / 30%);
  background: rgb(255 255 255 / 14%);
}

/* Con el botón de la barra convertido en X, la capa del menú no lleva su
   propia cruz. */
[data-holo-id="Menu.Panel"].ht-Layout\.Modal > .hr-Dialog > .hr-Close {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  :is([data-holo-id="Navbar.Menu.Icon"], [data-holo-id="Navbar.Close.Icon"]).ht-Content\.Icon,
:is([data-holo-id="Navbar.Menu.Icon"], [data-holo-id="Navbar.Close.Icon"]).ht-Content\.Icon::before,
:is([data-holo-id="Navbar.Menu.Icon"], [data-holo-id="Navbar.Close.Icon"]).ht-Content\.Icon::after {
    transition: none;
  }
}

/* Las pestañas principales como una cápsula de cristal con tres píldoras;
   la de la ruta abierta (Selected, lo decide Menu) lleva brillo lila. */
[data-holo-id="Navbar.Tabs"].ht-Collection\.List[data-holo-part="true"] {
  --holo-part-width: max-content;
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 999px;
  background: rgb(20 24 64 / 40%);
}

[data-holo-id="Navbar.Tabs"].ht-Collection\.List .hr-Item .hr-Icon {
  display: none;
}

[data-holo-id="Navbar.Tabs"].ht-Collection\.List .hr-Item {
  flex: none;
  inline-size: auto;
  min-inline-size: max-content;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  position: relative;
  gap: 0;
  min-block-size: 4rem;
  padding-inline: 2.8rem;
  border: 0;
  border-radius: 999px;
  color: #b4b7ff;
  font-family: var(--solaverse-font-section);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  box-shadow: none;
  transform: none;
}

[data-holo-id="Navbar.Tabs"].ht-Collection\.List .hr-Item:is(:hover, :focus-visible) {
  color: #e4e3ff;
  background: transparent;
}

[data-holo-id="Navbar.Tabs"].ht-Collection\.List .hr-Item:is([aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-pressed="true"], [data-holo-selected="true"]) {
  color: rgb(255 255 255);
  background: transparent;
  box-shadow: none;
}

/* En una ventana estrecha las pestañas se aprietan para que las píldoras de
   moneda y cuenta quepan dentro de la barra. */
@media (max-width: 900px) {
  [data-holo-id="Navbar.Tabs"].ht-Collection\.List .hr-Item {
    padding-inline: 1.4rem;
    letter-spacing: 0.12em;
  }

  [data-holo-id="Navbar.Tabs"].ht-Collection\.List .hr-Item:is([aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-pressed="true"], [data-holo-selected="true"])::after {
    inset-inline: 1.4rem;
  }

  [data-holo-id="Navbar.Start"].ht-Layout\.Stack[data-holo-part="true"] {
    --holo-part-gap: 1.6rem;
    gap: 1.6rem;
  }

  [data-holo-id="Navbar"].ht-Navigation\.Navbar[data-holo-part="true"] {
    --holo-part-gap: 0.8rem;
    column-gap: 0.8rem;
  }
}

/* La elegida lleva un subrayado menta-lila, más corto que la palabra. */
[data-holo-id="Navbar.Tabs"].ht-Collection\.List .hr-Item:is([aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-pressed="true"], [data-holo-selected="true"])::after {
  content: "";
  position: absolute;
  inset-inline: 2.8rem;
  inset-block-end: 0.3rem;
  block-size: 0.3rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--solaverse-mint), var(--solaverse-lilac));
}

/* La cuenta, a juego con la moneda: cápsula de cristal con el retrato del
   Ghostie (o el icono de wallet) y la wallet abreviada. */
:is([data-holo-id="Navbar.Account"], [data-holo-id="Navbar.Wallet.Trigger"]).ht-Control\.Trigger.hr-Trigger {
  block-size: 4.4rem;
  padding: 0.3rem 2rem 0.3rem 0.8rem;
  gap: 1.4rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 999px;
  background: var(--solaverse-glass-pill);
  color: var(--solaverse-text);
  font-size: 1.8rem;
  font-weight: 500;
  box-shadow: none;
}

:is([data-holo-id="Navbar.Account"], [data-holo-id="Navbar.Wallet.Trigger"]).ht-Control\.Trigger.hr-Trigger:is(:hover, :focus-visible) {
  background: rgb(255 255 255 / 13%);
}

:is([data-holo-id="Navbar.Account.Icon"], [data-holo-id="Navbar.Wallet.Icon"]) {
  inline-size: 3.6rem;
  block-size: 3.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 10%);
  font-size: 1.9rem;
}

/* La moneda: cápsula de cristal con el Ghost Coin y el saldo. */
:is([data-holo-id="Navbar.Coin"], [data-holo-id="Navbar.Coin.Close"]).ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: max-content;
  --holo-trigger-inline-size: max-content;
  block-size: 4.4rem;
  padding: 0.3rem 2rem 0.3rem 0.8rem;
  gap: 1.2rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 999px;
  background: var(--solaverse-glass-pill);
  color: var(--solaverse-text);
  font-size: 1.8rem;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
}

[data-holo-id="Navbar.Coin"].ht-Control\.Trigger.hr-Trigger:is(:hover, :focus-visible) {
  background: rgb(255 255 255 / 13%);
}

[data-holo-id="Navbar.Coin.Close.Icon"],
[data-holo-id="Navbar.Coin.Icon"] {
  --holo-part-width: 3.6rem;
  --holo-part-height: 3.6rem;
  inline-size: 3.6rem;
  block-size: 3.6rem;
  flex: none;
  object-fit: contain;
}

[data-holo-id="Navbar.Coin.Icon"] img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

[data-holo-id="Navbar.Coin.Face"] {
  --holo-part-width: auto;
  --holo-part-overflow: visible;
  --holo-part-clip-path: none;
  --holo-part-contain: none;
}

/* Juegos (Realm): la capa de cristal oscuro como About, con texto claro y
   tarjetas de cristal; la portada llena su hueco en 16:9 sin franjas. Al pasar
   el ratón sólo cambia el fondo de la tarjeta; nada se eleva. */
:is([data-holo-id="Realm.Panel"], [data-holo-id="Studio.Panel"]) :is(.ht-Content\.Title, .ht-Content\.Text, .ht-Content\.Markdown) {
  color: rgb(240 244 255);
}

:is([data-holo-id="Realm.Panel"], [data-holo-id="Studio.Panel"]) :is(.ht-Content\.Title, .ht-Content\.Text, .ht-Content\.Markdown)[data-holo-part="true"],
:is([data-holo-id="Realm.Panel"], [data-holo-id="Studio.Panel"]) :is(.ht-Content\.Title, .ht-Content\.Markdown)[data-holo-part="true"] * {
  color: rgb(240 244 255);
}

:is([data-holo-id="Studio.Page"]).ht-Layout\.Stack[data-holo-part="true"] {
  padding: 1.6rem 2.4rem 2.4rem;
  box-sizing: border-box;
}

:is([data-holo-id="Studio.Play"], [data-holo-id="Studio.Test"]).ht-Control\.Trigger.hr-Trigger {
  border-color: rgb(143 227 200 / 80%);
  background: rgb(143 227 200 / 32%);
}

:is([data-holo-id="Realm.Panel"], [data-holo-id="Studio.Panel"]) .ht-Content\.Markdown[data-holo-part="true"] {
  font-size: 1.5rem;
  line-height: 1.55;
}

:is([data-holo-id="Realm.Panel"], [data-holo-id="Studio.Panel"]) .ht-Content\.Markdown[data-holo-part="true"] :is(h2, h3) {
  margin: 1.6rem 0 0.6rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: rgb(159 213 209);
}

/* Estudio: el formulario sobre el cristal oscuro, con etiquetas claras. */
[data-holo-id="Studio.Editor"].ht-Control\.Form[data-holo-part="true"],
[data-holo-id="Studio.Piece.Editor"].ht-Control\.Form[data-holo-part="true"] {
  color: rgb(240 244 255);
  --holo-form-control-radius: 12px;
  --holo-surface: rgb(20 26 60 / 58%);
  --holo-panel: transparent;
  --holo-border: rgb(255 255 255 / 16%);
  --holo-fg: rgb(240 244 255);
  --holo-muted: rgb(196 204 238 / 78%);
  --holo-accent: rgb(150 132 255);
  background: transparent;
}

/* ------------------------------------------------------------------------
   Editor de juegos (Realm/Studio), a pantalla completa y de cristal líquido
   sobre un cielo nocturno (referencia: Projects/Solaverse/Editor/7, 8 y 9).
   Arriba la barra del juego; debajo tres columnas: las secciones que entran
   en detalle, el lienzo con la escena (sin panel: flota sobre el cielo) y la
   conversación con tu Ghostie. Al pasar el ratón cambia el fondo o el borde;
   nada se eleva.
   ------------------------------------------------------------------------ */

/* El cielo nocturno del editor y de la puerta de la sala. */
/* Detrás de las páginas, el cielo ilustrado de la raíz (Sky): las páginas
   dejan su fondo transparente para que se vea. */
:is([data-holo-id="Studio.Page"], [data-holo-id="Room.Gate"], [data-holo-id="Admin.Page"], [data-holo-id="Collection.Page"], [data-holo-id="Vote.Page"], [data-holo-id="Realm.Panel"], [data-holo-id="Leaderboard.Page"]).ht-Layout\.Stack[data-holo-part="true"] {
  background: transparent;
}

[data-holo-id="Studio.Page"].ht-Layout\.Stack[data-holo-part="true"] {
  --studio-mint: rgb(123 241 200);
  --studio-lilac: rgb(200 166 255);
  --studio-ink: rgb(240 244 255);
  --studio-soft: rgb(205 210 240 / 72%);
  --studio-glass: linear-gradient(160deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 4%));
  --studio-edge: rgb(255 255 255 / 16%);
  --studio-shine: inset 0 1px 0 rgb(255 255 255 / 20%), inset 0 0 0 1px rgb(255 255 255 / 4%), 0 1.8rem 4rem rgb(4 6 28 / 38%);
  --holo-part-height: 100dvh;
  box-sizing: border-box;
  block-size: 100dvh;
  inline-size: 100%;
  --holo-part-display: flex;
  display: flex;
  flex-direction: column;
  padding: var(--solaverse-top) var(--solaverse-side) var(--solaverse-gap);
  gap: 1.4rem;
  color: var(--studio-ink);
  overflow: hidden;
}

/* Paneles de cristal: la barra del juego y las dos columnas laterales. */
:is([data-holo-id="Studio.Bar"], [data-holo-id="Studio.Side"], [data-holo-id="Studio.Agent"]).ht-Layout\.Stack[data-holo-part="true"] {
  box-sizing: border-box;
  border: 1px solid var(--studio-edge);
  border-radius: 2rem;
  background: var(--studio-glass);
  box-shadow: var(--studio-shine);
  backdrop-filter: blur(1.8rem) saturate(140%);
  -webkit-backdrop-filter: blur(1.8rem) saturate(140%);
}

[data-holo-id="Studio.Bar"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-width: 100%;
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
  padding: 0.9rem 1.2rem;
}

/* El cuerpo es un Shell de Holo: la barra izquierda es su navegación y se
   contrae con su conmutador nativo (Studio.Fold) a una franja con la
   portada, para dar el sitio al lienzo y a la conversación. */
[data-holo-id="Studio.Body"].ht-Layout\.Shell {
  --holo-shell-navigation-collapsed-inline-size: 8rem;
  column-gap: 1.6rem;
  min-block-size: 0;
  flex: 1 1 auto;
}

[data-holo-id="Studio.Work"].ht-Layout\.Grid[data-holo-part="true"] {
  grid-template-rows: minmax(0, 1fr);
  gap: 1.6rem;
  min-block-size: 0;
  block-size: 100%;
}

/* Las áreas del Shell no pintan fondo propio: el cristal es de los paneles. */
[data-holo-id="Studio.Body"].ht-Layout\.Shell > [data-holo-area] {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* El conmutador, abajo a la derecha del panel; contraído, centrado. */
[data-holo-id="Studio.Fold"][data-holo-part="true"] {
  flex: none;
  display: flex;
  justify-content: flex-end;
  margin-block-start: auto;
  padding-block-start: 0.8rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

[data-holo-id="Studio.Fold"] button {
  inline-size: 3.2rem;
  block-size: 3.2rem;
  border: 1px solid var(--studio-edge);
  border-radius: 50%;
  background: rgb(255 255 255 / 6%);
  color: var(--studio-soft);
}

[data-holo-id="Studio.Fold"] button:is(:hover, :focus-visible) {
  border-color: var(--studio-mint);
  color: var(--studio-mint);
}

[data-holo-id="Studio.Body"][data-holo-navigation="Collapsed"] [data-holo-id="Studio.Fold"][data-holo-part="true"] {
  justify-content: center;
}

[data-holo-id="Studio.Body"][data-holo-navigation="Collapsed"] [data-holo-id="Studio.Side"].ht-Layout\.Stack[data-holo-part="true"] {
  padding: 1.2rem 0.8rem;
  overflow: hidden;
}

[data-holo-id="Studio.Body"][data-holo-navigation="Collapsed"] [data-holo-id="Studio.Bar"].ht-Layout\.Stack[data-holo-part="true"] {
  flex-direction: column;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

[data-holo-id="Studio.Body"][data-holo-navigation="Collapsed"] :is([data-holo-id="Studio.Heading"], [data-holo-id="Studio.Drill"], [data-holo-id="Studio.Assets"], [data-holo-id="Studio.Versions.Open"]) {
  display: none !important;
}

:is([data-holo-id="Studio.Side"], [data-holo-id="Studio.Agent"]).ht-Layout\.Stack[data-holo-part="true"] {
  min-block-size: 0;
  block-size: 100%;
  padding: 1.8rem 1.6rem;
  overflow: auto;
}

/* El lienzo flota sobre el cielo, sin panel. */
[data-holo-id="Studio.Canvas"].ht-Layout\.Stack[data-holo-part="true"] {
  grid-template-rows: minmax(0, 1fr);
  min-block-size: 0;
  block-size: 100%;
  border-radius: 2rem;
  overflow: hidden;
}

/* Con varias vistas, su barra va encima del lienzo (ideal Editor_Views). */
[data-holo-id="Studio.Canvas"].ht-Layout\.Stack[data-holo-part="true"]:has([data-holo-id="Studio.Views"]) {
  --studio-views: 7.2rem;
  grid-template-rows: var(--studio-views) minmax(0, 1fr);
}

/* Las vistas del juego (ideal Editor_Views), encima del lienzo: una fila de
   botones con icono y nombre; la elegida, en lila. */

/* Las secciones del editor, como en la ideal: una lista vertical debajo del
   juego, cada fila con su icono y su nombre a lo ancho; el panel de la
   sección elegida va justo debajo (`Studio.Drill`). */
[data-holo-id="Studio.Side"][data-holo-id="Studio.Side"] > [data-holo-id="Studio.Rail"].ht-Navigation\.Tabs[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-width: 100%;
  --holo-part-height: auto;
  grid-column: 1 / -1;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2em;
  inline-size: 100%;
  block-size: auto;
  padding: 0.4em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.04);
  overflow: visible;
}

[data-holo-id="Studio.Rail"] .hr-PagerControl.hr-PagerControl {
  display: none;
}

[data-holo-id="Studio.Side"][data-holo-id="Studio.Side"] [data-holo-id="Studio.Rail"] .hr-Tab.hr-Tab.hr-Tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8em;
  inline-size: 100%;
  min-block-size: 2.6em;
  padding: 0.6em 0.9em;
  border-radius: 0.8em;
  font-size: var(--holo-font-body, 1.4rem);
  font-weight: 600;
  text-align: start;
  background: transparent;
  color: rgba(237, 233, 254, 0.86);
  box-shadow: none;
}

[data-holo-id="Studio.Side"][data-holo-id="Studio.Side"] [data-holo-id="Studio.Rail"] .hr-Tab .hr-Icon.hr-Icon {
  inline-size: 1.3em;
  block-size: 1.3em;
  font-size: 1.3em;
}

[data-holo-id="Studio.Side"][data-holo-id="Studio.Side"] [data-holo-id="Studio.Rail"] .hr-Tab .hr-Text.hr-Text {
  font-size: 1em;
  line-height: 1.2;
}

[data-holo-id="Studio.Side"][data-holo-id="Studio.Side"] [data-holo-id="Studio.Rail"] .hr-Tab.hr-Tab:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-holo-id="Studio.Side"][data-holo-id="Studio.Side"] [data-holo-id="Studio.Rail"] .hr-Tab.hr-Tab[aria-selected="true"] {
  background: rgba(167, 139, 250, 0.24);
  color: #f5f3ff;
}

[data-holo-id="Studio.Body"][data-holo-navigation="Collapsed"] [data-holo-id="Studio.Rail"][data-holo-id="Studio.Rail"] {
  display: none;
}

[data-holo-id="Studio.Views"].ht-Navigation\.Tabs[data-holo-part="true"] {
  --holo-part-width: 100%;
  --holo-part-height: auto;
  margin-block: 0 0.8rem;
  block-size: calc(var(--studio-views) - 0.8rem);
  flex-direction: row;
  --holo-part-contain: none;
  --holo-part-clip-path: none;
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem;
  border: 1px solid var(--studio-edge);
  border-radius: 1.8rem;
  background: var(--studio-glass);
  box-shadow: var(--studio-shine);
}

[data-holo-id="Studio.Views"] .hr-Tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 0;
  padding: 0.4rem;
  border: 0;
  border-radius: 1.3rem;
  background: transparent;
  color: var(--studio-soft);
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

[data-holo-id="Studio.Views"] .hr-Tab .hr-Icon {
  font-size: 2.2rem;
  line-height: 1;
}

[data-holo-id="Studio.Views"] .hr-Tab:hover {
  background: rgb(255 255 255 / 7%);
  color: var(--studio-ink);
}

[data-holo-id="Studio.Views"] .hr-Tab[aria-selected="true"] {
  background: linear-gradient(160deg, rgb(178 140 255), rgb(132 104 246));
  color: rgb(255 255 255);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), 0 0.6rem 1.8rem rgb(120 90 240 / 40%);
}

[data-holo-id="Studio.Scene"].ht-Visual\.Embed[data-holo-part="true"] {
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  flex: 1 1 auto;
  block-size: 100%;
  min-block-size: 0;
  background: transparent;
}

[data-holo-id="Studio.Scene"] iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

[data-holo-id="Studio.Scene"] iframe {
  background: transparent;
  color-scheme: normal;
}

/* Textos. */
[data-holo-id^="Studio."].ht-Content\.Title .hr-Title {
  margin: 0;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--studio-ink);
}

[data-holo-id^="Studio."]:is(.ht-Content\.Text, .ht-Content\.Markdown)[data-holo-part="true"] {
  color: var(--studio-soft);
  font-size: 1.35rem;
  line-height: 1.5;
}

/* Barra: el desplegable del juego, el prototipo, los archivos y las acciones. */
[data-holo-id="Studio.Game"] [data-holo-select-trigger],
:is([data-holo-id="Studio.Files.Open"], [data-holo-id="Studio.Play"], [data-holo-id="Studio.Test"]).ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: max-content;
  --holo-trigger-inline-size: max-content;
  --holo-part-min-block-size: 4.4rem;
  min-block-size: 4.4rem;
  padding: 0 1.6rem;
  white-space: nowrap;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 1.4rem;
  background: rgb(255 255 255 / 6%);
  color: var(--studio-ink);
  font-weight: 600;
  font-size: 1.5rem;
  box-shadow: none;
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger]:is(:hover, :focus-visible),
:is([data-holo-id="Studio.Files.Open"], [data-holo-id="Studio.Play"], [data-holo-id="Studio.Test"]).ht-Control\.Trigger.hr-Trigger:is(:hover, :focus-visible) {
  border-color: rgb(255 255 255 / 45%);
  background: rgb(255 255 255 / 12%);
}

[data-holo-id="Studio.Prototype"].ht-Layout\.Stack[data-holo-part="true"] {
  padding: 0.9rem 1.6rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1.4rem;
  background: rgb(255 255 255 / 5%);
  color: var(--studio-ink);
  font-size: 1.45rem;
  font-weight: 500;
}

[data-holo-id^="Studio.Publish"].ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: max-content;
  --holo-trigger-inline-size: max-content;
  --holo-part-min-block-size: 4.4rem;
  min-block-size: 4.4rem;
  padding: 0 2.4rem;
  white-space: nowrap;
  border: 0;
  border-radius: 1.4rem;
  background: linear-gradient(90deg, rgb(244 168 212), rgb(247 192 156));
  color: rgb(27 35 80);
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: 0 0 2.4rem rgb(244 168 212 / 30%);
}

[data-holo-id^="Studio.Publish"].ht-Control\.Trigger.hr-Trigger :is(p, .hr-Icon) {
  color: rgb(27 35 80);
}

[data-holo-id^="Studio.Publish"].ht-Control\.Trigger.hr-Trigger:is(:hover, :focus-visible) {
  filter: brightness(1.08);
}

/* La vista general: tarjeta del juego y secciones. */
[data-holo-id="Studio.Cover"].ht-Content\.Image[data-holo-part="true"] {
  --holo-part-width: 6.4rem;
  flex: none;
  inline-size: 6.4rem;
  block-size: 6.4rem;
  border-radius: 1.4rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 22%);
}

[data-holo-id="Studio.Cover"] img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

[data-holo-id="Studio.Detail"].ht-Layout\.Stack[data-holo-part="true"] {
  animation: Studio-In 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes Studio-In {
  from { opacity: 0; transform: translateX(3.2rem); }
  to { opacity: 1; transform: none; }
}

@keyframes Studio-Back {
  from { opacity: 0; transform: translateX(-3.2rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is([data-holo-id="Studio.Overview"], [data-holo-id="Studio.Detail"]).ht-Layout\.Stack[data-holo-part="true"] {
    animation: none;
  }
}

/* Las tablas y el código del detalle, legibles sobre el cristal. */
[data-holo-id="Studio.Detail.Text"] table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 1.3rem;
}

[data-holo-id="Studio.Detail.Text"] :is(th, td) {
  padding: 0.7rem 0.6rem;
  border-block-end: 1px solid rgb(255 255 255 / 8%);
  text-align: start;
  color: var(--studio-ink);
}

[data-holo-id="Studio.Detail.Text"] th {
  color: var(--studio-soft);
  font-weight: 600;
}

[data-holo-id="Studio.Detail.Text"] pre {
  max-block-size: 40rem;
  overflow: auto;
  padding: 1.2rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1.2rem;
  background: rgb(10 14 40 / 70%);
  color: rgb(225 230 255);
  font-size: 1.2rem;
}

[data-holo-id="Studio.Detail.Head"].ht-Layout\.Stack[data-holo-part="true"] {
  padding-block-end: 1.4rem;
  border-block-end: 1px solid rgb(255 255 255 / 10%);
}

/* Barra del juego: cada control con su ancho; el hueco empuja las acciones a
   la derecha. */
[data-holo-id="Studio.Bar"].ht-Layout\.Stack[data-holo-part="true"] > * {
  flex: none;
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger] {
  min-inline-size: 20rem;
  gap: 1rem;
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger] :is(.hr-Value, .hr-Disclosure) {
  color: var(--studio-ink);
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger] > .hr-Icon {
  background: transparent;
  color: var(--studio-mint);
  font-size: 2rem;
}

[data-holo-id="Studio.Detail.Text"] :is(thead, thead tr, th) {
  background: transparent;
}

/* Publish sin nada que mandar a revisión: el mismo botón, apagado; lleva a la
   sección que explica qué falta. */
[data-holo-id="Studio.Publish.Idle"].ht-Control\.Trigger.hr-Trigger {
  opacity: 0.7;
}

/* Controles de la barra a la misma altura que el desplegable. */
[data-holo-id="Studio.Prototype"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: max-content;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  --holo-part-min-block-size: 4.4rem;
  min-block-size: 4.4rem;
  padding: 0 1.6rem;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 1.4rem;
  background: rgb(255 255 255 / 6%);
  color: var(--studio-ink);
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Cabeceras de los paneles alineadas a la izquierda. */
:is([data-holo-id="Studio.Card"], [data-holo-id="Studio.Card.Text"]).ht-Layout\.Stack[data-holo-part="true"] {
  justify-content: start;
  justify-items: start;
  text-align: start;
}

/* La barra izquierda se desplaza por dentro cuando su detalle es largo (un
   formulario, el código): Holo fija el overflow con su variable. */
[data-holo-id="Studio.Drill"][data-holo-part="true"] {
  --holo-part-overflow: auto;
  overflow-y: auto;
  scrollbar-width: thin;
}

[data-holo-id="Studio.Agent"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-overflow: auto;
}

[data-holo-id="Studio.Detail"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-overflow: auto;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ------------------------------------------------------------------------
   La puerta de la sala (Realm/Room sin Ghostie o sin juego): una tarjeta de
   cristal centrada sobre el cielo, con el Ghostie de los juegos, el motivo y
   qué hacer. En la máquina del dueño ofrece además el modo prueba.
   ------------------------------------------------------------------------ */

[data-holo-id="Room.Gate"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-height: 100dvh;
  box-sizing: border-box;
  block-size: 100dvh;
  inline-size: 100%;
  padding: var(--solaverse-top) var(--solaverse-side) var(--solaverse-gap);
  --holo-part-display: flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-holo-id="Room.Gate.Card"].ht-Layout\.Stack[data-holo-part="true"] {
  box-sizing: border-box;
  --holo-part-width: min(54rem, 100%);
  inline-size: min(54rem, 100%);
  gap: 1.4rem;
  padding: 3.2rem 3.6rem 2.8rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 2.4rem;
  background: linear-gradient(160deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 4%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 2.4rem 6rem rgb(4 6 28 / 45%);
  backdrop-filter: blur(1.8rem) saturate(140%);
  -webkit-backdrop-filter: blur(1.8rem) saturate(140%);
  text-align: center;
  color: rgb(240 244 255);
  --holo-part-display: flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
}

[data-holo-id="Room.Gate.Face"].ht-Content\.Image[data-holo-part="true"] {
  --holo-part-width: 11rem;
  inline-size: 11rem;
  block-size: 11rem;
  flex: none;
}

[data-holo-id="Room.Gate.Face"] img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

[data-holo-id="Room.Gate.Title"].ht-Content\.Title .hr-Title {
  margin: 0;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: rgb(240 244 255);
}

:is([data-holo-id="Room.Gate.Text"], [data-holo-id="Room.Gate.Note"]).ht-Content\.Text[data-holo-part="true"] {
  max-inline-size: 42rem;
  color: rgb(205 210 240 / 82%);
  font-size: 1.5rem;
  line-height: 1.55;
}

[data-holo-id="Room.Gate.Note"].ht-Content\.Text[data-holo-part="true"] {
  font-size: 1.25rem;
  color: rgb(200 166 255 / 90%);
}

[data-holo-id="Room.Gate.Actions"].ht-Layout\.Stack[data-holo-part="true"] {
  flex-wrap: wrap;
  margin-block-start: 0.8rem;
}

:is([data-holo-id="Room.Test"], [data-holo-id="Room.Wallet"], [data-holo-id="Room.Back"]).ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: max-content;
  --holo-trigger-inline-size: max-content;
  --holo-part-min-block-size: 4.6rem;
  min-block-size: 4.6rem;
  padding: 0 2.2rem;
  white-space: nowrap;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 1.4rem;
  background: rgb(255 255 255 / 7%);
  font-size: 1.5rem;
  font-weight: 600;
  box-shadow: none;
}

:is([data-holo-id="Room.Test"], [data-holo-id="Room.Wallet"], [data-holo-id="Room.Back"]).ht-Control\.Trigger.hr-Trigger * {
  color: rgb(240 244 255);
}

:is([data-holo-id="Room.Test"], [data-holo-id="Room.Wallet"], [data-holo-id="Room.Back"]).ht-Control\.Trigger.hr-Trigger:is(:hover, :focus-visible) {
  border-color: rgb(255 255 255 / 45%);
  background: rgb(255 255 255 / 14%);
}

/* La acción principal: el modo prueba si existe; si no, elegir un Ghostie. */
:is([data-holo-id="Room.Test"], [data-holo-id="Room.Wallet"]).ht-Control\.Trigger.hr-Trigger {
  border: 0;
  background: linear-gradient(90deg, rgb(123 241 200), rgb(200 166 255));
}

:is([data-holo-id="Room.Test"], [data-holo-id="Room.Wallet"]).ht-Control\.Trigger.hr-Trigger * {
  color: rgb(27 35 80);
}

:is([data-holo-id="Room.Test"], [data-holo-id="Room.Wallet"]).ht-Control\.Trigger.hr-Trigger:is(:hover, :focus-visible) {
  background: linear-gradient(90deg, rgb(123 241 200), rgb(200 166 255));
  filter: brightness(1.08);
}

/* Con el modo prueba, elegir un Ghostie queda como secundaria. */
[data-holo-id="Room.Test"] ~ [data-holo-id="Room.Wallet"].ht-Control\.Trigger.hr-Trigger {
  border: 1px solid rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 7%);
  filter: none;
}

[data-holo-id="Room.Test"] ~ [data-holo-id="Room.Wallet"].ht-Control\.Trigger.hr-Trigger * {
  color: rgb(240 244 255);
}

/* ------------------------------------------------------------------------
   Juegos (Realm): la lista es una rejilla de tarjetas iguales, cada una con
   su portada 16:9, el nombre y la marca; no un carrusel con barras. La ficha
   pone la portada a la izquierda, a media anchura, y al lado el nombre, de
   qué va y «Play»; debajo, las reglas.
   ------------------------------------------------------------------------ */

[data-holo-id="Realm.Panel"],
[data-holo-id="Realm.Panel"] * {
  scrollbar-color: rgb(255 255 255 / 22%) transparent;
  scrollbar-width: thin;
}

[data-holo-id="Realm.Browse.Title"].ht-Content\.Title .hr-Title,
[data-holo-id="Realm.Name"].ht-Content\.Title .hr-Title {
  margin: 0;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
}

[data-holo-id="Realm.Lead"].ht-Content\.Text[data-holo-part="true"] {
  font-size: 1.55rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------------------
   Barra izquierda del editor (referencias 7 y 8): la vista general es una
   lista de secciones separadas por una línea fina, con el icono blanco, el
   nombre, el resumen y «›»; el detalle tiene la vuelta atrás a la izquierda,
   una ficha (Studio.Facts) y filas con su barra (Studio.Rows), en cajas de
   cristal oscuro.
   ------------------------------------------------------------------------ */

:is([data-holo-id="Studio.Side"], [data-holo-id="Studio.Agent"], [data-holo-id="Studio.Drill"], [data-holo-id="Studio.Detail"], [data-holo-id="Studio.Overview"]),
:is([data-holo-id="Studio.Side"], [data-holo-id="Studio.Agent"]) * {
  scrollbar-color: rgb(255 255 255 / 18%) transparent;
  scrollbar-width: thin;
}

[data-holo-id="Studio.Side"].ht-Layout\.Stack[data-holo-part="true"] {
  padding: 1.6rem 1.2rem;
}

[data-holo-id="Studio.Cover"].ht-Content\.Image[data-holo-part="true"] {
  --holo-part-width: 7.6rem;
  inline-size: 7.6rem;
  block-size: 7.6rem;
  border-radius: 1.6rem;
  box-shadow: 0 0.6rem 1.6rem rgb(4 6 28 / 35%);
}

[data-holo-id="Studio.Detail.Title"].ht-Content\.Title .hr-Title {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* La ficha y las filas: cajas de cristal oscuro con filas separadas. */
:is([data-holo-id="Studio.Facts"], [data-holo-id="Studio.Rows"]).ht-Collection\.List[data-holo-presentation][data-holo-part="true"] {
  --holo-list-gap: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 1.6rem;
  background: rgb(10 14 46 / 32%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

:is([data-holo-id="Studio.Facts"], [data-holo-id="Studio.Rows"]).ht-Collection\.List[data-holo-presentation] > .hr-Item {
  min-block-size: 5.2rem;
  margin: 0;
  padding: 0.9rem 1.4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgb(240 244 255);
}

:is([data-holo-id="Studio.Facts"], [data-holo-id="Studio.Rows"]).ht-Collection\.List[data-holo-presentation] > .hr-Item + .hr-Item {
  border-block-start: 1px solid rgb(255 255 255 / 8%);
}

:is([data-holo-id="Studio.Facts"], [data-holo-id="Studio.Rows"]).ht-Collection\.List[data-holo-presentation] > .hr-Item > .hr-Icon {
  display: none;
}

[data-holo-id="Studio.Facts"].ht-Collection\.List.hp-Ledger > .hr-Item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

[data-holo-id="Studio.Facts"].ht-Collection\.List.hp-Ledger > .hr-Item .hr-Title {
  font-size: 1.4rem;
  font-weight: 500;
  color: rgb(205 210 240 / 78%);
}

[data-holo-id="Studio.Facts"].ht-Collection\.List.hp-Ledger > .hr-Item > .hr-Value,
[data-holo-id="Studio.Facts"].ht-Collection\.List.hp-Ledger > .hr-Item > .hr-Value * {
  font-size: 1.45rem;
  font-weight: 600;
  color: rgb(240 244 255);
  text-align: end;
  overflow-wrap: anywhere;
}

/* Cada ajuste como en la referencia 8: el nombre con lo que admite debajo, la
   barra con su tirador y el valor en una caja. */
[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.4rem;
  grid-template-areas: none;
  align-items: center;
  gap: 1.2rem;
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item > * {
  grid-area: auto;
  grid-row: 1;
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item > .hr-Main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem;
  grid-template-areas: "Title Bar" "Subtitle Bar";
  align-items: center;
  column-gap: 1.2rem;
  row-gap: 0.1rem;
  min-inline-size: 0;
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item .hr-Title {
  grid-area: Title;
  font-size: 1.5rem;
  font-weight: 600;
  color: rgb(240 244 255);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item .hr-Subtitle {
  grid-area: Subtitle;
  font-size: 1.2rem;
  color: rgb(205 210 240 / 62%);
  text-align: start;
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item .hr-Progress.hr-Progress {
  grid-area: Bar;
  margin: 0;
  padding: 0.6rem 0.8rem;
  overflow: visible;
  contain: none;
  clip-path: none;
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item .hr-Progress > .hr-Value {
  display: none;
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item .hr-Track {
  position: relative;
  display: block;
  block-size: 0.6rem;
  overflow: visible;
  border-radius: 1rem;
  background: rgb(255 255 255 / 14%);
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item .hr-Fill {
  position: relative;
  display: block;
  block-size: 100%;
  border-radius: 1rem;
  background: linear-gradient(90deg, rgb(123 241 200), rgb(150 220 230));
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item .hr-Fill::after {
  content: "";
  position: absolute;
  inset-inline-end: -0.8rem;
  inset-block-start: 50%;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: 50%;
  background: rgb(250 252 255);
  box-shadow: 0 0.2rem 0.6rem rgb(4 6 28 / 40%);
  transform: translateY(-50%);
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item > .hr-Value {
  display: grid;
  place-items: center;
  min-inline-size: 4.4rem;
  block-size: 3.4rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 6%);
}

[data-holo-id="Studio.Rows"].ht-Collection\.List.hp-BarRows > .hr-Item > .hr-Value * {
  font-size: 1.4rem;
  font-weight: 600;
  color: rgb(240 244 255);
}

[data-holo-id="Studio.Detail"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-gap: 1.4rem;
  gap: 1.4rem;
}

[data-holo-id="Studio.Detail.Text"] pre {
  max-inline-size: 100%;
  white-space: pre;
}

/* ------------------------------------------------------------------------
   Barra del juego (referencia 7): el juego con su portada en un cuadrado
   redondeado y su flecha, el prototipo y los archivos como píldoras del
   mismo alto, y a la derecha «Play test» y «Publish» separados.
   ------------------------------------------------------------------------ */

[data-holo-id="Studio.Bar"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-gap: 1rem;
  min-block-size: 7rem;
  padding: 1rem 1.2rem;
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger] {
  min-inline-size: 23rem;
  --holo-part-min-block-size: 5rem;
  min-block-size: 5rem;
  padding: 0 1.4rem 0 0.6rem;
  gap: 1.2rem;
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger] > .hr-Icon {
  inline-size: 3.8rem;
  block-size: 3.8rem;
  flex: none;
  overflow: hidden;
  border-radius: 1rem;
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger] > .hr-Icon img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover !important;
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger] .hr-Value {
  font-size: 1.7rem;
  font-weight: 600;
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger] > .hr-Disclosure {
  margin-inline-start: auto;
  font-size: 1.4rem;
  opacity: 0.8;
}

:is([data-holo-id="Studio.Files.Open"], [data-holo-id="Studio.Prototype"], [data-holo-id="Studio.Play"], [data-holo-id="Studio.Test"], [data-holo-id^="Studio.Publish"])[data-holo-type][data-holo-part="true"] {
  --holo-part-min-block-size: 5rem;
  min-block-size: 5rem;
}

[data-holo-id="Studio.Prototype"].ht-Layout\.Stack[data-holo-part="true"],
[data-holo-id="Studio.Prototype"].ht-Layout\.Stack[data-holo-part="true"] * {
  font-size: 1.5rem;
  font-weight: 500;
  color: rgb(240 244 255);
}

:is([data-holo-id="Studio.Play"], [data-holo-id="Studio.Test"]).ht-Control\.Trigger.hr-Trigger {
  padding: 0 2.6rem;
  margin-inline-end: 0.4rem;
  font-size: 1.6rem;
}

[data-holo-id^="Studio.Publish"].ht-Control\.Trigger.hr-Trigger {
  padding: 0 2.8rem;
  font-size: 1.6rem;
}

:is([data-holo-id="Studio.Play"], [data-holo-id="Studio.Test"], [data-holo-id^="Studio.Publish"]).ht-Control\.Trigger.hr-Trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

/* La barra izquierda sólo enseña su barra de desplazamiento cuando hay que
   desplazarse. */
[data-holo-id="Studio.Drill"][data-holo-part="true"] {
  scrollbar-gutter: auto;
}

:is([data-holo-id="Studio.Play"], [data-holo-id="Studio.Test"], [data-holo-id^="Studio.Publish"], [data-holo-id="Studio.Files.Open"]).ht-Control\.Trigger.hr-Trigger > [data-holo-part="true"] {
  --holo-part-height: auto;
  --holo-part-min-block-size: 0;
  block-size: auto;
  align-self: center;
}

/* Las variables de alto de un botón se heredan: su contenido vuelve a su
   propio alto, centrado. */
:is([data-holo-id="Room.Test"], [data-holo-id="Room.Wallet"], [data-holo-id="Room.Back"]).ht-Control\.Trigger > [data-holo-part="true"],
[data-holo-id="Studio.Game"] [data-holo-select-trigger] > * {
  --holo-part-min-block-size: 0;
  --holo-part-height: auto;
  align-self: center;
}

/* ------------------------------------------------------------------------
   La conversación con tu Ghostie (referencia 7): tus mensajes en lila a la
   derecha, los suyos en cristal a la izquierda con su cara, el cambio que
   dejó en el borrador en una tarjeta con su coste, «Keep» y «Undo», y la caja
   de pedir abajo. Los avatares son SVG animados: cada uno en su capa.
   ------------------------------------------------------------------------ */

[data-holo-id="Studio.Agent"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

[data-holo-id="Studio.Agent"] img {
  transform: translateZ(0);
  isolation: isolate;
}

[data-holo-id="Studio.Agent.Change.Cost"].ht-Content\.Chip[data-holo-part="true"] * {
  font-size: 1.35rem;
  font-weight: 600;
  color: rgb(255 226 160);
}

[data-holo-id="Studio.Agent.Notice"].ht-Content\.Text[data-holo-part="true"] {
  padding: 1.2rem 1.4rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1.4rem;
  background: rgb(10 14 46 / 30%);
}

[data-holo-id="Studio.Agent.Chat"].ht-Content\.Conversation[data-holo-part="true"] {
  --holo-surface: rgb(20 26 66 / 55%);
  --holo-panel: transparent;
  --holo-fg: rgb(240 244 255);
  --holo-muted: rgb(205 210 240 / 72%);
  --holo-border: rgb(255 255 255 / 16%);
  --holo-accent: rgb(200 166 255);
  --holo-part-contain: paint;
  flex: 1 1 auto;
  min-block-size: 0;
  background: transparent;
  color: rgb(240 244 255);
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-message-role] [data-holo-conversation="Message"] {
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.6rem;
  background: rgb(255 255 255 / 8%);
  box-shadow: none;
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-message-role="User"] [data-holo-conversation="Message"] {
  border-color: rgb(200 166 255 / 45%);
  background: linear-gradient(160deg, rgb(150 120 255 / 55%), rgb(110 90 220 / 45%));
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-conversation="Message"],
[data-holo-id="Studio.Agent.Chat"] [data-holo-conversation="Message"] * {
  color: rgb(240 244 255);
  font-size: 1.4rem;
  line-height: 1.45;
}

[data-holo-id="Studio.Agent.Chat"] .hr-MessageLabel {
  color: rgb(205 210 240 / 66%);
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-suggestion] {
  border: 1px solid rgb(255 255 255 / 18%);
  background: rgb(255 255 255 / 8%);
  color: rgb(240 244 255);
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-suggestion]:is(:hover, :focus-visible) {
  background: rgb(255 255 255 / 15%);
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-conversation="Editor"] textarea {
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1.4rem;
  background: rgb(10 14 46 / 45%);
  color: rgb(240 244 255);
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-conversation="Editor"] textarea::placeholder {
  color: rgb(205 210 240 / 55%);
}

/* El cambio que dejó hecho: tarjeta de cristal con el coste y sus botones. */
[data-holo-id="Studio.Agent.Change"].ht-Layout\.Stack[data-holo-part="true"] {
  flex: none;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.6rem;
  background: rgb(10 14 46 / 35%);
}

[data-holo-id="Studio.Agent.Change.Title"].ht-Content\.Title .hr-Title {
  font-size: 1.5rem;
  font-weight: 600;
}

[data-holo-id="Studio.Agent.Change.Cost"].ht-Content\.Chip[data-holo-part="true"] {
  margin-inline-start: auto;
  padding: 0.4rem 1.1rem;
  border: 1px solid rgb(255 214 120 / 40%);
  border-radius: 5rem;
  background: rgb(255 214 120 / 10%);
}

:is([data-holo-id="Studio.Agent.Keep"], [data-holo-id="Studio.Agent.Undo"]).ht-Control\.Trigger.ht-Control\.Trigger.hr-Trigger[data-holo-part="true"] {
  --holo-part-width: max-content;
  --holo-trigger-inline-size: max-content;
  --holo-part-min-block-size: 4rem;
  min-block-size: 4rem;
  padding: 0 2rem;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 7%);
  font-weight: 600;
}

:is([data-holo-id="Studio.Agent.Keep"], [data-holo-id="Studio.Agent.Undo"]).ht-Control\.Trigger.ht-Control\.Trigger.hr-Trigger[data-holo-part="true"] * {
  color: rgb(240 244 255);
}

[data-holo-id="Studio.Agent.Keep"].ht-Control\.Trigger.ht-Control\.Trigger.hr-Trigger[data-holo-part="true"] {
  border: 0;
  background: linear-gradient(90deg, rgb(123 241 200), rgb(150 220 230));
}

[data-holo-id="Studio.Agent.Keep"].ht-Control\.Trigger.ht-Control\.Trigger.hr-Trigger[data-holo-part="true"] * {
  color: rgb(27 35 80);
}

[data-holo-id="Studio.Agent.Thinking"][data-holo-part="true"],
[data-holo-id="Studio.Agent.Thinking"][data-holo-part="true"] * {
  color: rgb(200 166 255);
}

/* Las cabeceras en fila: Holo las monta en rejilla salvo que se diga. */
:is([data-holo-id="Studio.Agent.Change.Head"], [data-holo-id="Studio.Agent.Change.Actions"], [data-holo-id="Studio.Detail.Head"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  flex-direction: row;
  align-items: center;
}

[data-holo-id="Studio.Agent.Change.Title"].ht-Content\.Title[data-holo-part="true"] {
  --holo-part-width: auto;
  flex: 1 1 auto;
  min-inline-size: 0;
}

[data-holo-id="Studio.Agent.Change.Actions"].ht-Layout\.Stack[data-holo-part="true"] {
  justify-content: flex-end;
  gap: 1rem;
}

/* ------------------------------------------------------------------------
   Administración a pantalla completa, como el editor: el cielo, una barra
   con su título y dos columnas de cristal: la salud del servidor del juego a
   la izquierda; los trabajos y los juegos que esperan revisión a la derecha.
   Se desplaza ella misma y empieza por debajo de la barra flotante.
   ------------------------------------------------------------------------ */

[data-holo-id="Admin.Page"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-height: 100dvh;
  --holo-part-overflow: auto;
  box-sizing: border-box;
  block-size: 100dvh;
  inline-size: 100%;
  overflow-y: auto;
  padding: var(--solaverse-top) var(--solaverse-side) var(--solaverse-gap);
  color: rgb(240 244 255);
  scrollbar-color: rgb(255 255 255 / 18%) transparent;
}

:is([data-holo-id="Admin.Nav"], [data-holo-id="Admin.Health"], [data-holo-id="Admin.Jobs"], [data-holo-id="Admin.Review"], [data-holo-id="Admin.Cycle"], [data-holo-id="Admin.Economy"]).ht-Layout\.Stack[data-holo-part="true"] {
  box-sizing: border-box;
  padding: 1.8rem 2rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 2rem;
  background: linear-gradient(160deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 4%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1.8rem 4rem rgb(4 6 28 / 38%);
  backdrop-filter: blur(1.8rem) saturate(140%);
  -webkit-backdrop-filter: blur(1.8rem) saturate(140%);
}

[data-holo-id="Admin.Head"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

[data-holo-id^="Admin."].ht-Content\.Title .hr-Title {
  margin: 0;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: rgb(240 244 255);
}

[data-holo-id^="Admin."]:is(.ht-Content\.Text, .ht-Content\.Markdown)[data-holo-part="true"],
[data-holo-id^="Admin."].ht-Content\.Markdown[data-holo-part="true"] * {
  color: rgb(205 210 240 / 82%);
  font-size: 1.4rem;
}

[data-holo-id="Admin.Body"].ht-Layout\.Grid[data-holo-part="true"] {
  align-items: start;
}

/* Las fichas de salud: filas de nombre y valor sobre cristal oscuro. */
[data-holo-id^="Admin."].ht-Content\.Record[data-holo-part="true"] {
  --holo-surface: rgb(10 14 46 / 32%);
  --holo-panel: transparent;
  --holo-fg: rgb(240 244 255);
  --holo-muted: rgb(205 210 240 / 72%);
  --holo-border: rgb(255 255 255 / 10%);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 1.4rem;
  background: rgb(10 14 46 / 32%);
}

[data-holo-id^="Admin."].ht-Content\.Record[data-holo-part="true"] * {
  border-color: rgb(255 255 255 / 8%);
  background-color: transparent;
  color: rgb(240 244 255);
  box-shadow: none;
}

[data-holo-id="Admin.Job.Run"].ht-Control\.Trigger.hr-Trigger,
[data-holo-id="Admin.Review.Approve"].ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: max-content;
  --holo-trigger-inline-size: max-content;
  justify-self: start;
  min-block-size: 4.4rem;
  padding: 0 2.2rem;
  border: 0;
  border-radius: 1.4rem;
  background: linear-gradient(90deg, rgb(123 241 200), rgb(200 166 255));
  font-weight: 700;
}

:is([data-holo-id="Admin.Job.Run"], [data-holo-id="Admin.Review.Approve"]).ht-Control\.Trigger.hr-Trigger * {
  color: rgb(27 35 80);
}

[data-holo-id="Admin.Review.List"].ht-Collection\.List .hr-Item {
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.4rem;
  background: rgb(28 38 70 / 62%);
  color: rgb(240 244 255);
}

[data-holo-id="Admin.Review.List"].ht-Collection\.List .hr-Item * {
  color: rgb(240 244 255);
}

[data-holo-id="Admin.Review.Reject"].ht-Control\.Form[data-holo-part="true"] {
  --holo-surface: rgb(20 26 60 / 58%);
  --holo-panel: transparent;
  --holo-border: rgb(255 255 255 / 16%);
  --holo-fg: rgb(240 244 255);
  --holo-muted: rgb(196 204 238 / 78%);
  --holo-accent: rgb(150 132 255);
  color: rgb(240 244 255);
  background: transparent;
}

[data-holo-id="Admin.Head"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: 100%;
  --holo-part-justify-self: stretch;
  inline-size: 100%;
}

:is([data-holo-id="Admin.Job.Run"], [data-holo-id="Admin.Review.Approve"]).ht-Control\.Trigger.hr-Trigger {
  --holo-part-min-block-size: 4.4rem;
  --holo-part-justify-self: start;
}

:is([data-holo-id="Admin.Job.Run"], [data-holo-id="Admin.Review.Approve"]).ht-Control\.Trigger.hr-Trigger > [data-holo-part="true"] {
  --holo-part-min-block-size: 0;
  align-self: center;
}

/* En la ficha, el valor es un dato, no un campo: a la derecha y sin caja. */
[data-holo-id^="Admin."].ht-Content\.Record[data-holo-part="true"] .hr-Record_Item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-block-size: 4.6rem;
  padding: 0 1.4rem;
}

[data-holo-id^="Admin."].ht-Content\.Record[data-holo-part="true"] .hr-Record_Item + .hr-Record_Item {
  border-block-start: 1px solid rgb(255 255 255 / 8%);
}

[data-holo-id^="Admin."].ht-Content\.Record[data-holo-part="true"] .hr-Record_Label {
  color: rgb(205 210 240 / 78%);
  font-size: 1.4rem;
}

[data-holo-id^="Admin."].ht-Content\.Record[data-holo-part="true"] .hr-Record_Value {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: end;
  font-size: 1.45rem;
  font-weight: 600;
}

/* Play: la portada de juegos de la Visión 3, tipo tienda. Bajo la barra, un
   panel ancho: a la izquierda el juego destacado (cartel ancho con su nombre,
   datos y «Play now»), las familias para filtrar y la fila «Trending now» de
   carteles verticales; a la derecha tu Ghostie y crear un juego. Sólo datos
   reales: quién juega ahora sale de las salas del servidor. Nada se eleva. */
[data-holo-id="Realm.Panel"].ht-Layout\.Modal > .hr-Dialog {
  inline-size: var(--solaverse-frame-width);
  max-inline-size: none;
  block-size: var(--solaverse-frame-height);
  max-block-size: var(--solaverse-frame-height);
  padding: 2.2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 3rem;
  background: linear-gradient(160deg, rgb(60 72 140 / 55%), rgb(38 46 104 / 66%));
  box-shadow: 0 2.4rem 6rem rgb(8 10 40 / 40%), inset 0 1px 0 rgb(255 255 255 / 16%);
  backdrop-filter: blur(20px) saturate(1.2);
}

/* Play (ideal `Realm/.About/Media/Ideal/Play.webp`, la 35; D161): a la
   izquierda el juego que se juega ahora, grande, con «Live» y cuánta gente
   juega encima, y debajo la ronda del ciclo, su nombre en mayúsculas finas,
   sus datos, «Join the next round» y «Practice first»; a la derecha «Up next»,
   las rondas siguientes del ciclo con cuánto falta para cada una. */
[data-holo-id="Realm.Browse"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  --holo-part-clip-path: none;
  --holo-part-contain: none;
  --holo-part-height: var(--solaverse-frame-height);
  display: grid !important;
  grid-template-columns: minmax(0, 2.3fr) var(--solaverse-gap) minmax(30rem, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch;
  block-size: var(--solaverse-frame-height);
}

:is([data-holo-id="Realm.Now"], [data-holo-id="Realm.Next"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-max-block-size: none;
  --holo-part-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  box-sizing: border-box;
  block-size: 100%;
  min-block-size: 0;
  padding: 1.8rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  backdrop-filter: var(--solaverse-blur);
  -webkit-backdrop-filter: var(--solaverse-blur);
  overflow: hidden;
}

[data-holo-id="Realm.Next"].ht-Layout\.Stack[data-holo-part="true"] {
  padding: 1.3rem 1.3rem 3rem 2rem;
}

[data-holo-id="Realm.Next.Title"][data-holo-part="true"] {
  margin-block-end: 1.1rem;
}

/* El escenario: la imagen del juego llena lo que queda y las marcas van
   encima, arriba a la izquierda (las dos en la misma celda). */
[data-holo-id="Realm.Stage"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  flex: 1 1 0;
  min-block-size: 16rem;
  overflow: hidden;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-card);
}

[data-holo-id="Realm.Stage"] > * {
  grid-area: 1 / 1 !important;
}

[data-holo-id="Realm.Stage.Art"].ht-Content\.Image {
  --holo-part-clip-path: inset(0 round calc(var(--solaverse-radius-card) - 1px));
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  object-fit: cover;
}

[data-holo-id="Realm.Stage.Badges"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-justify-self: start;
  --holo-part-gap: 0.8rem;
  display: flex !important;
  align-self: start;
  justify-self: start;
  gap: 0.8rem;
  margin: 1.3rem;
}

:is([data-holo-id="Realm.Stage.Live"], [data-holo-id="Realm.Stage.Playing"], [data-holo-id="Realm.Now.Chip.0"], [data-holo-id="Realm.Now.Chip.1"], [data-holo-id="Realm.Now.Chip.2"]).ht-Content\.Chip.ht-Content\.Chip {
  --holo-part-min-block-size: 4.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-block-size: 4.2rem;
  padding: 0 1.6rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(20 24 66 / 62%);
  backdrop-filter: blur(8px);
  color: var(--solaverse-text);
  font-size: 1.6rem;
}

/* Las marcas sobre la imagen, más bajas que las fichas del pie (ideal 35). */
:is([data-holo-id="Realm.Stage.Live"], [data-holo-id="Realm.Stage.Playing"]).ht-Content\.Chip.ht-Content\.Chip.ht-Content\.Chip {
  --holo-part-min-block-size: 3.4rem;
  min-block-size: 3.4rem;
  padding: 0 1.4rem;
}

/* «Live» con su punto rojo, en mayúsculas finas. */
[data-holo-id="Realm.Stage.Live"].ht-Content\.Chip.ht-Content\.Chip,
[data-holo-id="Realm.Stage.Live"].ht-Content\.Chip * {
  font-size: 1.9rem;
}

[data-holo-id="Realm.Stage.Live"].ht-Content\.Chip.ht-Content\.Chip {
  border-color: rgb(255 120 140 / 55%);
  background: rgb(84 22 58 / 58%);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-holo-id="Realm.Stage.Live"].ht-Content\.Chip::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  background: rgb(255 92 112);
  box-shadow: 0 0 0.8rem rgb(255 92 112 / 70%);
}

:is([data-holo-id="Realm.Now.Chip.0"], [data-holo-id="Realm.Now.Chip.1"], [data-holo-id="Realm.Now.Chip.2"]).ht-Content\.Chip.ht-Content\.Chip {
  background: rgb(255 255 255 / 4%);
  backdrop-filter: none;
  font-size: 1.5rem;
}

[data-holo-id="Realm.Now.Foot"].ht-Layout\.Stack[data-holo-part="true"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 2.4rem max-content !important;
  align-items: center;
  flex: none;
  padding: 0 1.2rem 2rem;
}

[data-holo-id="Realm.Now.Info"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-gap: 0.6rem;
  gap: 0.6rem;
}

/* Las fichas del juego llevan el icono grande de la ideal. */
:is([data-holo-id="Realm.Now.Chip.0"], [data-holo-id="Realm.Now.Chip.1"], [data-holo-id="Realm.Now.Chip.2"], [data-holo-id="Realm.Stage.Playing"]).ht-Content\.Chip > .hr-Icon {
  inline-size: 2.2rem;
  block-size: 2.2rem;
  font-size: 2.2rem;
}

:is([data-holo-id="Realm.Now.Chip.0"], [data-holo-id="Realm.Now.Chip.1"], [data-holo-id="Realm.Now.Chip.2"]).ht-Content\.Chip.ht-Content\.Chip.ht-Content\.Chip {
  --holo-part-min-block-size: 4.6rem;
  min-block-size: 4.6rem;
  gap: 1rem;
  padding: 0 2rem;
}

[data-holo-id="Realm.Now.Turn"].ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-family: var(--solaverse-font-section);
  font-size: 1.5rem;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

[data-holo-id="Realm.Now.Name"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: clamp(2.6rem, 2.18vw, 3.6rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  -webkit-text-stroke: 0.03em currentColor;
  line-height: 1.1;
  text-transform: uppercase;
}

[data-holo-id="Realm.Now.Chips"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-justify-self: start;
  --holo-part-gap: 0.8rem;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.8rem;
}

[data-holo-id="Realm.Now.Actions"].ht-Layout\.Stack[data-holo-part="true"] {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

[data-holo-id="Realm.Now.Join"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-min-block-size: 6.3rem;
  --holo-part-min-inline-size: 32rem;
  justify-content: center;
  gap: 1.2rem;
  min-inline-size: 32rem;
  min-block-size: 6.3rem;
  padding: 0 3.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
  font-size: 1.9rem;
  font-weight: 600;
}

[data-holo-id="Realm.Now.Join"].hr-Trigger :is([data-holo-type], [data-holo-role]) {
  color: var(--solaverse-primary-text);
}

/* El triángulo de jugar va relleno, como en la ideal (el vocabulario de iconos
   sólo trae el de trazo fino). */
:is([data-holo-id="Realm.Now.Join.Icon"], [data-holo-id="Realm.Join.Go.Icon"], [data-holo-id="Collection.Games.Icon"]).ht-Content\.Icon {
  --holo-part-clip-path: polygon(16% 6%, 94% 50%, 16% 94%);
  background: var(--solaverse-primary-text);
}

:is([data-holo-id="Realm.Now.Join.Icon"], [data-holo-id="Realm.Join.Go.Icon"], [data-holo-id="Collection.Games.Icon"]).ht-Content\.Icon > * {
  visibility: hidden;
}

/* «Practice first» es un enlace, no otro botón. */
:is([data-holo-id="Realm.Now.Practice"], [data-holo-id="Realm.Now.Learn"]).ht-Control\.Trigger.ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  min-block-size: 0;
  padding: 0.2rem 0.4rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--solaverse-text-soft);
  font-size: 1.6rem;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* «Practice first» algo más separado del botón, como la ideal 35. */
[data-holo-id="Realm.Now.Practice"].hr-Trigger.hr-Trigger.hr-Trigger {
  --holo-part-translate: 0 1.5rem;
  translate: 0 1.5rem;
}

/* Cada juego de la cola mide como en la ideal 35. */
[data-holo-id="Realm.Next.List"].ht-Collection\.List > .hr-Item.hr-Item {
  min-block-size: 10.3rem;
}

:is([data-holo-id="Realm.Now.Practice"], [data-holo-id="Realm.Now.Learn"]).hr-Trigger:is(:hover, :focus-visible) {
  color: var(--solaverse-mint);
}

[data-holo-id="Realm.Next.Title"] .hr-Title.hr-Title {
  color: rgb(210 216 250);
  font-family: var(--solaverse-font-section);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

/* Como la ideal 35, el cartel de cada juego de la cola va dentro de su
   tarjeta, con un margen fino y las esquinas redondeadas. */
[data-holo-id="Realm.Next.List"].ht-Collection\.List.hp-Posts > .hr-Item > .hr-Icon.hr-Icon {
  clip-path: inset(0.5rem 0 0.5rem 0.5rem round 1.1rem);
}

/* La cola: filas con el cartel a la izquierda y, a su lado, el nombre y en
   una línea la familia y cuánto falta. Se desplaza si no cabe. */
[data-holo-id="Realm.Next.List"].ht-Collection\.List.hp-Posts {
  --holo-part-max-block-size: none;
  --holo-part-height: auto;
  flex: 1 1 auto;
  min-block-size: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  overflow-y: auto;

  & > .hr-Item,
  & > .hr-Item:first-child {
    grid-column: auto;
    border-color: var(--solaverse-edge);
    border-radius: 1.6rem;
    background: rgb(255 255 255 / 4%);
  }

  & > .hr-Item:is(:hover, :focus-within) {
    border-color: rgb(143 240 216 / 55%);
    background: rgb(255 255 255 / 7%);
  }

  & > .hr-Item {
    display: grid;
    grid-template-columns: 33% minmax(0, 1fr);
    align-items: center;
  }

  & > .hr-Item > .hr-Icon,
  & > .hr-Item:first-child > .hr-Icon {
    grid-column: 1;
    grid-row: 1;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 4 / 3;
  }

  & .hr-Divider {
    display: none;
  }

  & > .hr-Item:first-child > .hr-Icon {
    aspect-ratio: 16 / 9;
  }

  & > .hr-Item > .hr-Main {
    grid-column: 2;
    grid-row: 1;
    gap: 1.6rem;
    padding: 1rem 2.4rem 1rem 1.8rem;
  }

  & .hr-Title {
    color: var(--solaverse-text);
    font-size: 1.9rem;
    font-weight: 600;
  }

  & .hr-Metrics {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.4rem 1.6rem;
  }

  & .hr-Metric {
    gap: 0.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--solaverse-text-soft);
    font-size: 1.6rem;
  }

  & .hr-Metric :is(.hr-Value, .hr-Icon) {
    color: var(--solaverse-text-soft);
  }

  /* Los iconos de la ideal son grandes y lilas, como el de las pestañas. */
  & .hr-Metric > .hr-Icon {
    inline-size: 2.2rem;
    block-size: 2.2rem;
    color: var(--solaverse-lilac);
    font-size: 2.2rem;
  }
}

/* En pantallas estrechas la familia y el tiempo pasan a dos líneas si no
   caben juntas, en vez de pisarse. */
@media (max-width: 1500px) {
  [data-holo-id="Realm.Next.List"].ht-Collection\.List.hp-Posts .hr-Metrics.hr-Metrics {
    flex-wrap: wrap;
  }
}

[data-holo-id="Realm.Next.Empty"].ht-Content\.Text {
  flex: 1 1 auto;
  color: var(--solaverse-text-soft);
  font-size: 1.6rem;
  line-height: 1.5;
}

[data-holo-id="Realm.Next.Foot"].ht-Layout\.Stack[data-holo-part="true"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 1.2rem max-content !important;
  align-items: center;
  flex: none;
  padding-block-start: 1.6rem;
  border-block-start: 1px solid var(--solaverse-edge);
}

[data-holo-id="Realm.Next.Note"].ht-Content\.Text {
  color: var(--solaverse-text-faint);
  font-size: 1.4rem;
}

[data-holo-id="Realm.Next.All"].ht-Control\.Trigger.ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  flex-direction: row-reverse;
  gap: 0.6rem;
  min-block-size: 0;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--solaverse-mint);
  font-size: 1.5rem;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

[data-holo-id="Navbar.Tabs"].ht-Collection\.List .hr-Item .hr-Title {
  font-size: 1.6rem;
  font-weight: 600;
}

/* Play y el detalle de un juego son una página completa bajo la barra, como
   Vote y Mis Ghosties (D101). */
[data-holo-id="Realm.Panel"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-height: 100dvh;
  --holo-part-overflow: auto;
  --holo-part-max-block-size: none;
  box-sizing: border-box;
  block-size: 100dvh;
  inline-size: 100%;
  overflow-y: auto;
  padding: var(--solaverse-top) var(--solaverse-side) var(--solaverse-gap);
  color: rgb(240 244 255);
}

/* El detalle de un juego (Visión 4): a la izquierda el cartel ancho con sus
   datos encima, el nombre, la entradilla y tres tarjetas (habilidades,
   ficha y contrato); a la derecha quién lo creó, quién juega ahora y
   «Play now». */
[data-holo-id="Realm.Sheet"].ht-Layout\.Stack,
[data-holo-id="Realm.Card"].ht-Layout\.Stack,
[data-holo-id="Realm.Sheet.Main"].ht-Layout\.Stack,
[data-holo-id="Realm.Sheet.Side"].ht-Layout\.Stack {
  --holo-part-max-block-size: none;
  --holo-part-clip-path: none;
  --holo-part-contain: none;
}

[data-holo-id="Realm.Card"].ht-Layout\.Stack {
  --holo-part-display: flex;
  --holo-part-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

[data-holo-id="Realm.Sheet.Main"].ht-Layout\.Stack {
  --holo-part-display: flex;
  --holo-part-width: auto;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1.6rem;
  min-inline-size: 0;
}

[data-holo-id="Realm.Top"].ht-Layout\.Stack {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 2.4rem;
}

[data-holo-id="Realm.Top.Chips"].ht-Layout\.Stack {
  --holo-part-position: absolute;
  --holo-part-inset: auto auto 1.6rem 1.6rem;
  --holo-part-display: flex;
  --holo-part-gap: 0.8rem;
  position: absolute;
  inset: auto auto 1.6rem 1.6rem;
  display: flex;
}

:is([data-holo-id="Realm.Top.Chip.0"], [data-holo-id="Realm.Top.Chip.1"], [data-holo-id="Realm.Top.Chip.2"]) {
  --holo-part-width: max-content;
  inline-size: max-content;
  white-space: nowrap;
  padding: 0.5rem 1.3rem;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 999px;
  background: rgb(24 26 70 / 62%);
  color: rgb(255 255 255);
  font-size: 1.4rem;
}

[data-holo-id="Realm.Name"] .hr-Title {
  color: rgb(255 255 255);
  font-size: 3.4rem;
  font-weight: 800;
}

[data-holo-id="Realm.Lead"] {
  color: rgb(222 228 250);
  font-size: 1.6rem;
  line-height: 1.5;
}

:is([data-holo-id="Realm.How"], [data-holo-id="Realm.Details"], [data-holo-id="Realm.Seal"], [data-holo-id="Realm.Matches"], [data-holo-id="Realm.Creator"], [data-holo-id="Realm.Now"], [data-holo-id="Realm.Stake"], [data-holo-id="Realm.Yours"]).ht-Layout\.Stack {
  --holo-part-display: flex;
  --holo-part-gap: 1rem;
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 2rem;
  background: rgb(255 255 255 / 6%);
}

:is([data-holo-id="Realm.How.Title"], [data-holo-id="Realm.Details.Title"], [data-holo-id="Realm.Seal.Title"], [data-holo-id="Realm.Matches.Title"]) .hr-Title {
  color: rgb(255 255 255);
  font-size: 1.9rem;
  font-weight: 700;
}

[data-holo-id="Realm.Top"].ht-Layout\.Stack {
  --holo-part-width: 100%;
  --holo-part-max-block-size: none;
  --holo-part-display: block;
  display: block;
  inline-size: 100%;
}

/* Las fichas del detalle, como las del editor: filas de cristal oscuro con el
   nombre a la izquierda y el valor a la derecha. */
:is([data-holo-id="Realm.Details.List"], [data-holo-id="Realm.Seal.List"], [data-holo-id="Admin.Economy.List"], [data-holo-id="Realm.Matches.List"]).ht-Collection\.List {
  --holo-part-width: 100%;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1.4rem;
  background: rgb(14 18 52 / 35%);
  color: rgb(240 244 255);
}

:is([data-holo-id="Realm.Details.List"], [data-holo-id="Realm.Seal.List"], [data-holo-id="Admin.Economy.List"], [data-holo-id="Realm.Matches.List"]) .hr-Item {
  min-block-size: 4.2rem;
  padding-inline: 1.4rem;
  border-color: rgb(255 255 255 / 8%);
  background: transparent;
}

:is([data-holo-id="Realm.Details.List"], [data-holo-id="Realm.Seal.List"], [data-holo-id="Admin.Economy.List"], [data-holo-id="Realm.Matches.List"]) .hr-Icon {
  display: none;
}

:is([data-holo-id="Realm.Details.List"], [data-holo-id="Realm.Seal.List"], [data-holo-id="Admin.Economy.List"], [data-holo-id="Realm.Matches.List"]) .hr-Title {
  color: rgb(200 208 240);
  font-size: 1.4rem;
  font-weight: 500;
}

:is([data-holo-id="Realm.Details.List"], [data-holo-id="Realm.Seal.List"], [data-holo-id="Admin.Economy.List"], [data-holo-id="Realm.Matches.List"]) .hr-Value .hr-Text {
  color: rgb(255 255 255);
  font-size: 1.45rem;
  font-weight: 700;
}

[data-holo-id="Realm.How.Text"] {
  color: rgb(226 232 252);
  font-size: 1.45rem;
}

/* Media del juego en el editor: cada imagen como una tarjeta con su vista
   previa, su nombre y para qué sirve. */
[data-holo-id="Studio.Images"].ht-Collection\.List {
  --holo-part-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

[data-holo-id="Studio.Images"] .hr-Item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.8rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.4rem;
  background: rgb(14 18 52 / 40%);
  color: rgb(240 244 255);
  text-align: start;
  transform: none;
  box-shadow: none;
}

[data-holo-id="Studio.Images"] .hr-Item img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 1rem;
}

[data-holo-id="Studio.Images"] .hr-Title {
  font-size: 1.4rem;
  font-weight: 700;
}

[data-holo-id="Studio.Images"] :is(.hr-Description, .hr-Subtitle) {
  color: rgb(200 208 240);
  font-size: 1.25rem;
}

[data-holo-id="Studio.Cover"].ht-Content\.Image[data-holo-part="true"] {
  --holo-part-width: 8.4rem;
  inline-size: 8.4rem;
  block-size: 8.4rem;
  border-radius: 1.6rem;
}

[data-holo-id="Studio.Canvas"].ht-Layout\.Stack[data-holo-part="true"] {
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 2.4rem;
  background: radial-gradient(ellipse at 50% 40%, rgb(70 80 150 / 35%), rgb(20 26 66 / 55%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
}

/* Administración (Plan Ideal, Screens/Admin; ideal `Admin/.About/Media/
   Ideal/View.webp`): una barra lateral de cristal con las secciones y, al
   lado, el contenido de la elegida con su título y para qué sirve. Sin
   tarjetas de resumen ni imágenes de relleno: el cielo con sus estrellas
   queda detrás. */
[data-holo-id="Admin.Frame"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-width: 100%;
  --holo-part-max-block-size: none;
  display: flex;
  align-items: stretch;
  gap: 2.4rem;
  --holo-part-min-block-size: var(--solaverse-frame-height);
  min-block-size: var(--solaverse-frame-height);
}

[data-holo-id="Admin.Nav"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-width: 26rem;
  display: flex;
  flex: 0 0 26rem;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  position: sticky;
  top: 0;
  align-self: stretch;
  padding: 2rem 1.4rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  backdrop-filter: var(--solaverse-blur);
}

[data-holo-id="Admin.State"].ht-Content\.Chip {
  flex: none;
  align-self: center;
  padding: 0.6rem 1.6rem;
  border: 1px solid rgb(143 240 216 / 45%);
  border-radius: 999px;
  background: rgb(143 240 216 / 10%);
  color: var(--solaverse-mint);
  font-size: 1.4rem;
}

/* Cada grupo de la barra lateral: su rótulo en mayúsculas finas y sus filas. */
[data-holo-id^="Admin.Nav."].ht-Layout\.Stack[data-holo-part="true"] {
  gap: 0.4rem;
  margin-block-end: 1.4rem;
}

[data-holo-id^="Admin.Nav."][data-holo-id$=".Title"][data-holo-part="true"] {
  padding-inline: 1.6rem;
  color: var(--solaverse-text-soft);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

[data-holo-id^="Admin.Nav."][data-holo-id$=".List"].ht-Collection\.List {
  --holo-part-width: 100%;
  inline-size: 100%;
}

[data-holo-id^="Admin.Nav."][data-holo-id$=".List"] .hr-Item {
  min-block-size: 4.2rem;
  padding-inline: 1.6rem;
  border-radius: 1.4rem;
  background: transparent;
  color: var(--solaverse-text-soft);
  font-size: 1.6rem;
}

[data-holo-id^="Admin.Nav."][data-holo-id$=".List"] .hr-Item * {
  color: inherit;
}

[data-holo-id^="Admin.Nav."][data-holo-id$=".List"] .hr-Item .hr-Chevron {
  display: none;
}

[data-holo-id^="Admin.Nav."][data-holo-id$=".List"] .hr-Item:is([aria-current="true"], [aria-current="page"], [data-holo-item-selected="true"]) {
  background: rgb(185 164 255 / 28%);
  color: var(--solaverse-text);
  box-shadow: inset 0 0 0 1px rgb(195 178 255 / 35%);
}

[data-holo-id="Admin.Main"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-width: auto;
  --holo-part-max-block-size: none;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2rem;
  min-inline-size: 0;
  padding: 2.4rem 2.8rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  backdrop-filter: var(--solaverse-blur);
}

/* La cabecera del contenido: título y para qué sirve; el estado a la derecha. */
[data-holo-id="Admin.Head"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  --holo-part-grid-template-columns: minmax(0, 1fr) 0rem max-content;
  align-items: center;
}

[data-holo-id="Admin.Heading.Title"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-size: 3.4rem;
  font-weight: 600;
}

[data-holo-id="Admin.Heading.Caption"][data-holo-id="Admin.Heading.Caption"] {
  color: var(--solaverse-text-soft);
  font-size: 1.6rem;
}

[data-holo-id="Admin.Body"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: grid;
  --holo-part-width: 100%;
  --holo-part-max-block-size: none;
  --holo-part-grid-template-columns: repeat(auto-fit, minmax(36rem, 1fr));
  --holo-part-grid-template-rows: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(36rem, 1fr));
  align-items: start;
  gap: 2rem;
  --holo-part-gap: 2rem;
}

[data-holo-id="Admin.Side"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: grid;
  --holo-part-gap: 2rem;
  --holo-part-grid-template-columns: repeat(auto-fit, minmax(42rem, 1fr));
  --holo-part-grid-template-rows: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42rem, 1fr));
  align-items: start;
  gap: 2rem;
}

/* Holo pone cada hijo de un Stack en su propia fila; aquí las tarjetas fluyen
   en dos columnas. */
[data-holo-id="Admin.Side"].ht-Layout\.Stack[data-holo-part="true"] > [data-holo-part] {
  --holo-part-grid-row: auto;
}

/* Cada tarjeta del contenido: cristal más claro dentro del panel. */
:is([data-holo-id="Admin.Cycle"], [data-holo-id="Admin.Economy"], [data-holo-id="Admin.Review"], [data-holo-id="Admin.Jobs"], [data-holo-id="Admin.Health"]).ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  padding: 2rem 2.2rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-card);
  background: rgb(255 255 255 / 3.5%);
  backdrop-filter: none;
}

/* Inicio de Administración (ideal «Estructura A»): la ronda en vivo con su
   cartel y sus datos en filas, y debajo lo que pide atención, la colección y
   la moneda, también en filas. Sin tarjetas de cifra ni título de página. */
:is([data-holo-id="Admin.Live"], [data-holo-id="Admin.Attention"], [data-holo-id="Admin.Collect"], [data-holo-id="Admin.Coin"]).ht-Layout\.Stack[data-holo-part="true"] {
  box-sizing: border-box;
  padding: 2rem 2.2rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-card);
  background: rgb(255 255 255 / 3.5%);
}

[data-holo-id="Admin.Live.Body"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1.15fr) 2.4rem minmax(0, 1fr);
  align-items: center;
}

[data-holo-id="Admin.Glance"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1fr) 1.6rem minmax(0, 1fr) 1.6rem minmax(0, 1fr);
  align-items: start;
}

[data-holo-id="Admin.Live.Image"][data-holo-part="true"] {
  --holo-part-max-block-size: 24rem;
  overflow: hidden;
  border-radius: var(--solaverse-radius-card);
}

[data-holo-id="Admin.Live.Image"][data-holo-part="true"] img {
  inline-size: 100%;
  block-size: 24rem;
  object-fit: cover;
}

[data-holo-id="Admin.Live.Game"] .hr-Title {
  font-size: 2.6rem;
  font-weight: 500;
}

/* Las filas de dato (Ledger) de Administración sobre cristal oscuro, como las fichas. */
[data-holo-id^="Admin."].ht-Collection\.List.hp-Ledger,
[data-holo-id^="Admin."].ht-Collection\.List.hp-StatusRows {
  --holo-surface: rgb(10 14 46 / 32%);
  --holo-fg: rgb(240 244 255);
  --holo-muted: rgb(205 210 240 / 72%);
  --holo-border: rgb(255 255 255 / 10%);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 1.4rem;
  background: rgb(10 14 46 / 32%);
  color: rgb(240 244 255);
}

[data-holo-id^="Admin."].ht-Collection\.List.hp-Ledger *,
[data-holo-id^="Admin."].ht-Collection\.List.hp-StatusRows * {
  background-color: transparent;
  border-color: rgb(255 255 255 / 8%);
  color: rgb(240 244 255);
}

[data-holo-id="Admin.Live.Open"].ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: max-content;
  --holo-part-min-block-size: 4.4rem;
  --holo-part-justify-self: start;
  min-block-size: 4.4rem;
  padding: 0 2.2rem;
  border: 0;
  border-radius: 1.4rem;
  background: linear-gradient(90deg, rgb(123 241 200), rgb(200 166 255));
  font-weight: 700;
}

[data-holo-id="Admin.Live.Open"].ht-Control\.Trigger.hr-Trigger * {
  color: rgb(27 35 80);
}

[data-holo-id="Admin.Live.Open"].ht-Control\.Trigger.hr-Trigger > [data-holo-part="true"] {
  --holo-part-min-block-size: 0;
  align-self: center;
}

[data-holo-id="Admin.Collect.Gallery"].ht-Collection\.List {
  --holo-part-grid-template-columns: repeat(6, minmax(0, 1fr));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
}
[data-holo-id="Admin.Collect.Gallery"] .hr-Item img { inline-size: 100%; block-size: auto; }
[data-holo-id="Admin.Live.Image"][data-holo-part="true"],
[data-holo-id="Admin.Live.Image"][data-holo-part="true"] img {
  --holo-part-width: 100%;
  inline-size: 100%;
  block-size: 24rem;
  max-block-size: 24rem;
  object-fit: cover;
}

/* Préstamos: el libro a la izquierda (una fila por préstamo) y el formulario de
   uno nuevo a la derecha, como la ideal. Reutiliza las filas y el formulario
   de Administración. */
[data-holo-id="Admin.Loans"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1.6fr) 2rem minmax(0, 1fr);
  align-items: start;
}

:is([data-holo-id="Admin.Loans.Book"], [data-holo-id="Admin.Loans.New"], [data-holo-id="Admin.Security"], [data-holo-id="Admin.Players.Book"], [data-holo-id="Admin.Players.Sheet"], [data-holo-id="Admin.Audit"], [data-holo-id="Admin.Coin.Mainnet"], [data-holo-id="Admin.Coin.Devnet"], [data-holo-id="Admin.Published"], [data-holo-id="Admin.Collection.Grid"], [data-holo-id="Admin.Collection.Sheet"]).ht-Layout\.Stack[data-holo-part="true"] {
  box-sizing: border-box;
  padding: 2rem 2.2rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-card);
  background: rgb(255 255 255 / 3.5%);
}

[data-holo-id="Admin.Loans.Form"].ht-Control\.Form[data-holo-part="true"] {
  --holo-surface: rgb(20 26 60 / 58%);
  --holo-panel: transparent;
  --holo-border: rgb(255 255 255 / 16%);
  --holo-fg: rgb(240 244 255);
  --holo-muted: rgb(196 204 238 / 78%);
  --holo-accent: rgb(150 132 255);
  color: rgb(240 244 255);
  background: transparent;
}

[data-holo-id="Admin.Loans.Revoke"].ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: max-content;
  --holo-part-justify-self: start;
  min-block-size: 4.4rem;
  padding: 0 2.2rem;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  background: transparent;
}

[data-holo-id="Admin.Loans.Revoke"].ht-Control\.Trigger.hr-Trigger * {
  color: rgb(240 244 255);
}

[data-holo-id="Admin.Collection"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1.6fr) 2rem minmax(0, 1fr);
  align-items: start;
}

[data-holo-id="Admin.Collection.Gallery"].ht-Collection\.List {
  --holo-part-grid-template-columns: repeat(5, minmax(0, 1fr));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

[data-holo-id="Admin.Collection.Portrait"][data-holo-part="true"] img {
  inline-size: 100%;
  block-size: 22rem;
  object-fit: contain;
}

/* El manifiesto del juego a revisar: bloque de código oscuro con su propio desplazamiento. */
[data-holo-id="Admin.Review.Manifest"][data-holo-part="true"] pre,
[data-holo-id="Admin.Review.Manifest"][data-holo-part="true"] code {
  background: rgb(10 14 46 / 45%);
  color: rgb(205 210 240 / 88%);
}

[data-holo-id="Admin.Review.Manifest"][data-holo-part="true"] pre {
  max-block-size: 22rem;
  overflow: auto;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 1.4rem;
}

[data-holo-id="Admin.Players"].ht-Layout\.Stack[data-holo-part="true"],
[data-holo-id="Admin.Networks"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1.6fr) 2rem minmax(0, 1fr);
  align-items: start;
}

:is([data-holo-id="Admin.Players.Block"], [data-holo-id="Admin.Players.Search"]).ht-Control\.Form[data-holo-part="true"] {
  --holo-surface: rgb(20 26 60 / 58%);
  --holo-panel: transparent;
  --holo-border: rgb(255 255 255 / 16%);
  --holo-fg: rgb(240 244 255);
  --holo-muted: rgb(196 204 238 / 78%);
  --holo-accent: rgb(150 132 255);
  color: rgb(240 244 255);
  background: transparent;
}

[data-holo-id="Admin.Players.Unblock"].ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: max-content;
  --holo-part-justify-self: start;
  min-block-size: 4.4rem;
  padding: 0 2.2rem;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  background: transparent;
}

[data-holo-id="Admin.Players.Unblock"].ht-Control\.Trigger.hr-Trigger * {
  color: rgb(240 244 255);
}

/* My Ghosties (Plan Ideal, Screens/Collection; ideal provisional
   `Collection/.About/Media/Ideal/View.webp`): página bajo la barra. A la
   izquierda, en un panel de cristal, tu Ghostie elegido sobre su pedestal con
   su nombre, sus rasgos y las habilidades que dan, y abajo la franja del juego
   en que mejor encaja con «Use this Ghostie»; a la derecha tu colección en
   tarjetas. Sin wallet, una tarjeta que lo explica. Nada se eleva. */
[data-holo-id="Collection.Page"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-height: 100dvh;
  --holo-part-overflow: auto;
  box-sizing: border-box;
  block-size: 100dvh;
  inline-size: 100%;
  overflow-y: auto;
  padding: 10.2rem 4.8rem 2.4rem;
  color: var(--solaverse-text);
}

[data-holo-id="Collection.Body"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-max-block-size: none;
  display: flex;
  align-items: stretch;
  gap: 2.4rem;
  block-size: var(--solaverse-frame-height);
}

:is([data-holo-id="Collection.Show"], [data-holo-id="Collection.Side"], [data-holo-id="Collection.Gate"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-max-block-size: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  box-sizing: border-box;
  padding: 2.8rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  box-shadow: none;
  backdrop-filter: var(--solaverse-blur);
}

[data-holo-id="Collection.Show"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: auto;
  flex: 1.25 1 0;
  min-inline-size: 0;
  justify-content: space-between;
}

[data-holo-id="Collection.Side"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: auto;
  flex: 1 1 0;
  min-inline-size: 0;
  overflow-y: auto;
}

[data-holo-id="Collection.Gate"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: min(56rem, 100%);
  margin: 8vh auto 0;
  align-items: center;
  text-align: center;
}

/* Sin cartera, la puerta es una tarjeta centrada con el Ghostie a su tamaño
   (antes ocupaba toda la pantalla y el botón quedaba fuera). */
[data-holo-id="Collection.Gate"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-max-inline-size: 56rem;
  max-inline-size: 56rem;
  margin-block-start: 12vh;
  padding: 3.2rem 4rem 3.6rem;
}

[data-holo-id="Collection.Gate.Face"].ht-Content\.Image.ht-Content\.Image {
  --holo-part-width: 24rem;
  --holo-part-max-inline-size: 24rem;
  inline-size: 24rem;
  max-inline-size: 24rem;
  padding-block-end: 2.4rem;
}

/* Arriba, la figura y la ficha en una fila; abajo, la franja. */
[data-holo-id="Collection.Top"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  align-items: center;
  flex: 1 1 auto;
}

[data-holo-id="Collection.Info"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-gap: 1.6rem;
  --holo-part-max-block-size: none;
  align-self: center;
}

:is([data-holo-id="Collection.Portrait"], [data-holo-id="Collection.Gate.Face"]).ht-Content\.Image {
  --holo-part-width: 100%;
  inline-size: 100%;
  max-inline-size: 38rem;
  aspect-ratio: 1 / 1.05;
  object-fit: contain;
  padding-block-end: 4rem;
  background: radial-gradient(ellipse 36% 7% at 50% 93%, rgb(143 240 216 / 55%), rgb(143 240 216 / 0%) 70%), radial-gradient(ellipse 46% 11% at 50% 93%, rgb(195 178 255 / 25%), transparent 75%);
}

:is([data-holo-id="Collection.Portrait"], [data-holo-id="Collection.Gate.Face"]) img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

[data-holo-id="Collection.Name"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-size: 4rem;
  font-weight: 600;
}

:is([data-holo-id="Collection.Title"], [data-holo-id="Collection.Gate.Title"]) .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-size: 2.4rem;
  font-weight: 600;
}

:is([data-holo-id="Collection.Gate.Text"], [data-holo-id="Collection.Empty"]) {
  color: var(--solaverse-text-soft);
  font-size: 1.5rem;
}

[data-holo-id="Collection.Abilities.Title"][data-holo-id="Collection.Abilities.Title"] {
  color: var(--solaverse-lilac);
  font-size: 1.8rem;
}

/* Los rasgos, como chips de contorno. */
[data-holo-id="Collection.Traits"].ht-Collection\.List {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
}

[data-holo-id="Collection.Traits"] .hr-Item {
  flex: none;
  min-block-size: 4.2rem;
  padding-inline: 2rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
}

[data-holo-id="Collection.Traits"] .hr-Item * {
  color: var(--solaverse-text);
  font-size: 1.6rem;
}

/* Las habilidades: tres tarjetas en fila. */
[data-holo-id="Collection.Abilities"].ht-Collection\.List {
  --holo-part-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  inline-size: 100%;
  text-align: start;
}

[data-holo-id="Collection.Abilities"] .hr-Item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  min-inline-size: 0;
  padding: 1.6rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-card);
  background: rgb(255 255 255 / 3.5%);
  color: var(--solaverse-text);
}

[data-holo-id="Collection.Abilities"] .hr-Item * {
  color: inherit;
}

[data-holo-id="Collection.Abilities"] .hr-Item .hr-Title {
  font-size: 1.8rem;
  font-weight: 600;
}

[data-holo-id="Collection.Abilities"] .hr-Item :is(.hr-Subtitle, .hr-Description) {
  color: var(--solaverse-text-soft);
  font-size: 1.4rem;
}

[data-holo-id="Collection.Abilities"] .hr-Item .hr-Icon {
  color: var(--solaverse-mint);
}

/* La franja de abajo: en qué juego encaja y «Use this Ghostie». */
[data-holo-id="Collection.Bottom"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  align-items: center;
  padding: 1.2rem 1.4rem 1.2rem 2.4rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: rgb(195 178 255 / 8%);
}

[data-holo-id="Collection.Fit"].ht-Control\.Trigger.hr-Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: auto;
  --holo-trigger-inline-size: auto;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--solaverse-text-soft);
  font-size: 1.7rem;
  font-weight: 500;
  text-align: start;
}

[data-holo-id="Collection.Actions"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-width: max-content;
  flex: none;
  inline-size: max-content;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

:is([data-holo-id="Collection.Spawn"], [data-holo-id="Collection.Choose"], [data-holo-id="Collection.Games"], [data-holo-id="Collection.Gate.Connect"]).ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: 24rem;
  --holo-trigger-inline-size: 24rem;
  min-inline-size: 24rem;
  block-size: 5.4rem;
  padding-inline: 2.8rem;
  gap: 0.8rem;
  white-space: nowrap;
  font-size: 1.8rem;
}

[data-holo-id="Collection.Abilities"] .hr-Item :is(.hr-Main, .hr-Title, .hr-Subtitle, .hr-Description) {
  inline-size: 100%;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

/* Tu colección: tres retratos por fila, con el nombre debajo. */
/* La colección como la ideal 41: el panel de la ficha algo más estrecho que
   la rejilla, el nombre del Ghostie pequeño y en lila, las habilidades
   centradas con su icono arriba y «Play with it» ancho. */
[data-holo-id="Collection.Show"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  flex: 0.92 1 0;
}

/* En pantallas más estrechas la ficha conserva su ancho para que las
   habilidades no partan sus nombres. */
@media (max-width: 1500px) {
  [data-holo-id="Collection.Show"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
    flex: 1.25 1 0;
  }
}

[data-holo-id="Collection.Abilities"] .hr-Item.hr-Item {
  align-items: center;
  text-align: center;
}

[data-holo-id="Collection.Abilities"] .hr-Item :is(.hr-Main, .hr-Title, .hr-Subtitle) {
  text-align: center;
}

[data-holo-id="Collection.Games"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: min(45rem, 100%);
  --holo-trigger-inline-size: min(45rem, 100%);
  inline-size: min(45rem, 100%);
  justify-content: center;
  font-size: clamp(1.7rem, 2.6dvh, 2.2rem);
}

@media (max-height: 700px) {
  [data-holo-id="Collection.Games"].ht-Control\.Trigger.hr-Trigger.hr-Trigger.hr-Trigger {
    --holo-part-min-block-size: 4.6rem;
    min-block-size: 4.6rem;
  }

  [data-holo-id="Collection.Traits"].ht-Collection\.List {
    flex-wrap: nowrap;
  }
}

[data-holo-id="Collection.Head"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

[data-holo-id="Collection.Count"].ht-Content\.Chip {
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 999px;
  color: var(--solaverse-text-faint);
}

[data-holo-id="Collection.Portrait"] img {
  filter: drop-shadow(0 0 2.4rem rgb(143 240 216 / 30%));
}

/* El código del juego: un campo ancho de letra monoespaciada sobre cristal
   oscuro, como el resto del detalle. */
[data-holo-id="Studio.Code.Editor"].ht-Control\.Form[data-holo-part="true"] {
  --holo-surface: rgb(10 14 40 / 70%);
  --holo-panel: transparent;
  --holo-border: rgb(255 255 255 / 14%);
  --holo-fg: rgb(225 230 255);
  --holo-muted: rgb(196 204 238 / 78%);
  --holo-accent: rgb(150 132 255);
  color: rgb(240 244 255);
}

[data-holo-id="Studio.Code.Editor"] textarea {
  min-block-size: 46vh;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 1.2rem;
  line-height: 1.5;
  white-space: pre;
  tab-size: 2;
}

/* La ronda en curso del ciclo y las siguientes, con el cartel de su juego. */
[data-holo-id="Admin.Cycle.Now"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.2rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1.6rem;
  background: rgb(10 14 46 / 32%);
}

[data-holo-id="Admin.Cycle.Image"].ht-Content\.Image {
  --holo-part-width: 9rem;
  flex: none;
  inline-size: 9rem;
  block-size: 12rem;
}

/* Segunda vuelta: el nombre del juego en curso no pisa su cartel y el
   estado no se pega al título. */
[data-holo-id="Admin.Cycle.Now"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-columns: 9rem 1.6rem minmax(0, 1fr);
  --holo-part-gap: 1.6rem;
}

[data-holo-id="Admin.Head"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-columns: max-content 2.4rem max-content;
  justify-content: start;
}

[data-holo-id="Admin.State"].ht-Content\.Chip.ht-Content\.Chip {
  margin-inline-start: 2rem;
}

/* Los botones de operador siguen el secundario del tema (contorno claro):
   su texto es claro, no el oscuro del degradado que tenían antes. */
:is([data-holo-id="Admin.Job.Run"], [data-holo-id="Admin.Review.Approve"]).ht-Control\.Trigger.hr-Trigger.hr-Trigger * {
  color: var(--solaverse-text);
}

/* «Now playing» como la sala de la ideal 15: el cartel grande y apaisado a la
   izquierda, sin caja alrededor, y el nombre del juego al lado. */
[data-holo-id="Admin.Cycle.Now"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-columns: 30rem 2.4rem minmax(0, 1fr);
  padding: 0;
  border: 0;
  background: transparent;
}

[data-holo-id="Admin.Cycle.Image"].ht-Content\.Image.ht-Content\.Image {
  --holo-part-width: 30rem;
  inline-size: 30rem;
  block-size: 20rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 1.6rem;
  overflow: hidden;
}

[data-holo-id="Admin.Cycle.Image"] img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 1.2rem;
}

[data-holo-id="Admin.Cycle.Game"] .hr-Title {
  font-size: 2.6rem;
  font-weight: 800;
}

[data-holo-id="Admin.Cycle.Next"].ht-Collection\.List {
  --holo-part-width: 100%;
  --holo-part-max-block-size: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 12rem));
  gap: 0.8rem;
  padding: 0;
}

[data-holo-id="Admin.Cycle.Next"] .hr-Item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 6%);
  color: rgb(240 244 255);
  cursor: default;
  transform: none;
  box-shadow: none;
}

[data-holo-id="Admin.Cycle.Next"] .hr-Item * {
  color: inherit;
}

[data-holo-id="Admin.Cycle.Next"] .hr-Item > .hr-Icon {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 4;
  margin: 0;
}

[data-holo-id="Admin.Cycle.Next"] .hr-Item :is(.hr-IconVisual, img) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0.9rem;
}

[data-holo-id="Admin.Cycle.Next"] .hr-Title {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

[data-holo-id="Admin.Cycle.Next"] .hr-Subtitle {
  font-size: 1.15rem;
  opacity: 0.8;
}

/* En qué juego encaja mejor: una franja de cristal lila que abre ese juego. */
[data-holo-id="Collection.Fit"].hr-Trigger {
  --holo-part-width: 100%;
  --holo-trigger-inline-size: 100%;
  box-sizing: border-box;
  inline-size: 100%;
  justify-content: flex-start;
  gap: 1rem;
  min-block-size: 5rem;
  padding: 1rem 1.6rem;
  border: 1px solid rgb(201 168 255 / 55%);
  border-radius: 1.6rem;
  background: linear-gradient(90deg, rgb(201 168 255 / 26%), rgb(143 227 200 / 14%));
  color: rgb(255 255 255);
  font-size: 1.5rem;
  font-weight: 600;
  white-space: normal;
  text-align: start;
}

[data-holo-id="Collection.Fit"].hr-Trigger:is(:hover, :focus-visible) {
  border-color: rgb(201 168 255 / 85%);
}

/* Los destinos del menú (ideal `Menu/.About/Media/Ideal/View.webp`): dos
   filas de cinco tarjetas que llenan el panel; el Ghostie de cada una casi la
   llena. Su tamaño sigue al alto de la pantalla para que las dos filas quepan
   también en una baja. */
[data-holo-id="Menu.Card"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-position: static;
  --holo-part-contain: none;
  --holo-part-clip-path: none;
  --holo-part-overflow: visible;
  position: static;
  --holo-part-grid-template-rows: minmax(0, 1fr);
  --holo-part-height: 100%;
  block-size: 100%;
}

[data-holo-id="Menu.Places"].ht-Collection\.List {
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  --holo-part-contain: none;
  --holo-part-clip-path: none;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  block-size: 100%;
}

[data-holo-id="Menu.Places"].ht-Collection\.List > .hr-Item {
  transition: opacity 180ms ease, filter 180ms ease;
}

/* Al pasar el ratón (o con el foco), el Ghostie elegido se ilumina con un
   halo menta sobre el cristal y su nombre se vuelve menta; los demás bajan
   al 80 % y pierden un poco de color. El halo es una capa propia que se
   funde (un degradado no se interpola y antes aparecía de golpe). */
[data-holo-id="Menu.Places"] > .hr-Item > .hr-Icon {
  position: relative;
  background: radial-gradient(ellipse 34% 7% at 50% 96%, rgb(255 255 255 / 10%), transparent 72%);
  transition: filter 180ms ease;
}

[data-holo-id="Menu.Places"] > .hr-Item > .hr-Icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 10% at 50% 95%, rgb(143 240 216 / 62%), transparent 72%), radial-gradient(circle at 50% 60%, rgb(143 240 216 / 18%), transparent 62%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

[data-holo-id="Menu.Places"] > .hr-Item:is(:hover, :focus-visible) > .hr-Icon::before {
  opacity: 1;
}

[data-holo-id="Menu.Places"] > .hr-Item:is(:hover, :focus-visible) > .hr-Icon {
  filter: drop-shadow(0 0 1.2rem rgb(143 240 216 / 55%));
}

[data-holo-id="Menu.Places"] > .hr-Item .hr-Title {
  transition: color 180ms ease;
}

[data-holo-id="Menu.Places"] > .hr-Item:is(:hover, :focus-visible) .hr-Title {
  color: var(--solaverse-mint);
}

/* El gesto de cada personaje (D166). El dibujo aprobado está despiezado en
   capas a lienzo completo (`.About/Media/Icon/Rig/<Personaje>/`): el cuerpo
   (`Body`), la pieza que se mueve (`Item`, debajo de las manos) y lo que queda
   encima (`Top`: las manos, la caja o el brazo que saluda). En reposo las capas
   suman el dibujo quieto píxel a píxel. Al pasar el ratón una fase recorre su
   ciclo (`--solaverse-phase`) y cada personaje declara con ella sus curvas
   suaves; la amplitud (`--solaverse-gesture`) entra y sale con transición, así
   que el gesto empieza y termina en el dibujo quieto aunque el ratón salga a
   mitad. Nada sube ni crece: sólo gira o late la pieza que sostiene. */
@property --solaverse-gesture { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --solaverse-phase { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --solaverse-turn { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --solaverse-pulse { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --solaverse-wave { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --solaverse-glint { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --solaverse-sheen { syntax: "<number>"; inherits: true; initial-value: 1; }

@keyframes solaverse-gesture {
  to { --solaverse-phase: 1; }
}

[data-holo-id="Menu.Places"] > .hr-Item {
  --solaverse-gesture: 0;
  transition: --solaverse-gesture 560ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease, filter 180ms ease;
}

[data-holo-id="Menu.Places"] > .hr-Item:is(:hover, :focus-visible) {
  --solaverse-gesture: 1;
  transition: --solaverse-gesture 320ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 180ms ease, filter 180ms ease;
}

[data-holo-id="Menu.Places"] > .hr-Item > .hr-Icon {
  animation: solaverse-gesture var(--solaverse-period, 1.6s) linear infinite paused;
}

[data-holo-id="Menu.Places"] > .hr-Item:is(:hover, :focus-visible) > .hr-Icon {
  animation-play-state: running;
}

[data-holo-id="Menu.Places"] > .hr-Item .hr-IconVisual {
  position: relative;
}

[data-holo-id="Menu.Places"] > .hr-Item .hr-IconVisual > img {
  opacity: 0;
}

[data-holo-id="Menu.Places"] > .hr-Item .hr-IconVisual::before,
[data-holo-id="Menu.Places"] > .hr-Item .hr-IconVisual::after,
[data-holo-id="Menu.Places"] > .hr-Item > .hr-Icon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: center / contain no-repeat;
}

[data-holo-id="Menu.Places"] > .hr-Item .hr-IconVisual::before {
  background-image: var(--solaverse-body);
}

[data-holo-id="Menu.Places"] > .hr-Item .hr-IconVisual::after {
  background-image: var(--solaverse-item);
  transform-origin: var(--solaverse-item-origin, 50% 50%);
  rotate: calc(var(--solaverse-gesture) * var(--solaverse-turn) * var(--solaverse-item-angle, 0deg));
  scale: calc(1 + var(--solaverse-gesture) * var(--solaverse-pulse) * var(--solaverse-item-scale, 0));
}

[data-holo-id="Menu.Places"] > .hr-Item > .hr-Icon::after {
  background-image: var(--solaverse-top);
  transform-origin: var(--solaverse-top-origin, 50% 50%);
  rotate: calc(var(--solaverse-gesture) * var(--solaverse-wave) * var(--solaverse-top-angle, 0deg));
}

/* Play levanta un poco el mando y saluda con la otra mano, un poco después. */
[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Realm"] {
  --solaverse-body: url("/App/.About/Media/Icon/Rig/Play/Body.webp");
  --solaverse-item: url("/App/.About/Media/Icon/Rig/Play/Item.webp");
  --solaverse-top: url("/App/.About/Media/Icon/Rig/Play/Top.webp");
  --solaverse-item-origin: 18.75% 66.02%;
  --solaverse-item-angle: -7deg;
  --solaverse-top-origin: 76.17% 58.59%;
  --solaverse-top-angle: -4deg;
  --solaverse-period: 1.8s;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Realm"] > .hr-Icon {
  --solaverse-turn: calc((1 - cos(var(--solaverse-phase) * 360deg)) / 2);
  --solaverse-wave: calc((1 - cos(max(0, var(--solaverse-phase) - 0.15) / 0.85 * 360deg)) / 2);
}

/* Create pinta: el pincel va y viene alrededor del puño. */
[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Studio"] {
  --solaverse-body: url("/App/.About/Media/Icon/Rig/Create/Body.webp");
  --solaverse-item: url("/App/.About/Media/Icon/Rig/Create/Item.webp");
  --solaverse-top: url("/App/.About/Media/Icon/Rig/Create/Top.webp");
  --solaverse-item-origin: 21.88% 66.99%;
  --solaverse-item-angle: 7deg;
  --solaverse-period: 1.4s;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Studio"] > .hr-Icon {
  --solaverse-turn: sin(var(--solaverse-phase) * 360deg);
}

/* Vote mece la papeleta en la ranura. */
[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Vote"] {
  --solaverse-body: url("/App/.About/Media/Icon/Rig/Vote/Body.webp");
  --solaverse-item: url("/App/.About/Media/Icon/Rig/Vote/Item.webp");
  --solaverse-top: url("/App/.About/Media/Icon/Rig/Vote/Top.webp");
  --solaverse-item-origin: 55.47% 68.75%;
  --solaverse-item-angle: 4deg;
  --solaverse-period: 1.5s;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Vote"] > .hr-Icon {
  --solaverse-turn: sin(var(--solaverse-phase) * 360deg);
}

/* Ghost Coin balancea la moneda, que cambia de reflejo y la cruza un brillo. */
[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Coin"] {
  --solaverse-body: url("/App/.About/Media/Icon/Rig/Coin/Body.webp");
  --solaverse-item: url("/App/.About/Media/Icon/Rig/Coin/Item.webp");
  --solaverse-top: url("/App/.About/Media/Icon/Rig/Coin/Top.webp");
  --solaverse-item-origin: 49.8% 66.99%;
  --solaverse-item-angle: -3deg;
  --solaverse-period: 2.2s;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Coin"] > .hr-Icon {
  --solaverse-turn: sin(var(--solaverse-phase) * 360deg);
  --solaverse-glint: calc((1 - cos(var(--solaverse-phase) * 360deg)) / 2);
  --solaverse-sheen: calc(1 - clamp(0, (var(--solaverse-phase) - 0.15) / 0.5, 1));
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Coin"] .hr-IconVisual::after {
  background: linear-gradient(105deg, transparent 46%, rgb(255 255 255 / calc(var(--solaverse-gesture) * 42%)) 50%, transparent 54%) calc(var(--solaverse-sheen) * 100%) 0 / 300% 100% no-repeat, var(--solaverse-item) center / contain no-repeat;
  mask: var(--solaverse-item) center / contain no-repeat;
  filter: hue-rotate(calc(var(--solaverse-gesture) * var(--solaverse-glint) * 30deg));
}

/* My Ghosties inclina un poco el retrato. */
[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Ghosties"] {
  --solaverse-body: url("/App/.About/Media/Icon/Rig/Ghosties/Body.webp");
  --solaverse-item: url("/App/.About/Media/Icon/Rig/Ghosties/Item.webp");
  --solaverse-top: url("/App/.About/Media/Icon/Rig/Ghosties/Top.webp");
  --solaverse-item-origin: 51.76% 70.31%;
  --solaverse-item-angle: -3deg;
  --solaverse-period: 2.2s;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Ghosties"] > .hr-Icon {
  --solaverse-turn: sin(var(--solaverse-phase) * 360deg);
}

/* Leaderboard levanta el trofeo con un pequeño temblor de orgullo. */
[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Leaderboard"] {
  --solaverse-body: url("/App/.About/Media/Icon/Rig/Leaderboard/Body.webp");
  --solaverse-item: url("/App/.About/Media/Icon/Rig/Leaderboard/Item.webp");
  --solaverse-item-origin: 31.25% 58.59%;
  --solaverse-item-angle: 7deg;
  --solaverse-period: 1.6s;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Leaderboard"] > .hr-Icon {
  --solaverse-turn: calc((1 - cos(var(--solaverse-phase) * 360deg)) / 2 * (1 + 0.12 * sin(var(--solaverse-phase) * 1080deg)));
}

/* About lee: el libro se mece despacio. */
[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="About"] {
  --solaverse-body: url("/App/.About/Media/Icon/Rig/About/Body.webp");
  --solaverse-item: url("/App/.About/Media/Icon/Rig/About/Item.webp");
  --solaverse-top: url("/App/.About/Media/Icon/Rig/About/Top.webp");
  --solaverse-item-origin: 53.71% 84.96%;
  --solaverse-item-angle: 2deg;
  --solaverse-period: 2.6s;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="About"] > .hr-Icon {
  --solaverse-turn: sin(var(--solaverse-phase) * 360deg);
}

/* Follow: el corazón late dos veces y descansa. */
[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Follow"] {
  --solaverse-body: url("/App/.About/Media/Icon/Rig/Follow/Body.webp");
  --solaverse-item: url("/App/.About/Media/Icon/Rig/Follow/Item.webp");
  --solaverse-top: url("/App/.About/Media/Icon/Rig/Follow/Top.webp");
  --solaverse-item-origin: 49.8% 64.45%;
  --solaverse-item-scale: 0.06;
  --solaverse-period: 1.1s;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Follow"] > .hr-Icon {
  --solaverse-pulse: calc(exp(-1 * pow((var(--solaverse-phase) - 0.15) / 0.07, 2)) + 0.7 * exp(-1 * pow((var(--solaverse-phase) - 0.36) / 0.07, 2)));
}

/* Account sacude un poco la cartera. */
[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Account"] {
  --solaverse-body: url("/App/.About/Media/Icon/Rig/Account/Body.webp");
  --solaverse-item: url("/App/.About/Media/Icon/Rig/Account/Item.webp");
  --solaverse-top: url("/App/.About/Media/Icon/Rig/Account/Top.webp");
  --solaverse-item-origin: 47.85% 67.38%;
  --solaverse-item-angle: -4deg;
  --solaverse-period: 1.6s;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Account"] > .hr-Icon {
  --solaverse-turn: sin(var(--solaverse-phase) * 360deg);
}

@media (prefers-reduced-motion: reduce) {
  [data-holo-id="Menu.Places"] > .hr-Item > .hr-Icon {
    animation: none;
  }
}

[data-holo-id="Menu.Places"] > .hr-Item > .hr-Icon,
[data-holo-id="Menu.Places"] > .hr-Item > .hr-Icon :is(.hr-IconVisual, img) {
  inline-size: clamp(10rem, min(26dvh, 12.6vw), 25rem);
  block-size: clamp(10rem, min(26dvh, 12.6vw), 25rem);
}

/* En la ideal 31 los personajes de la segunda fila son algo menores. */
[data-holo-id="Menu.Places"] > .hr-Item:nth-child(n + 6) > .hr-Icon,
[data-holo-id="Menu.Places"] > .hr-Item:nth-child(n + 6) > .hr-Icon :is(.hr-IconVisual, img) {
  inline-size: calc(clamp(10rem, min(26dvh, 12.6vw), 25rem) * 0.93);
  block-size: calc(clamp(10rem, min(26dvh, 12.6vw), 25rem) * 0.93);
}

/* Como la ideal 31: el personaje algo más abajo y más aire hasta su título. */
[data-holo-id="Menu.Places"] > .hr-Item > .hr-Icon.hr-Icon {
  margin-block-start: 0.8rem;
}

[data-holo-id="Menu.Places"] > .hr-Item > .hr-Main.hr-Main {
  margin-block-start: 1.2rem;
}

/* Títulos con el trazo un poco más grueso que Julius (sólo tiene un peso), como
   los de la ideal; la línea gris en lila suave y algo mayor. */
[data-holo-id="Menu.Places"] > .hr-Item .hr-Title {
  font-family: var(--solaverse-font-section);
  font-size: min(2.2rem, 1.29vw);
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.25;
  -webkit-text-stroke: 0.05em currentColor;
  color: rgb(222 222 255);
}

[data-holo-id="Menu.Places"] > .hr-Item .hr-Subtitle {
  color: rgb(184 192 246);
  font-size: min(1.6rem, 1.02vw);
}

/* Desde un juego ajeno, el panel del Ghostie ofrece empezar uno propio. */
[data-holo-id="Studio.Agent.Make"].hr-Trigger,
[data-holo-id="Studio.Start"].hr-Trigger {
  --holo-part-width: 100%;
  --holo-trigger-inline-size: 100%;
  box-sizing: border-box;
  inline-size: 100%;
  justify-content: center;
  gap: 0.8rem;
  block-size: 4.8rem;
  margin-block-start: 1.2rem;
  border: 0;
  border-radius: 1.6rem;
  background: linear-gradient(90deg, rgb(226 186 255), rgb(160 230 240));
  font-size: 1.6rem;
  font-weight: 700;
}

[data-holo-id="Studio.Agent.Make"].hr-Trigger,
[data-holo-id="Studio.Agent.Make"].hr-Trigger :is([data-holo-type], [data-holo-role]),
[data-holo-id="Studio.Start"].hr-Trigger,
[data-holo-id="Studio.Start"].hr-Trigger :is([data-holo-type], [data-holo-role]) {
  color: rgb(40 30 90);
}

:is([data-holo-id="Studio.Agent.Make"], [data-holo-id="Studio.Start"]).hr-Trigger:is(:hover, :focus-visible) {
  filter: brightness(1.08);
}

/* About es una capa Maximum y Holo esconde la barra flotante con ellas. En
   Solaverse la barra sigue a la vista (Play · Create · Vote siempre a mano), así
   que la capa empieza debajo de ella, como Ghost Coin. */
:root:has([data-holo-id="About.Panel"].ht-Layout\.Modal) [data-holo-id="Navbar"][data-holo-id="Navbar"][data-holo-id="Navbar"][data-holo-part="true"] {
  visibility: visible;
}

/* El cambio del Ghostie en miniatura: la escena antes y después (Visión 5). */
[data-holo-id="Studio.Agent.Change.Shots"].ht-Layout\.Stack {
  --holo-part-display: flex;
  --holo-part-width: 100%;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

:is([data-holo-id="Studio.Agent.Before"], [data-holo-id="Studio.Agent.After"]).ht-Layout\.Stack {
  --holo-part-display: flex;
  --holo-part-width: auto;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-inline-size: 0;
}

:is([data-holo-id="Studio.Agent.Before.Image"], [data-holo-id="Studio.Agent.After.Image"]).ht-Content\.Image {
  --holo-part-width: 100%;
  inline-size: 100%;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 1rem;
}

:is([data-holo-id="Studio.Agent.Before.Image"], [data-holo-id="Studio.Agent.After.Image"]) img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

:is([data-holo-id="Studio.Agent.Before.Label"], [data-holo-id="Studio.Agent.After.Label"]) {
  color: rgb(205 210 240);
  font-size: 1.25rem;
}

[data-holo-id="Studio.Agent.Change.Arrow"] {
  flex: 0 0 auto;
  color: rgb(143 227 200);
}

/* El cielo de las imágenes ideales (Plan Ideal, Brand/Sky): una noche azul
   tranquila con pocas estrellas y helechos con luciérnagas sólo en las esquinas
   de abajo, fijo detrás de todas las páginas. El mundo y las salas lo tapan con
   el juego. */
[data-holo-id="Sky"].ht-Content\.Image {
  --holo-part-position: fixed;
  --holo-part-inset: 0;
  --holo-part-width: 100vw;
  --holo-part-max-inline-size: none;
  --holo-part-max-block-size: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  inline-size: 100vw;
  block-size: 100dvh;
  pointer-events: none;
}

[data-holo-id="Sky"] img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Los Ghosties que flotan: el mundo vivo como fondo de todas las páginas
   (salvo el editor y el propio mundo), sobre el cielo y bajo el cristal de los
   paneles, que lo desenfoca. No recibe gestos. */
[data-holo-id="Back"].ht-Visual\.Embed {
  --holo-part-position: fixed;
  --holo-part-inset: 0;
  --holo-part-width: 100vw;
  --holo-part-max-inline-size: none;
  --holo-part-max-block-size: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  inline-size: 100vw;
  block-size: 100dvh;
  pointer-events: none;
  background: transparent;

  & iframe {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    background: transparent;
    color-scheme: normal;
  }
}

[data-holo-id="Route"] {
  position: relative;
  z-index: 1;
}

/* La columna principal de Play y la del detalle van dentro de un gran panel
   de cristal, como las Visiones 3 y 4: así sus títulos no flotan sobre el
   cielo. */
:is([data-holo-id="Realm.Main"], [data-holo-id="Realm.Sheet.Main"]).ht-Layout\.Stack[data-holo-part="true"] {
  box-sizing: border-box;
  padding: 1.6rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  backdrop-filter: var(--solaverse-blur);
  -webkit-backdrop-filter: var(--solaverse-blur);
}

/* Sin portada propia, el Ghostie de Create sobre cristal ocupa su sitio. */
img[data-holo-id="Studio.Cover"][src$="/Icon/Create.png"] {
  box-sizing: border-box;
  padding: 0.6rem;
  background: rgb(255 255 255 / 8%);
  object-fit: contain;
}

/* La gráfica del tick, sobre el cristal oscuro del panel. */
[data-holo-id="Admin.Trend"].ht-Visual\.Chart {
  --holo-surface: rgb(18 22 60 / 70%);
  --holo-fg: rgb(225 230 250);
  --holo-muted: rgb(190 198 235 / 75%);
  --holo-border: rgb(255 255 255 / 12%);
  --holo-teal: rgb(143 227 200);
  color: rgb(225 230 250);
}

/* «How to play»: pasos numerados con el número en menta y sitio para él. */
[data-holo-id="Realm.How.Text"] ol {
  margin: 0;
  padding-inline-start: 2.6rem;
}

[data-holo-id="Realm.How.Text"] li {
  margin-block-end: 0.6rem;
  padding-inline-start: 0.4rem;
}

[data-holo-id="Realm.How.Text"] li::marker {
  color: rgb(143 227 200);
  font-weight: 800;
}

/* ------------------------------------------------------------------------
   Controles del tema (Plan Ideal, Brand/Theme), según la hoja de marca: van al
   final para que manden sobre los estilos sueltos de cada pantalla. Al pasar
   el ratón cambia el fondo o el borde; nada se eleva.
   ------------------------------------------------------------------------ */

/* Botón principal: la píldora de menta a lila con texto oscuro («Play now»). */
.ht-Control\.Trigger.hr-Trigger[data-holo-tone="Accent"] {
  border: 0;
  border-radius: 999px;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
  font-weight: 600;
  box-shadow: 0 0 1.8rem rgb(160 200 255 / 18%);
  transform: none;
}

.ht-Control\.Trigger.hr-Trigger[data-holo-tone="Accent"]:is(:hover, :focus-visible) {
  background: var(--solaverse-primary);
  filter: brightness(1.07);
  transform: none;
}

.ht-Control\.Trigger.hr-Trigger[data-holo-tone="Accent"] :is([data-holo-role], [data-holo-type]) {
  color: var(--solaverse-primary-text);
}

/* Botón secundario: contorno claro sobre cristal («Details»). */
.ht-Control\.Trigger.hr-Trigger:not([data-holo-tone]):not([data-holo-id^="Navbar."]) {
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 3%);
  color: var(--solaverse-text);
  box-shadow: none;
  transform: none;
}

.ht-Control\.Trigger.hr-Trigger:not([data-holo-tone]):not([data-holo-id^="Navbar."]):is(:hover, :focus-visible) {
  border-color: var(--solaverse-lilac);
  background: var(--solaverse-glass-hover);
  transform: none;
}

/* Pestañas y filtros: píldoras; la elegida en lila. */
.hr-Tab {
  border-radius: 999px;
  color: var(--solaverse-text-soft);
  transform: none;
}

.hr-Tab:is([aria-selected="true"], [aria-current="true"], [aria-current="page"], [data-holo-selected="true"]) {
  background: var(--solaverse-selected);
  color: #ffffff;
  box-shadow: var(--solaverse-selected-glow);
}

/* La etiqueta de las pestañas de la barra, a la medida de la ideal. */
[data-holo-id="Navbar.Tabs"] .hr-Item .hr-Title.hr-Title.hr-Title {
  font-size: 1.7rem;
  font-weight: 500;
}

/* ------------------------------------------------------------------------
   El detalle de un juego (Plan Ideal, Screens/Play; ideal
   `Realm/.About/Media/Ideal/Detail.webp`): arriba el carrusel con el cartel y
   las capturas a la izquierda y, a la derecha, el nombre, el autor, los datos,
   la entradilla y «Play now» / «Play test»; abajo «How to play» y «Recent
   matches». Sin apuesta ni «tu Ghostie en este juego».
   ------------------------------------------------------------------------ */
[data-holo-id="Realm.Sheet.Main"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.6rem;
}

:is([data-holo-id="Realm.Top"], [data-holo-id="Realm.Bottom"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: grid;
  --holo-part-width: 100%;
  --holo-part-max-block-size: none;
  --holo-part-contain: none;
  --holo-part-clip-path: none;
  --holo-part-grid-template-columns: minmax(0, 1.25fr) 2.4rem minmax(0, 1fr);
  display: grid;
  align-items: start;
}

[data-holo-id="Realm.Bottom"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1.1fr) 1.6rem minmax(0, 1fr);
  align-items: start;
}

/* El carrusel: una imagen por vista, con flechas redondas y puntos. */
[data-holo-id="Realm.Gallery"].ht-Collection\.List {
  --holo-part-max-block-size: none;
  --holo-part-height: auto;
  display: grid;
  grid-template-rows: auto auto;
  gap: 1.2rem;
  position: relative;
}

/* La imagen grande lleva su marco; debajo, la tira de miniaturas (D169). Con
   una sola imagen no hay tira: la imagen crece a 16:9 y llena la columna. */
[data-holo-id="Realm.Gallery"] > .hr-CarouselTrack.hr-CarouselTrack {
  grid-row: 1;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  overflow: hidden;
  aspect-ratio: 3 / 1;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  padding: 0;
}

[data-holo-id="Realm.Gallery"]:not(:has(> .hr-CarouselTrack > .hr-Item:nth-child(2))) > .hr-CarouselTrack.hr-CarouselTrack {
  aspect-ratio: 16 / 9;
}

[data-holo-id="Realm.Gallery"] > .hr-CarouselTrack > .hr-Item.hr-Item {
  flex: 0 0 100%;
  inline-size: 100%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-holo-id="Realm.Gallery"] > .hr-CarouselTrack > .hr-Item > .hr-Preview {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  border-radius: 0;
  background: var(--solaverse-night-deep);
}

[data-holo-id="Realm.Gallery"] > .hr-CarouselTrack > .hr-Item > .hr-Preview :is(img, .hr-IconVisual) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

[data-holo-id="Realm.Gallery"] > .hr-CarouselTrack > .hr-Item > .hr-Main {
  display: none;
}

[data-holo-id="Realm.Gallery"] > :is(.hr-CarouselPrevious, .hr-CarouselNext) {
  position: absolute;
  inset-block-start: 16.8rem;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 50%;
  background: rgb(20 24 64 / 60%);
  color: var(--solaverse-text);
}

[data-holo-id="Realm.Gallery"] > .hr-CarouselPrevious {
  inset-inline-start: 1.4rem;
}

[data-holo-id="Realm.Gallery"] > .hr-CarouselNext {
  inset-inline-end: 1.4rem;
}

/* Debajo de la imagen, la tira de miniaturas (D169). */
[data-holo-id="Realm.Gallery"] > .hr-CarouselPagination {
  position: static;
  grid-row: 2;
  gap: 1.2rem;
}

[data-holo-id="Realm.Gallery"] > .hr-CarouselPagination > button[data-holo-carousel-index] {
  border-radius: 1.4rem;
  aspect-ratio: 3 / 1.15;
}

[data-holo-id="Realm.Gallery"] > .hr-CarouselPagination > button[aria-current="true"] {
  border-color: rgb(255 255 255 / 85%);
  box-shadow: 0 0 1.4rem rgb(201 168 255 / 40%);
}

/* La ficha a la derecha del carrusel. */
[data-holo-id="Realm.Info"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-max-block-size: none;
  --holo-part-gap: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  padding-block-start: 1rem;
}

[data-holo-id="Realm.Name"] .hr-Title.hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-size: clamp(2.9rem, 2.85vw, 4.5rem);
  font-weight: 600;
  line-height: 1.1;
}

[data-holo-id="Realm.By"][data-holo-id="Realm.By"][data-holo-id="Realm.By"] {
  margin-block-start: -0.8rem;
  color: var(--solaverse-lilac);
  font-size: 1.8rem;
}

[data-holo-id="Realm.Lead"][data-holo-id="Realm.Lead"][data-holo-id="Realm.Lead"] {
  color: var(--solaverse-text-soft);
  font-size: 1.7rem;
  line-height: 1.6;
}

[data-holo-id="Realm.Top.Chips"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-position: static;
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

:is([data-holo-id="Realm.Top.Chip.0"], [data-holo-id="Realm.Top.Chip.1"], [data-holo-id="Realm.Top.Chip.2"])[data-holo-type][data-holo-type] {
  padding: 0.6rem 1.6rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 3%);
  color: var(--solaverse-text);
  font-size: 1.5rem;
}

/* Abajo, las dos tarjetas de cristal. */
:is([data-holo-id="Realm.How"], [data-holo-id="Realm.Matches"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  padding: 1.8rem 2.2rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: rgb(255 255 255 / 3.5%);
}

:is([data-holo-id="Realm.How.Title"], [data-holo-id="Realm.Matches.Title"], [data-holo-id="Realm.Skills.Title"]) .hr-Title.hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: var(--solaverse-label-size);
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  -webkit-text-stroke: 0.03em currentColor;
  text-transform: uppercase;
}

/* Como en la ideal, el detalle no va dentro de un panel grande: la imagen va
   suelta y sólo las tarjetas llevan cristal. */
[data-holo-id="Realm.Sheet.Main"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

[data-holo-id="Realm.Top"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  border: 0;
  background: transparent;
}

/* Las tarjetas de partida y práctica con más aire arriba, como la ideal 37
   (sólo en pantallas con sitio). */
@media (min-height: 800px) {
  :is([data-holo-id="Realm.Join"], [data-holo-id="Realm.Practice"]).ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
    padding-block: 2.6rem 2rem;
  }
}

/* En pantallas anchas la imagen del juego ocupa más, como la ideal 37. */
@media (min-width: 1500px) {
  [data-holo-id="Realm.Top"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
    --holo-part-grid-template-columns: minmax(0, 1.6fr) 3.2rem minmax(0, 1fr);
  }
}

/* El detalle cabe en una pantalla como su ideal: sin la entradilla, que ya
   cuentan «How to play» y las habilidades (D168). */
[data-holo-id="Realm.Lead"].ht-Content\.Text[data-holo-part="true"][data-holo-part="true"] {
  display: none;
}

/* Las cuatro últimas partidas, como la ideal. */

/* ------------------------------------------------------------------------
   Account (Plan Ideal, Screens/Account; ideal `Wallet/.About/Media/Ideal/
   View.webp`): con cartera, un panel tan ancho como la barra. Arriba tu
   cuenta y «Disconnect»; a la izquierda tu Ghostie elegido sobre un pedestal
   con su nombre, sus habilidades, «Play with it» y «Send to work»; a la
   derecha tu colección. Sin cartera sigue la puerta de conectar.
   ------------------------------------------------------------------------ */
/* Con cartera, la cabecera de la cuenta es más alta y sin fondo propio. Vive
   aquí y no en la hoja del Proto Account: una hoja de pieza no puede nombrar
   identidades (`data-holo-id`) y Holo la descartaría entera. */
[data-holo-id="Wallet.Card"]:has([data-holo-id="Wallet.Persona"]) > [data-holo-id="Wallet.Header"] {
  block-size: 7.2rem;
  padding: 1.6rem 8rem 1.6rem 2.4rem;
  border-block-end: 1px solid var(--solaverse-edge);
  background: transparent;
}

[data-holo-id="Wallet.Panel"].ht-Layout\.Modal > .hr-Dialog:has([data-holo-id="Wallet.Persona"]) {
  inline-size: var(--solaverse-frame-width);
  max-inline-size: none;
  block-size: var(--solaverse-frame-height);
  max-block-size: none;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  box-shadow: none;
  backdrop-filter: var(--solaverse-blur);
}

/* El panel cabe en la pantalla: la cabecera arriba y, debajo, el elegido y
   la colección, que se desplaza por dentro. */
[data-holo-id="Wallet.Card"].ht-Layout\.Stack[data-holo-part="true"]:has([data-holo-id="Wallet.Persona"]) {
  --holo-part-display: grid;
  --holo-part-grid-template-rows: auto 0 minmax(0, 1fr);
  --holo-part-max-block-size: none;
  display: grid;
  block-size: calc(var(--solaverse-frame-height) - 2px);
  min-block-size: 0;
  overflow: hidden;
}

[data-holo-id="Wallet.Body"].ht-Layout\.Stack[data-holo-part="true"]:has([data-holo-id="Wallet.Persona"]) {
  --holo-part-grid-template-rows: minmax(0, 1fr);
  --holo-part-max-block-size: 100%;
  block-size: 100%;
}

[data-holo-id="Wallet.Header"].ht-Layout\.Stack[data-holo-part="true"]:has(~ [data-holo-id="Wallet.Body"] [data-holo-id="Wallet.Persona"]) {
  --holo-part-display: flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  block-size: 7.2rem;
  padding: 1.4rem 8rem 1.4rem 2.4rem;
  border-block-end: 1px solid var(--solaverse-edge);
}


[data-holo-id="Wallet.Body"].ht-Layout\.Stack[data-holo-part="true"]:has([data-holo-id="Wallet.Persona"]) {
  min-block-size: 0;
  padding: 2.4rem;
}

/* ------------------------------------------------------------------------
   About como un libro (Plan Ideal, Screens/About; ideal
   `About/.About/Media/Ideal/View.webp`): sobre el cielo, un libro abierto de
   tapas violeta. Cada página del manifiesto es una doble página: a la
   izquierda su dibujo y a la derecha su texto, que se desplaza dentro de la
   hoja. Encima, los capítulos; a los lados, las flechas para pasar página.
   ------------------------------------------------------------------------ */
[data-holo-id="About.Card"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-gap: 1.4rem;
  --holo-part-contain: none;
  --holo-part-clip-path: none;
  --holo-part-max-block-size: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  block-size: 100%;
  min-block-size: 0;
}

/* El título queda para quien lee con lector de pantalla; el libro no lo
   repite. */
[data-holo-id="About.Header"].ht-Layout\.Stack[data-holo-part="true"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

[data-holo-id="About.Tabs"].ht-Navigation\.Tabs {
  --holo-part-width: max-content;
  flex: none;
  align-self: center;
  inline-size: max-content;
  padding: 0.3rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 999px;
  background: rgb(20 24 64 / 40%);
}

[data-holo-id="About.Tabs"] [role="tab"] {
  min-block-size: 3.8rem;
  padding-inline: 1.8rem;
  border: 0;
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 500;
}

[data-holo-id="About.Tabs"] [role="tab"] .hr-Icon {
  display: none;
}

/* El libro: tapas violeta y dos hojas de papel claro con el lomo en sombra. */
[data-holo-id="About.Page"].ht-Layout\.Slot {
  --holo-part-width: 100%;
  --holo-part-max-block-size: none;
  flex: 1 1 auto;
  min-block-size: 0;
  padding: 1.4rem;
  border-radius: 2.6rem;
  background: linear-gradient(180deg, #4b3f8e, #342a72);
  box-shadow: 0 2.4rem 5rem rgb(6 8 30 / 50%), inset 0 0 0 1px rgb(255 255 255 / 10%);
}

[data-holo-id="About.Body"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1fr) 0rem minmax(0, 1fr);
  --holo-part-grid-template-rows: minmax(0, 1fr);
  --holo-part-max-block-size: none;
  block-size: 100%;
  overflow: hidden;
  border-radius: 1.6rem;
  background:
    linear-gradient(90deg, transparent 47%, rgb(90 70 40 / 22%) 49.6%, rgb(60 44 20 / 34%) 50%, rgb(90 70 40 / 22%) 50.4%, transparent 53%),
    linear-gradient(180deg, #f8f1e2, #efe4cc);
}

:is([data-holo-id="About.Left"], [data-holo-id="About.Right"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-rows: initial;
  --holo-part-grid-template-columns: initial;
  --holo-part-max-block-size: none;
  block-size: 100%;
  min-block-size: 0;
}

/* La página izquierda es la ilustración del capítulo, a toda la hoja. */
[data-holo-id="About.Left"].ht-Layout\.Stack[data-holo-part="true"] {
  align-content: stretch;
  padding: 2.4rem 3.6rem 2.4rem 2.4rem;
}

[data-holo-id="About.Image"].ht-Content\.Image {
  --holo-part-width: 100%;
  inline-size: 100%;
  block-size: 100%;
  box-shadow: inset 0 0 0 1px rgb(60 44 20 / 15%);
  border-radius: 1rem;
}

[data-holo-id="About.Image"] img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

[data-holo-id="About.Right"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-overflow: hidden auto;
  overflow-y: auto;
  mask-image: linear-gradient(180deg, #000 calc(100% - 3.6rem), transparent);
  padding: 4rem 5.2rem 4rem 4.4rem;
  scrollbar-color: rgb(120 100 70 / 40%) transparent;
}

[data-holo-id="About.Right"] :is(h1, h2, h3) {
  margin: 0 0 1.2rem;
  color: #3b2f6b;
  font-family: var(--solaverse-font-title);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

[data-holo-id="About.Right"] :is(h2, h3) ~ :is(h2, h3) {
  margin-block-start: 3.2rem;
}

[data-holo-id="About.Right"][data-holo-id="About.Right"] :is(p, li) {
  color: #4b4166;
  font-size: 1.85rem;
  line-height: 1.75;
}

[data-holo-id="About.Right"] strong {
  color: #3b2f6b;
}

[data-holo-id="About.Chart"] img {
  inline-size: 100%;
  filter: invert(0.85) sepia(0.4) hue-rotate(205deg);
}

/* Pasar página: dos círculos a los lados del libro. */
:is([data-holo-id="About.Prev"], [data-holo-id="About.Next"]).ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: 5.2rem;
  --holo-trigger-inline-size: 5.2rem;
  --holo-part-position: absolute;
  position: absolute;
  z-index: 2;
  inline-size: 5.2rem;
  block-size: 5.2rem;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 50%;
  background: rgb(30 34 80 / 70%);
  color: var(--solaverse-text);
  font-size: 2.2rem;
}

[data-holo-id="About.Prev"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-inset: 50% auto auto -7.4rem;
  inset: 50% auto auto -7.4rem;
}

[data-holo-id="About.Next"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-inset: 50% -7.4rem auto auto;
  inset: 50% -7.4rem auto auto;
}

/* ------------------------------------------------------------------------
   El editor como su imagen ideal (Plan Ideal, Screens/Studio; sólo diseño;
   ideal `Realm/Studio/.About/Media/Ideal/View.webp`): el lienzo manda en el
   centro, la columna de tu Ghostie es más estrecha con su retrato pequeño en
   una cabecera más baja, y los paneles usan el cristal del tema. Lo que hace el editor no
   cambia.
   ------------------------------------------------------------------------ */
[data-holo-id="Studio.Body"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(32rem, 0.24fr) 2rem minmax(0, 1fr) 2rem minmax(30rem, 0.2fr);
}

:is([data-holo-id="Studio.Side"], [data-holo-id="Studio.Agent"], [data-holo-id="Studio.Bar"]).ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  backdrop-filter: var(--solaverse-blur);
  box-shadow: none;
}

[data-holo-id="Studio.Canvas"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* My Ghosties: los chips de rasgos no se recortan por la izquierda. */
[data-holo-id="Collection.Traits"].ht-Collection\.List.ht-Collection\.List {
  --holo-part-clip-path: none;
  --holo-part-contain: none;
  overflow: visible;
  padding-inline-start: 0.2rem;
}

/* Segunda vuelta contra las ideales: chips y botones de juego con el tamaño
   de la ideal, y el icono del chip a la altura de su texto. */
.ht-Content\.Chip > .hr-Icon,
.ht-Content\.Chip .hr-IconVisual > .hr-Icon {
  font-size: 1em;
}

:is([data-holo-id="Realm.Top.Chip.0"], [data-holo-id="Realm.Top.Chip.1"], [data-holo-id="Realm.Top.Chip.2"])[data-holo-type][data-holo-type][data-holo-type] {
  gap: 0.8rem;
  padding: 0.9rem 1.8rem;
  border-radius: 1.2rem;
  font-size: 1.6rem;
}

/* My Ghosties: los chips de rasgos no ocupan la altura de las tarjetas de
   habilidades; «Traits give abilities» va justo debajo, como en la ideal. */
[data-holo-id="Collection.Info"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-rows: auto 1.6rem auto 2.4rem auto 0.8rem auto;
  align-content: safe center;
}

[data-holo-id="Collection.Traits"].ht-Collection\.List.ht-Collection\.List.ht-Collection\.List {
  --holo-part-height: auto;
  block-size: auto;
  align-self: start;
}

[data-holo-id="Collection.Abilities"] .hr-Item .hr-IconVisual > .hr-Icon {
  color: var(--solaverse-mint);
  font-size: 2.8rem;
}

[data-holo-id="Collection.Abilities"] .hr-Item .hr-Title.hr-Title {
  font-size: 1.8rem;
}


[data-holo-id="Wallet.Local"].ht-Layout\.Stack.ht-Layout\.Stack.ht-Layout\.Stack.ht-Layout\.Stack {
  --holo-part-width: max-content;
  flex: none;
  inline-size: max-content;
  margin-inline-start: 1.2rem;
  order: 2;
}


/* Ghost Coin en pantallas de 1500 px o menos: el bocadillo va encima del
   Ghostie y no pisa la moneda. */
@media (max-width: 1500px) {

  [data-holo-id="Studio.Body"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
    --holo-part-grid-template-columns: minmax(28rem, 0.26fr) 1.6rem minmax(0, 1fr) 1.6rem minmax(26rem, 0.22fr);
  }
}

/* La moneda de la barra lleva el mismo reflejo que el logo (D120), con un
   desfase para que no brillen a la vez. */
[data-holo-id="Navbar.Coin.Icon"].ht-Content\.Image {
  --holo-part-overflow: visible;
  --holo-part-clip-path: none;
  --holo-part-contain: none;
  position: relative;
}

[data-holo-id="Navbar.Coin.Icon"].ht-Content\.Image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, transparent 40%, rgb(255 255 255 / 80%) 50%, rgb(205 236 255 / 40%) 54%, transparent 62%, transparent 100%) 100% 0 / 260% 100% no-repeat;
  mask: url("/App/.About/Media/Coin/Coin.webp") center / contain no-repeat;
  -webkit-mask: url("/App/.About/Media/Coin/Coin.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  animation: holo-transition-activity 7s cubic-bezier(0.45, 0, 0.25, 1) 4.7s infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-holo-id="Navbar.Coin.Icon"].ht-Content\.Image::after {
    animation: none;
    opacity: 0;
  }
}

/* El interruptor de la sesión de prueba local (sólo en la máquina del dueño):
   una pastilla menta encendida o apagada con su texto al lado. */
[data-holo-id="Wallet.Local.Off"].ht-Control\.Trigger.hr-Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: max-content;
  --holo-trigger-inline-size: max-content;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  inline-size: max-content;
  block-size: 4.4rem;
  padding: 0 0.4rem;
  border: 0;
  background: transparent;
  color: var(--solaverse-text-soft);
  font-size: 1.6rem;
  font-weight: 500;
  white-space: nowrap;
}

[data-holo-id="Wallet.Local.Off.Text"] {
  --holo-part-width: max-content;
  inline-size: max-content;
  white-space: nowrap;
}

[data-holo-id="Wallet.Local.Off"].ht-Control\.Trigger::before {
  content: "";
  flex: none;
  inline-size: 4.4rem;
  block-size: 2.6rem;
  border-radius: 999px;
  background: radial-gradient(circle at 1.3rem 50%, #ffffff 0 0.95rem, transparent 1rem), rgb(255 255 255 / 14%);
  box-shadow: inset 0 0 0 1px var(--solaverse-edge-strong);
}


[data-holo-id="Wallet.Local"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: max-content;
  flex: none;
  inline-size: max-content;
  margin-inline: auto 1.6rem;
}


/* Sin cartera, la puerta de conectar a la altura del resto (Plan Ideal,
   Screens/Account): un panel de cristal centrado con el título grande y una
   tarjeta por proveedor. */
[data-holo-id="Wallet.Panel"].ht-Layout\.Modal > .hr-Dialog:not(:has([data-holo-id="Wallet.Persona"])) {
  inline-size: min(64rem, calc(100vw - 6rem));
  max-inline-size: none;
  padding: 3.2rem 3.6rem 3.6rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass-dense);
  box-shadow: none;
  backdrop-filter: var(--solaverse-blur);
}

[data-holo-id="Wallet.Title.Connect"] .hr-Title.hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: inherit;
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* En local, el interruptor apagado comparte la cabecera: el título no se parte. */
[data-holo-id="Wallet.Title.Connect"].ht-Content\.Title {
  flex: none;
  white-space: nowrap;
}

[data-holo-id="Wallet.Connect"].ht-Control\.Wallet.hp-Card {
  --holo-part-clip-path: none;
  --holo-part-contain: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  inline-size: 100%;
  margin-block-start: 2rem;
}

[data-holo-id="Wallet.Connect"].hp-Card > .hr-Action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  inline-size: 100%;
  block-size: 16rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: rgb(255 255 255 / 4%);
  box-shadow: none;
  color: var(--solaverse-text);
}

[data-holo-id="Wallet.Connect"].hp-Card > .hr-Action:is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--solaverse-lilac);
  background: var(--solaverse-glass-hover);
  filter: none;
}

[data-holo-id="Wallet.Connect"].hp-Card .hr-Icon {
  display: grid;
  place-items: center;
  inline-size: 6.4rem;
  block-size: 6.4rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--holo-wallet-from, #8b5cf6), var(--holo-wallet-to, #6d28d9));
  color: #ffffff;
  font-size: 3.4rem;
}

[data-holo-id="Wallet.Connect"].hp-Card .hr-Name {
  font-size: 1.8rem;
  font-weight: 600;
}

/* «How to play» del detalle: cada paso con su número en un círculo menta,
   como los pasos de Ghost Coin. */
[data-holo-id="Realm.How.Text"] ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 2rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: solaverse-how;
}

[data-holo-id="Realm.How.Text"] ol > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 1.2rem;
  counter-increment: solaverse-how;
  color: var(--solaverse-text-soft);
  font-size: 1.5rem;
  line-height: 1.45;
}

/* Más compacto para que el detalle quepa en una pantalla como su ideal. */
[data-holo-id="Realm.How.Text"] ol > li[data-holo-id],
[data-holo-id="Realm.How.Text"] ol > li:is(li) {
  font-size: 1.35rem;
  line-height: 1.35;
}

[data-holo-id="Realm.How.Text"] ol[data-holo-id],
[data-holo-id="Realm.How.Text"] ol:is(ol) {
  gap: 0.8rem 1.6rem;
  margin-block-start: 0.4rem;
}

:is([data-holo-id="Realm.How"], [data-holo-id="Realm.Matches"]).ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  padding: 1.4rem 2rem;
}

/* El último paso repite las habilidades, que ya tienen su panel al lado. */
[data-holo-id="Realm.How.Text"] ol > li:nth-child(n + 5) {
  display: none;
}

[data-holo-id="Realm.How.Text"] ol > li::before {
  content: counter(solaverse-how);
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--solaverse-mint);
  color: rgb(20 24 64);
  font-size: 1.5rem;
  font-weight: 700;
}

/* Deslizadores e interruptores nativos con los colores de la marca. */
:root {
  accent-color: var(--solaverse-lilac-deep);
}

/* Pantallas bajas (el Firefox de Martín deja unos 610 px útiles): Ghost Coin y
   la cuenta se compactan para caber enteras sin desplazarse. */
@media (max-height: 700px) {

  [data-holo-id="Wallet.Body"].ht-Layout\.Stack[data-holo-part="true"]:has([data-holo-id="Wallet.Persona"]) {
    padding: 1.4rem;
  }
}

/* Administración, sección Rounds (Plan Ideal, Screens/Admin): como en la
   ideal, una tira con las diez rondas del ciclo en orden sobre su línea de
   tiempo, la ronda en curso marcada en lila y su etiqueta «Cycle N · round
   R of 10» encima. Debajo, la sala que se juega ahora con su gente y lo que
   le queda. */
[data-holo-id="Admin.Rounds"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  --holo-part-clip-path: none;
  --holo-part-contain: none;
  box-sizing: border-box;
  gap: 1.2rem;
  margin-block-end: 1.6rem;
  padding: 1.6rem 2rem 2.4rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
}

[data-holo-id="Admin.Rounds.Label"][data-holo-id="Admin.Rounds.Label"] {
  align-self: flex-end;
  color: var(--solaverse-lilac);
  font-size: 1.8rem;
  font-weight: 600;
}

[data-holo-id="Admin.Rounds.List"].ht-Collection\.List {
  --holo-part-width: 100%;
  --holo-part-max-block-size: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1.2rem;
  padding: 0 0 3rem;
}

[data-holo-id="Admin.Rounds.List"].ht-Collection\.List::after {
  content: "";
  position: absolute;
  inset-inline: 5%;
  inset-block-end: 1.1rem;
  block-size: 2px;
  background: var(--solaverse-edge-strong);
}

[data-holo-id="Admin.Rounds.List"] .hr-Item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  border: 1px solid transparent;
  border-radius: 1.4rem;
  background: transparent;
  color: var(--solaverse-text-soft);
  cursor: default;
  transform: none;
  box-shadow: none;
}

[data-holo-id="Admin.Rounds.List"] .hr-Item * {
  color: inherit;
}

[data-holo-id="Admin.Rounds.List"] .hr-Item::after {
  content: "";
  position: absolute;
  inset-block-end: -2.6rem;
  inset-inline-start: calc(50% - 0.8rem);
  z-index: 1;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  box-sizing: border-box;
  border: 2px solid var(--solaverse-text-soft);
  border-radius: 50%;
  background: var(--solaverse-night);
}

[data-holo-id="Admin.Rounds.List"] .hr-Item[aria-selected="true"],
[data-holo-id="Admin.Rounds.List"] .hr-Item[aria-current] {
  border-color: var(--solaverse-lilac);
  background: rgb(255 255 255 / 6%);
  color: var(--solaverse-text);
}

[data-holo-id="Admin.Rounds.List"] .hr-Item:is([aria-selected="true"], [aria-current])::after {
  border-color: var(--solaverse-lilac);
  background: var(--solaverse-lilac);
}

[data-holo-id="Admin.Rounds.List"] .hr-Item > .hr-Icon {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
}

[data-holo-id="Admin.Rounds.List"] .hr-Item :is(.hr-IconVisual, img) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

[data-holo-id="Admin.Rounds.List"] .hr-Title {
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
}

:is([data-holo-id="Admin.Cycle.Here"], [data-holo-id="Admin.Cycle.Left"]) {
  color: var(--solaverse-text-soft);
  font-size: 1.5rem;
}

[data-holo-id="Collection.Bottom"].ht-Layout\.Stack[data-holo-part="true"] {
  align-items: center;
  gap: 1.6rem;
  padding: 1rem 1rem 1rem 2rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
}

[data-holo-id="Collection.Fit"].hr-Trigger.hr-Trigger.hr-Trigger.hr-Trigger {
  flex: 1 1 auto;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--solaverse-text-soft);
  font-size: 1.6rem;
  text-align: start;
}

[data-holo-id="Collection.Actions"].ht-Layout\.Stack[data-holo-part="true"] {
  flex: none;
  margin-inline-start: auto;
}

/* Los rasgos del elegido en los tres colores de la marca, como los chips de
   la ideal: menta, lila y melocotón. */
[data-holo-id="Collection.Traits"] .hr-Item.hr-Item:nth-child(3n + 1) {
  border-color: var(--solaverse-mint);
  color: var(--solaverse-mint);
}

[data-holo-id="Collection.Traits"] .hr-Item.hr-Item:nth-child(3n + 2) {
  border-color: var(--solaverse-lilac);
  color: var(--solaverse-lilac);
}

[data-holo-id="Collection.Traits"] .hr-Item.hr-Item:nth-child(3n) {
  border-color: var(--solaverse-peach);
  color: var(--solaverse-peach);
}

/* La transición del menú (D139, pasos 2 y 3 de `Menu/.About/Media/Ideal/
   Transition.webp`): la tarjeta elegida se convierte en su página. La App
   pide a Holo transiciones de vista entre rutas (`--holo-view-transition`)
   y da el mismo nombre a cada tarjeta del menú y al panel de su destino: el
   navegador lleva la tarjeta hasta el sitio y el tamaño del panel mientras
   funde una vista en la otra. Con movimiento reducido no hay transición. */
/* Sólo se pide la transición al salir del menú (D150): abrir el menú, Ghost
   Coin o la cuenta desde una página no funde toda la pantalla; la capa entra
   con su propia animación y no parpadea. */
:root:has([data-holo-id="Menu.Panel"]) {
  --holo-view-transition: Route;
}

::view-transition-group(*) {
  animation-duration: 0.24s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Sólo la tarjeta que se pulsa (bajo el puntero o con el foco) lleva su
   nombre, y los paneles de las páginas lo pierden mientras el menú está
   abierto (D150). Antes los nombres estaban siempre puestos: al abrir el menú
   sobre una página había dos elementos con el mismo nombre, el navegador
   abortaba la transición (InvalidStateError) y los Ghosties saltaban; al
   abrirlo o cerrarlo, el panel volaba hasta su tarjeta. Así abrir y cerrar el
   menú sólo funde, y elegir un destino sigue llevando la tarjeta a su página. */
[data-holo-id="Menu.Places"] [data-holo-list-row-id="Realm"]:is(:hover, :focus-visible, :active),
:root:not(:has([data-holo-id="Menu.Panel"])) [data-holo-id="Realm.Panel"] {
  view-transition-name: solaverse-realm;
}

[data-holo-id="Menu.Places"] [data-holo-list-row-id="Studio"]:is(:hover, :focus-visible, :active),
:root:not(:has([data-holo-id="Menu.Panel"])) [data-holo-id="Studio.Page"] {
  view-transition-name: solaverse-studio;
}

[data-holo-id="Menu.Places"] [data-holo-list-row-id="Vote"]:is(:hover, :focus-visible, :active),
:root:not(:has([data-holo-id="Menu.Panel"])) [data-holo-id="Vote.Card"] {
  view-transition-name: solaverse-vote;
}

[data-holo-id="Menu.Places"] [data-holo-list-row-id="Coin"]:is(:hover, :focus-visible, :active),
:root:not(:has([data-holo-id="Menu.Panel"])) [data-holo-id="Coin.Card"] {
  view-transition-name: solaverse-coin;
}

[data-holo-id="Menu.Places"] [data-holo-list-row-id="Ghosties"]:is(:hover, :focus-visible, :active),
:root:not(:has([data-holo-id="Menu.Panel"])) [data-holo-id="Collection.Body"] {
  view-transition-name: solaverse-ghosties;
}

[data-holo-id="Menu.Places"] [data-holo-list-row-id="Leaderboard"]:is(:hover, :focus-visible, :active),
:root:not(:has([data-holo-id="Menu.Panel"])) [data-holo-id="Leaderboard.Card"] {
  view-transition-name: solaverse-leaderboard;
}

[data-holo-id="Menu.Places"] [data-holo-list-row-id="About"]:is(:hover, :focus-visible, :active),
:root:not(:has([data-holo-id="Menu.Panel"])) [data-holo-id="About.Card"] {
  view-transition-name: solaverse-about;
}

[data-holo-id="Menu.Places"] [data-holo-list-row-id="Follow"]:is(:hover, :focus-visible, :active),
:root:not(:has([data-holo-id="Menu.Panel"])) [data-holo-id="Follow.Card"] {
  view-transition-name: solaverse-follow;
}

[data-holo-id="Menu.Places"] [data-holo-list-row-id="Account"]:is(:hover, :focus-visible, :active),
:root:not(:has([data-holo-id="Menu.Panel"])) [data-holo-id="Wallet.Card"] {
  view-transition-name: solaverse-account;
}

/* La cuenta de la barra lleva la figura recortada de tu Ghostie, como en las
   imágenes ideales, sin el círculo de color del avatar (Plan Ideal,
   Brand/Logo). */
/* Los paneles de las páginas: el cristal sobrio del tema, con su borde fino. */
:is([data-holo-id="Realm.You"], [data-holo-id="Realm.Make"], [data-holo-id="Realm.Hero"], [data-holo-id="Realm.Creator"], [data-holo-id="Realm.Now"], [data-holo-id="Realm.Stake"], [data-holo-id="Realm.Yours"], [data-holo-id="Realm.How"], [data-holo-id="Realm.Details"], [data-holo-id="Realm.Seal"], [data-holo-id="Realm.Matches"], [data-holo-id="Studio.Side"], [data-holo-id="Studio.Canvas"], [data-holo-id="Studio.Agent"], [data-holo-id="Studio.Bar"], [data-holo-id="Collection.Show"], [data-holo-id="Collection.Side"], [data-holo-id="Collection.Gate"], [data-holo-id="Vote.Card"], [data-holo-id="Leaderboard.Card"]).ht-Layout\.Stack[data-holo-part="true"] {
  border-color: var(--solaverse-edge);
  background: var(--solaverse-glass);
  backdrop-filter: var(--solaverse-blur);
  -webkit-backdrop-filter: var(--solaverse-blur);
}

/* El detalle de un juego (ideal `Realm/.About/Media/Ideal/Detail.webp`, la
   37; D160): el nombre en mayúsculas finas y dos maneras de jugar, separadas
   y claras: «Live match» (la siguiente ronda del ciclo en que se juega, o
   votarlo si no está) y «Practice» (solo contra NPCs para aprender). Debajo,
   cómo se juega, las habilidades que usa y sus últimas partidas. */
[data-holo-id="Realm.Name"] .hr-Title.hr-Title {
  font-family: var(--solaverse-font-section);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

[data-holo-id="Realm.Ways"].ht-Layout\.Stack[data-holo-part="true"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) 1.6rem minmax(0, 1fr) !important;
  align-items: stretch;
  margin-block-start: 0.8rem;
}

/* Las dos tarjetas miden lo mismo diga lo que diga su texto (una línea o
   tres), como en la ideal 54: casi un tercio del alto, con el botón abajo. */
:is([data-holo-id="Realm.Join"], [data-holo-id="Realm.Practice"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-gap: 1.2rem;
  --holo-part-max-block-size: none;
  --holo-part-min-block-size: 30dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-block-size: 30dvh;
  gap: 1.2rem;
  padding: 2rem 2.2rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-card);
  background: rgb(255 255 255 / 4%);
}

/* La partida en activo va destacada en menta, como la ideal 37. */
[data-holo-id="Realm.Join"].ht-Layout\.Stack[data-holo-part="true"] {
  border-color: rgb(143 240 216 / 70%);
  background-color: rgb(143 240 216 / 9%);
  background-image: linear-gradient(165deg, rgb(143 240 216 / 12%) 0%, transparent 70%);
  box-shadow: 0 0 2.4rem rgb(143 240 216 / 12%), inset 0 0 0 1px rgb(143 240 216 / 18%);
}

:is([data-holo-id="Realm.Join.Head"], [data-holo-id="Realm.Practice.Head"]).ht-Layout\.Stack[data-holo-part="true"] {
  display: grid !important;
  grid-template-columns: auto 1.2rem minmax(0, 1fr) !important;
  align-items: center;
}

:is([data-holo-id="Realm.Join.Icon"], [data-holo-id="Realm.Practice.Icon"]) {
  color: var(--solaverse-mint);
  font-size: 3.4rem;
}

[data-holo-id="Realm.Practice.Icon"] {
  color: var(--solaverse-lilac);
}

/* La práctica, secundaria, lleva título y texto en lila suave. */
[data-holo-id="Realm.Practice.Title"] .hr-Title.hr-Title.hr-Title,
[data-holo-id="Realm.Practice.Text"][data-holo-id="Realm.Practice.Text"].ht-Content\.Text.ht-Content\.Text {
  color: rgb(185 182 240);
}

:is([data-holo-id="Realm.Join.Title"], [data-holo-id="Realm.Practice.Title"]) .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  -webkit-text-stroke: 0.02em currentColor;
  text-transform: uppercase;
}

:is([data-holo-id="Realm.Join.Text"], [data-holo-id="Realm.Practice.Text"], [data-holo-id="Realm.Practice.Soon"]).ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-size: 1.6rem;
  line-height: 1.5;
}

[data-holo-id="Realm.Practice.Soon"].ht-Content\.Text {
  font-size: 1.4rem;
  color: var(--solaverse-text-faint);
}

:is([data-holo-id="Realm.Join.Go"], [data-holo-id="Realm.Join.Vote"], [data-holo-id="Realm.Practice.Go"]).ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: 100%;
  --holo-trigger-inline-size: 100%;
  justify-content: center;
  --holo-part-min-block-size: 6.4rem;
  gap: 1rem;
  min-block-size: 6.4rem;
  margin-block-start: auto;
  border-radius: 999px;
  font-size: 2rem;
  font-weight: 600;
}

[data-holo-id="Realm.Join.Go"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  border: 0;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
}

[data-holo-id="Realm.Join.Go"].hr-Trigger :is([data-holo-type], [data-holo-role]) {
  color: var(--solaverse-primary-text);
}

:is([data-holo-id="Realm.Join.Vote"], [data-holo-id="Realm.Practice.Go"]).ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  border: 1px solid var(--solaverse-edge-strong);
  background: rgb(255 255 255 / 5%);
  color: var(--solaverse-text);
}

/* Como la ideal: una fila de tres habilidades, cada una en dos líneas. */

/* Cada habilidad con su icono a la izquierda, como en la ideal (el mismo de
   las habilidades de la colección). */

/* En pantallas más estrechas el nombre de la habilidad manda: sin icono. */
@media (max-width: 1500px) {
}

/* Vote como catálogo (ideal `Vote/.About/Media/Ideal/View.webp`, la 36;
   D159): una sola franja del ciclo (en qué ronda va, sus diez carteles y el
   tiempo que queda para votar) y, debajo, todos los juegos como tarjetas con su
   cartel, su familia, su entradilla y la parte de lo apostado; a la derecha, tu
   apuesta. Pulsar un juego abre su detalle. */
[data-holo-id="Vote.Page"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-height: 100dvh;
  --holo-part-display: grid;
  --holo-part-grid-template-rows: minmax(0, 1fr);
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  /* Dos paneles, como la ideal 36: el ciclo con los juegos y, aparte, el
     juego elegido con la apuesta. */
  --holo-part-grid-template-columns: minmax(0, 1fr) minmax(34rem, 0.4fr);
  grid-template-columns: minmax(0, 1fr) minmax(34rem, 0.4fr);
  --holo-part-gap: 1.8rem;
  gap: 1.8rem;
  block-size: 100dvh;
  inline-size: 100%;
  padding: var(--solaverse-top) var(--solaverse-side) var(--solaverse-gap);
  color: var(--solaverse-text);
}

[data-holo-id="Vote.Card"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-column: 1;
  --holo-part-grid-row: 1;
  grid-column: 1;
  grid-row: 1;
  --holo-part-display: flex;
  --holo-part-gap: 2.4rem;
  --holo-part-width: 100%;
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  box-sizing: border-box;
  block-size: 100%;
  padding: 2.8rem 3.2rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  overflow: hidden;
}

[data-holo-id="Vote.Strip"].ht-Layout\.Stack[data-holo-part="true"] {
  display: grid !important;
  grid-template-columns: max-content 3.2rem minmax(0, 1fr) 3.2rem max-content !important;
  align-items: center;
  flex: none;
}

[data-holo-id="Vote.Strip.Title"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

[data-holo-id="Vote.Strip.Text"].ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-size: 1.5rem;
}

/* Los diez carteles del ciclo, pequeños; el de la ronda en curso, marcado. */
[data-holo-id="Vote.Now.Rounds"].ht-Collection\.List {
  --holo-part-height: auto;
  --holo-part-max-block-size: none;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--solaverse-edge);
  border-radius: 1rem;
  background: transparent;
  opacity: 0.65;
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item:is([aria-current="true"], [aria-selected="true"], [data-holo-selected="true"]) {
  border-color: var(--solaverse-lilac);
  box-shadow: var(--solaverse-selected-glow);
  opacity: 1;
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item .hr-Icon {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item .hr-Icon :is(img, .hr-Image) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item .hr-Main {
  position: absolute;
  inset: auto 0 0;
  padding: 0.2rem 0.6rem;
  background: linear-gradient(180deg, transparent, rgb(10 12 40 / 80%));
  text-align: center;
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item .hr-Subtitle {
  display: none;
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item .hr-Title.hr-Title {
  color: #ffffff;
  font-size: 1.2rem;
}

/* La franja del ciclo como la ideal: el título y, debajo, una línea de diez
   puntos (llenos los jugados, con anillo el de ahora, huecos los que faltan);
   el tiempo a la derecha. */
[data-holo-id="Vote.Strip"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  grid-template-columns: minmax(0, 1fr) max-content !important;
  grid-template-rows: auto auto;
  row-gap: 1.6rem;
}

[data-holo-id="Vote.Strip.Names"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-column: 1;
  grid-column: 1;
  grid-row: 1;
}

[data-holo-id="Vote.Strip.Text"].ht-Content\.Text.ht-Content\.Text {
  display: none;
}

[data-holo-id="Vote.Now.Rounds"].ht-Collection\.List.ht-Collection\.List {
  --holo-part-grid-column: 1;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  grid-template-columns: repeat(10, 2.2rem);
  justify-content: space-between;
  inline-size: min(64rem, 100%);
  padding-inline: 1rem;
  background: linear-gradient(transparent calc(50% - 1px), rgb(255 255 255 / 22%) calc(50% - 1px), rgb(255 255 255 / 22%) calc(50% + 1px), transparent calc(50% + 1px)) 1rem 0 / calc(100% - 2rem) 100% no-repeat;
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item.hr-Item {
  align-self: center;
  inline-size: 2.2rem;
  min-block-size: 0;
  block-size: 2.2rem;
  aspect-ratio: 1;
  justify-self: center;
  border: 2px solid rgb(176 172 220 / 42%);
  border-radius: 50%;
  background: var(--solaverse-night);
  opacity: 1;
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item > :is(.hr-Icon, .hr-Main) {
  display: none;
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item.hr-Item:has(~ [aria-current="true"]) {
  justify-self: center;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  border-color: var(--solaverse-lilac);
  background: var(--solaverse-lilac);
}

[data-holo-id="Vote.Now.Rounds"] > .hr-Item.hr-Item:is([aria-current="true"], [aria-selected="true"]) {
  border-color: rgb(255 255 255 / 85%);
  inline-size: 2.6rem;
  block-size: 2.6rem;
  background: var(--solaverse-lilac-deep);
  box-shadow: 0 0 0 0.4rem rgb(201 168 255 / 30%), var(--solaverse-selected-glow);
}

[data-holo-id="Vote.Timer"].ht-Status\.Countdown {
  --holo-part-grid-column: 2;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-items: end;
  text-align: end;
}

[data-holo-id="Vote.Timer"] .hr-Label {
  color: var(--solaverse-text-soft);
  font-size: 1.5rem;
  font-weight: 400;
}

[data-holo-id="Vote.Timer"] .hr-Value {
  color: var(--solaverse-text);
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Las rondas del ciclo como la ideal 56: una tarjeta por ronda, a todo el
   ancho y en orden. En cada fila, el cartel, la ronda en un círculo, el
   nombre con su familia, la entradilla, la barra de lo apostado por ese juego
   y el estado (jugada, ahora o falta); las jugadas, atenuadas; la de ahora,
   con borde menta; la elegida para apostar, en lila. Medidas de la ideal a
   1832 px en la unidad del tema. */
[data-holo-id="Vote.Games.List"].ht-Collection\.List[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  --holo-panel: rgb(30 34 80 / 72%);
  --holo-border: var(--solaverse-edge);
  --holo-muted: var(--solaverse-text-soft);
  --holo-accent: var(--solaverse-lilac);
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
  padding-inline-end: 0.8rem;
  scrollbar-color: rgb(195 178 255 / 35%) transparent;
}

[data-holo-id="Vote.Games.List"] > .hr-Item.hr-Item {
  display: grid;
  grid-column: auto;
  grid-template-columns: 17rem 4.4rem minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) max-content;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 1.6rem;
  min-block-size: 7.6rem;
  padding: 0.4rem 1.6rem 0.4rem 0.4rem;
  border-radius: 1.4rem;
}

[data-holo-id="Vote.Games.List"] > .hr-Item > :is(.hr-Primary, .hr-Main) {
  display: contents;
}

[data-holo-id="Vote.Games.List"] > .hr-Item > .hr-Icon.hr-Icon.hr-Icon {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
  border-radius: 1.1rem;
  clip-path: none;
}

[data-holo-id="Vote.Games.List"] .hr-Title.hr-Title {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 1.56rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-holo-id="Vote.Games.List"] .hr-Divider {
  display: none;
}

/* La ronda en un círculo, a la izquierda del nombre, y la familia con su
   icono lila y su nombre en una píldora, debajo del nombre. */
[data-holo-id="Vote.Games.List"] .hr-Subtitle.hr-Subtitle.hr-Subtitle {
  display: grid;
  grid-column: 2;
  grid-row: 1 / -1;
  place-items: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 50%;
  background: rgb(255 255 255 / 4%);
  color: var(--solaverse-text-soft);
  font-family: inherit;
  font-size: 1.5rem;
  letter-spacing: normal;
  text-transform: none;
}

[data-holo-id="Vote.Games.List"] .hr-Metrics {
  display: flex;
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  margin: 0;
}

[data-holo-id="Vote.Games.List"] .hr-Metric {
  gap: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--solaverse-text-soft);
  font-size: 1.4rem;
}

[data-holo-id="Vote.Games.List"] .hr-Metric > .hr-Icon {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--solaverse-lilac);
  font-size: 2rem;
}

[data-holo-id="Vote.Games.List"] .hr-Metric .hr-Value {
  padding: 0.3rem 1.2rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  color: var(--solaverse-text-soft);
  font-weight: 400;
}

[data-holo-id="Vote.Games.List"] .hr-Text.hr-Text {
  display: -webkit-box;
  grid-column: 4;
  grid-row: 1 / -1;
  overflow: hidden;
  color: var(--solaverse-text);
  font-size: 1.4rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* La barra de lo apostado y, debajo, el porcentaje con las monedas. */
[data-holo-id="Vote.Games.List"] .hr-Progress.hr-Progress {
  display: grid;
  grid-column: 5;
  grid-row: 1 / -1;
  gap: 0.6rem;
  margin: 0;
  color: var(--solaverse-text-soft);
  font-size: 1.4rem;
}

[data-holo-id="Vote.Games.List"] .hr-Progress > .hr-Label {
  display: none;
}

[data-holo-id="Vote.Games.List"] .hr-Progress .hr-Track {
  block-size: 0.8rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 10%);
}

[data-holo-id="Vote.Games.List"] .hr-Progress .hr-Fill {
  border-radius: 999px;
  background: var(--solaverse-selected);
}

[data-holo-id="Vote.Games.List"] .hr-Progress .hr-Value.hr-Value {
  color: var(--solaverse-text-soft);
  font-size: 1.4rem;
  font-weight: 400;
}

/* El estado como pastilla (Status.Dot Label de Holo, D189): cristal claro la
   jugada y la que falta, menta llena la de ahora, que además lleva el borde
   menta. Como la ideal 56, las jugadas no se atenúan. */
[data-holo-id="Vote.Games.List"] > .hr-Item > .hr-Status.hr-Status {
  grid-column: 6;
  grid-row: 1 / -1;
  justify-self: end;
  align-self: center;
}

[data-holo-id="Vote.Games.List"] .hr-Status .hp-Label {
  justify-content: center;
  min-inline-size: 9.6rem;
  padding: 0.7rem 1.4rem;
  border-color: transparent;
  background: rgb(255 255 255 / 10%);
}

[data-holo-id="Vote.Games.List"] .hr-Status :is(.hp-Label, .hp-Label *) {
  color: var(--solaverse-text);
  font-size: 1.5rem;
}

[data-holo-id="Vote.Games.List"] .hr-Status .hp-Label[data-holo-tone="Success"] {
  background: var(--solaverse-mint);
  font-weight: 600;
}

[data-holo-id="Vote.Games.List"] .hr-Status :is(.hp-Label[data-holo-tone="Success"], .hp-Label[data-holo-tone="Success"] *) {
  color: var(--solaverse-night);
}

[data-holo-id="Vote.Games.List"] > .hr-Item.hr-Item:has([data-holo-tone="Success"]) {
  border-color: var(--solaverse-mint);
  box-shadow: 0 0 0 1px var(--solaverse-mint), 0 0 2rem rgb(143 240 216 / 28%);
}

/* Tu apuesta: un panel con el saldo, el formulario y lo que ya has apostado. */
[data-holo-id="Vote.Stake"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-column: 2;
  --holo-part-grid-row: 1;
  grid-column: 2;
  grid-row: 1;
  --holo-part-display: flex;
  --holo-part-gap: 1.6rem;
  --holo-part-max-block-size: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  box-sizing: border-box;
  block-size: 100%;
  min-block-size: 0;
  overflow-y: auto;
  padding: 2.4rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  backdrop-filter: var(--solaverse-blur);
  -webkit-backdrop-filter: var(--solaverse-blur);
}

[data-holo-id="Vote.Stake.Title"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

/* El juego elegido en grande, como la ideal 36: se elige pulsando su
   tarjeta (Pick en la ruta), que queda marcada en lila; el panel enseña su
   imagen, nombre, familia y descripción, y la apuesta va debajo. El campo del
   juego no se ve: lo fija la tarjeta. */
[data-holo-id="Vote.Games.List"] > .hr-Item[aria-current="true"][aria-current="true"] {
  border-color: var(--solaverse-lilac);
  box-shadow: 0 0 0 1px var(--solaverse-lilac), 0 0 2.4rem rgb(195 178 255 / 28%);
}

/* La ronda de ahora también es «current» para Holo (la trae a la vista), pero
   conserva su borde menta: el lila es sólo para la elegida. */
[data-holo-id="Vote.Games.List"] > .hr-Item[aria-current="true"][aria-current="true"]:has([data-holo-tone="Success"]):not([data-holo-item-selected="true"]) {
  border-color: var(--solaverse-mint);
  box-shadow: 0 0 0 1px var(--solaverse-mint), 0 0 2rem rgb(143 240 216 / 28%);
}

[data-holo-id="Vote.Stake"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  gap: 1rem;
  padding: 2.2rem 2.2rem 2.2rem;
}

[data-holo-id="Vote.Chosen"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-max-block-size: none;
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 0.4rem;
  padding-block-end: 1.2rem;
  border-block-end: 1px solid var(--solaverse-edge);
}

[data-holo-id="Vote.Chosen.Art"].ht-Content\.Image.ht-Content\.Image {
  --holo-part-clip-path: inset(0 round 1.4rem);
  inline-size: 100%;
  block-size: auto;
  --holo-part-max-block-size: 31dvh;
  aspect-ratio: 3 / 2;
  max-block-size: 31dvh;
  margin-block-end: 0.8rem;
  object-fit: cover;
}

[data-holo-id="Vote.Chosen.Name"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* La familia en su píldora, como en las filas. */
[data-holo-id="Vote.Chosen.Family"].ht-Content\.Text {
  align-self: flex-start;
  margin-block: 0.4rem;
  padding: 0.3rem 1.4rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: var(--solaverse-text-soft);
  font-size: 1.5rem;
}

[data-holo-id="Vote.Chosen.Text"].ht-Content\.Text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--solaverse-text);
  font-size: 1.6rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

[data-holo-id="Vote.Chosen.Open"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  min-block-size: 0;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--solaverse-lilac);
  font-size: 1.5rem;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

[data-holo-id="Vote.Form"] [data-holo-field="Realm"] {
  display: none;
}

[data-holo-id="Vote.Form"][data-holo-part="true"] {
  --holo-part-min-block-size: 16.4rem;
  min-block-size: 16.4rem;
}

[data-holo-id="Vote.Form"] > .hr-Stack.hr-Stack {
  padding: 0 0 1.2rem;
}

/* En pantallas bajas (1239 × 593 en el Firefox de Martín) el juego elegido
   conserva su imagen y su descripción, más compactas, y la apuesta cabe debajo. */
@media (max-height: 700px) {
  /* Como la ideal 56, la imagen del elegido ocupa casi la mitad del panel. */
  [data-holo-id="Vote.Chosen.Art"].ht-Content\.Image.ht-Content\.Image[data-holo-part="true"] {
    --holo-part-max-block-size: 36dvh;
    max-block-size: 36dvh;
    margin-block-end: 0.4rem;
  }

  [data-holo-id="Vote.Chosen.Text"].ht-Content\.Text[data-holo-part="true"] {
    font-size: 1.4rem;
    -webkit-line-clamp: 2;
  }
}

/* El formulario en el tema: etiquetas claras, campos de cristal, el
   deslizador en lila y el botón principal sin la franja blanca del pie. */
[data-holo-id="Vote.Form"] .hr-Label,
[data-holo-id="Vote.Form"] .hr-Label .hr-Text {
  color: var(--solaverse-text-soft);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Como la ideal 56, la etiqueta de la cantidad va sin icono. */
[data-holo-id="Vote.Form"] .hr-Label .hr-Icon {
  display: none;
}

[data-holo-id="Vote.Form"] .hr-Required {
  display: none;
}

[data-holo-id="Vote.Form"] :is(button.hr-Control, input.hr-Input:not([type="range"]), select.hr-Input) {
  min-block-size: 4.8rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 6%);
  color: var(--solaverse-text);
  font-size: 1.6rem;
}

[data-holo-id="Vote.Form"] .hr-Control :is(.hr-Title, .hr-Value) {
  color: var(--solaverse-text);
}

[data-holo-id="Vote.Form"] .hr-Range {
  flex: 1 1 auto;
  min-inline-size: 0;
}

[data-holo-id="Vote.Form"] input[type="range"] {
  inline-size: 100%;
  accent-color: var(--solaverse-lilac-deep);
}

[data-holo-id="Vote.Form"] :is(.hr-Minimum, .hr-Maximum) {
  color: var(--solaverse-text-faint);
}

[data-holo-id="Vote.Form"] .hr-Toolbar {
  padding: 0;
  border: 0;
  background: transparent;
}

[data-holo-id="Vote.Form"] .hr-Toolbar .hr-Button,
[data-holo-id="Vote.Form"] .hr-Submit,
[data-holo-id="Vote.Form"] button[type="submit"] {
  inline-size: 100%;
  justify-content: center;
  min-block-size: 5.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
  font-size: 1.7rem;
  font-weight: 600;
}

/* En pantallas bajas el saldo ya está en la píldora de la barra: se quita del
   panel para que la cantidad y el botón quepan sin taparse. */
@media (max-height: 700px) {
}

[data-holo-id="Vote.Stake.Connect"].ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-size: 1.5rem;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  [data-holo-id="Vote.Strip"].ht-Layout\.Stack[data-holo-part="true"] {
    grid-template-columns: max-content 1.6rem minmax(0, 1fr) 1.6rem max-content !important;
  }
}

/* Leaderboard (ideal `Leaderboard/.About/Media/Ideal/View.webp`, la 42; D158):
   un panel de cristal en el marco común. Arriba el título en mayúsculas finas
   con su nota y, a la derecha, el periodo. Debajo el podio de los tres
   primeros, cada uno con su figura sobre un escalón (el primero en el centro y
   más alto) y, bajo él, la tabla con el resto. Sin ganadores, los tres
   escalones vacíos con el aviso y el botón para jugar. Cambiar de periodo sólo
   sustituye `Leaderboard.Slot`. */
[data-holo-id="Leaderboard.Page"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-height: 100dvh;
  box-sizing: border-box;
  block-size: 100dvh;
  inline-size: 100%;
  padding: var(--solaverse-top) var(--solaverse-side) var(--solaverse-gap);
  color: var(--solaverse-text);
  --holo-part-display: grid;
  --holo-part-grid-template-rows: minmax(0, 1fr);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

[data-holo-id="Leaderboard.Card"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-width: 100%;
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100%;
  padding: 3.2rem 4rem;
  overflow: hidden;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
}

[data-holo-id="Leaderboard.Slot"].ht-Layout\.Slot {
  --holo-part-display: flex;
  --holo-part-gap: 2.4rem;
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  block-size: 100%;
  min-block-size: 0;
}

[data-holo-id="Leaderboard.Head"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: 100%;
  inline-size: 100%;
  /* Holo reparte la fila en tres pistas medidas por su contenido (la del
     medio es el hueco): el título se queda con todo y el periodo, a la
     derecha. */
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 2.4rem auto !important;
  align-items: start;
}

[data-holo-id="Leaderboard.Names"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-gap: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

[data-holo-id="Leaderboard.Title"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: clamp(3rem, 2.7vw, 4.6rem);
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  line-height: 1.1;
  text-transform: uppercase;
}

[data-holo-id="Leaderboard.Note"].ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-size: 1.7rem;
}

[data-holo-id="Leaderboard.Period"].ht-Navigation\.Tabs {
  --holo-part-width: max-content;
  gap: 0.4rem;
  padding: 0.4rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 999px;
  background: rgb(20 24 64 / 35%);
}

[data-holo-id="Leaderboard.Period"] [role="tab"] {
  min-block-size: 4.4rem;
  padding-inline: 2.4rem;
  border-radius: 999px;
  font-family: var(--solaverse-font-section);
  font-size: 1.4rem;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

[data-holo-id="Leaderboard.Period"] [role="tab"][aria-selected="true"] {
  background: var(--solaverse-selected);
  box-shadow: var(--solaverse-selected-glow);
  color: #ffffff;
}

/* El podio: tres columnas; el primero en el centro. Cada uno es su figura y,
   debajo, su escalón con el puesto, el nombre y las victorias. */
[data-holo-id="Leaderboard.Podium"].ht-Collection\.List {
  --holo-part-height: auto;
  --holo-part-max-block-size: none;
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 26rem) minmax(0, 24rem);
  justify-content: center;
  align-items: end;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Cada puesto es una rejilla de dos filas: la figura y, debajo, el escalón; el
   número va dentro del escalón, arriba, como la ideal 42. */
[data-holo-id="Leaderboard.Podium"] > .hr-Item.hr-Item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: end;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item:nth-child(1) { grid-column: 2; grid-row: 1; }
[data-holo-id="Leaderboard.Podium"] > .hr-Item:nth-child(2) { grid-column: 1; grid-row: 1; }
[data-holo-id="Leaderboard.Podium"] > .hr-Item:nth-child(3) { grid-column: 3; grid-row: 1; }

[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Icon.hr-Icon.hr-Icon,
[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Icon > .hr-IconVisual.hr-IconVisual {
  grid-row: 1;
  grid-column: 1;
  inline-size: 14rem;
  block-size: 14rem;
  max-block-size: none;
  margin-block-end: -1rem;
  border: 0;
  background: transparent;
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item .hr-Icon :is(img, .hr-Image).hr-Image {
  inline-size: 100%;
  block-size: 100%;
  max-block-size: none;
  object-fit: contain;
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Main,
:is([data-holo-id="Leaderboard.Step.First"], [data-holo-id="Leaderboard.Step.Second"], [data-holo-id="Leaderboard.Step.Third"]).ht-Content\.Text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  inline-size: 100%;
  padding: 1.6rem 1rem;
  border: 1px solid var(--solaverse-edge);
  border-block-end: 0;
  border-radius: 1.6rem 1.6rem 0 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 3%));
  text-align: center;
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item:nth-child(1) > .hr-Main,
[data-holo-id="Leaderboard.Step.First"].ht-Content\.Text {
  --holo-part-min-block-size: 15rem;
  --holo-part-clip-path: none;
  --holo-part-contain: none;
  --holo-part-overflow: visible;
  min-block-size: 15rem;
  border-color: rgb(255 214 140 / 55%);
  box-shadow: 0 -0.2rem 2.4rem rgb(255 214 140 / 18%);
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item:nth-child(2) > .hr-Main,
[data-holo-id="Leaderboard.Step.Second"].ht-Content\.Text {
  --holo-part-min-block-size: 11.5rem;
  min-block-size: 11.5rem;
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item:nth-child(3) > .hr-Main,
[data-holo-id="Leaderboard.Step.Third"].ht-Content\.Text {
  --holo-part-min-block-size: 9rem;
  min-block-size: 9rem;
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Main.hr-Main {
  grid-row: 2;
  grid-column: 1;
  justify-content: flex-end;
  padding-block-start: 6rem;
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Value.hr-Value {
  z-index: 1;
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  justify-self: center;
  margin-block-start: 1.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--solaverse-text);
  font-size: 3.6rem;
  font-weight: 700;
}

/* El puesto entre dos ramas de laurel, como la ideal 42, del color del puesto
   (la rama es una máscara: toma el color del texto; la derecha, en espejo). */
[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Value.hr-Value.hr-Value {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Value::before,
[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Value::after {
  content: "";
  inline-size: 0.55em;
  block-size: 1.15em;
  background: currentColor;
  mask: url("/App/.About/Media/Icon/Laurel.svg") center / contain no-repeat;
  -webkit-mask: url("/App/.About/Media/Icon/Laurel.svg") center / contain no-repeat;
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Value::after {
  transform: scaleX(-1);
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Value .hr-Text.hr-Text {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

[data-holo-id="Leaderboard.Podium"] > .hr-Item:nth-child(1) > .hr-Value { color: #f6c95b; }
[data-holo-id="Leaderboard.Podium"] > .hr-Item:nth-child(2) > .hr-Value { color: #c8c2ff; }
[data-holo-id="Leaderboard.Podium"] > .hr-Item:nth-child(3) > .hr-Value { color: #f0a878; }

[data-holo-id="Leaderboard.Podium"] > .hr-Item > .hr-Chevron {
  display: none;
}

[data-holo-id="Leaderboard.Podium"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-size: 1.7rem;
}

[data-holo-id="Leaderboard.Podium"] .hr-Subtitle {
  color: var(--solaverse-text-soft);
  font-size: 1.4rem;
}

/* Sin ganadores: los escalones vacíos, el aviso y el botón para jugar. */
[data-holo-id="Leaderboard.Stage"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-gap: 2.4rem;
  --holo-part-max-block-size: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex: 1 1 auto;
}

/* Los escalones como la ideal 42: el número en oro, plata lila y bronce, más
   grande, y el borde de arriba encendido con su color. */
:is([data-holo-id="Leaderboard.Step.First"], [data-holo-id="Leaderboard.Step.Second"], [data-holo-id="Leaderboard.Step.Third"]).ht-Content\.Text.ht-Content\.Text.ht-Content\.Text {
  font-size: 4.4rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%));
}

[data-holo-id="Leaderboard.Step.First"].ht-Content\.Text.ht-Content\.Text.ht-Content\.Text {
  border-color: rgb(255 214 140 / 70%);
  color: #f6c95b;
  box-shadow: 0 -0.3rem 2.4rem rgb(255 196 100 / 30%), inset 0 0.2rem 0 rgb(255 214 140 / 60%);
}

[data-holo-id="Leaderboard.Step.Second"].ht-Content\.Text.ht-Content\.Text.ht-Content\.Text {
  border-color: rgb(201 190 255 / 55%);
  color: #c8c2ff;
  box-shadow: inset 0 0.2rem 0 rgb(201 190 255 / 45%);
}

[data-holo-id="Leaderboard.Step.Third"].ht-Content\.Text.ht-Content\.Text.ht-Content\.Text {
  border-color: rgb(240 168 120 / 55%);
  color: #f0a878;
  box-shadow: inset 0 0.2rem 0 rgb(240 168 120 / 45%);
}

[data-holo-id="Leaderboard.Steps"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: grid;
  display: grid !important;
  grid-template-columns: 24rem 26rem 24rem !important;
  align-items: end;
  gap: 0.9rem !important;
}

:is([data-holo-id="Leaderboard.Step.First"], [data-holo-id="Leaderboard.Step.Second"], [data-holo-id="Leaderboard.Step.Third"]).ht-Content\.Text {
  grid-column: auto !important;
  justify-content: flex-start;
  color: var(--solaverse-text-faint);
  font-size: 3.2rem;
  font-weight: 700;
}

[data-holo-id="Leaderboard.Empty"].ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-size: 1.8rem;
  text-align: center;
}

[data-holo-id="Leaderboard.Play"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: auto;
  --holo-trigger-inline-size: auto;
  gap: 1rem;
  min-block-size: 5.2rem;
  padding-inline: 3.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
  font-size: 1.7rem;
  font-weight: 600;
}

[data-holo-id="Leaderboard.Play"].hr-Trigger :is([data-holo-type], [data-holo-role]) {
  color: var(--solaverse-primary-text);
}

/* La tabla con el resto, como la ideal 42 (Collection.Table, Rows): la
   cabecera en mayúsculas finas (#, Player, Wins, Rounds) y cada fila en una
   píldora de cristal con el puesto, el retrato y el nombre, las victorias y
   las partidas. Se desplaza si no cabe. */
[data-holo-id="Leaderboard.List"].ht-Collection\.Table {
  --holo-part-max-block-size: none;
  --holo-surface: transparent;
  --holo-control-bg: rgb(30 34 80 / 72%);
  --holo-border: var(--solaverse-edge);
  --holo-fg: var(--solaverse-text);
  --holo-table-fg: var(--solaverse-text);
  --holo-table-head: transparent;
  --holo-muted: var(--solaverse-text-soft);
  --holo-radius: 1.4rem;
  --holo-font-body: 1.7rem;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  color: var(--solaverse-text);
}

[data-holo-id="Leaderboard.List"].ht-Collection\.Table :is(thead th, thead th *) {
  color: var(--solaverse-text-soft);
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

[data-holo-id="Leaderboard.List"].ht-Collection\.Table tbody td {
  padding-block: 0.4rem;
  color: var(--solaverse-text);
}

[data-holo-id="Leaderboard.List"].ht-Collection\.Table .hr-Entity > .hr-Image {
  inline-size: 3.6rem;
  block-size: 3.6rem;
}

[data-holo-id="Leaderboard.List"].ht-Collection\.Table .hr-Entity .hr-Main * {
  font-weight: 400;
}

/* Follow como las ideales 51 y 52 (D183): dos paneles de cristal. A la
   izquierda las noticias en filas (imagen, fecha con su tipo, título, texto
   y «Read more») con desplazamiento propio; a la derecha «Join the
   community», una tarjeta ilustrada por comunidad con «Join». Con ?Post= la
   noticia entera, con «Back to news», compartir y otras noticias. */
:is([data-holo-id="Follow.Wall"], [data-holo-id="Follow.Read"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 2.25fr) 1.8rem minmax(0, 1fr);
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  block-size: 100%;
  min-block-size: 0;
}

[data-holo-id="Follow.Read"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 2.6fr) 1.8rem minmax(0, 1fr);
}

[data-holo-id="Follow.Card"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  block-size: 100%;
  min-block-size: 0;
}

:is([data-holo-id="Follow.News"], [data-holo-id="Follow.Side"], [data-holo-id="Follow.Article"], [data-holo-id="Follow.Aside"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  box-sizing: border-box;
  block-size: 100%;
  min-block-size: 0;
  padding: 2.2rem 2.4rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  backdrop-filter: var(--solaverse-blur);
}

[data-holo-id="Follow.Aside"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  block-size: auto;
  align-self: start;
}

[data-holo-id="Follow.Article"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  overflow-y: auto;
}

[data-holo-id="Follow.Header"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: none;
}

:is([data-holo-id="Follow.Title"], [data-holo-id="Follow.Side.Title"], [data-holo-id="Follow.Article.Title"]) .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  -webkit-text-stroke: 0.02em currentColor;
  text-transform: uppercase;
}

[data-holo-id="Follow.Side.Title"] .hr-Title.hr-Title.hr-Title {
  font-size: 2.4rem;
}

[data-holo-id="Follow.Subtitle"].ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-size: 1.6rem;
}

/* Las noticias: una fila por noticia, la imagen a la izquierda. */
:is([data-holo-id="Follow.Posts"], [data-holo-id="Follow.Feed"]).ht-Collection\.List[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  --holo-part-height: auto;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-inline-end: 0.6rem;

  & > .hr-Item,
  & > .hr-Item:first-child {
    display: grid;
    grid-column: auto;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 2.2rem;
    min-block-size: 12.6rem;
    padding: 0 2.2rem 0 0;
    overflow: hidden;
    border: 1px solid var(--solaverse-edge);
    border-radius: 1.6rem;
    background: rgb(255 255 255 / 3.5%);
  }

  & > .hr-Item:first-child {
    border-color: rgb(196 170 255 / 80%);
    box-shadow: inset 0 0 0 1px rgb(196 170 255 / 30%);
  }

  & > .hr-Item > .hr-Icon,
  & > .hr-Item:first-child > .hr-Icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: auto;
    clip-path: none;
    border-radius: 0;
  }

  & > .hr-Item > .hr-Icon :is(img, .hr-Image) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  & > .hr-Item > .hr-Main {
    grid-column: 2;
    padding: 1.4rem 0 0.4rem;
    gap: 0.6rem;
  }

  & .hr-Subtitle {
    order: -1;
    color: var(--solaverse-text-soft);
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  & .hr-Title.hr-Title {
    color: var(--solaverse-text);
    font-size: 2rem;
    font-weight: 600;
  }

  & .hr-Text.hr-Text {
    display: -webkit-box;
    overflow: hidden;
    color: var(--solaverse-text-soft);
    font-size: 1.5rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  & > .hr-Item > .hr-Value {
    grid-column: 2;
    justify-self: start;
    padding: 0 0 1.4rem;
    border: 0;
    background: transparent;
    color: #c9b8ff;
    font-size: 1.5rem;
    font-weight: 600;
  }

  & > .hr-Item > .hr-Value::after {
    content: "  →";
  }
}

/* Las comunidades: el dibujo arriba y, debajo, el icono de la red, su nombre
   y «Join» como botón de contorno. */
[data-holo-id="Follow.Communities"].ht-Collection\.List[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  --holo-part-height: auto;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;

  & > .hr-Item,
  & > .hr-Item:first-child {
    display: grid;
    grid-column: auto;
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1.2rem;
    padding: 0 1.4rem 1.2rem;
    overflow: hidden;
    border: 1px solid var(--solaverse-edge);
    border-radius: 1.6rem;
    background: rgb(255 255 255 / 3.5%);
  }

  & > .hr-Item > .hr-Icon {
    grid-column: 1 / -1;
    grid-row: 1;
    inline-size: calc(100% + 2.8rem);
    margin-inline: -1.4rem;
    margin-block-end: 1.2rem;
    aspect-ratio: 3 / 1;
    border-radius: 0;
    clip-path: none;
  }

  & > .hr-Item > .hr-Icon :is(img, .hr-Image) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  & > .hr-Item > .hr-Main {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  & .hr-Title.hr-Title {
    color: var(--solaverse-text);
    font-size: 1.7rem;
    font-weight: 600;
  }

  & .hr-Subtitle {
    order: 1;
    color: var(--solaverse-text-soft);
    font-size: 1.35rem;
    letter-spacing: 0;
    text-transform: none;
  }

  & > .hr-Item > .hr-Value {
    grid-column: 3;
    grid-row: 2;
    padding: 0.7rem 2.2rem;
    border: 1px solid var(--solaverse-edge-strong);
    border-radius: 999px;
    background: rgb(255 255 255 / 4%);
    color: var(--solaverse-text);
    font-size: 1.5rem;
    font-weight: 600;
  }
}

/* La noticia abierta. */
[data-holo-id="Follow.Back"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  align-self: flex-start;
  flex: none;
  gap: 1rem;
  min-block-size: 4rem;
  padding: 0 2rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  color: var(--solaverse-text);
  font-size: 1.5rem;
}

[data-holo-id="Follow.Article.Body"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

[data-holo-id="Follow.Article.Image"].ht-Content\.Image {
  --holo-part-max-block-size: none;
  inline-size: 100%;
  aspect-ratio: 3.8 / 1;
  overflow: hidden;
  border: 1px solid var(--solaverse-edge);
  border-radius: 1.6rem;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

:is([data-holo-id="Follow.Article.Meta"], [data-holo-id="Follow.Share.Title"], [data-holo-id="Follow.More.Title"]) {
  color: var(--solaverse-text-soft);
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

:is([data-holo-id="Follow.Share.Title"], [data-holo-id="Follow.More.Title"]) .hr-Title.hr-Title {
  color: var(--solaverse-text-soft);
  font-family: var(--solaverse-font-section);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

[data-holo-id="Follow.Article.Title"] .hr-Title.hr-Title.hr-Title {
  font-size: 3.2rem;
  letter-spacing: 0.16em;
}

[data-holo-id="Follow.Article.Lead"].ht-Content\.Text {
  max-inline-size: 72rem;
  color: #c4b2ff;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.45;
}

[data-holo-id="Follow.Article.Text"].ht-Content\.Markdown {
  max-inline-size: 72rem;
  color: var(--solaverse-text);
  font-size: 1.6rem;
  line-height: 1.6;

  & h3 {
    margin-block: 1.6rem 0.6rem;
    color: var(--solaverse-text);
    font-family: var(--solaverse-font-section);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
}

[data-holo-id="Follow.Share"].ht-Collection\.List[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-height: auto;
  display: flex;
  gap: 1.4rem;
  padding-block-end: 1.6rem;
  border-block-end: 1px solid var(--solaverse-edge);
}

[data-holo-id="Follow.Share"] > .hr-Item.hr-Item {
  display: grid;
  place-items: center;
  inline-size: 5rem;
  min-inline-size: 5rem;
  block-size: 5rem;
  padding: 0;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 50%;
  background: rgb(255 255 255 / 4%);
  color: var(--solaverse-text);

  & > .hr-Main {
    display: none;
  }
}

[data-holo-id="Follow.More"].ht-Collection\.List[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  --holo-part-height: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;

  & > .hr-Item,
  & > .hr-Item:first-child {
    grid-column: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }

  & > .hr-Item > .hr-Icon {
    aspect-ratio: 1.9 / 1;
    overflow: hidden;
    border-radius: 1.2rem;
  }

  & .hr-Title.hr-Title {
    color: var(--solaverse-text);
    font-size: 1.6rem;
    font-weight: 600;
  }

  & .hr-Subtitle {
    order: 1;
    color: var(--solaverse-text-soft);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* La entrada de cada destino (ideal `Menu/.About/Media/Ideal/Transition.webp`,
   paso 4 «Content arrives»): al abrir una página, su figura y su panel entran
   con la animación de entrada de Holo, la figura un poco antes. Sin
   movimiento con reduced-motion. */
:is([data-holo-id="Wallet.Dex.Chosen"], [data-holo-id="Collection.Show"], [data-holo-id="About.Left"], [data-holo-id="Realm.Hero"], [data-holo-id="Realm.Top"], [data-holo-id="Leaderboard.Podium"], [data-holo-id="Admin.Nav"])[data-holo-part="true"] {
  --holo-enter-x: -1.6rem;
  --holo-enter-y: 0;
  animation: holo-enter 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

:is([data-holo-id="Wallet.Dex.List"], [data-holo-id="Collection.Side"], [data-holo-id="About.Right"], [data-holo-id="Realm.Side"], [data-holo-id="Realm.Bottom"], [data-holo-id="Leaderboard.List"], [data-holo-id="Admin.Main"], [data-holo-id="Vote.Card"], [data-holo-id="Follow.Card"])[data-holo-part="true"] {
  --holo-enter-x: 0;
  --holo-enter-y: 1.2rem;
  animation: holo-enter 480ms cubic-bezier(0.2, 0.7, 0.2, 1) 90ms both;
}

@media (prefers-reduced-motion: reduce) {
  :is([data-holo-id="Wallet.Dex.Chosen"], [data-holo-id="Collection.Show"], [data-holo-id="About.Left"], [data-holo-id="Realm.Hero"], [data-holo-id="Realm.Top"], [data-holo-id="Leaderboard.Podium"], [data-holo-id="Admin.Nav"], [data-holo-id="Wallet.Dex.List"], [data-holo-id="Collection.Side"], [data-holo-id="About.Right"], [data-holo-id="Realm.Side"], [data-holo-id="Realm.Bottom"], [data-holo-id="Leaderboard.List"], [data-holo-id="Admin.Main"], [data-holo-id="Vote.Card"], [data-holo-id="Follow.Card"])[data-holo-part="true"] {
    animation: none;
  }
}

/* Ghost Coin (ideal `Ideal/44`, dibujos de `Ideal/45`; D156): un panel de
   cristal en el marco común con cuatro pestañas arriba y, debajo, sólo la de
   la pestaña elegida: su dibujo a la izquierda y su texto a la derecha. Las
   pestañas y su contenido viven en `Coin.Slot`, así que cambiar de pestaña
   sólo sustituye esa región y el panel no se vuelve a montar. Sin título ni
   saldo (están en la barra) ni cruz (la cierra el propio botón de la moneda). */
[data-holo-id="Coin.Panel"].ht-Layout\.Modal > .hr-Dialog {
  inline-size: var(--solaverse-frame-width);
  max-inline-size: none;
  padding: 2.4rem 3.2rem 3.2rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  box-shadow: none;
  backdrop-filter: var(--solaverse-blur);
}

[data-holo-id="Coin.Panel"].ht-Layout\.Modal > .hr-Dialog > .hr-Close {
  display: none;
}

/* Follow y la ficha de la cuenta van sin cruz, como sus ideales 43 y 40
   (Martín, 17-10): se sale por la barra o el menú. La puerta de conectar la
   conserva. */
:is([data-holo-id="Follow.Panel"], [data-holo-id="Wallet.Panel"]:has([data-holo-id="Wallet.Persona"])).ht-Layout\.Modal > .hr-Dialog > .hr-Close {
  display: none;
}

[data-holo-id="Coin.Card"].ht-Layout\.Stack[data-holo-part="true"],
[data-holo-id="Coin.Slot"].ht-Layout\.Slot {
  --holo-part-display: flex;
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  block-size: 100%;
  min-block-size: 0;
}

[data-holo-id="Coin.Tabs"].ht-Navigation\.Tabs {
  --holo-part-width: max-content;
  align-self: center;
  gap: 0.4rem;
  padding: 0.4rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 999px;
  background: rgb(20 24 64 / 35%);
}

[data-holo-id="Coin.Tabs"] [role="tab"] {
  min-block-size: 4.6rem;
  padding-inline: 3rem;
  border-radius: 999px;
  font-family: var(--solaverse-font-section);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

[data-holo-id="Coin.Tabs"] [role="tab"][aria-selected="true"] {
  background: var(--solaverse-selected);
  box-shadow: var(--solaverse-selected-glow);
  color: #ffffff;
}

[data-holo-id="Coin.Pages"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: grid;
  --holo-part-grid-template-rows: minmax(0, 1fr);
  --holo-part-max-block-size: none;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 auto;
  min-block-size: 0;
}

[data-holo-id^="Coin.Page."].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: grid;
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  --holo-part-gap: 4.8rem;
  --holo-part-grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  --holo-part-grid-template-rows: minmax(0, 1fr);
  /* Holo coloca los hijos de una fila en las pistas 1 y 3 (la 2 es el
     hueco) y mide esas pistas por su contenido: aquí se fijan. */
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) 4.8rem minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center;
  gap: 0 !important;
  block-size: 100%;
}

img[data-holo-id$=".Art"][data-holo-id^="Coin."] {
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  border-radius: var(--solaverse-radius-card);
  object-position: center;
}

[data-holo-id$=".Side"][data-holo-id^="Coin."].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-max-block-size: none;
  --holo-part-gap: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.8rem;
  padding-inline-end: 2.4rem;
}

/* Con la capa abierta, la píldora de la moneda se cambia por su gemela
   marcada (`Navbar.Coin.Close`, `Native: dismiss`), que la cierra: como las
   tres líneas del menú (D149). */
[data-holo-id="Navbar.Coin.Close"].ht-Control\.Trigger.hr-Trigger.hr-Trigger,
:root:has([data-holo-id="Coin.Panel"]) [data-holo-id="Navbar.Coin"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  display: none;
}

:root:has([data-holo-id="Coin.Panel"]) [data-holo-id="Navbar.Coin.Close"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  display: inline-flex;
}

[data-holo-id="Navbar.Coin.Close"].ht-Control\.Trigger.hr-Trigger {
  border-color: rgb(200 178 255 / 70%);
  background: rgb(195 178 255 / 16%);
  box-shadow: var(--solaverse-selected-glow);
}

[data-holo-id$=".Title"][data-holo-id^="Coin."] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: clamp(2.6rem, 2.4vw, 4.4rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-transform: uppercase;
}

[data-holo-id$=".Text"][data-holo-id^="Coin."].ht-Content\.Text {
  color: var(--solaverse-text);
  font-size: 2.1rem;
  line-height: 1.45;
}

[data-holo-id$=".Detail"][data-holo-id^="Coin."].ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-size: 1.6rem;
  line-height: 1.5;
}

[data-holo-id$=".Buy"][data-holo-id^="Coin."].ht-Control\.Trigger.hr-Trigger {
  --holo-part-width: auto;
  --holo-trigger-inline-size: auto;
  gap: 1.2rem;
  min-block-size: 5.6rem;
  margin-block-start: 1.2rem;
  padding-inline: 3.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
  font-size: 1.8rem;
  font-weight: 600;
}

[data-holo-id$=".Buy"][data-holo-id^="Coin."].hr-Trigger :is([data-holo-type], [data-holo-role]) {
  color: var(--solaverse-primary-text);
}

/* Medido sobre la ideal 44: el texto de cada pestaña empieza más a la
   derecha, dejando más sitio al dibujo. */
@media (min-width: 1500px) {
  [data-holo-id^="Coin."][data-holo-id$=".Side"].ht-Layout\.Stack[data-holo-part="true"] {
    margin-inline-start: 6rem;
  }
}

/* Ghost Coin como la ideal 44: pestañas anchas a lo largo del panel, el
   dibujo sin marco que se funde en el cristal, título grande y fino, textos
   mayores y el botón grande en mayúsculas espaciadas. La barra no se encoge
   en la columna de la página: encogida perdía su relleno y las pestañas se
   salían por abajo (más en Firefox). */
[data-holo-id="Coin.Tabs"].ht-Navigation\.Tabs.ht-Navigation\.Tabs {
  --holo-part-width: 90%;
  inline-size: 90%;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0.6rem;
  border-radius: 2.2rem;
  background: rgb(12 14 40 / 50%);
}

[data-holo-id="Coin.Tabs"] [role="tab"][role="tab"] {
  justify-content: center;
  border-radius: 2.6rem;
  min-block-size: clamp(4.4rem, 7.4dvh, 6.4rem);
  font-size: 2rem;
}

img[data-holo-id$=".Art"][data-holo-id^="Coin."][data-holo-id^="Coin."] {
  border-radius: 0;
  mask-image: linear-gradient(90deg, #000 72%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

[data-holo-id$=".Title"][data-holo-id^="Coin."] .hr-Title.hr-Title.hr-Title {
  font-size: clamp(2.6rem, min(3.1vw, 6.8dvh), 5.8rem);
  letter-spacing: 0.1em;
}

[data-holo-id$=".Text"][data-holo-id^="Coin."].ht-Content\.Text.ht-Content\.Text {
  font-size: clamp(1.6rem, 3.2dvh, 2.6rem);
}

[data-holo-id$=".Detail"][data-holo-id^="Coin."].ht-Content\.Text.ht-Content\.Text {
  font-size: clamp(1.4rem, 2.6dvh, 2.2rem);
}

[data-holo-id$=".Buy"][data-holo-id^="Coin."].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: 100%;
  --holo-trigger-inline-size: 100%;
  --holo-part-min-block-size: clamp(4.8rem, 8.4dvh, 8.4rem);
  justify-content: center;
  inline-size: min(52rem, 100%);
  min-block-size: clamp(4.8rem, 8.4dvh, 8.4rem);
  font-family: var(--solaverse-font-section);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  -webkit-text-stroke: 0.03em currentColor;
}

[data-holo-id$=".Buy"][data-holo-id^="Coin."].hr-Trigger .hr-Icon {
  font-size: 2.8rem;
}

[data-holo-id="Coin.Get.Soon"].ht-Content\.Text {
  margin-block-start: 1.2rem;
  padding: 1.2rem 2.4rem;
  border: 1px dashed var(--solaverse-edge-strong);
  border-radius: 999px;
  color: var(--solaverse-lilac);
  font-family: var(--solaverse-font-section);
  font-size: 1.6rem;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  [data-holo-id^="Coin.Page."].ht-Layout\.Stack[data-holo-part="true"] {
    grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr) !important;
  }
}

:is([data-holo-id="Navbar.Account.Avatar"], [data-holo-id="Navbar.Wallet.Avatar"]):is([data-holo-id="Navbar.Account.Avatar"], [data-holo-id="Navbar.Wallet.Avatar"]) {
  --holo-part-overflow: visible;
  inline-size: 4.6rem;
  block-size: 4.6rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:is([data-holo-id="Navbar.Account.Avatar"], [data-holo-id="Navbar.Wallet.Avatar"]) img[data-holo-role] {
  object-fit: contain;
  filter: drop-shadow(0 0.2rem 0.4rem rgb(0 0 0 / 35%));
}

/* La ficha de la persona (ideal `Player/Account/.About/Media/Ideal/Profile.webp`,
   la 40; D162): a la izquierda su Ghostie suelto, su nombre, su wallet y su
   puesto en el ciclo; a la derecha cuatro cifras, sus últimas partidas y su
   equipo, que lleva a la colección. Abajo, sólo en la tuya, la sesión de
   prueba, desconectar y, en la máquina del dueño, «Operator». */
[data-holo-id="Wallet.Card"].ht-Layout\.Stack[data-holo-part="true"]:has([data-holo-id="Wallet.Persona"]) {
  --holo-part-grid-template-rows: minmax(0, 1fr) 0 auto;
}

[data-holo-id="Wallet.Body"].ht-Layout\.Stack[data-holo-part="true"]:has([data-holo-id="Wallet.Persona"]) {
  padding: 2.4rem 2.4rem 1.2rem 2.4rem;
}

/* En pantallas estrechas el rótulo largo («Ghost coins staked») ocupa tres
   líneas en vez de cortarse. */
@media (max-width: 1500px) {
  [data-holo-id="Wallet.Stats"].ht-Collection\.List.hp-CardRows .hr-Subtitle {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

@media (max-height: 700px) {
  [data-holo-id="Wallet.Me"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
    justify-content: center;
    padding-block-start: 1.4rem;
  }
}

/* Los Ghosties de la colección, sueltos en baldosas. */
[data-holo-id="Collection.Grid"].ht-Collection\.List.hp-Posts {
  --holo-part-max-block-size: none;
  --holo-part-height: auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.2rem;
  flex: none;

  & > .hr-Item,
  & > .hr-Item:first-child {
    grid-column: auto;
    align-items: center;
    padding: 1rem 0.8rem 0.8rem;
    border-color: var(--solaverse-edge);
    border-radius: 1.6rem;
    background: rgb(255 255 255 / 4%);
  }

  & > .hr-Item[aria-current="true"] {
    border-color: rgb(196 170 255 / 85%);
    box-shadow: 0 0 2rem rgb(165 140 255 / 30%), inset 0 0 0 1px rgb(196 170 255 / 45%);
    background: rgb(165 140 255 / 10%);
  }

  & > .hr-Item > .hr-Icon,
  & > .hr-Item:first-child > .hr-Icon {
    aspect-ratio: 1;
    background: transparent;
  }

  & > .hr-Item > .hr-Icon :is(img, .hr-Image) {
    object-fit: contain;
  }

  & .hr-Main {
    align-items: center;
    padding: 0.4rem 0 0;
  }

  & .hr-Title {
    color: var(--solaverse-text);
    font-size: 1.6rem;
    font-weight: 600;
  }
}

/* La colección (ideal `Collection/.About/Media/Ideal/Trainer.webp`, la 41;
   D162): arriba su entrenador (retrato, nombre y cuántos Ghosties tiene), que
   lleva a su ficha; debajo el Ghostie elegido con su número en mayúsculas
   finas, sus rasgos y sus habilidades, y «Play with it»; a la derecha todos sus
   Ghosties sueltos, el elegido marcado. La de otra persona se ve igual, sin
   órdenes. */
[data-holo-id="Collection.Show"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-gap: 1.6rem;
  justify-content: flex-start;
}

[data-holo-id="Collection.Top"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-rows: auto;
  --holo-part-grid-template-columns: minmax(0, 0.76fr) 2.4rem minmax(0, 1fr);
  flex: 1 0 auto;
}

[data-holo-id="Collection.Show"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-overflow: auto;
  overflow-y: auto;
}

[data-holo-id="Collection.Portrait"].ht-Content\.Image.ht-Content\.Image {
  --holo-part-max-inline-size: min(34rem, 40vh);
  max-inline-size: min(34rem, 40vh);
  justify-self: center;
  padding-block-end: 3rem;
}

[data-holo-id="Collection.Info"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-rows: auto 1.2rem auto 2.7rem auto 0.8rem auto;
  --holo-part-gap: 0;
  row-gap: 0;
}

[data-holo-id="Collection.Side"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-overflow: auto;
}

[data-holo-id="Collection.Head"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  flex: none;
}

[data-holo-id="Collection.Trainer"].ht-Control\.Trigger.ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: 100%;
  --holo-trigger-inline-size: 100%;
  display: grid;
  grid-template-columns: 7.2rem max-content auto;
  align-items: center;
  justify-content: start;
  gap: 1.8rem;
  flex: none;
  min-block-size: 0;
  padding: 0 0 2rem;
  border: 0;
  border-block-end: 1px solid var(--solaverse-edge);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--solaverse-text);
  text-align: start;
}

[data-holo-id="Collection.Trainer.Face"].ht-Content\.Image {
  inline-size: 7.2rem;
  block-size: 7.2rem;
  border: 2px solid var(--solaverse-edge-strong);
  border-radius: 50%;
  object-fit: cover;
}

[data-holo-id="Collection.Trainer.Names"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-gap: 0.2rem;
  justify-items: start;
}

/* Como la ideal 41: «TRAINER · nombre» en una línea y debajo cuántos
   Ghosties tiene. */
[data-holo-id="Collection.Trainer.Names"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-display: grid;
  display: grid;
  --holo-part-grid-template-columns: max-content max-content;
  --holo-part-grid-template-rows: auto auto;
  grid-template-columns: max-content max-content;
  grid-template-rows: auto auto;
  column-gap: 1.2rem;
  align-items: baseline;
}

[data-holo-id="Collection.Trainer.Names"] > [data-holo-id="Collection.Trainer.Label"] {
  --holo-part-grid-column: 1;
  --holo-part-grid-row: 1;
  --holo-part-width: auto;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

[data-holo-id="Collection.Trainer.Label"].ht-Content\.Text::after {
  content: " ·";
}

[data-holo-id="Collection.Trainer.Names"] > [data-holo-id="Collection.Trainer.Name"] {
  --holo-part-grid-column: 2;
  --holo-part-grid-row: 1;
  --holo-part-width: auto;
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

[data-holo-id="Collection.Trainer.Names"] > [data-holo-id="Collection.Trainer.Count"] {
  --holo-part-grid-column: 1 / span 2;
  --holo-part-grid-row: 2;
  --holo-part-width: auto;
  grid-column: 1 / span 2;
  grid-row: 2;
  justify-self: start;
}

[data-holo-id="Collection.Trainer.Label"].ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-family: var(--solaverse-font-section);
  font-size: 1.4rem;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

[data-holo-id="Collection.Trainer.Name"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-size: 2.2rem;
  font-weight: 600;
}

[data-holo-id="Collection.Trainer.Count"].ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-size: 1.5rem;
}

[data-holo-id="Collection.Trainer"]:is(:hover, :focus-visible) [data-holo-id="Collection.Trainer.Name"] .hr-Title {
  color: var(--solaverse-mint);
}

[data-holo-id="Collection.Name"] .hr-Title.hr-Title.hr-Title {
  color: rgb(176 184 240);
  font-family: var(--solaverse-font-section);
  font-size: var(--solaverse-label-size);
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

[data-holo-id="Collection.Abilities.Title"].ht-Content\.Text.ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-family: var(--solaverse-font-section);
  font-size: 1.4rem;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

/* Abajo, el juego que mejor le encaja en una línea y «Play with it» grande;
   las órdenes del mundo van al lado, discretas. */
[data-holo-id="Collection.Bottom"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-flex-direction: column;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 1.2rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

[data-holo-id="Collection.Fit"].hr-Trigger.hr-Trigger.hr-Trigger.hr-Trigger.hr-Trigger {
  flex: none;
  justify-content: center;
  min-block-size: 0;
  font-size: 1.5rem;
}

[data-holo-id="Collection.Actions"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-flex-direction: row;
  --holo-part-width: 100%;
  inline-size: 100%;
  justify-content: center;
  align-items: center;
  margin-inline-start: 0;
  gap: 1.6rem;
}

[data-holo-id="Collection.Games"].ht-Control\.Trigger.hr-Trigger.hr-Trigger.hr-Trigger {
  --holo-part-min-block-size: 6.8rem;
  --holo-part-max-inline-size: min(100%, 38.6rem);
  --holo-part-width: auto;
  --holo-trigger-inline-size: auto;
  order: -1;
  justify-content: center;
  gap: 1.2rem;
  min-inline-size: min(100%, 38.6rem);
  border: 0;
  border-radius: 999px;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
  font-size: 2rem;
  font-weight: 600;
}

[data-holo-id="Collection.Games"].hr-Trigger :is([data-holo-type], [data-holo-role]) {
  color: var(--solaverse-primary-text);
}

:is([data-holo-id="Collection.Choose"], [data-holo-id="Collection.Spawn"]).ht-Control\.Trigger.hr-Trigger.hr-Trigger.hr-Trigger {
  --holo-part-min-block-size: 4.8rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 5%);
  color: var(--solaverse-text);
  font-size: 1.6rem;
}

:is([data-holo-id="Collection.Choose"], [data-holo-id="Collection.Spawn"]).hr-Trigger.hr-Trigger.hr-Trigger :is([data-holo-type], [data-holo-role])[data-holo-type][data-holo-type] {
  color: var(--solaverse-text);
}

[data-holo-id="Collection.Title"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

[data-holo-id="Collection.Count"].ht-Content\.Text {
  --holo-part-max-inline-size: none;
  --holo-part-width: max-content;
  flex: none;
  color: var(--solaverse-text-soft);
  font-family: var(--solaverse-font-section);
  font-size: 1.4rem;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Como la ideal 41: la ficha empieza arriba, a la altura de la figura; las
   tarjetas de habilidades son más bajas; la rejilla deja aire bajo su título
   y los números van en lila suave. */
[data-holo-id="Collection.Info"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  align-self: start;
  align-content: start;
}

[data-holo-id="Collection.Abilities"] > .hr-Item.hr-Item.hr-Item {
  padding: 1.2rem 1rem;
}

[data-holo-id="Collection.Grid"].ht-Collection\.List[data-holo-part="true"] {
  margin-block-start: 2.2rem;
}

[data-holo-id="Collection.Grid"] > .hr-Item:not([aria-current="true"]) .hr-Title.hr-Title {
  color: rgb(176 180 228);
  font-weight: 500;
}

/* La rejilla de la colección: cinco por fila, sin caja salvo el elegido. */
[data-holo-id="Collection.Grid"].ht-Collection\.List.hp-Posts.hp-Posts {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;

  & > .hr-Item:not([aria-current="true"]) {
    border-color: transparent;
    background: transparent;
  }

  & > .hr-Item:not([aria-current="true"]):is(:hover, :focus-visible) {
    border-color: var(--solaverse-edge);
    background: rgb(255 255 255 / 4%);
  }
}

/* El editor como su imagen ideal (`Realm/Studio/.About/Media/Ideal/Tree.webp`,
   la 46; D163): arriba el juego con su portada, su nombre (que es el selector
   de juegos) y su prototipo; a la izquierda el árbol del juego (Game, Scene con
   sus piezas y sus objetos, Rules…) y, debajo, el detalle o las propiedades de
   lo elegido; en el centro el lienzo con el estado del guardado, Play test y
   Publish al pie; a la derecha tu Ghostie asistente. Cristal con desenfoque
   fuerte y menos relleno. */
:is([data-holo-id="Studio.Side"], [data-holo-id="Studio.Agent"], [data-holo-id="Studio.Bar"]).ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  background: rgb(30 36 92 / 42%);
  backdrop-filter: blur(3.2rem) saturate(1.35);
  -webkit-backdrop-filter: blur(3.2rem) saturate(1.35);
}

[data-holo-id="Studio.Bar"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-gap: 2.4rem;
  gap: 2.4rem;
  min-block-size: 0;
  padding: 1.2rem 1.6rem;
}

[data-holo-id="Studio.Cover"].ht-Content\.Image[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-width: 20rem;
  inline-size: 20rem;
  block-size: 8.8rem;
  border-radius: 1.4rem;
  object-fit: cover;
}

[data-holo-id="Studio.Heading"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

/* El nombre del juego es el selector: grande, sin caja; la flecha abre los
   demás juegos. */
[data-holo-id="Studio.Game"] [data-holo-select-trigger][data-holo-select-trigger] {
  --holo-part-min-block-size: 0;
  min-inline-size: 0;
  min-block-size: 0;
  padding: 0.2rem 1.2rem 0.2rem 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger][data-holo-select-trigger]:is(:hover, :focus-visible) {
  border-color: var(--solaverse-edge);
  background: rgb(255 255 255 / 6%);
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger] > .hr-Icon {
  display: none;
}

[data-holo-id="Studio.Game"] [data-holo-select-trigger] .hr-Value.hr-Value {
  color: var(--solaverse-text);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

[data-holo-id="Studio.Prototype"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-min-block-size: 3.6rem;
  min-block-size: 3.6rem;
  padding: 0 1.2rem;
  border-color: var(--solaverse-edge);
  border-radius: 1rem;
  font-size: 1.4rem;
}

[data-holo-id="Studio.Side"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  padding: 1.2rem;
}

/* El árbol: filas sin caja con su icono; las secciones en mayúsculas finas;
   lo elegido en una píldora lila. */
[data-holo-id="Studio.Tree"].ht-Collection\.Tree {
  --holo-part-max-block-size: none;
  display: grid;
  gap: 0.2rem;
  padding: 0;
  border: 0;
  background: transparent;

  & .hr-Item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-block-size: 3.4rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 1rem;
    background: transparent;
    color: var(--solaverse-text-soft);
    text-align: start;
  }

  & .hr-Item:not([data-holo-tree-depth="0"]) {
    min-block-size: 2.8rem;
  }

  & .hr-Item[data-holo-tree-depth="1"] {
    padding-inline-start: 3.6rem;
  }

  & .hr-Item[data-holo-tree-depth="2"] {
    padding-inline-start: 6.4rem;
  }

  & .hr-Item:is(:hover, :focus-within) {
    background: rgb(255 255 255 / 6%);
  }

  & .hr-Item[aria-current="true"],
  & .hr-Item[aria-selected="true"] {
    background: rgb(150 120 255 / 42%);
    box-shadow: inset 0 0 0 1px rgb(196 170 255 / 55%);
    color: var(--solaverse-text);
  }

  & .hr-Main {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
  }

  & .hr-Title {
    color: inherit;
    font-size: 1.5rem;
    font-weight: 500;
  }

  /* Las secciones del juego, como en la ideal: mayúsculas pequeñas y firmes. */
  & .hr-Item[data-holo-tree-depth="0"] {
    color: var(--solaverse-text);
  }

  & .hr-Item[data-holo-tree-depth="0"] .hr-Title {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  & .hr-Item[data-holo-tree-depth="0"] .hr-Icon {
    color: var(--solaverse-text);
    font-size: 2.2rem;
  }

  & .hr-Icon {
    color: var(--solaverse-text-soft);
    font-size: 2rem;
  }

  & .hr-Disclosure {
    order: 9;
    margin-inline-start: auto;
    border: 0;
    background: transparent;
    color: var(--solaverse-text-soft);
  }
}

/* El árbol se desplaza si no cabe, sin cortar la última fila. */
[data-holo-id="Studio.Tree"].ht-Collection\.Tree.ht-Collection\.Tree {
  --holo-part-overflow: auto;
  --holo-part-clip-path: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 22%) transparent;
}

/* El lienzo va en su panel de cristal, como en la ideal: herramientas, mapa
   y pie dentro del mismo marco. */
[data-holo-id="Studio.Canvas"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  backdrop-filter: var(--solaverse-blur);
}

/* El asistente habla en un bocadillo melocotón con texto oscuro; su título
   va a la izquierda. */
[data-holo-id="Studio.Agent.Chat"] [data-holo-message-role="Assistant"] [data-holo-conversation="Message"] {
  border: 0;
  border-radius: 2rem;
  background: var(--solaverse-peach);
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-message-role="Assistant"] [data-holo-conversation="Message"] * {
  color: #2a2350;
}

/* Debajo del árbol, el detalle de lo elegido. */
[data-holo-id="Studio.Detail"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  margin-block-start: 1.2rem;
  padding: 1.6rem 0.4rem 0;
  border-block-start: 1px solid var(--solaverse-edge);
}

:is([data-holo-id="Studio.Detail.Title"], [data-holo-id="Studio.Assets.Title"]) .hr-Title.hr-Title {
  color: var(--solaverse-text-soft);
  font-family: var(--solaverse-font-section);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

/* Al pie del lienzo, el estado del guardado y las dos acciones. */
[data-holo-id="Studio.Foot"].ht-Layout\.Stack[data-holo-part="true"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 1.6rem max-content !important;
  align-items: center;
  flex: none;
  padding: 1.2rem 1.6rem;
}

[data-holo-id="Studio.Saved"].ht-Content\.Text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--solaverse-text-soft);
  font-size: 1.5rem;
}

[data-holo-id="Studio.Saved"].ht-Content\.Text::before {
  content: "";
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  background: var(--solaverse-mint);
  box-shadow: 0 0 0.8rem rgb(143 240 216 / 60%);
}

[data-holo-id="Studio.Foot.Actions"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex !important;
  gap: 1.2rem;
}

/* La primera vez: tu Ghostie artista y los tres pasos. */
[data-holo-id="Studio.First"].ht-Layout\.Modal > .hr-Dialog {
  inline-size: min(110rem, calc(100vw - 8rem));
  max-inline-size: none;
  padding: 4rem 4.8rem;
  border: 1px solid rgb(196 170 255 / 55%);
  border-radius: var(--solaverse-radius-panel);
  background: rgb(36 40 104 / 72%);
  backdrop-filter: blur(3.2rem) saturate(1.3);
}

[data-holo-id="Studio.First.Card"].ht-Layout\.Stack[data-holo-part="true"] {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) 4rem minmax(0, 1fr) !important;
  align-items: center;
}

[data-holo-id="Studio.First.Face"].ht-Content\.Image {
  inline-size: 100%;
  max-block-size: 40vh;
  object-fit: contain;
}

[data-holo-id="Studio.First.Info"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-gap: 2rem;
  gap: 2rem;
}

[data-holo-id="Studio.First.Title"] .hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

[data-holo-id="Studio.First.Steps"].ht-Collection\.List.hp-CardRows {
  & > .hr-Item {
    grid-template-columns: 4.4rem minmax(0, 1fr);
    border: 0;
    background: transparent;
  }

  & > .hr-Item > .hr-Icon {
    background: transparent;
    color: var(--solaverse-text);
    font-size: 3rem;
  }

  & .hr-Value {
    display: none;
  }

  & .hr-Title {
    color: var(--solaverse-text);
    font-size: 1.9rem;
    font-weight: 400;
  }
}

[data-holo-id="Studio.First.Start"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-min-block-size: 6.4rem;
  --holo-part-width: 100%;
  --holo-trigger-inline-size: 100%;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
  font-size: 2rem;
  font-weight: 600;
}

[data-holo-id="Studio.First.Start"].hr-Trigger :is([data-holo-type], [data-holo-role]) {
  color: var(--solaverse-primary-text);
  font-size: 2rem;
  font-weight: 600;
}

[data-holo-id="Studio.First.Explore"].ht-Control\.Trigger.ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  justify-self: center;
  align-self: center;
  min-block-size: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--solaverse-lilac);
  font-size: 1.6rem;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* About es una página, no una capa (D164): sustituye a la sección en la que
   estabas en vez de apilarse encima, como Vote o la colección. El libro llena
   el marco común y la imagen de cada capítulo se queda dentro de su página a
   cualquier tamaño. */
[data-holo-id="About.Panel"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-height: 100dvh;
  --holo-part-display: grid;
  --holo-part-grid-template-rows: minmax(0, 1fr);
  --holo-part-max-block-size: none;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  block-size: 100dvh;
  inline-size: 100%;
  padding: var(--solaverse-top) calc(var(--solaverse-side) + 6.4rem) var(--solaverse-gap);
  color: var(--solaverse-text);
}

[data-holo-id="About.Card"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  block-size: 100%;
  min-block-size: 0;
}

[data-holo-id="About.Left"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

[data-holo-id="About.Image"].ht-Content\.Image.ht-Content\.Image {
  --holo-part-height: auto;
  --holo-part-max-block-size: 100%;
  flex: 1 1 0;
  min-block-size: 0;
  block-size: auto;
  max-block-size: 100%;
  object-fit: cover;
}

/* En pantallas estrechas el libro se cierra en una sola columna: la imagen
   arriba, más baja, y el texto debajo. */
@media (max-width: 900px) {
  [data-holo-id="About.Body"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
    --holo-part-grid-template-columns: minmax(0, 1fr);
    --holo-part-grid-template-rows: 22rem 0 minmax(0, 1fr);
  }

  [data-holo-id="About.Panel"].ht-Layout\.Stack[data-holo-part="true"] {
    padding-inline: var(--solaverse-gap);
  }
}

/* ------------------------------------------------------------------------
   Editor (ideal 46, Martín 16-10): los formularios del detalle como las
   propiedades de la ideal, con la etiqueta a la izquierda y el campo compacto
   de cristal a la derecha, sin icono ni asterisco; y el selector de juegos en
   el cristal oscuro de Solaverse, con la imagen de cada juego grande y su
   familia o estado debajo.
   ------------------------------------------------------------------------ */
:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Stack.hr-Stack {
  display: grid;
  gap: 0.8rem;
  padding: 0;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Field:not(.ht-Control\.Select) {
  display: grid;
  grid-template-columns: 9.6rem minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.4rem;
  margin: 0;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Field:not(.ht-Control\.Select) > .hr-Label {
  grid-area: auto;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Field:not(.ht-Control\.Select) > :is(input, textarea, select, button, .hr-Control, .hr-Range, .hr-Switch, [data-holo-field-editor], .ht-Control\.Select) {
  grid-area: auto;
  grid-column: 2;
  grid-row: 1;
  inline-size: 100%;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Field:not(.ht-Control\.Select) > .hr-Label :is(.hr-Icon, .hr-Required) {
  display: none;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Field:not(.ht-Control\.Select) > .hr-Label .hr-Text.hr-Text {
  color: var(--studio-soft, rgb(205 210 240 / 72%));
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) :is(input.hr-Input:not([type="range"], [type="checkbox"]), textarea.hr-Input, button.hr-Control)[data-holo-role] {
  box-sizing: border-box;
  min-block-size: 3.6rem;
  block-size: 3.6rem;
  padding: 0 1.1rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 0.9rem;
  background: rgb(255 255 255 / 5%);
  color: var(--studio-ink, rgb(240 244 255));
  font-size: 1.45rem;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) [data-holo-field] .hr-Range.hr-Range {
  grid-template-columns: 5.6rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.8rem;
  min-inline-size: 0;
}

/* En el lateral el deslizador no cabe con sus límites a los lados: el número
   en su caja y la barra en el resto (los límites siguen en el esquema). */
:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Range > :is(.hr-Minimum, .hr-Maximum) {
  display: none;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Range.hr-Range > input[type="number"][data-holo-role] {
  inline-size: 100%;
  padding-inline: 0.6rem;
  text-align: center;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Range.hr-Range > input[type="range"][data-holo-role] {
  inline-size: 100%;
  min-inline-size: 0;
}

/* El valor elegido de un desplegable, con la tinta del campo (no la oscura
   de Holo, que no se lee sobre el cristal). */
:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .ht-Control\.Select .hr-Control :is(.hr-Title, .hr-Value)[data-holo-role] {
  color: var(--studio-ink, rgb(240 244 255));
  -webkit-text-fill-color: currentColor;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) textarea.hr-Input[data-holo-role] {
  inline-size: 100%;
  block-size: 7.2rem;
  padding-block: 0.8rem;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Field:not(.ht-Control\.Select) > :is(.hr-Error, .hr-Hint, .hr-Range) {
  grid-column: 2;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Toolbar.hr-Toolbar {
  justify-content: flex-end;
  margin-block-start: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
}

:is([data-holo-id="Studio.Piece.Editor"], [data-holo-id="Studio.Editor"]) .hr-Toolbar button[type="submit"].hr-Button {
  min-block-size: 3.8rem;
  padding: 0 2.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
  font-size: 1.45rem;
  font-weight: 600;
}

/* El tipo y el papel del objeto elegido, en una línea bajo el título. */
[data-holo-id="Studio.Detail.Text"].ht-Content\.Markdown p:only-child {
  margin: 0;
  color: var(--studio-soft, rgb(205 210 240 / 72%));
  font-size: 1.4rem;
}

/* El selector de juegos. */
/* Holo coloca la lista con estilo en línea, del ancho del botón y 240 px de
   alto; aquí es más ancha y alta para que se vean las imágenes. */
[data-holo-id="Studio.Game"] .hr-Dropdown.hr-Dropdown {
  width: 40rem !important;
  min-width: 40rem !important;
  max-height: min(64dvh, 58rem) !important;
  --holo-overlay-max-block-size: min(64dvh, 58rem);
  overflow-y: auto;
  padding: 0.8rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 1.8rem;
  background: rgb(26 30 74 / 94%);
  box-shadow: 0 2.4rem 6rem rgb(4 6 28 / 55%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: var(--solaverse-text);
}

[data-holo-id="Studio.Game"] .hr-Options.hr-Options {
  display: grid;
  gap: 0.4rem;
  max-height: min(62dvh, 56rem) !important;
  overflow-y: auto;
}

[data-holo-id="Studio.Game"] .hr-Option.hr-Option {
  display: grid;
  grid-template-columns: 11.2rem minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  min-block-size: 0;
  padding: 0.6rem;
  border: 1px solid transparent;
  border-radius: 1.2rem;
  background: transparent;
  color: var(--solaverse-text);
  text-align: start;
}

[data-holo-id="Studio.Game"] .hr-Option.hr-Option:is(:hover, :focus-visible) {
  background: rgb(195 178 255 / 12%);
}

[data-holo-id="Studio.Game"] .hr-Option.hr-Option:is([aria-selected="true"], [data-holo-selected="true"]) {
  border-color: rgb(195 178 255 / 55%);
  background: rgb(195 178 255 / 16%);
}

[data-holo-id="Studio.Game"] .hr-Option > .hr-Icon.hr-Icon {
  display: grid;
  place-items: center;
  inline-size: 11.2rem;
  block-size: 6.3rem;
  overflow: hidden;
  border-radius: 0.9rem;
  background: rgb(255 255 255 / 6%);
  color: var(--solaverse-lilac);
  font-size: 2.4rem;
}

[data-holo-id="Studio.Game"] .hr-Option > .hr-Icon img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

[data-holo-id="Studio.Game"] .hr-Option .hr-Title :is(.hr-Value, .hr-Text) {
  color: var(--solaverse-text);
  font-size: 1.6rem;
  font-weight: 600;
}

[data-holo-id="Studio.Game"] .hr-Option .hr-Main > small.hr-Text {
  color: var(--solaverse-text-soft);
  font-size: 1.3rem;
}

/* En el botón del selector sólo el nombre: la familia o el estado van en la
   lista (y el prototipo, en la ficha de debajo). */
[data-holo-id="Studio.Game"] [data-holo-select-trigger] .hr-Main > small.hr-Text {
  display: none;
}

/* Rules: el editor de cada campo (con su botón de deshacer) en la columna del
   valor; un grupo de ajustes (p. ej. Shot) ocupa el ancho, con su nombre como
   rótulo y sus campos en la misma rejilla. */
[data-holo-id="Studio.Editor"] [data-holo-field-editor] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-inline-size: 0;
}

[data-holo-id="Studio.Editor"] [data-holo-field-editor] > :first-child {
  flex: 1 1 auto;
  min-inline-size: 0;
}

[data-holo-id="Studio.Editor"] .hr-Field.hr-Field:has([data-holo-structure-kind="Object"]) {
  grid-template-columns: minmax(0, 1fr);
}

[data-holo-id="Studio.Editor"] .hr-Field.hr-Field:has([data-holo-structure-kind="Object"]) > .hr-Label {
  display: none;
}

[data-holo-id="Studio.Editor"] .hr-Field:has([data-holo-structure-kind="Object"]) > [data-holo-field-editor] {
  grid-column: 1;
}

[data-holo-id="Studio.Editor"] details[data-holo-structure-kind="Object"] > summary {
  margin-block: 0.6rem 0.8rem;
  color: var(--studio-soft, rgb(205 210 240 / 72%));
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  list-style: none;
}

[data-holo-id="Studio.Editor"] details[data-holo-structure-kind="Object"] > summary .hr-IconVisual {
  display: none;
}

[data-holo-id="Studio.Editor"] details[data-holo-structure-kind="Object"] > .hr-Field[role="group"] {
  display: grid;
  grid-template-columns: 9.6rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  margin-block-end: 0.8rem;
}

[data-holo-id="Studio.Editor"] details[data-holo-structure-kind="Object"] > .hr-Field[role="group"] .hr-Label {
  color: var(--studio-soft, rgb(205 210 240 / 72%));
  font-size: 1.4rem;
}

[data-holo-id="Studio.Editor"] :is(details input, .hr-Range input.hr-Input):not([type="hidden"], [type="range"]) {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 3.6rem;
  padding: 0 1.1rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 0.9rem;
  background: rgb(255 255 255 / 5%);
  color: var(--studio-ink, rgb(240 244 255));
  font-size: 1.45rem;
}

[data-holo-id="Studio.Editor"] .hr-Range.hr-Range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  color: var(--studio-soft, rgb(205 210 240 / 72%));
  font-size: 1.2rem;
}

[data-holo-id="Studio.Editor"] [data-holo-field-actions] button {
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--studio-soft, rgb(205 210 240 / 72%));
}

/* La barra izquierda: el árbol entero a la vista, con su alto natural y filas
   más juntas, como la ideal 46; el detalle ocupa el resto y se desplaza. */
[data-holo-id="Studio.Drill"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-rows: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

[data-holo-id="Studio.Tree"].ht-Collection\.Tree.ht-Collection\.Tree.ht-Collection\.Tree {
  --holo-part-max-block-size: min(31rem, 38dvh);
  max-block-size: min(31rem, 38dvh);
}

[data-holo-id="Studio.Tree"].ht-Collection\.Tree .hr-Item.hr-Item {
  min-block-size: 3.1rem;
  padding-block: 0.2rem;
}

[data-holo-id="Studio.Detail"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-overflow: auto;
  overflow-y: auto;
  min-block-size: 0;
}

/* Los campos de un grupo de Rules, sin icono ni asterisco, como los demás. */
[data-holo-id="Studio.Editor"] details[data-holo-structure-kind="Object"] > .hr-Field :is(.hr-Icon, .hr-IconVisual, .hr-Required, small) {
  display: none;
}

[data-holo-id="Studio.Editor"] details[data-holo-structure-kind="Object"] > .hr-Field .hr-Label,
[data-holo-id="Studio.Editor"] details[data-holo-structure-kind="Object"] > .hr-Field .hr-Label * {
  font-weight: 400;
}

[data-holo-id="Studio.Editor"] details input:not([type="hidden"], [type="range"]) {
  min-block-size: 0;
}

/* El detalle, apretado como las propiedades de la ideal 46. */
[data-holo-id="Studio.Detail"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-gap: 0.8rem;
  gap: 0.8rem;
  align-content: start;
}

[data-holo-id="Studio.Detail"] > [data-holo-part="true"] {
  --holo-part-min-block-size: 0;
  margin-block: 0;
}

/* Martín, 16-10: detrás de los paneles del editor, un desenfoque fuerte para
   que no se distingan las plantas del cielo. */
:is([data-holo-id="Studio.Bar"], [data-holo-id="Studio.Side"], [data-holo-id="Studio.Canvas"], [data-holo-id="Studio.Agent"]).ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  background: rgb(30 34 84 / 74%);
  backdrop-filter: blur(40px) saturate(1.1);
  -webkit-backdrop-filter: blur(40px) saturate(1.1);
}

/* La bienvenida del editor como la ideal 39 (`Ideal/First.webp`): el editor
   detrás muy desenfocado, la tarjeta de cristal más pequeña, el Ghostie a la
   izquierda y los tres pasos con su número en un círculo lila; sin cruz (se
   sale con «Explore the editor first»). */
[data-holo-id="Studio.First"].ht-Layout\.Modal.hr-Backdrop {
  background: rgb(14 16 48 / 46%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-holo-id="Studio.First"].ht-Layout\.Modal > .hr-Dialog.hr-Dialog {
  inline-size: min(100rem, 66vw);
  max-inline-size: min(100rem, 66vw);
}

[data-holo-id="Studio.First"] [data-holo-modal-close] {
  display: none;
}

[data-holo-id="Studio.First.Face"].ht-Content\.Image.ht-Content\.Image {
  --holo-part-max-block-size: min(34rem, 42dvh);
  max-block-size: min(34rem, 42dvh);
  inline-size: auto;
  object-fit: contain;
}

[data-holo-id="Studio.First.Steps"].hp-CardRows > .hr-Item.hr-Item {
  display: grid;
  grid-template-columns: 3.4rem 4.2rem minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
}

[data-holo-id="Studio.First.Steps"].hp-CardRows > .hr-Item > .hr-Value.hr-Value {
  display: grid;
  order: -1;
  place-items: center;
  inline-size: 3.4rem;
  block-size: 3.4rem;
  border-radius: 50%;
  background: rgb(185 160 255 / 85%);
  color: #221c48;
  font-size: 1.5rem;
}

[data-holo-id="Studio.First.Steps"] > .hr-Item > .hr-Value * {
  color: inherit;
  font-weight: 600;
}

[data-holo-id="Studio.First.Steps"].hp-CardRows > .hr-Item.hr-Item > * {
  grid-row: 1;
  grid-area: auto;
  min-inline-size: 0;
}

[data-holo-id="Studio.First.Steps"].hp-CardRows > .hr-Item > .hr-Value.hr-Value.hr-Value {
  grid-column: 1;
  grid-row: 1;
}

[data-holo-id="Studio.First.Steps"].hp-CardRows > .hr-Item > .hr-Icon.hr-Icon {
  grid-column: 2;
  grid-row: 1;
}

[data-holo-id="Studio.First.Steps"].hp-CardRows > .hr-Item > .hr-Main.hr-Main {
  grid-column: 3;
  grid-row: 1;
}

[data-holo-id="Studio.First.Steps"] .hr-Main .hr-Title.hr-Title {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

[data-holo-id="Studio.First.Title"] .hr-Title.hr-Title.hr-Title {
  font-size: clamp(2.2rem, 1.6vw, 3rem);
  letter-spacing: 0.16em;
  white-space: nowrap;
}

/* El estilo de juego con su icono propio (`.About/Media/Style/<Prototipo>.svg`). */
[data-holo-id="Studio.Prototype"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-display: inline-flex;
  --holo-part-gap: 0.9rem;
  display: inline-flex;
  justify-content: flex-start;
  inline-size: max-content;
  gap: 0.9rem;
  padding: 0 1.6rem 0 1.1rem;
}

[data-holo-id="Studio.Prototype.Icon"].ht-Content\.Image {
  --holo-part-width: 2.6rem;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  object-fit: contain;
}

[data-holo-id="Studio.Prototype.Text"].ht-Content\.Text {
  --holo-part-width: max-content;
  inline-size: max-content;
  text-align: start;
  color: var(--studio-ink, rgb(240 244 255));
  font-size: 1.5rem;
  font-weight: 500;
}

/* El Ghostie asistente como la ideal 46: sólo el último intercambio (lo que
   le pediste y lo que contesta), en grande, y debajo sus sugerencias como
   píldoras de contorno; el historial anterior no se pinta aquí. */
[data-holo-id="Studio.Agent.Chat"] [data-holo-conversation="History"] > [data-holo-message-role]:nth-last-child(n+3) {
  display: none;
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-conversation="Reading"] {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  overflow-y: auto;
  scrollbar-width: none;
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-conversation="History"] {
  flex: none;
  block-size: auto;
  overflow: visible;
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-message-role="Assistant"] [data-holo-conversation="Message"] .hr-Markdown {
  font-size: 1.7rem;
  line-height: 1.4;
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-conversation="Suggestions"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-conversation="Suggestions"] > button {
  min-block-size: 4.2rem;
  padding: 0 2rem;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  color: var(--studio-ink, rgb(240 244 255));
  font-size: 1.5rem;
  text-align: start;
}

[data-holo-id="Studio.Agent.Chat"] [data-holo-conversation="Suggestions"] > button:is(:hover, :focus-visible) {
  border-color: rgb(195 178 255 / 60%);
  background: rgb(195 178 255 / 12%);
}

/* ------------------------------------------------------------------------
   El detalle de un juego como la ideal 54 (D179): arriba la galería ancha
   (la imagen en proporción 3:1 y sus miniaturas) y la ficha; abajo, a todo
   el ancho, sólo «How to play» en pasos numerados, cada uno con su título,
   su texto y el dibujo que declara el juego.
   ------------------------------------------------------------------------ */
[data-holo-id="Realm.Top"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1.45fr) 2.4rem minmax(0, 1fr);
}

[data-holo-id="Realm.Gallery"].ht-Collection\.List.ht-Collection\.List {
  grid-template-rows: 28.8rem 9.8rem;
}

[data-holo-id="Realm.Bottom"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1fr);
}

[data-holo-id="Realm.How"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  padding: 1.7rem 2.6rem 1.4rem;
  gap: 0.6rem;
}

[data-holo-id="Realm.How.Steps"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1fr) 2.4rem minmax(0, 1fr) 2.4rem minmax(0, 1fr) 2.4rem minmax(0, 1fr);
}

/* Cada paso: el número, su título con su texto y el dibujo. Holo coloca los
   hijos en pistas alternas (contenido, hueco, contenido). */
[data-holo-id="Realm.How.Steps"] > .ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-grid-template-columns: 3.4rem 1.2rem minmax(0, 1fr) 1.2rem minmax(0, 1.05fr);
  align-items: center;
  position: relative;
}

/* Los puntos que unen un paso con el siguiente. */
[data-holo-id="Realm.How.Steps"] > .ht-Layout\.Stack[data-holo-part="true"]:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: -2.1rem;
  inset-block-start: 45%;
  inline-size: 1.8rem;
  border-block-start: 0.2rem dotted rgb(196 186 255 / 45%);
}

[data-holo-id="Realm.How.Steps"] > .ht-Layout\.Stack > .ht-Content\.Text:first-child {
  display: grid;
  place-items: center;
  inline-size: 3.4rem;
  block-size: 3.4rem;
  align-self: start;
  margin-block-start: 0.6rem;
  border-radius: 50%;
  background: linear-gradient(160deg, #cfc4ff, #a996f4);
  color: #1d1f4f;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}

[data-holo-id="Realm.How.Steps"] > .ht-Layout\.Stack > .ht-Layout\.Stack {
  --holo-part-grid-template-columns: minmax(0, 1fr);
  --holo-part-grid-template-rows: max-content 0.6rem max-content;
  align-self: start;
  margin-block-start: 0.9rem;
}

[data-holo-id="Realm.How.Steps"] .ht-Content\.Title .hr-Title {
  color: #d9d2ff;
  font-family: var(--solaverse-font-section);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

[data-holo-id="Realm.How.Steps"] > .ht-Layout\.Stack > .ht-Layout\.Stack > .ht-Content\.Text {
  color: rgb(222 226 255 / 82%);
  font-size: 1.3rem;
  line-height: 1.45;
}

[data-holo-id="Realm.How.Steps"] .ht-Content\.Image {
  inline-size: 100%;
  block-size: 11.6rem;
}

[data-holo-id="Realm.How.Steps"] .ht-Content\.Image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.4rem 1.2rem rgb(20 16 60 / 45%));
}

/* Medidas de la ideal 54 a 1239 × 593: las miniaturas más altas, las flechas
   en medio de la imagen, más aire antes de «How to play» y los dibujos más
   grandes que su caja, como en la ideal. */
[data-holo-id="Realm.Gallery"] > .hr-CarouselPagination > button[data-holo-carousel-index][data-holo-carousel-index] {
  aspect-ratio: 2.15 / 1;
}

[data-holo-id="Realm.Gallery"] > :is(.hr-CarouselPrevious, .hr-CarouselNext)[data-holo-role] {
  inset-block-start: 14.4rem;
}

[data-holo-id="Realm.Sheet.Main"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  gap: 2.4rem;
  --holo-part-gap: 2.4rem;
}

[data-holo-id="Realm.How.Steps"] .ht-Content\.Image.ht-Content\.Image {
  block-size: 13.4rem;
  margin-block: -1.2rem -0.8rem;
  --holo-part-clip-path: none;
  --holo-part-contain: none;
  --holo-part-max-block-size: none;
}

/* El cartel en 3:1 enseña su parte baja, donde están las figuras. */
[data-holo-id="Realm.Gallery"] > .hr-CarouselTrack > .hr-Item > .hr-Preview img.hr-Image.hr-Image.hr-Image {
  object-position: 50% 78%;
}

/* En pantallas bajas la ficha se aprieta un poco para que «How to play»
   quepa entero aunque la partida en vivo ocupe tres líneas. */
@media (max-height: 700px) {
  [data-holo-id="Realm.Info"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
    --holo-part-gap: 1rem;
    gap: 1rem;
  }

  :is([data-holo-id="Realm.Join"], [data-holo-id="Realm.Practice"]).ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
    padding-block: 1.4rem;
  }

  :is([data-holo-id="Realm.Join.Text"], [data-holo-id="Realm.Practice.Text"]).ht-Content\.Text.ht-Content\.Text {
    line-height: 1.4;
  }
}

/* Vote como la ideal 56: la franja tiene un punto por ronda, sean las que
   sean (una columna automática por punto), y cada fila enseña su parte con
   el porcentaje junto a la barra y lo apostado debajo. */
[data-holo-id="Vote.Now.Rounds"].ht-Collection\.List.ht-Collection\.List.ht-Collection\.List {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 2.2rem;
}

[data-holo-id="Vote.Games.List"] .hr-Progress.hr-Progress.hr-Progress {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.4rem;
  row-gap: 0.5rem;
  align-items: center;
}

[data-holo-id="Vote.Games.List"] .hr-Progress > .hr-Label.hr-Label {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--solaverse-text-faint);
  font-size: 1.3rem;
}

[data-holo-id="Vote.Games.List"] .hr-Progress > .hr-Track.hr-Track {
  grid-column: 1;
  grid-row: 1;
}

[data-holo-id="Vote.Games.List"] .hr-Progress > .hr-Value.hr-Value.hr-Value {
  grid-column: 2;
  grid-row: 1;
}

/* La columna del estado mide lo mismo en todas las filas («Now playing» es
   más ancho que «Played»), así las barras quedan en columna. */
[data-holo-id="Vote.Games.List"] > .hr-Item.hr-Item.hr-Item {
  grid-template-columns: 17rem 4.4rem minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, 1fr) 12rem;
}

/* El Leaderboard cabe en la ventana real (1239 × 593), como la ideal 42:
   la cabecera y el podio miden lo que necesitan y sólo la tabla se
   desplaza; el podio sube junto al título (el primero queda a su lado) y la
   frase se estrecha a su izquierda. */
[data-holo-id="Leaderboard.Head"][data-holo-part="true"],
[data-holo-id="Leaderboard.Podium"][data-holo-part="true"] { flex: none; }
[data-holo-id="Leaderboard.Title"][data-holo-part="true"],
[data-holo-id="Leaderboard.Names"][data-holo-part="true"],
[data-holo-id="Leaderboard.Head"][data-holo-part="true"] { --holo-part-clip-path: none; --holo-part-contain: none; --holo-part-max-block-size: none; overflow: visible; }
[data-holo-id="Leaderboard.Podium"].ht-Collection\.List.ht-Collection\.List { margin-block-start: -9rem; }
[data-holo-id="Leaderboard.Note"].ht-Content\.Text.ht-Content\.Text { --holo-part-max-inline-size: 27rem; max-inline-size: 27rem; }

/* La noticia abierta como la ideal 52: el texto y su columna, centrados y
   más estrechos que el muro; la imagen en franja ancha; los textos con su
   alto (sin recorte) y otras noticias en miniatura. */
[data-holo-id="Follow.Read"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-grid-template-columns: minmax(0, 1fr) 1.8rem 23rem;
  --holo-part-max-inline-size: 112rem;
  max-inline-size: 112rem;
  margin-inline: auto;
}

[data-holo-id="Follow.Article.Image"].ht-Content\.Image.ht-Content\.Image {
  --holo-part-height: 18rem;
  block-size: 18rem;
  aspect-ratio: auto;
  flex: none;
}

:is([data-holo-id="Follow.Article.Meta"], [data-holo-id="Follow.Article.Title"], [data-holo-id="Follow.Article.Lead"], [data-holo-id="Follow.Article.Text"], [data-holo-id="Follow.Article.Body"])[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  --holo-part-clip-path: none;
  --holo-part-contain: none;
  flex: none;
  overflow: visible;
}

[data-holo-id="Follow.More"].ht-Collection\.List[data-holo-part="true"] > .hr-Item > .hr-Icon.hr-Icon {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1.9 / 1;
}

[data-holo-id="Follow.More"] .hr-Title.hr-Title.hr-Title {
  font-size: 1.5rem;
}

/* ------------------------------------------------------------------------
   Create como la ideal 50 (D184): sin franja arriba. El lateral izquierdo
   lleva primero la ficha del juego (miniatura, nombre, prototipo) y debajo
   el árbol y sus propiedades; «Play test» y «Publish» van en la franja de
   herramientas del lienzo, a su derecha; el asistente es más estrecho y el
   lienzo gana ese sitio (las columnas, 38/104/31, son de la rejilla).
   ------------------------------------------------------------------------ */
[data-holo-id="Studio.Side"] [data-holo-id="Studio.Bar"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-display: grid;
  --holo-part-grid-template-columns: 8.4rem 1.2rem minmax(0, 1fr);
  display: grid;
  align-items: center;
  flex: none;
  margin: 0 0 1.4rem;
  padding: 0 0 1.4rem;
  border: 0;
  border-block-end: 1px solid var(--solaverse-edge);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

[data-holo-id="Studio.Side"] [data-holo-id="Studio.Cover"].ht-Content\.Image[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-width: 8.4rem;
  --holo-part-height: 6.4rem;
  inline-size: 8.4rem;
  block-size: 6.4rem;
  border-radius: 1rem;
}

/* Con la barra contraída, la portada es un sello cuadrado que cabe en la
   franja. */
[data-holo-id="Studio.Body"][data-holo-navigation="Collapsed"] [data-holo-id="Studio.Side"] [data-holo-id="Studio.Cover"].ht-Content\.Image[data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-width: 4.8rem;
  --holo-part-height: 4.8rem;
  inline-size: 4.8rem;
  block-size: 4.8rem;
  align-self: center;
}

[data-holo-id="Studio.Side"] [data-holo-id="Studio.Heading"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  min-inline-size: 0;
}

[data-holo-id="Studio.Side"] [data-holo-id="Studio.Game"] :is(.hr-Trigger, button, .hr-Value) {
  font-size: 1.9rem;
  max-inline-size: 100%;
}

[data-holo-id="Studio.Side"] [data-holo-id="Studio.Prototype"][data-holo-part="true"] {
  font-size: 1.3rem;
}

/* Los botones de probar y publicar, sobre la franja de herramientas del
   lienzo (que el servidor del juego pinta a todo el ancho arriba). */
[data-holo-id="Studio.Canvas"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  position: relative;
}

[data-holo-id="Studio.Foot"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-position: static;
  --holo-part-contain: none;
  position: static;
  contain: none;
  padding: 0;
}

[data-holo-id="Studio.Foot.Actions"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-position: absolute;
  --holo-part-inset: 2.4rem 2.4rem auto auto;
  position: absolute;
  inset: 2.4rem 2.4rem auto auto;
  z-index: 2;
  gap: 0.8rem;
}

[data-holo-id="Studio.Saved"].ht-Content\.Text.ht-Content\.Text {
  display: none;
}

[data-holo-id="Studio.Foot"] :is([data-holo-id="Studio.Play"], [data-holo-id="Studio.Test"], [data-holo-id="Studio.Publish"], [data-holo-id="Studio.Publish.Idle"]).hr-Trigger.hr-Trigger {
  min-block-size: 4.6rem;
  padding: 0 1.6rem;
  font-size: 1.4rem;
}

[data-holo-id="Studio.Foot"] :is([data-holo-id="Studio.Play"], [data-holo-id="Studio.Test"], [data-holo-id="Studio.Publish"], [data-holo-id="Studio.Publish.Idle"]).hr-Trigger.hr-Trigger.hr-Trigger {
  min-block-size: 4.2rem;
  padding: 0 1.1rem;
  gap: 0.6rem;
  font-size: 1.3rem;
}

/* Arriba a la derecha del lienzo, dentro del hueco que deja su barra de
   herramientas (`End` del lienzo: 200px más su margen). */
[data-holo-id="Studio.Foot.Actions"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-inset: 2.6rem 1.4rem auto auto;
  inset: 2.6rem 1.4rem auto auto;
  gap: 0.4rem;
}

/* Con la barra de vistas encima, los botones bajan debajo de ella. */
[data-holo-id="Studio.Canvas"]:has([data-holo-id="Studio.Views"]) [data-holo-id="Studio.Foot.Actions"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-inset: calc(var(--studio-views) + 2.6rem) 1.4rem auto auto;
  inset: calc(var(--studio-views) + 2.6rem) 1.4rem auto auto;
}

[data-holo-id="Studio.Side"] [data-holo-id="Studio.Game"][data-holo-part="true"] {
  --holo-part-max-inline-size: 100%;
  inline-size: 100%;
}

[data-holo-id="Studio.Side"] [data-holo-id="Studio.Game"] :is(.hr-Trigger, button, .hr-Value)[data-holo-role] {
  font-size: 1.7rem;
  white-space: nowrap;
}

/* Animación de dibujo animado (D186, D239; Plan Review): cada gesto es una
   tira de fotogramas del personaje entero (`.About/Media/Icon/Frames/<Personaje>.webp`,
   los fotogramas en fila a 12 por segundo, el primero es el dibujo quieto).
   `--solaverse-frames-size` es cuántos por cien y `--solaverse-frames-steps` los
   saltos entre el primero y el último. Al pasar el ratón se reproducen en
   bucle y al salir vuelve el dibujo quieto. */
@keyframes solaverse-frames {
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}

[data-holo-id="Menu.Places"] > .hr-Item:is([data-holo-list-row-id="Realm"], [data-holo-list-row-id="Coin"], [data-holo-list-row-id="World"]) .hr-IconVisual::before {
  background: var(--solaverse-frames) 0% 0% / var(--solaverse-frames-size) 100% no-repeat;
  rotate: none;
  scale: none;
}

[data-holo-id="Menu.Places"] > .hr-Item:is([data-holo-list-row-id="Realm"], [data-holo-list-row-id="Coin"], [data-holo-list-row-id="World"]) .hr-IconVisual::after,
[data-holo-id="Menu.Places"] > .hr-Item:is([data-holo-list-row-id="Realm"], [data-holo-list-row-id="Coin"], [data-holo-list-row-id="World"]) > .hr-Icon::after {
  display: none;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Realm"] {
  --solaverse-frames: url("/App/.About/Media/Icon/Frames/Play.webp");
  --solaverse-frames-size: 4800%;
  --solaverse-frames-steps: 47;
  --solaverse-frames-time: 4s;
}

/* World es un dibujo quieto: una tira de un solo fotograma. */
[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="World"] {
  --solaverse-frames: url("/App/.About/Media/Icon/World.png");
  --solaverse-frames-size: 100%;
  --solaverse-frames-steps: 1;
  --solaverse-frames-time: 1s;
}

[data-holo-id="Menu.Places"] > .hr-Item[data-holo-list-row-id="Coin"] {
  --solaverse-frames: url("/App/.About/Media/Icon/Frames/Coin.webp");
  --solaverse-frames-size: 2500%;
  --solaverse-frames-steps: 24;
  --solaverse-frames-time: 2.08s;
}

[data-holo-id="Menu.Places"] > .hr-Item:is([data-holo-list-row-id="Realm"], [data-holo-list-row-id="Coin"], [data-holo-list-row-id="World"]):is(:hover, :focus-visible) .hr-IconVisual::before {
  animation: solaverse-frames var(--solaverse-frames-time) steps(var(--solaverse-frames-steps), end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-holo-id="Menu.Places"] > .hr-Item:is([data-holo-list-row-id="Realm"], [data-holo-list-row-id="Coin"], [data-holo-list-row-id="World"]) .hr-IconVisual::before {
    animation: none;
  }
}

/* Cada diapositiva de la galería mide lo que su carril: antes tomaba el alto
   de su imagen (559 px en un carril de 228) y sólo se veía la parte de arriba
   del cartel, como si estuviera ampliado. */
[data-holo-id="Realm.Gallery"] > .hr-CarouselTrack > .hr-Item.hr-Item.hr-Item,
[data-holo-id="Realm.Gallery"] > .hr-CarouselTrack > .hr-Item > .hr-Preview.hr-Preview {
  block-size: 100%;
  min-block-size: 0;
  max-block-size: 100%;
}

[data-holo-id="Realm.Gallery"] > .hr-CarouselTrack > .hr-Item > .hr-Preview > .hr-IconVisual.hr-IconVisual {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* La bienvenida del editor como la ideal 39: borde lila, el Ghostie artista
   con su mapa (`Realm/Studio/.About/Media/First.webp`) y el enlace para
   explorar en lila y subrayado. */
[data-holo-id="Studio.First"].ht-Layout\.Modal > .hr-Dialog.hr-Dialog {
  border-color: rgb(196 170 255 / 70%);
  box-shadow: 0 0 0 1px rgb(196 170 255 / 25%), 0 0 4rem rgb(150 120 255 / 18%);
}

[data-holo-id="Studio.First.Explore"].hr-Trigger.hr-Trigger :is([data-holo-type], [data-holo-role]) {
  color: #c9b8ff;
  font-size: 1.5rem;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* El título del Leaderboard como la ideal 42: mismas mayúsculas (25 px a
   1239 de ancho), pero más abiertas (319 px frente a 280). */
[data-holo-id="Leaderboard.Title"] .hr-Title.hr-Title.hr-Title {
  letter-spacing: 0.22em;
}

/* «Ghostie #…» como la ideal 41: mayúsculas de 9 px a 1239 de ancho (10 en
   la App) y más abiertas, en lila azulado. */
[data-holo-id="Collection.Name"] .hr-Title.hr-Title.hr-Title.hr-Title {
  color: rgb(167 174 240);
  font-size: calc(var(--solaverse-label-size) * 0.9);
  letter-spacing: 0.2em;
}

/* Las miniaturas de la galería ocupan siempre una cuarta parte: un juego
   con menos capturas no las estira (D198). */
[data-holo-id="Realm.Gallery"] > .hr-CarouselPagination.hr-CarouselPagination {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* El desplegable de la cuenta (ideal «Desplegable de cuenta», aprobada por
   Martín el 23-10): arriba tu avatar favorito en un círculo con su estrella,
   el nombre y la cartera en una pastilla con copiar; debajo, Account y
   Ghosties con flecha, el interruptor de Debug mode (sólo el administrador) y
   Disconnect en coral, cada bloque separado por una línea de borde a borde. */
.hr-Surface:has(> [data-holo-id="Navbar.Wallet.Panel"]) {
  inline-size: 32rem;
  /* El mismo hueco y margen que las capas de pantalla completa (D151): baja
     de la barra lo que ellas y acaba en el borde de la barra. Holo coloca el
     panel con un estilo en línea, de ahí el !important. */
  inset: var(--solaverse-top) var(--solaverse-side) auto auto !important;
  block-size: auto !important;
  max-block-size: calc(100dvh - var(--solaverse-top) - var(--solaverse-side)) !important;
  padding: 0;
  overflow: clip;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 2rem;
  background: var(--solaverse-glass-dense);
  backdrop-filter: var(--solaverse-blur);
  box-shadow: 0 1.6rem 4rem rgb(6 8 28 / 55%);
  color: var(--solaverse-text);
}

[data-holo-id="Navbar.Wallet.Panel"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  flex-direction: column;
  gap: 0;
}

[data-holo-id="Navbar.Wallet.Panel"].ht-Layout\.Stack > * {
  flex: none;
}

[data-holo-id="Navbar.Wallet.Who"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: 100%;
  --holo-part-display: grid;
  --holo-part-gap: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 2rem;
  padding: 2.4rem 2.4rem 2.2rem;
  border-block-end: 1px solid var(--solaverse-edge);
}

[data-holo-id="Navbar.Wallet.Who.Stage"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: 11.2rem;
  --holo-part-position: relative;
  position: relative;
  grid-row: 1 / span 2;
  inline-size: 11.2rem;
  block-size: 11.2rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgb(48 58 120 / 90%) 0, rgb(26 32 76 / 95%) 100%);
}

[data-holo-id="Navbar.Wallet.Who.Figure"].ht-Content\.Image {
  --holo-part-width: 100%;
  inline-size: 100%;
  block-size: 100%;
  padding: 0.8rem;
  object-fit: contain;
}

[data-holo-id="Navbar.Wallet.Who.Star"].ht-Content\.Icon {
  --holo-part-position: absolute;
  --holo-part-width: 4.4rem;
  --holo-part-height: 4.4rem;
  --holo-part-min-block-size: 4.4rem;
  --holo-part-inset: auto 0.2rem 0.2rem auto;
  position: absolute;
  inset: auto 0.2rem 0.2rem auto;
  display: none;
  place-items: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 50%;
  background: rgb(30 36 88);
  font-size: 0;

  & > * {
    display: none;
  }

  &[data-holo-type][data-holo-id]::before {
    content: "\2605";
    color: rgb(255 207 90);
    font-family: var(--holo-font-family, sans-serif);
    font-size: 2.6rem;
    line-height: 1;
  }
}

[data-holo-id="Navbar.Wallet.Who.Name"].ht-Content\.Text {
  grid-column: 2;
  align-self: end;
  color: var(--solaverse-text);
  font-size: 2.2rem;
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-holo-id="Navbar.Wallet.Who.Line"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: max-content;
  --holo-part-inline-size: max-content;
  --holo-part-max-inline-size: none;
  --holo-part-display: flex;
  display: flex;
  grid-column: 2;
  justify-self: start;
  align-self: start;
  flex-direction: row;
  align-items: center;
  inline-size: max-content;
  gap: 0.8rem;
  margin-block-start: 0.8rem;
  min-block-size: 3.8rem;
  padding: 0 0.8rem 0 1.6rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 5%);
}

[data-holo-id="Navbar.Wallet.Who.Address"].ht-Content\.Text {
  --holo-part-width: auto;
  flex: none;
  overflow: visible;
  color: var(--solaverse-lilac);
  font-size: 1.6rem;
  white-space: nowrap;
}

[data-holo-id="Navbar.Wallet.Who.Copy"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: auto;
  flex: none;
  inline-size: 3.2rem;
  block-size: 3.2rem;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--solaverse-lilac);
  font-size: 2.2rem;
}

[data-holo-id="Navbar.Wallet.Who.Copy"].ht-Control\.Trigger:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--solaverse-text);
}

[data-holo-id="Navbar.Wallet.Menu"].ht-Collection\.List {
  --holo-part-height: auto;
  --holo-part-max-block-size: none;
  --holo-part-overflow: visible;
  block-size: auto;
  max-block-size: none;
  overflow: visible;
  padding-block: 0.8rem;
  border-block-end: 1px solid var(--solaverse-edge);

  & .hr-Item {
    position: relative;
    min-block-size: 6.2rem;
    padding-inline: 2.4rem 5.6rem;
    border-radius: 0;
    color: var(--solaverse-text);
    font-size: 1.9rem;
  }

  & .hr-Item .hr-Title {
    font-size: 1.9rem;
    font-weight: 400;
  }

  /* Cuenta y Ghosties, una cosa; Create y Vote, otra (como la ideal). */
  & .hr-Item:nth-child(3) {
    border-block-start: 1px solid var(--solaverse-edge);
    margin-block-start: 0.8rem;
    padding-block-start: 0.8rem;
  }

  & .hr-Item:hover {
    background: rgb(255 255 255 / 5%);
  }

  /* La flecha de cada fila, a la derecha. */
  & .hr-Item::after {
    content: "";
    position: absolute;
    inset-inline-end: 2.8rem;
    inset-block-start: 50%;
    inline-size: 1rem;
    block-size: 1rem;
    border-block-start: 2px solid var(--solaverse-lilac);
    border-inline-end: 2px solid var(--solaverse-lilac);
    translate: 0 -50%;
    rotate: 45deg;
  }
}

[data-holo-id="Navbar.Wallet.Disconnect"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: 100%;
  justify-content: flex-start;
  gap: 1.6rem;
  inline-size: 100%;
  block-size: 6.8rem;
  padding-inline: 2.4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgb(240 138 130);
  font-size: 1.9rem;
  font-weight: 400;
}

[data-holo-id="Navbar.Wallet.Disconnect"].ht-Control\.Trigger:hover {
  background: rgb(255 255 255 / 5%);
}

:is([data-holo-id="Navbar.Wallet.Local"], [data-holo-id="Navbar.Wallet.Coins"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: 100%;
  --holo-part-grid-template-columns: max-content 1.6rem minmax(0, 1fr) 1.2rem max-content;
  inline-size: 100%;
  justify-content: flex-start;
  gap: 1.6rem;
  min-block-size: 7rem;
  padding: 1.2rem 2.4rem;
  border-block-end: 1px solid var(--solaverse-edge);
}

/* Los iconos del desplegable, del mismo tamaño y alineados en una columna. */
:is([data-holo-id="Navbar.Wallet.Menu"] .hr-Icon, [data-holo-id="Navbar.Wallet.Local.Icon"], [data-holo-id="Navbar.Wallet.Coins.Icon"], [data-holo-id="Navbar.Wallet.Disconnect.Icon"]) {
  flex: none;
  inline-size: 3rem;
  block-size: auto;
  overflow: visible;
  color: var(--solaverse-lilac);
  font-size: 2.8rem;
  line-height: 1;
  text-align: center;
}

[data-holo-id="Navbar.Wallet.Disconnect.Icon"].ht-Content\.Icon {
  color: rgb(240 138 130);
}

:is([data-holo-id="Navbar.Wallet.Local.Text"], [data-holo-id="Navbar.Wallet.Coins.Text"]).ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: auto;
  flex: 1 1 auto;
  align-items: flex-start;
  text-align: start;
}

:is([data-holo-id="Navbar.Wallet.Local.Name"], [data-holo-id="Navbar.Wallet.Coins.Name"]).ht-Content\.Text {
  color: var(--solaverse-text);
  font-size: 1.9rem;
  font-weight: 400;
}

:is([data-holo-id="Navbar.Wallet.Local.Switch"], [data-holo-id="Navbar.Wallet.Coins.On"], [data-holo-id="Navbar.Wallet.Coins.Off"]).ht-Control\.Toggle {
  --holo-part-width: max-content;
  margin-inline-start: auto;
  --holo-accent: #c3b2ff;
  --holo-toggle-active: #c3b2ff;
  flex: none;
}

/* La etiqueta «Devnet» de la moneda de la barra: una pastilla menta pequeña
   junto al saldo, para que nadie confunda la moneda de prueba con la real. */
[data-holo-id="Navbar.Coin.Network"].ht-Content\.Text {
  margin-inline-start: 0.8rem;
  padding: 0.1rem 0.8rem;
  border: 1px solid var(--solaverse-mint);
  border-radius: 999px;
  color: var(--solaverse-mint);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* La X del menú en su esquina, redonda y de cristal. */
.hr-Surface:has(> [data-holo-id="Navbar.Wallet.Panel"]) > .hr-Close {
  display: none;
}

/* El selector de Ghostie (ideal 61): la colección en modo elegir, montada en
   un modal por quien necesita un Ghostie (unirse a una ronda en el detalle,
   el Ghostie destacado del perfil). Sin el marco de la App (Frame=Bare), la
   página de la colección no deja sitio a la barra y llena el modal; arriba,
   el título en mayúsculas finas y la línea de contexto a la derecha. */
:is([data-holo-id="Realm.Pick"], [data-holo-id="Wallet.Pick"]).ht-Layout\.Modal > .hr-Dialog {
  inline-size: min(112rem, calc(100vw - 6rem));
  max-inline-size: none;
  block-size: min(60rem, calc(100dvh - 10.4rem));
  margin-block: 7.4rem 3rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass-dense);
  backdrop-filter: var(--solaverse-blur);
}

:is([data-holo-id="Realm.Pick.Collection"], [data-holo-id="Wallet.Pick.Collection"]).ht-Layout\.Mount {
  --holo-part-height: 100%;
  block-size: 100%;

  & [data-holo-id="Collection.Page"].ht-Layout\.Stack[data-holo-part="true"] {
    --holo-part-height: 100%;
    block-size: 100%;
    gap: 1.6rem;
    padding: 2.4rem 2.8rem 2.8rem;
  }

  & [data-holo-id="Collection.Body"].ht-Layout\.Stack[data-holo-part="true"] {
    flex: 1 1 auto;
    block-size: auto;
    min-block-size: 0;
  }
}

/* Dentro del selector, la colección se ordena como la 61: el nombre arriba,
   la figura centrada, las habilidades en fila (sin las fichas de accesorios)
   y la rejilla de tus Ghosties a tres columnas. Sólo dentro del modal: la
   página de la colección conserva su forma (ideal 41). */
:is([data-holo-id="Realm.Pick.Collection"], [data-holo-id="Wallet.Pick.Collection"]).ht-Layout\.Mount {
  & [data-holo-id="Collection.Page"].ht-Layout\.Stack[data-holo-part="true"] {
    --holo-part-display: flex;
    --holo-flex-direction: column;
    --holo-part-height: min(60rem, calc(100dvh - 10.4rem));
    display: flex;
    flex-direction: column;
    block-size: min(60rem, calc(100dvh - 10.4rem));
  }

  & [data-holo-id="Collection.Body"].ht-Layout\.Stack[data-holo-part="true"] {
    --holo-part-display: grid;
    --holo-flex-direction: row;
    --holo-part-grid-template-columns: minmax(0, 1fr) 1.6rem minmax(0, 1fr);
    --holo-part-grid-template-rows: minmax(0, 1fr);
    flex: 1 1 0;
    min-block-size: 0;
  }

  & [data-holo-id="Collection.Show"].ht-Layout\.Stack[data-holo-part="true"] {
    --holo-part-display: flex;
    --holo-flex-direction: column;
    display: flex;
    flex-direction: column;
    min-block-size: 0;
  }

  & [data-holo-id="Collection.Bottom"].ht-Layout\.Stack[data-holo-part="true"] {
    --holo-part-display: grid;
    --holo-flex-direction: row;
    margin-block-start: auto;
  }

  & [data-holo-id="Collection.Head"].ht-Layout\.Stack[data-holo-part="true"] {
    --holo-flex-direction: row;
  }

  & [data-holo-id="Collection.Side"].ht-Layout\.Stack[data-holo-part="true"] {
    --holo-part-display: grid;
    --holo-flex-direction: column;
    min-block-size: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  & [data-holo-id="Collection.Top"].ht-Layout\.Stack[data-holo-part="true"] {
    --holo-part-display: flex;
    --holo-flex-direction: column;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
  }

  & [data-holo-id="Collection.Info"].ht-Layout\.Stack[data-holo-part="true"] {
    --holo-part-display: contents;
    display: contents;

    & > * {
      --holo-part-display: grid;
    }
  }

  & [data-holo-id="Collection.Name"].ht-Content\.Title {
    order: -1;
    justify-items: center;
    text-align: center;
  }

  & [data-holo-id="Collection.Portrait"].ht-Content\.Image {
    --holo-part-width: 17rem;
    --holo-part-height: 17rem;
    inline-size: 17rem;
    block-size: 17rem;
  }

  & [data-holo-id="Collection.Traits"] {
    display: none;
  }

  & [data-holo-id="Collection.Abilities.Title"].ht-Content\.Text {
    align-self: stretch;
    order: 1;
  }

  & [data-holo-id="Collection.Abilities"].ht-Collection\.List {
    --holo-part-height: auto;
    flex: none;
    block-size: auto;
    order: 2;
  }

  & [data-holo-id="Collection.Abilities"] > .hr-Item.hr-Item.hr-Item {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    text-align: start;
  }

  & [data-holo-id="Collection.Pick.Primary"].ht-Control\.Trigger {
    flex: 0 1 62%;
  }

  & [data-holo-id="Collection.Grid"].ht-Collection\.List.hp-Posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

[data-holo-id="Collection.Pick.Head"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: grid;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 2.4rem;
  padding-inline-end: 5.6rem;
}

[data-holo-id="Collection.Pick.Title"].ht-Content\.Title {
  --holo-part-width: auto;
  --holo-part-contain: none;
  --holo-part-min-inline-size: max-content;
  grid-template-columns: max-content;
  white-space: nowrap;
}

[data-holo-id="Collection.Pick.Title"] .hr-Title {
  margin: 0;
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

[data-holo-id="Collection.Pick.Line"].ht-Content\.Text {
  color: var(--solaverse-text-soft);
  font-size: 1.6rem;
  text-align: end;
}

[data-holo-id="Collection.Pick.Actions"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-width: 100%;
  --holo-flex-direction: row;
  display: flex;
  flex-direction: row;
  inline-size: 100%;
  align-items: center;
  gap: 1.6rem;
}

[data-holo-id="Collection.Pick.Primary"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: auto;
  flex: 1 1 auto;
  justify-content: center;
  gap: 1rem;
  block-size: 5.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
  font-size: 1.9rem;
  font-weight: 600;
}

[data-holo-id="Collection.Pick.Secondary"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: auto;
  flex: 0 1 auto;
  justify-content: center;
  block-size: 5.6rem;
  padding-inline: 2.8rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 5%);
  color: var(--solaverse-text);
  font-size: 1.8rem;
  font-weight: 500;
}

/* Editar el perfil (ideal 65): un modal mediano sobre la cuenta, con el
   título en mayúsculas finas, el Ghostie destacado en su baldosa con
   «Change» (abre el selector), el nombre y la bio, y «Save» redondo. El lápiz
   junto al nombre de la ficha lo abre. */
[data-holo-id="Wallet.Edit"].ht-Layout\.Modal > .hr-Dialog {
  inline-size: min(75rem, calc(100vw - 6rem));
  max-inline-size: none;
  padding: 2.6rem 3rem 3rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass-dense);
  backdrop-filter: var(--solaverse-blur);
  color: var(--solaverse-text);
}

/* Tarjetas en flujo: el nombre y el Ghostie destacado lado a lado, la bio
   debajo y las acciones a la derecha. Flex con orden y no rejilla, porque la
   pila de Holo fija la fila de cada pieza en línea. El formulario no dibuja
   caja propia (sus envoltorios son «contents»): cada campo es una tarjeta. */
[data-holo-id="Wallet.Edit.Card"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  gap: 0.8rem;
}

[data-holo-id="Wallet.Edit.Title"].ht-Content\.Title {
  --holo-part-width: 100%;
  flex: 1 0 100%;
  order: 0;
  justify-items: center;
  margin-block-end: 1.6rem;
}

[data-holo-id="Wallet.Edit.Title"] .hr-Title {
  margin: 0;
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-align: center;
  text-transform: uppercase;
}

:is([data-holo-id="Wallet.Edit.Featured"].ht-Layout\.Stack[data-holo-part="true"], [data-holo-id="Wallet.Edit.Form"] .hr-Field) {
  box-sizing: border-box;
  padding: 2rem 2.4rem 1.6rem;
  border: 1px solid var(--solaverse-edge);
  border-radius: 1.6rem;
  background: rgb(255 255 255 / 3%);
}

[data-holo-id="Wallet.Edit.Featured"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-width: auto;
  display: flex;
  flex: 3 1 0;
  flex-flow: row wrap;
  order: 2;
  align-items: center;
  align-content: flex-start;
  gap: 1.2rem 2rem;
}

[data-holo-id="Wallet.Edit.Featured.Label"].ht-Content\.Text {
  flex: 1 0 100%;
  color: rgb(170 178 232);
  font-family: var(--solaverse-font-section);
  font-size: var(--solaverse-label-size);
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

[data-holo-id="Wallet.Edit.Featured.Figure"].ht-Content\.Image {
  --holo-part-width: 11rem;
  --holo-part-height: 10.4rem;
  flex: 0 0 11rem;
  inline-size: 11rem;
  block-size: 10.4rem;
  padding: 0.8rem;
  border: 1px solid rgb(196 170 255 / 60%);
  border-radius: 1.6rem;
  background: rgb(165 140 255 / 10%);

  & img {
    object-fit: contain;
  }
}

:is([data-holo-id="Wallet.Edit.Featured.Change"]).ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: max-content;
  justify-content: center;
  block-size: 4rem;
  padding-inline: 2.4rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 5%);
  color: var(--solaverse-text);
  font-size: 1.6rem;
  font-weight: 500;
}

:is([data-holo-id="Wallet.Edit.Featured.Change"]).ht-Control\.Trigger:hover {
  border-color: rgb(196 170 255 / 70%);
  background: rgb(165 140 255 / 14%);
}

[data-holo-id="Wallet.Edit.Featured.Change"].ht-Control\.Trigger {
  margin-inline-start: auto;
}

[data-holo-id="Wallet.Edit.Form"].ht-Control\.Form {
  display: contents;
  color: var(--solaverse-text);

  & :not(.hr-Field):has(.hr-Field) {
    display: contents;
  }

  & [data-holo-field="Name"] {
    flex: 4 1 0;
    order: 1;
  }

  & [data-holo-field="Bio"] {
    flex: 1 0 100%;
    order: 3;
  }

  & .hr-Field {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 0;
  }

  & .hr-Label :is(svg, .hr-Icon, .hr-Required, abbr) {
    display: none;
  }

  & :is(input, textarea) {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 4.6rem;
    padding: 0 1.4rem;
    border: 1px solid rgb(196 170 255 / 55%);
    border-radius: 1.2rem;
    background: rgb(255 255 255 / 4%);
    color: var(--solaverse-text);
    font-size: 1.9rem;
  }

  & textarea {
    min-block-size: 7rem;
    padding-block: 1.2rem;
    resize: none;
  }

  & .hr-Label :is(label, label *) {
    color: rgb(170 178 232);
    font-family: var(--solaverse-font-section);
    font-size: var(--solaverse-label-size);
    font-weight: 400;
    letter-spacing: var(--solaverse-section-spacing);
    text-transform: uppercase;
  }

  & [data-holo-field-actions] {
    display: none;
  }

  & [data-holo-form-summary] {
    flex: 1 0 100%;
  }

  & footer :is(svg, .hr-Icon) {
    display: none;
  }

  & footer.hr-Toolbar {
    display: flex;
    flex: 1 0 100%;
    order: 4;
    justify-content: flex-end;
    gap: 1.2rem;
    margin-block-start: 0.8rem;
    padding: 0;
    border: 0;
    background: none;
  }

  & footer .hr-Button {
    min-inline-size: 13rem;
    block-size: 4.8rem;
    border-radius: 999px;
    font-size: 1.7rem;
    font-weight: 500;
  }

  & footer .hr-Button svg {
    display: none;
  }

  & footer .hr-Button:not([type="submit"]) {
    border: 1px solid var(--solaverse-edge-strong);
    background: rgb(255 255 255 / 4%);
    color: var(--solaverse-text);
  }

  & button[type="submit"] {
    min-inline-size: 14rem;
    border: 0;
    background: var(--solaverse-primary);
    color: var(--solaverse-primary-text);
    font-size: 1.8rem;
    font-weight: 600;
  }
}

/* Los avisos de partida (ideales 62 y 63, D203): una tarjeta de cristal
   centrada con tu Ghostie sin fondo, el título, el motivo, una línea con la
   sala, lo que le queda y cuántos juegan, y dos botones; la X y pulsar fuera
   cancelan. */
[data-holo-id="Room.Again"].ht-Layout\.Modal > .hr-Dialog {
  inline-size: min(64rem, calc(100vw - 6rem));
  max-inline-size: none;
  padding: 3rem 3.6rem 3.6rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass-dense);
  backdrop-filter: var(--solaverse-blur);
  color: var(--solaverse-text);
  text-align: center;
}

[data-holo-id="Room.Again.Card"].ht-Layout\.Stack[data-holo-part="true"] {
  align-items: center;
  gap: 1.8rem;
}

[data-holo-id="Room.Again.Live"] .hr-Icon {
  color: rgb(6 95 70);
  font-size: 1.6rem;
}

[data-holo-id="Room.Again.Face"].ht-Layout\.Stack[data-holo-part="true"] {
  position: relative;
  justify-content: center;
}

[data-holo-id="Room.Again.Figure"].ht-Content\.Image {
  --holo-part-width: 18rem;
  --holo-part-height: 18rem;
  inline-size: 18rem;
  block-size: 18rem;

  & img {
    object-fit: contain;
  }
}

[data-holo-id="Room.Again.Live"].ht-Content\.Chip {
  position: absolute;
  inset-block-start: 1.2rem;
  inset-inline-end: -6rem;
  border: 0;
  border-radius: 999px;
  padding: 0.4rem 1.4rem;
  background: rgb(52 211 153 / 85%);
  color: #ffffff;
  font-size: 1.9rem;
  font-weight: 600;
}

[data-holo-id="Room.Again.Title"] .hr-Title {
  margin: 0;
  color: var(--solaverse-text);
  font-size: 2.8rem;
  font-weight: 700;
}

[data-holo-id="Room.Again.Text"].ht-Content\.Text {
  max-inline-size: 52rem;
  color: rgb(205 196 255);
  font-size: 1.95rem;
  line-height: 1.4;
}

[data-holo-id="Room.Again.Line"].ht-Content\.Text {
  --holo-part-width: 100%;
  inline-size: 100%;
  padding: 1.3rem 2.4rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  color: rgb(205 196 255);
  font-size: 1.9rem;
}

[data-holo-id="Room.Again.Actions"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: 100%;
  --holo-flex-direction: row;
  inline-size: 100%;
  gap: 1.6rem;
  margin-block-start: 0.6rem;
}

:is([data-holo-id="Room.Again.Back"], [data-holo-id="Room.Again.Here"]).ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: auto;
  flex: 1 1 0;
  justify-content: center;
  block-size: 6.8rem;
  border-radius: 999px;
  font-size: 2.2rem;
  font-weight: 500;
}

[data-holo-id="Room.Again.Back"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  border: 1px solid var(--solaverse-edge-strong);
  background: rgb(255 255 255 / 5%);
  color: var(--solaverse-text);
}

[data-holo-id="Room.Again.Here"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  border: 0;
  background: var(--solaverse-primary);
  color: var(--solaverse-primary-text);
  font-weight: 600;
}

/* El aviso al salir a mitad de partida (ideal 62, D203): el diálogo de Holo
   del juego incrustado (Visual.Embed Leave), vestido como el aviso 63. */
[data-holo-id="Room.Game"] > dialog.hr-EmbedLeave {
  box-sizing: border-box;
  inline-size: min(60rem, calc(100vw - 6rem));
  padding: 3rem 3.6rem 3.6rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass-dense);
  backdrop-filter: var(--solaverse-blur);
  color: var(--solaverse-text);
  font-family: inherit;
  text-align: center;
  overflow: visible;

  &::backdrop {
    background: rgb(10 12 36 / 55%);
    backdrop-filter: blur(6px);
  }

  & > .hr-Close {
    position: absolute;
    inset-block-start: 1.6rem;
    inset-inline-end: 1.6rem;
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    padding: 0;
    border: 1px solid var(--solaverse-edge-strong);
    border-radius: 50%;
    background: rgb(255 255 255 / 6%);
    color: var(--solaverse-text);
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
  }

  & > .hr-Image {
    display: block;
    inline-size: 16rem;
    block-size: 16rem;
    margin: 0 auto 1.2rem;
    object-fit: contain;
  }

  & > .hr-Title {
    margin: 0 0 1rem;
    color: var(--solaverse-text);
    font-size: 2.8rem;
    font-weight: 700;
  }

  & > .hr-Text {
    margin: 0 auto 1.2rem;
    max-inline-size: 46rem;
    color: var(--solaverse-text-soft);
    font-size: 1.7rem;
    line-height: 1.5;
  }

  & > .hr-Actions {
    display: flex;
    gap: 1.6rem;
    margin-block-start: 2rem;
  }

  & > .hr-Actions > button {
    flex: 1 1 0;
    block-size: 5.2rem;
    border-radius: 999px;
    font: inherit;
    font-size: 1.8rem;
    font-weight: 500;
    cursor: pointer;
  }

  & > .hr-Actions > .hr-Accept {
    border: 1px solid var(--solaverse-edge-strong);
    background: rgb(255 255 255 / 5%);
    color: rgb(255 168 196);
  }

  & > .hr-Actions > .hr-Stay {
    border: 0;
    background: var(--solaverse-primary);
    color: var(--solaverse-primary-text);
    font-weight: 600;
  }

  & > .hr-Actions > button:focus-visible {
    outline: 2px solid var(--solaverse-lilac);
    outline-offset: 3px;
  }
}

/* ------------------------------------------------------------------------
   La paleta del lateral (ideal 50, ASSETS): los tipos de pieza en fichas
   cuadradas de cristal, con el icono de su papel y el nombre debajo; elegir
   una añade la pieza al lienzo. El hover sólo cambia el borde.
   ------------------------------------------------------------------------ */
[data-holo-id="Studio.Assets"].ht-Layout\.Stack[data-holo-part="true"] {
  flex: 0 0 auto;
  padding-block: 1.2rem 0.4rem;
  border-block-start: 1px solid var(--solaverse-edge);
}

[data-holo-id="Studio.Assets.Title"] .hr-Title.hr-Title {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
}

[data-holo-id="Studio.Assets.List"].ht-Collection\.List[data-holo-part="true"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  block-size: auto;
}

[data-holo-id="Studio.Assets.List"] > button.hr-Item.hr-Item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  justify-items: center;
  align-content: center;
  gap: 0.3rem;
  aspect-ratio: 1;
  min-block-size: 0;
  padding: 0.4rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.1rem;
  background: rgb(255 255 255 / 5%);
  color: var(--studio-ink, rgb(240 244 255));
  box-shadow: none;
}

[data-holo-id="Studio.Assets.List"] > button.hr-Item.hr-Item:is(:hover, :focus-visible) {
  border-color: rgb(143 227 200 / 70%);
}

[data-holo-id="Studio.Assets.List"] > button.hr-Item.hr-Item > * {
  grid-area: auto;
  grid-column: 1;
  max-inline-size: 100%;
}

[data-holo-id="Studio.Assets.List"] > button.hr-Item .hr-Icon.hr-Icon {
  background: transparent;
  font-size: 2.2rem;
  color: rgb(143 227 200);
}

[data-holo-id="Studio.Assets.List"] > button.hr-Item .hr-Title.hr-Title {
  color: var(--studio-ink, rgb(240 244 255));
  font-size: 1.15rem;
  font-weight: 500;
}

/* ------------------------------------------------------------------------
   Inside (D210): una partida de prueba por dentro, en el centro del editor.
   Las escenas en texto son fichas pequeñas una al lado de otra; el código,
   bloques anchos con su propio desplazamiento.
   ------------------------------------------------------------------------ */
[data-holo-id="Studio.Inside"].ht-Content\.Markdown[data-holo-part="true"] {
  display: block;
  box-sizing: border-box;
  block-size: 100%;
  overflow-y: auto;
  padding: 7.6rem 2.4rem 2.4rem;
  color: var(--studio-ink, rgb(240 244 255));
  font-size: 1.4rem;
}

[data-holo-id="Studio.Inside"] h3 {
  margin: 2rem 0 0.8rem;
  color: var(--solaverse-text-soft);
  font-family: var(--solaverse-font-section);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

[data-holo-id="Studio.Inside"] pre[data-language][data-language] {
  display: inline-block;
  vertical-align: top;
  block-size: auto;
  max-block-size: none;
  margin: 0 1rem 1rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.1rem;
  background: rgb(10 14 40 / 55%);
  color: rgb(143 227 200);
  font: 1.25rem/1.3 ui-monospace, "DejaVu Sans Mono", monospace;
}

[data-holo-id="Studio.Inside"] pre:is([data-language="js"], [data-language="json"])[data-language] {
  display: block;
  max-block-size: 42rem;
  overflow: auto;
  color: rgb(220 226 255);
}

[data-holo-id="Studio.Inside"] li {
  margin-block: 0.2rem;
}

/* En la ficha del lateral, el nombre de una fila no se parte aunque su valor
   sea largo (una regla «cuándo»): el valor es el que pasa a otra línea. */
[data-holo-id="Studio.Facts"] .hr-Item > .hr-Main.hr-Main {
  min-inline-size: max-content;
}

[data-holo-id="Studio.Facts"] .hr-Item > .hr-Value .hr-Text {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------------
   Las versiones del juego (D220): un botón pequeño bajo la cabecera de la
   barra y una ventana de cristal con guardar y la lista para volver.
   ------------------------------------------------------------------------ */
[data-holo-id="Studio.Versions.Open"].ht-Control\.Trigger {
  align-self: flex-start;
  flex: none;
  inline-size: auto;
  margin-block: 0.8rem 0.2rem;
}

[data-holo-id="Studio.Versions.Open"] :is(button, .hr-Trigger) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--studio-edge);
  border-radius: 5rem;
  background: rgb(255 255 255 / 6%);
  color: var(--studio-soft);
  font-size: 1.3rem;
}

[data-holo-id="Studio.Versions.Open"] :is(button, .hr-Trigger):is(:hover, :focus-visible) {
  border-color: var(--studio-mint);
  color: var(--studio-mint);
}

[data-holo-id="Studio.Versions"].ht-Layout\.Modal > .hr-Dialog {
  inline-size: min(56rem, calc(100vw - 6rem));
  max-block-size: min(70rem, calc(100dvh - 6rem));
  overflow: auto;
}

[data-holo-id="Studio.Versions.Card"].ht-Layout\.Stack {
  gap: 1.2rem;
  padding: 0.8rem;
}

[data-holo-id="Studio.Versions.Text"] {
  color: var(--solaverse-text-soft, rgb(205 210 240 / 72%));
}

/* Guardar una versión, con el acento del editor (como Publish). */
[data-holo-id="Studio.Versions.Save"] button[type="submit"] {
  border: 0;
  border-radius: 5rem;
  background: linear-gradient(90deg, rgb(123 241 200), rgb(200 166 255));
  color: rgb(20 24 60);
  font-weight: 600;
}


/* Todos los juegos (Play, View=All): una rejilla de tarjetas iguales de
   cristal, con su portada arriba; ninguna destacada. */
[data-holo-id="Realm.All"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-height: 100%;
  block-size: 100%;
  min-block-size: 0;
}

[data-holo-id="Realm.All.Head"].ht-Layout\.Stack[data-holo-part="true"] {
  justify-content: center;
}

[data-holo-id="Realm.All.List"].ht-Collection\.List[data-holo-part="true"] {
  --holo-part-max-block-size: none;
  --holo-part-height: auto;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18vw), 1fr));
  gap: 1rem;
  padding-inline-end: 0.6rem;

  & > .hr-Item,
  & > .hr-Item:first-child {
    grid-column: auto;
    overflow: hidden;
    border: 1px solid var(--solaverse-edge);
    border-radius: 1.6rem;
    background: rgb(255 255 255 / 3.5%);
  }

  & .hr-Subtitle {
    color: var(--solaverse-text-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  & .hr-Title.hr-Title {
    color: var(--solaverse-text);
    font-weight: 600;
  }

  & .hr-Text.hr-Text {
    color: var(--solaverse-text-soft);
  }

  & .hr-Divider {
    display: none;
  }

  & > .hr-Item:first-child > .hr-Icon {
    aspect-ratio: 16 / 9;
  }

  & .hr-Metrics :is(.hr-Value, .hr-Icon) {
    color: var(--solaverse-text-soft);
  }
}

/* La cuenta con sesión (ideal «Perfil», propuesta A, aprobada por Martín el
   23-10): a la izquierda tu avatar favorito sobre un pedestal con su nombre,
   su cartera en una pastilla con copiar y tu puesto; a la derecha tus Ghosties
   en cuadrícula, con «Playing» en el que juega y una estrella en cada uno para
   elegirlo como avatar. Dos paneles de cristal sobre el cielo. */
[data-holo-id="Wallet.Panel"].ht-Layout\.Modal > .hr-Dialog:has([data-holo-id="Wallet.Persona"]) {
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-holo-id="Wallet.Body"].ht-Layout\.Stack[data-holo-part="true"]:has([data-holo-id="Wallet.Persona"]) {
  padding: 0;
}

[data-holo-id="Wallet.Persona"].ht-Layout\.Stack[data-holo-part="true"] {
  --holo-part-width: 100%;
  --holo-part-height: 100%;
  --holo-part-max-block-size: none;
  --holo-part-display: grid;
  inline-size: 100%;
  display: grid;
  --holo-part-grid-template-columns: minmax(0, 0.595fr) var(--solaverse-gap) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  block-size: 100%;
  min-block-size: 0;
}

:is([data-holo-id="Wallet.Me"], [data-holo-id="Wallet.Life"]).ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-display: flex;
  --holo-part-max-block-size: none;
  --holo-part-gap: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-block-size: 0;
  border: 1px solid var(--solaverse-edge);
  border-radius: var(--solaverse-radius-panel);
  background: var(--solaverse-glass);
  backdrop-filter: var(--solaverse-blur);
  -webkit-backdrop-filter: var(--solaverse-blur);
}

[data-holo-id="Wallet.Me"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-justify-self: stretch;
  align-items: center;
  justify-content: center;
  padding: 3rem 3.2rem;
}

[data-holo-id="Wallet.Me.Stage"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-width: 100%;
  --holo-part-gap: 0;
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  margin-block-end: 3.4rem;
  padding-block-end: 2.6rem;

  /* El pedestal: un disco de cristal con el brillo violeta bajo el Ghostie. */
  &::after {
    content: "";
    position: absolute;
    inset-inline: 10%;
    inset-block-end: 0;
    block-size: 9.6rem;
    border-radius: 50%;
    background:
      radial-gradient(ellipse 62% 40% at 50% 36%, rgb(214 204 255 / 80%) 0, rgb(150 130 255 / 50%) 60%, transparent 100%),
      linear-gradient(180deg, rgb(120 112 220 / 50%) 0, rgb(46 52 120 / 80%) 100%);
    box-shadow: 0 1.2rem 3.2rem rgb(120 110 255 / 40%);
  }
}

[data-holo-id="Wallet.Me.Figure"].ht-Content\.Image {
  position: relative;
  z-index: 1;
  inline-size: min(100%, 34rem, 36vh);
  block-size: auto;
  max-block-size: 36vh;
  object-fit: contain;
  filter: drop-shadow(0 0 2.4rem rgb(143 240 216 / 26%));
}

[data-holo-id="Wallet.Me.Empty"].ht-Content\.Image {
  inline-size: min(100%, 24rem);
  margin-block-end: 3rem;
}

[data-holo-id="Wallet.Me.Mark"].ht-Content\.Chip.ht-Content\.Chip {
  --holo-part-min-block-size: 4rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0 2.4rem;
  border: 1px solid rgb(255 196 120 / 55%);
  border-radius: 999px;
  background: rgb(255 196 120 / 8%);
  color: rgb(255 214 150);
  font-size: 1.5rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;

  & .hr-Icon {
    font-size: 0;
  }

  & .hr-Icon:not(:has(*))::before {
    content: "\2605";
    color: rgb(255 207 90);
    font-size: 2.2rem;
    line-height: 1;
    display: inline-block;
    margin-inline-end: 1rem;
  }
}

[data-holo-id="Wallet.Me.Name"][data-holo-part="true"][data-holo-part="true"] {
  margin-block: 2rem 2rem;
  text-align: center;
}

[data-holo-id="Wallet.Me.Name"] .hr-Title.hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-size: 3.6rem;
  font-weight: 400;
  text-align: center;
}

[data-holo-id="Wallet.Me.Wallet"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  --holo-part-width: auto;
  --holo-part-gap: 1.6rem;
  flex-direction: row;
  align-items: center;
  gap: 1.6rem;
  min-block-size: 5.4rem;
  padding: 0 0.8rem 0 2.8rem;
  border: 1px solid var(--solaverse-edge-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  color: var(--solaverse-text);
  font-size: 1.9rem;
}

[data-holo-id="Wallet.Me.Wallet.Copy"].ht-Control\.Trigger.hr-Trigger.hr-Trigger {
  --holo-part-width: auto;
  flex: none;
  inline-size: 3.8rem;
  block-size: 3.8rem;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 10%);
  box-shadow: none;
  color: var(--solaverse-lilac);
  font-size: 2rem;
}

[data-holo-id="Wallet.Me.Wallet.Copy"].ht-Control\.Trigger:hover {
  background: rgb(255 255 255 / 18%);
}

[data-holo-id="Wallet.Me.Rank"].ht-Content\.Chip.ht-Content\.Chip {
  --holo-part-width: 80%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  inline-size: 80%;
  margin-block-start: 3rem;
  padding: 2.4rem 0 0;
  border: 0;
  border-block-start: 1px solid var(--solaverse-edge);
  border-radius: 0;
  background: transparent;
  color: var(--solaverse-lilac);
  font-size: 1.9rem;

  & .hr-Icon {
    color: var(--solaverse-lilac);
    font-size: 2.4rem;
  }
}

[data-holo-id="Wallet.Life"].ht-Layout\.Stack[data-holo-part="true"][data-holo-part="true"] {
  justify-content: flex-start;
  padding: 3rem 3rem 3rem;
  overflow: hidden;
  container-type: inline-size;
  /* El lado de una tarjeta: cuatro por fila entre el relleno y los huecos. */
  --solaverse-card-width: calc((100cqi - 0.4rem - 3 * 1.4rem) / 4);
}

[data-holo-id="Wallet.Ghosties.Title"][data-holo-part="true"][data-holo-part="true"] {
  flex: none;
  margin-block-end: 2.4rem;
}

[data-holo-id="Wallet.Ghosties.Title"] .hr-Title.hr-Title.hr-Title {
  color: var(--solaverse-text);
  font-family: var(--solaverse-font-section);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: var(--solaverse-section-spacing);
  text-transform: uppercase;
}

:is([data-holo-id="Wallet.Grid"], [data-holo-id="Wallet.Grid.Other"]).ht-Collection\.List.hp-Posts.hp-Posts {
  --holo-part-max-block-size: none;
  --holo-part-height: auto;
  flex: 1 1 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: calc(var(--solaverse-card-width) / 0.91);
  align-content: start;
  gap: 1.4rem;
  min-block-size: 0;
  overflow-y: auto;
  padding-inline-end: 0.4rem;

  & > .hr-Item,
  & > .hr-Item:first-child {
    position: relative;
    display: block;
    grid-column: auto;
    grid-row: auto;
    block-size: 100%;
    padding: 0;
    border: 1px solid var(--solaverse-edge);
    border-radius: var(--solaverse-radius-card);
    background: rgb(255 255 255 / 4%);
  }

  & > .hr-Item[aria-current="true"] {
    border: 2px solid rgb(176 150 255);
    box-shadow: 0 0 2rem rgb(165 140 255 / 30%);
    background: rgb(165 140 255 / 10%);
  }

  /* La estrella dorada del avatar favorito, arriba a la izquierda. */
  & > .hr-Item[aria-current="true"]::before {
    content: "\2605";
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1.4rem;
    z-index: 2;
    color: rgb(255 207 90);
    font-size: 2.6rem;
    line-height: 1;
    text-shadow: 0 0 1rem rgb(255 207 90 / 55%);
  }

  & > .hr-Item > .hr-Primary {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    padding: 1rem 0.8rem 2.6rem;
    border: 0;
    background: transparent;
  }

  /* «Playing»: una pastilla lila abajo a la izquierda, con el texto que el
     punto de estado guarda en su globo. */
  & > .hr-Item .hr-Status {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-start: 1rem;
    z-index: 2;
    display: block;
  }

  & > .hr-Item .hr-Status .hr-Dot {
    display: contents;
  }

  & > .hr-Item .hr-Status .hr-Dot > .hr-Icon {
    display: none;
  }

  & > .hr-Item .hr-Status .hr-TooltipBubble {
    position: static;
    display: inline-block;
    padding: 0.5rem 1.6rem;
    border-radius: 999px;
    background: rgb(150 128 240);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: none;
  }

  & > .hr-Item > .hr-Primary > .hr-Icon.hr-Icon {
    flex: 1 1 auto;
    inline-size: 100%;
    min-inline-size: 0;
    background: transparent;
  }

  & > .hr-Item .hr-IconVisual {
    inline-size: 100%;
    block-size: 100%;
  }

  & > .hr-Item .hr-Image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  /* El número queda para los lectores de pantalla, no a la vista. */
  & > .hr-Item .hr-Main {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  & > .hr-Item > .hr-Actions {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: 2;
  }

  & > .hr-Item .hr-Action {
    display: grid;
    place-items: center;
    inline-size: 3.8rem;
    block-size: 3.8rem;
    min-block-size: 0;
    padding: 0;
    border: 1px solid rgb(214 204 255 / 55%);
    border-radius: 50%;
    background: rgb(20 24 64 / 60%);
    color: var(--solaverse-text);
    font-size: 1.9rem;
  }

  & > .hr-Item .hr-Action .hr-Text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* El avatar favorito lleva la estrella llena. */
  & > .hr-Item[aria-current="true"] .hr-Action .hr-Icon {
    font-size: 0;
  }

  & > .hr-Item[aria-current="true"] .hr-Action .hr-Icon:not(:has(*))::before {
    content: "\2605";
    font-size: 2rem;
    line-height: 1;
  }

  & > .hr-Item .hr-Action:is(:hover, :focus-visible) {
    background: rgb(255 255 255 / 16%);
  }
}

/* Con sesión, el botón «Connect Wallet» de la barra queda vacío (su guarda
   está en sus Slots, no en él, para que el gesto de la cuenta repinte sólo lo
   que cambia): no se dibuja. */
[data-holo-id="Navbar.Account"].ht-Control\.Trigger:not(:has([data-holo-id="Navbar.Account.Icon"], [data-holo-id="Navbar.Account.Avatar"], [data-holo-id="Navbar.Account.Text"])) {
  display: none;
}

/* Las flechas de todos los carruseles son círculos: tan altas como anchas, con
   el ancho que declare cada carrusel. Va al final para ganar a sus medidas. */
:is(.hr-CarouselPrevious, .hr-CarouselNext)[data-holo-role][data-holo-role][data-holo-role] {
  block-size: auto;
  min-block-size: 0;
  min-inline-size: 0;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
}

/* El lienzo de un juego que aún no tiene escena: un hueco centrado y visible,
   no una línea suelta pegada arriba. */
[data-holo-id="Studio.Scene.Empty"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-height: 100%;
  display: grid;
  place-content: center;
  block-size: 100%;
  box-sizing: border-box;
  margin: 7.4rem 1.2rem 1.2rem;
  padding: 2.4rem;
  border: 0.2rem dashed var(--studio-edge);
  border-radius: 2rem;
  color: var(--studio-soft);
  font-size: 1.8rem;
  text-align: center;
}

/* «Play test» y «Publish» sin estado activo van sobre la escena (a veces clara,
   como en Ghost Gauntlet): un fondo de cristal oscuro, como el de la barra de
   herramientas, para que se lean sobre cualquier escena. */
[data-holo-id="Studio.Foot"] :is([data-holo-id="Studio.Play"], [data-holo-id="Studio.Test"], [data-holo-id="Studio.Publish.Idle"]).hr-Trigger.hr-Trigger.hr-Trigger.hr-Trigger {
  background: rgb(32 40 86 / 72%);
  color: rgb(238 242 255);
  border: 1px solid rgb(255 255 255 / 18%);
  backdrop-filter: blur(1.6rem);
}

/* El detalle de la barra izquierda (un formulario largo) se desplaza: deja sitio
   al botón de contraer, que lo tapaba, y se desvanece por abajo mientras haya
   más contenido (sólo cuando hay desplazamiento, lo mide el propio scroll). */
@property --studio-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0rem;
}

@keyframes Studio-Fade {
  from { --studio-fade: 3.2rem; }
  97% { --studio-fade: 3.2rem; }
  to { --studio-fade: 0rem; }
}

[data-holo-id="Studio.Detail"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  padding-block-end: 5.4rem;
  scrollbar-color: rgb(255 255 255 / 38%) transparent;
  mask-image: linear-gradient(to bottom, rgb(0 0 0) calc(100% - var(--studio-fade)), transparent);
  animation: Studio-Fade linear both;
  animation-timeline: scroll(self);
}

/* El aviso de un juego sin escena llena el alto del lienzo. */
[data-holo-id="Studio.Scene.Empty"][data-holo-part="true"][data-holo-part="true"][data-holo-part="true"] {
  --holo-part-min-block-size: calc(100dvh - 22rem);
  min-block-size: calc(100dvh - 22rem);
}