/*
 * CMS própria do Habblit — "Habblit OS": a página é uma área de trabalho dos anos 2000 (ícones na lateral,
 * janelas, barra de tarefas com menu Iniciar e bandeja com a rádio), com a arte do hotel e o design system.
 * Componentes de janela, botões, campos etc. vêm de /ds/ds.css; aqui só o layout próprio da CMS.
 */
:root { --hb-taskbar: 46px; --hb-wall: 190px; }
body.hb-os { padding-bottom: var(--hb-taskbar); min-height: 100vh; }
img.px, .hb-os .px { image-rendering: pixelated; }
.hb-os a { text-decoration: none; }

/* ---------- Papel de parede (topo) com o logo ---------- */
.hb-wall { position: relative; height: var(--hb-wall); background: url(/habblit/cms-header.png) center bottom / cover no-repeat, #3d7be0; image-rendering: pixelated;
    box-shadow: inset 0 -1px 0 #0b1840, 0 2px 0 #0b184026; overflow: hidden; }
.hb-wall .ds-container { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 1; }
.hb-wall-logo { display: block; height: 76px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 0 #0b184055); }
.hb-wall-logo:hover { animation: hb-logo-hop 420ms var(--ds-ease-pop); }
@keyframes hb-logo-hop { 40% { transform: translateY(-4px); } }
.hb-wall-user { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem .35rem .35rem; background: var(--ds-surface-muted); border-radius: var(--ds-radius);
    box-shadow: var(--ds-outline), var(--ds-raised), var(--ds-shadow); font: 600 .875rem var(--ds-pixel); color: var(--ds-text-strong); }
.hb-wall-user img { width: 33px; height: 33px; object-fit: none; object-position: center 30%; image-rendering: pixelated; background: linear-gradient(#bfe0ff, #e8f3ff); border-radius: 2px; box-shadow: var(--ds-sunken); }

/* ---------- Área de trabalho: ícones + janelas ---------- */
.hb-desk { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.25rem; padding-block: 1.25rem 2rem; align-items: start; }
.hb-icons { display: flex; flex-direction: column; gap: .35rem; position: sticky; top: 1rem; }
.hb-icon { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem .25rem; border-radius: 3px; color: var(--ds-text-strong); text-align: center; cursor: pointer;
    font: 600 .8125rem/1.15 var(--ds-pixel); outline: 1px dotted transparent; outline-offset: -1px; transition: background-color var(--ds-dur-fast); }
.hb-icon:hover { background: #1f4fd81f; }
.hb-icon.is-active, .hb-icon:focus-visible { background: #1f4fd83d; outline-color: var(--ds-dark); }
.hb-icon-tile { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 6px; color: #fff;
    background: linear-gradient(180deg, #5d93ff 0%, #2a5fe6 50%, #1f4fd8 52%, #1a44c0 100%); box-shadow: 0 0 0 1px var(--ds-dark), inset 1px 1px 0 #ffffff80, 2px 2px 0 #0b184040; }
.hb-icon-tile .ds-icon { width: 24px; height: 24px; filter: drop-shadow(1px 1px 0 #0b184080); }
.hb-icon-tile.is-play { background: linear-gradient(180deg, #8cf06a 0%, #3fd14a 50%, #2fbf3a 52%, #24a52e 100%); }
.hb-icon-tile.is-pink { background: linear-gradient(180deg, #ff9fd0 0%, #ff4fa3 52%, #e23d8c 100%); }
.hb-icon-tile.is-lime { background: linear-gradient(180deg, #e4ff9e 0%, #b6ff3b 52%, #8fd61f 100%); color: var(--ds-dark); }
.hb-icon-tile.is-lime .ds-icon { filter: none; }

/* Grade de janelas (12 colunas) */
.hb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ds-gap); align-items: start; }
.hb-span-4 { grid-column: span 4; } .hb-span-5 { grid-column: span 5; } .hb-span-6 { grid-column: span 6; } .hb-span-7 { grid-column: span 7; }
.hb-span-8 { grid-column: span 8; } .hb-span-12 { grid-column: span 12; }
.hb-stack { display: flex; flex-direction: column; gap: var(--ds-gap); }
.hb-page-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; font: 700 1.6rem var(--ds-display); color: #fff; text-shadow: 2px 2px 0 #0b1840; }
.hb-page-title small { font: 500 .875rem var(--ds-font); color: #ffffffd9; text-shadow: 1px 1px 0 #0b184099; }

/* ---------- Cartão do jogador (home) ---------- */
.hb-me { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.hb-me-stage { position: relative; border-radius: 2px; overflow: hidden; min-height: 15rem; display: grid; place-items: end center;
    background: linear-gradient(180deg, #8ec8ff 0%, #cfe7ff 62%, #e9e7df 62%, #d9d6cc 100%); box-shadow: 0 0 0 1px var(--ds-border), var(--ds-sunken); }
.hb-me-stage::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 64px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: #0b184026; }
.hb-me-stage img { position: absolute; z-index: 1; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: none; image-rendering: pixelated; }
.hb-me h2 { font-size: 1.6rem; line-height: 1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hb-me-motto { margin: .35rem 0 .7rem; color: var(--ds-text-muted); font-style: italic; overflow-wrap: anywhere; }
.hb-wallet { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.hb-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px var(--ds-border), var(--ds-sunken);
    font: 600 .875rem var(--ds-pixel); color: var(--ds-text-strong); }
.hb-chip .ds-icon { width: 1rem; height: 1rem; }
.hb-chip.is-credits .ds-icon { color: #e0a200; } .hb-chip.is-diamonds .ds-icon { color: #2d9cdb; } .hb-chip.is-duckets .ds-icon { color: #ff4fa3; } .hb-chip.is-coins .ds-icon { color: #1f4fd8; }
.hb-play { font-size: 1.05rem !important; padding: .8rem 1.4rem !important; }
.hb-pass { margin-top: .9rem; }
.hb-pass-head { display: flex; justify-content: space-between; align-items: baseline; font: 600 .8125rem var(--ds-pixel); margin-bottom: .3rem; }

/* ---------- Notícias ---------- */
.hb-feature { position: relative; display: block; border-radius: 2px; overflow: hidden; aspect-ratio: 5 / 2; background: #0b1840 center / cover no-repeat; image-rendering: pixelated;
    box-shadow: 0 0 0 1px var(--ds-dark), var(--ds-sunken); }
.hb-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #0b1840e6 100%); }
.hb-feature-text { position: absolute; left: .8rem; right: .8rem; bottom: .7rem; z-index: 1; color: #fff; }
.hb-feature-text b { display: block; font: 700 1.25rem/1.15 var(--ds-display); text-shadow: 1px 1px 0 #0b1840; }
.hb-feature-text span { font-size: .8125rem; color: #ffffffd9; }
.hb-feature:hover { box-shadow: 0 0 0 1px var(--ds-dark), 0 0 0 3px var(--ds-lime); }
.hb-news-list { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.hb-news-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .6rem; align-items: center; padding: .35rem; border-radius: 2px; color: inherit; }
.hb-news-item:hover { background: var(--ds-brand-soft); outline: 1px dotted var(--ds-dark); outline-offset: -1px; }
.hb-news-thumb { width: 4.5rem; height: 2.5rem; border-radius: 2px; background: #0b1840 center / cover no-repeat; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--ds-border); }
.hb-news-item b { display: block; font-size: .875rem; color: var(--ds-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-news-item span { font-size: .75rem; color: var(--ds-text-muted); }
.hb-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--ds-gap); }
.hb-news-card { display: flex; flex-direction: column; gap: .5rem; color: inherit; }
.hb-news-card .hb-feature { aspect-ratio: 2 / 1; }
.hb-article { font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.hb-article img { max-width: 100%; height: auto; image-rendering: pixelated; }
.hb-article-hero { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; image-rendering: pixelated; border-radius: 2px; box-shadow: 0 0 0 1px var(--ds-dark); margin-bottom: 1rem; }
.hb-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; color: var(--ds-text-muted); font-size: .8125rem; margin-bottom: .8rem; }

/* ---------- Rádio ---------- */
.hb-radio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.hb-radio-art { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 3px; color: #fff; background: linear-gradient(180deg, #ff9fd0, #ff4fa3 55%, #e23d8c);
    box-shadow: 0 0 0 1px var(--ds-dark), inset 1px 1px 0 #ffffff80; }
.hb-radio-art .ds-icon { width: 1.8rem; height: 1.8rem; }
.hb-radio b { display: block; font: 700 1rem var(--ds-pixel); color: var(--ds-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-radio span { font-size: .8125rem; color: var(--ds-text-muted); }

/* ---------- Ranking, equipe, quartos ---------- */
.hb-rank { list-style: none; margin: 0; padding: 0; }
.hb-rank li { display: grid; grid-template-columns: 1.6rem 2.2rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .35rem .3rem; border-top: 1px dotted var(--ds-border-soft); }
.hb-rank li:first-child { border-top: 0; }
.hb-rank-pos { font: 700 1.1rem var(--ds-display); color: var(--ds-text-muted); text-align: center; }
.hb-rank li:nth-child(1) .hb-rank-pos { color: #e0a200; } .hb-rank li:nth-child(2) .hb-rank-pos { color: #7b7f8c; } .hb-rank li:nth-child(3) .hb-rank-pos { color: #b5651d; }
.hb-head { width: 2.2rem; height: 2.2rem; object-fit: none; object-position: center 35%; image-rendering: pixelated; border-radius: 2px; background: linear-gradient(#bfe0ff, #e8f3ff); box-shadow: 0 0 0 1px var(--ds-border); }
.hb-rank a { color: var(--ds-text-strong); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-rank a:hover { color: var(--ds-brand); }
.hb-rank-val { font: 600 .875rem var(--ds-pixel); color: var(--ds-brand-strong); }
.hb-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .6rem; }
.hb-person { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem .3rem; border-radius: 3px; background: #fff; color: var(--ds-text-strong);
    box-shadow: 0 0 0 1px var(--ds-border), var(--ds-sunken); text-align: center; }
.hb-person:hover { box-shadow: 0 0 0 1px var(--ds-dark), var(--ds-sunken); }
.hb-person img { width: 64px; height: 110px; object-fit: none; object-position: center 20%; image-rendering: pixelated; }
.hb-person b { font: 700 .875rem var(--ds-pixel); }
.hb-person span { font-size: .75rem; color: var(--ds-text-muted); }
.hb-rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.hb-rooms li { display: flex; align-items: center; gap: .55rem; padding: .35rem .45rem; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--ds-border-soft); }
.hb-rooms li .ds-icon { color: var(--ds-brand); flex: 0 0 auto; }
.hb-rooms b { flex: 1; min-width: 0; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-text-strong); }
.hb-occupancy { font: 600 .8125rem var(--ds-pixel); color: var(--ds-text-muted); white-space: nowrap; }
.hb-occupancy.is-busy { color: #157a1d; }

/* ---------- Perfil ---------- */
.hb-profile { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.2rem; }
.hb-profile .hb-me-stage { min-height: 15rem; }
.hb-badges { display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: .4rem; }
.hb-badges span { width: 46px; height: 46px; display: grid; place-items: center; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px var(--ds-border-soft), var(--ds-sunken); }
.hb-badges span:empty { background: transparent; box-shadow: none; outline: 1px dotted var(--ds-border); outline-offset: -1px; }
.hb-badges img { image-rendering: pixelated; }

/* ---------- Tela de entrada (sem login): saguão do hotel ao fundo ---------- */
.hb-lobby { min-height: calc(100vh - var(--hb-taskbar)); display: flex; align-items: center; padding-block: 2rem;
    background: linear-gradient(90deg, #0b1840d9 0%, #0b184066 45%, #0b18400d 100%), url(/habblit/cms-login.png) center / cover no-repeat, #1f4fd8; image-rendering: pixelated; }
.hb-lobby .ds-container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 24rem); gap: 2rem; align-items: center; }
.hb-hello { color: #fff; }
.hb-hello img { width: min(100%, 26rem); height: auto; image-rendering: pixelated; filter: drop-shadow(0 4px 0 #0b184080); }
.hb-hello h1 { color: #fff; font: 700 clamp(1.8rem, 4vw, 2.8rem)/1.05 var(--ds-display); margin: 1rem 0 .5rem; text-shadow: 3px 3px 0 #0b1840; }
.hb-hello p { font-size: 1.05rem; max-width: 32rem; color: #ffffffe6; text-shadow: 1px 1px 0 #0b1840; margin: 0 0 1rem; }
.hb-hello-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.hb-hello-stats .hb-chip { font-size: .9375rem; }
.hb-auth .ds-module-body { padding: 1rem; }
.hb-auth-alt { margin-top: .8rem; text-align: center; font-size: .875rem; color: var(--ds-text-muted); }
.hb-error { display: none; margin-bottom: .7rem; }
.hb-error.is-on { display: block; }

/* ---------- Barra de tarefas ---------- */
.hb-taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--hb-taskbar); z-index: 80; display: flex; align-items: center; gap: .4rem; padding: 0 .4rem;
    background: var(--ds-surface-muted); box-shadow: 0 -1px 0 var(--ds-dark), inset 0 1px 0 #fff; }
.hb-start { all: unset; display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .8rem 0 .4rem; cursor: pointer; border-radius: 3px; color: #fff;
    font: 700 .95rem var(--ds-pixel); letter-spacing: .02em; text-shadow: 1px 1px 0 #0b3a1080;
    background: linear-gradient(180deg, #8cf06a 0%, #3fd14a 48%, #2fbf3a 52%, #24a52e 100%); box-shadow: 0 0 0 1px var(--ds-dark), inset 1px 1px 0 #ffffff99, inset -1px -2px 0 #137a1c; }
.hb-start img { image-rendering: pixelated; }
.hb-start[aria-expanded="true"], .hb-start:active { box-shadow: 0 0 0 1px var(--ds-dark), inset 1px 1px 0 #0b3a1066; transform: translateY(1px); }
.hb-start:focus-visible { outline: 1px dotted var(--ds-dark); outline-offset: 2px; }
.hb-tasks { flex: 1; min-width: 0; display: flex; gap: .3rem; overflow: hidden; }
.hb-task { all: unset; display: inline-flex; align-items: center; gap: .4rem; height: 32px; max-width: 11rem; padding: 0 .65rem; border-radius: 2px; cursor: pointer;
    font: 600 .8125rem var(--ds-pixel); color: var(--ds-text-strong); background: var(--ds-surface-muted); box-shadow: 0 0 0 1px var(--ds-dark), var(--ds-raised); white-space: nowrap; }
.hb-task span { overflow: hidden; text-overflow: ellipsis; }
.hb-task.is-active { background: #fff repeating-linear-gradient(45deg, #0000 0 2px, #1f4fd80f 2px 4px); box-shadow: 0 0 0 1px var(--ds-dark), var(--ds-sunken); }
.hb-task:focus-visible { outline: 1px dotted var(--ds-dark); outline-offset: -4px; }
.hb-tray { display: flex; align-items: center; gap: .7rem; height: 34px; padding: 0 .65rem; border-radius: 2px; background: #e4e2db; box-shadow: var(--ds-sunken); }
.hb-tray-radio { all: unset; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; max-width: 15rem; color: var(--ds-text-strong); font: 600 .8125rem var(--ds-pixel); }
.hb-tray-radio .ds-icon { width: 1.1rem; height: 1.1rem; color: var(--ds-brand); }
.hb-tray-radio .ds-eq { color: var(--ds-accent); height: 12px; }
.hb-tray-track { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-tray-radio:focus-visible { outline: 1px dotted var(--ds-dark); outline-offset: 3px; }
.hb-tray-item { display: inline-flex; align-items: center; gap: .3rem; font: 600 .8125rem var(--ds-pixel); color: var(--ds-text-strong); }
.hb-tray-item .ds-icon { width: 1rem; height: 1rem; color: #157a1d; }
.hb-tray-clock { font: 400 1.15rem var(--ds-mono); color: var(--ds-text-strong); }

/* Menu Iniciar */
.hb-start-menu { position: fixed; left: .4rem; bottom: calc(var(--hb-taskbar) - 2px); z-index: 90; width: 17rem; display: grid; grid-template-columns: 2rem 1fr;
    background: var(--ds-surface-muted); border-radius: 4px 4px 0 0; box-shadow: var(--ds-outline), var(--ds-raised), var(--ds-shadow-lg); animation: ds-pop-in var(--ds-dur-fast) var(--ds-ease-out); transform-origin: left bottom; }
.hb-start-menu::before { content: "Habblit"; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; padding-top: .6rem; border-radius: 3px 0 0 0;
    background: linear-gradient(0deg, #0b2a8a, #1f4fd8 60%, #5aa8ff); color: #fff; font: 700 1.1rem var(--ds-display); letter-spacing: .08em; }
.hb-start-menu ul { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 1px; }
.hb-start-menu a, .hb-start-menu button { all: unset; display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem; border-radius: 2px; cursor: pointer; color: var(--ds-text-strong); font: 600 .9375rem var(--ds-pixel); }
.hb-start-menu a:hover, .hb-start-menu button:hover, .hb-start-menu a:focus-visible, .hb-start-menu button:focus-visible { background: var(--ds-brand); color: #fff; }
.hb-start-menu .ds-icon { width: 1.25rem; height: 1.25rem; }
.hb-start-menu hr { border: 0; border-top: 1px solid var(--ds-border); border-bottom: 1px solid #fff; margin: 3px 2px; }

/* Estado vazio com o mascote */
.hb-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem; text-align: center; color: var(--ds-text-muted); font-size: .875rem; }
.hb-empty img { width: 72px; height: 72px; image-rendering: pixelated; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
    .hb-span-4, .hb-span-5, .hb-span-6, .hb-span-7, .hb-span-8 { grid-column: span 12; }
    .hb-lobby .ds-container { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    :root { --hb-wall: 128px; }
    .hb-wall-logo { height: 52px; }
    .hb-wall-user span { display: none; }
    .hb-desk { grid-template-columns: 1fr; }
    .hb-icons { position: static; flex-direction: row; overflow-x: auto; gap: .2rem; }
    .hb-icon { min-width: 4.6rem; }
    .hb-me, .hb-profile { grid-template-columns: 1fr; }
    .hb-tasks { display: none; }
    .hb-tray-track { max-width: 7rem; }
    .hb-tray-clock { display: none; }
    .hb-lobby { background-position: 30% center; }
}

/* ======================================================================
   Animações "web Y2K" da CMS (pontuais; tudo desliga com prefers-reduced-motion)
   ====================================================================== */
/* Moedas reais na carteira */
.hb-coin { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }
.hb-chip:hover .hb-coin { animation: hb-coin-spin 600ms steps(6); }
@keyframes hb-coin-spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(.15); } 100% { transform: scaleX(1); } }

/* Letreiro (marquee) abaixo do papel de parede */
.hb-ticker { position: relative; display: flex; align-items: center; height: 30px; overflow: hidden; background: #0b1840; color: var(--ds-lime);
    font: 400 1.15rem/1 var(--ds-mono); box-shadow: inset 0 -1px 0 #000, 0 1px 0 #ffffff33; }
.hb-ticker-label { position: relative; z-index: 1; flex: 0 0 auto; height: 100%; display: flex; align-items: center; gap: .35rem; padding: 0 .7rem; color: #fff;
    background: linear-gradient(180deg, #ff8cc6, #ff4fa3 55%, #e23d8c); font: 700 .75rem var(--ds-pixel); text-transform: uppercase; letter-spacing: .06em; box-shadow: 2px 0 0 #0b1840; }
.hb-ticker-track { display: flex; gap: 3rem; padding-left: 100%; white-space: nowrap; animation: hb-marquee var(--hb-ticker-speed, 40s) linear infinite; will-change: transform; }
.hb-ticker:hover .hb-ticker-track { animation-play-state: paused; }
.hb-ticker-track a, .hb-ticker-track span { color: var(--ds-lime); }
.hb-ticker-track a:hover { color: #fff; text-decoration: underline; }
.hb-ticker-track i { color: #ff4fa3; font-style: normal; }
@keyframes hb-marquee { to { transform: translateX(-100%); } }

/* Estrelinhas piscando no céu do papel de parede */
.hb-twinkle { position: absolute; width: 5px; height: 5px; pointer-events: none; z-index: 0;
    background: linear-gradient(#fff, #fff) center / 1px 5px no-repeat, linear-gradient(#fff, #fff) center / 5px 1px no-repeat; animation: hb-twinkle 2.4s steps(4) infinite; }
.hb-twinkle.is-lime { background: linear-gradient(#b6ff3b, #b6ff3b) center / 1px 5px no-repeat, linear-gradient(#b6ff3b, #b6ff3b) center / 5px 1px no-repeat; }
.hb-twinkle.is-pink { background: linear-gradient(#ff4fa3, #ff4fa3) center / 1px 5px no-repeat, linear-gradient(#ff4fa3, #ff4fa3) center / 5px 1px no-repeat; }
@keyframes hb-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.4); } 70% { opacity: .5; transform: scale(.8); } }

/* Rastro de brilhos do cursor (só mouse; criado em cms.js) */
.hb-spark { position: fixed; z-index: 9999; width: 7px; height: 7px; pointer-events: none; transform: translate(-50%, -50%);
    background: linear-gradient(var(--c), var(--c)) center / 1px 7px no-repeat, linear-gradient(var(--c), var(--c)) center / 7px 1px no-repeat;
    animation: hb-spark 650ms steps(5) forwards; }
@keyframes hb-spark { from { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } to { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(.3); } }

/* Selo "NOVO!" piscando (estilo GIF) */
.hb-new { display: inline-block; margin-bottom: .3rem; padding: .1rem .35rem; font: 700 .7rem var(--ds-pixel); letter-spacing: .06em; color: #0b1840;
    background: var(--ds-lime); box-shadow: 0 0 0 1px #0b1840, 2px 2px 0 #0b1840; animation: hb-new 900ms steps(2, end) infinite; }
@keyframes hb-new { 50% { background: #ff4fa3; color: #fff; } }
.hb-news-item .hb-new { margin: 0 .3rem 0 0; vertical-align: 1px; }

/* Ícones da área de trabalho: pulinho no hover, "abrir" no clique */
.hb-icon:hover .hb-icon-tile { animation: hb-hop 420ms var(--ds-ease-pop); }
@keyframes hb-hop { 35% { transform: translateY(-5px) rotate(-3deg); } 70% { transform: translateY(1px); } }
.hb-icon.is-opening .hb-icon-tile { animation: hb-open 260ms var(--ds-ease-out) forwards; }
@keyframes hb-open { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.25); filter: brightness(1.6); } 100% { transform: scale(1); filter: brightness(1); } }

/* Janelas abrindo em sequência */
/* Mesmo nome de animação da entrada (#screen.is-entering): ao tirar a classe o navegador não toca de novo */
#content .ds-module, .hb-lobby .ds-module, .hb-hello { animation: hb-win-in 320ms var(--ds-ease-pop, cubic-bezier(.34, 1.56, .64, 1)) both; transform-origin: 50% 0; }
#content .hb-stack > .ds-module:nth-child(2), .hb-grid > .ds-module:nth-child(2) { animation-delay: 60ms; }
#content .hb-stack > .ds-module:nth-child(3), .hb-grid > .ds-module:nth-child(3) { animation-delay: 120ms; }
#content .hb-span-4 .ds-module:nth-child(1) { animation-delay: 90ms; }
#content .hb-span-4 .ds-module:nth-child(2) { animation-delay: 150ms; }
#content .hb-span-4 .ds-module:nth-child(3) { animation-delay: 210ms; }
.hb-news-grid .ds-module:nth-child(n) { animation-delay: calc(var(--i, 0) * 50ms); }

/* Títulos de página com brilho holográfico (WordArt discreto) */
.hb-page-title span.hb-holo-text { background: linear-gradient(90deg, #fff 0%, #b6ff3b 30%, #fff 50%, #ff9fd0 70%, #fff 100%); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: ds-shimmer 5s linear infinite; text-shadow: none; filter: drop-shadow(2px 2px 0 #0b1840); }

/* Contador de visitantes em visor LCD */
.hb-lcd { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .45rem; background: #0b1840; color: var(--ds-lime); border-radius: 2px;
    font: 400 1.25rem/1 var(--ds-mono); letter-spacing: .12em; box-shadow: 0 0 0 1px #000, inset 0 0 6px #b6ff3b33; text-shadow: 0 0 4px #b6ff3b80; }
.hb-lcd small { font: 600 .65rem var(--ds-pixel); letter-spacing: .04em; color: #ffffffb3; text-shadow: none; text-transform: uppercase; }
.hb-tray-item.hb-lcd { padding: .1rem .4rem; }
.hb-tray-item.hb-lcd .ds-icon { color: var(--ds-lime); }

/* Rodapé com botões 88x31 */
.hb-footer { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; padding: 1.2rem 0 1.6rem; color: #0b1840b3; font-size: .75rem; }
.hb-88 { width: 88px; height: 31px; display: inline-grid; grid-template-columns: 22px 1fr; align-items: center; overflow: hidden; border: 1px solid #0b1840; box-shadow: 2px 2px 0 #0b184055;
    font: 700 9px/1.05 var(--ds-mono); letter-spacing: .02em; text-transform: uppercase; color: #fff; image-rendering: pixelated; }
.hb-88 b { height: 100%; display: grid; place-items: center; background: #0b1840; color: var(--ds-lime); font-size: 14px; }
.hb-88 span { padding: 0 3px; }
.hb-88.is-blue { background: linear-gradient(180deg, #5aa8ff, #1f4fd8); }
.hb-88.is-pink { background: linear-gradient(180deg, #ff9fd0, #e23d8c); }
.hb-88.is-lime { background: linear-gradient(180deg, #e4ff9e, #8fd61f); color: #0b1840; }
.hb-88.is-silver { background: linear-gradient(180deg, #fff, #c9ccd4); color: #0b1840; }
.hb-88:hover { animation: ds-rgb-split 300ms steps(3); filter: brightness(1.1); }
.hb-88.is-blink b { animation: hb-new 900ms steps(2, end) infinite; }

@media (prefers-reduced-motion: reduce) {
    html:not(.hb-motion-on) .hb-ticker-track { animation: none; padding-left: .8rem; }
    html:not(.hb-motion-on) .hb-twinkle, html:not(.hb-motion-on) .hb-spark { display: none; }
    html:not(.hb-motion-on) .hb-new, html:not(.hb-motion-on) .hb-88.is-blink b { animation: none; }
}
@media (max-width: 760px) { .hb-ticker { font-size: 1rem; } .hb-footer { padding-bottom: 1rem; } }

/* Popup da promoção (/ds/promo.css) acima da barra de tarefas */
:root { --hbp-bottom: calc(var(--hb-taskbar) + 12px); }

/* ---------- Transição entre telas (estilo Win9x) ---------- */
/* Sai: a tela encolhe um pouco e some; entra: janelas abrem em sequência (pop) */
#screen.is-leaving .hb-desk { opacity: 0; transform: scale(.985) translateY(6px); transition: opacity 140ms var(--ds-ease-out, ease-out), transform 140ms var(--ds-ease-out, ease-out); }
#screen.is-entering .hb-icons > * { animation: hb-win-in 260ms var(--ds-ease-pop, cubic-bezier(.34, 1.56, .64, 1)) both; }
#screen.is-entering .hb-icons > :nth-child(2) { animation-delay: 30ms; }
#screen.is-entering .hb-icons > :nth-child(3) { animation-delay: 60ms; }
#screen.is-entering .hb-icons > :nth-child(4) { animation-delay: 90ms; }
#screen.is-entering .hb-icons > :nth-child(n+5) { animation-delay: 120ms; }
#screen.is-entering #content .ds-module, #screen.is-entering #content .hb-page-title { animation: hb-win-in 320ms var(--ds-ease-pop, cubic-bezier(.34, 1.56, .64, 1)) both; transform-origin: 50% 0; }
#screen.is-entering #content .hb-stack > :nth-child(2), #screen.is-entering #content .ds-module:nth-of-type(2) { animation-delay: 70ms; }
#screen.is-entering #content .hb-stack > :nth-child(3), #screen.is-entering #content .ds-module:nth-of-type(3) { animation-delay: 140ms; }
#screen.is-entering #content .hb-stack > :nth-child(n+4) { animation-delay: 200ms; }
@keyframes hb-win-in { from { opacity: 0; transform: translateY(10px) scale(.96); clip-path: inset(0 0 100% 0); } 60% { clip-path: inset(0 0 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
/* Retângulo pontilhado que "voa" do link até a janela (como abrir programa no Windows 95) */
.hb-zoomrect { position: fixed; z-index: 9500; pointer-events: none; border: 2px dotted #0b1840; outline: 1px dotted #ffffffcc; outline-offset: -3px;
    transition: left 260ms var(--ds-ease-out, ease-out), top 260ms var(--ds-ease-out, ease-out), width 260ms var(--ds-ease-out, ease-out), height 260ms var(--ds-ease-out, ease-out), opacity 260ms ease-in; }
@media (prefers-reduced-motion: reduce) { html:not(.hb-motion-on) #screen.is-leaving .hb-desk { transition: none; } html:not(.hb-motion-on) #screen.is-entering * { animation: none !important; } html:not(.hb-motion-on) .hb-zoomrect { display: none; } }

/* ======================================================================
   Cabeçalho: jogadores online (no lugar do cartão do usuário)
   ====================================================================== */
.hb-wall-online { display: flex; align-items: center; gap: .55rem; padding: .3rem .6rem .3rem .4rem; border-radius: var(--ds-radius); text-decoration: none;
    background: var(--ds-surface-muted); box-shadow: 0 0 0 1px var(--ds-dark), inset 1px 1px 0 #fff, inset -1px -1px 0 #7b7f8c, 3px 3px 0 #0b184040; color: var(--ds-text-strong); }
.hb-wall-online:hover { filter: brightness(1.03); }
.hb-wall-online:focus-visible { outline: 1px dotted #fff; outline-offset: 3px; }
.hb-online-heads { display: flex; align-items: center; padding-left: 10px; }
.hb-online-heads img { position: relative; width: 33px; height: 33px; margin-left: -10px; object-fit: none; object-position: center 30%; image-rendering: pixelated; border-radius: 50%;
    background: linear-gradient(#bfe0ff, #e8f3ff); box-shadow: 0 0 0 2px var(--ds-surface-muted), 0 0 0 3px var(--ds-dark);
    animation: hb-head-in 380ms var(--ds-ease-pop) both; animation-delay: calc(var(--i) * 70ms); transition: transform 120ms; }
.hb-online-heads img:hover { transform: translateY(-3px); z-index: 1; }
@keyframes hb-head-in { from { opacity: 0; transform: translateY(8px) scale(.6); } }
.hb-online-more { margin-left: 4px; padding: .1rem .35rem; border-radius: 2px; font: 700 .7rem var(--ds-pixel); color: #fff; background: var(--ds-dark); }
.hb-online-count { display: flex; align-items: center; gap: .35rem; padding: .15rem .45rem; border-radius: 2px; background: #0b1840; color: var(--ds-lime);
    box-shadow: 0 0 0 1px #000, inset 0 0 6px #b6ff3b33; }
.hb-online-count b { font: 400 1.5rem/1 var(--ds-mono); letter-spacing: .06em; text-shadow: 0 0 4px #b6ff3b80; }
.hb-online-count small { font: 700 .55rem/1.05 var(--ds-pixel); text-transform: uppercase; letter-spacing: .04em; color: #ffffffb3; }
.hb-led { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #eaffc0, #6fd31d 60%, #2f7a0b); box-shadow: 0 0 6px #b6ff3b; animation: hb-led 1.6s steps(2, end) infinite; }
@keyframes hb-led { 50% { box-shadow: 0 0 1px #b6ff3b; filter: brightness(.7); } }
@media (max-width: 760px) { .hb-online-heads img:nth-child(n+3) { display: none; } .hb-online-count small { display: none; } }

/* ======================================================================
   Barra de tarefas: inicialização rápida, volume, rede, diamantes, relógio piscando, voltar ao topo
   ====================================================================== */
.hb-quick { display: flex; gap: 2px; padding: 0 .35rem 0 .3rem; margin-right: .1rem; box-shadow: inset -1px 0 0 #7b7f8c, 1px 0 0 #fff; height: 30px; align-items: center; }
.hb-quick-btn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 2px; color: var(--ds-brand); }
.hb-quick-btn .ds-icon { width: 1.05rem; height: 1.05rem; }
.hb-quick-btn:hover { background: #fff; box-shadow: 0 0 0 1px var(--ds-dark), inset -1px -1px 0 #7b7f8c; }
.hb-quick-btn:hover .ds-icon { animation: hb-hop 420ms var(--ds-ease-pop); }
.hb-quick-btn:active { box-shadow: 0 0 0 1px var(--ds-dark), var(--ds-sunken); }
.hb-quick-btn:focus-visible { outline: 1px dotted var(--ds-dark); outline-offset: 1px; }
.hb-tray-sep { width: 1px; align-self: stretch; margin: 6px 0; background: #7b7f8c; box-shadow: 1px 0 0 #fff; }
.hb-tray-icon { all: unset; box-sizing: border-box; display: inline-flex; align-items: flex-end; gap: 1px; height: 14px; cursor: default; }
/* Volume: alto-falante + ondas */
.hb-vol { cursor: pointer; width: 20px; align-items: center; }
.hb-vol::before { content: ""; width: 6px; height: 8px; background: var(--ds-text-strong); clip-path: polygon(0 25%, 40% 25%, 100% 0, 100% 100%, 40% 75%, 0 75%); }
.hb-vol i { width: 2px; margin-left: 1px; border-radius: 1px; background: var(--ds-text-strong); }
.hb-vol i:nth-child(1) { height: 4px; } .hb-vol i:nth-child(2) { height: 8px; } .hb-vol i:nth-child(3) { height: 12px; }
.hb-vol[data-level="0"] i, .hb-vol[data-level="1"] i:nth-child(n+2), .hb-vol[data-level="2"] i:nth-child(3) { opacity: .2; }
.hb-vol:focus-visible { outline: 1px dotted var(--ds-dark); outline-offset: 3px; }
.hb-vol-pop { position: fixed; right: 64px; bottom: calc(var(--hb-taskbar) + 6px); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .5rem .6rem;
    background: var(--ds-surface-muted); border-radius: 3px; box-shadow: 0 0 0 1px var(--ds-dark), inset 1px 1px 0 #fff, inset -1px -1px 0 #7b7f8c, 3px 3px 0 #0b184040;
    font: 700 .7rem var(--ds-pixel); color: var(--ds-text-strong); animation: ds-pop-in 180ms var(--ds-ease-pop); }
.hb-vol-pop[hidden] { display: none; }
.hb-vol-pop input { writing-mode: vertical-lr; direction: rtl; height: 90px; width: 18px; accent-color: var(--ds-brand); }
/* Rede: barrinhas de sinal */
.hb-net i { width: 3px; background: #9aa3b5; }
.hb-net i:nth-child(1) { height: 4px; } .hb-net i:nth-child(2) { height: 7px; } .hb-net i:nth-child(3) { height: 10px; } .hb-net i:nth-child(4) { height: 13px; }
.hb-net[data-bars="1"] i:nth-child(-n+1), .hb-net[data-bars="2"] i:nth-child(-n+2), .hb-net[data-bars="3"] i:nth-child(-n+3), .hb-net[data-bars="4"] i { background: #1f9d3a; }
.hb-net[data-bars="0"] i { background: #c0392b; opacity: .5; }
/* Diamantes */
.hb-tray-dia[hidden] { display: none; }
.hb-tray-dia img { width: 15px; height: 15px; image-rendering: pixelated; }
.hb-tray-dia b { font: 400 1.05rem var(--ds-mono); }
/* Relógio: dois-pontos piscando */
.hb-tray-clock i { font-style: normal; animation: hb-colon 1s steps(2, end) infinite; }
@keyframes hb-colon { 50% { opacity: 0; } }
/* Voltar ao topo: a faixinha no canto, como o Mostrar área de trabalho */
.hb-show-desk { all: unset; align-self: stretch; width: 8px; margin: 4px -.25rem 4px .2rem; border-radius: 1px; cursor: pointer; box-shadow: inset 1px 0 0 #fff, inset -1px 0 0 #7b7f8c; }
.hb-show-desk:hover { background: linear-gradient(#5aa8ff55, #1f4fd844); }
.hb-show-desk:focus-visible { outline: 1px dotted var(--ds-dark); }
@media (max-width: 760px) { .hb-quick, .hb-net, .hb-tray-dia, .hb-show-desk, .hb-tray-sep { display: none; } }

/* ======================================================================
   Mais animações web Y2K
   ====================================================================== */
/* Bolhas de sabão subindo no fundo (Frutiger Aero) */
.hb-bubbles { position: fixed; inset: 0 0 var(--hb-taskbar) 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hb-bubbles i { position: absolute; bottom: -60px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, #ffffffd9 0 8%, #ffffff33 9% 30%, #5aa8ff1f 55%, #ffffff40 70%, transparent 72%);
    box-shadow: inset 0 0 0 1px #ffffff59, inset -3px -4px 8px #ff9fd033; animation: hb-bubble var(--d) linear infinite; animation-delay: var(--delay); }
@keyframes hb-bubble { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(18px, -55vh); } 90% { opacity: .8; } 100% { transform: translate(-12px, -110vh); opacity: 0; } }
#screen { position: relative; z-index: 1; }
/* Brilho em estrela no clique (glitter) */
.hb-burst { position: fixed; z-index: 9600; width: 0; height: 0; pointer-events: none; }
.hb-burst i { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; background: var(--c);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: hb-shard 520ms var(--ds-ease-out) forwards; }
@keyframes hb-shard { from { transform: rotate(var(--a)) translateY(0) scale(1.4); opacity: 1; } to { transform: rotate(var(--a)) translateY(-26px) scale(.2); opacity: 0; } }
/* Janelas: formigas marchando no contorno e reflexo na barra de título ao passar o mouse */
.hb-desk .ds-module { position: relative; }
.hb-desk .ds-module::after { content: ""; position: absolute; inset: -4px; pointer-events: none; border-radius: 5px; opacity: 0;
    background: linear-gradient(90deg, #0b1840 50%, transparent 0) top / 8px 1px repeat-x, linear-gradient(90deg, #0b1840 50%, transparent 0) bottom / 8px 1px repeat-x,
        linear-gradient(0deg, #0b1840 50%, transparent 0) left / 1px 8px repeat-y, linear-gradient(0deg, #0b1840 50%, transparent 0) right / 1px 8px repeat-y;
    transition: opacity 120ms; }
.hb-desk .ds-module:hover::after { opacity: .5; animation: hb-ants 500ms linear infinite; }
@keyframes hb-ants { to { background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px; } }
.hb-desk .ds-module-header { position: relative; overflow: hidden; }
.hb-desk .ds-module-header::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; pointer-events: none; transform: translateX(-140%) skewX(-20deg);
    background: linear-gradient(90deg, transparent, #ffffff73, transparent); }
.hb-desk .ds-module:hover .ds-module-header::after { animation: ds-sheen 700ms var(--ds-ease-out); }
/* Título da tela em onda (WordArt) ao entrar e ao passar o mouse */
.hb-wave { display: inline-block; white-space: pre; animation: hb-wave 700ms var(--ds-ease-pop) both; animation-delay: calc(var(--i) * 35ms); }
/* No hover a onda é somada à de entrada (que já terminou), sem trocar: ao tirar o mouse a entrada não repete */
.hb-page-title:hover .hb-wave { animation: hb-wave 700ms var(--ds-ease-pop) both, hb-wave-loop 900ms ease-in-out; animation-delay: calc(var(--i) * 35ms), calc(var(--i) * 45ms); }
@keyframes hb-wave { from { transform: translateY(14px) scale(.6); opacity: 0; } 60% { transform: translateY(-5px); } to { transform: none; opacity: 1; } }
@keyframes hb-wave-loop { 0%, 100% { transform: none; } 40% { transform: translateY(-6px); } }
/* Cursor piscando depois do No ar do letreiro */
.hb-ticker-label::after { content: "_"; margin-left: 1px; animation: hb-colon 900ms steps(2, end) infinite; }
@media (prefers-reduced-motion: reduce) {
    html:not(.hb-motion-on) .hb-bubbles, html:not(.hb-motion-on) .hb-burst { display: none; }
    html:not(.hb-motion-on) .hb-led, html:not(.hb-motion-on) .hb-tray-clock i, html:not(.hb-motion-on) .hb-online-heads img, html:not(.hb-motion-on) .hb-wave, html:not(.hb-motion-on) .hb-ticker-label::after, html:not(.hb-motion-on) .hb-desk .ds-module:hover::after, html:not(.hb-motion-on) .hb-desk .ds-module:hover .ds-module-header::after { animation: none !important; }
}
/* Letras em onda herdam o degradê holográfico do título */
.hb-holo-text .hb-wave { background: inherit; background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Cabeçalho: só o logo, centralizado */
.hb-wall .ds-container { justify-content: center; }

/* ======================================================================
   Comunidade: abas (Rankings, Equipe, Colaboradores, Oficiais, Rádio) e cartões da equipe
   ====================================================================== */
.hb-tabs { display: flex; gap: 2px; margin: 0 0 -1px; padding: 0 .4rem; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 2; }
.hb-tabs::-webkit-scrollbar { display: none; }
.hb-tab { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .5rem .85rem .45rem; border-radius: 4px 4px 0 0; text-decoration: none;
    font: 700 .875rem var(--ds-pixel); color: var(--ds-text-strong); background: #dcdfe8; box-shadow: inset 1px 1px 0 #fff, inset -1px 0 0 #7b7f8c, 0 0 0 1px var(--ds-dark);
    transform: translateY(3px); transition: transform 120ms var(--ds-ease-out, ease-out), background 120ms; }
.hb-tab .ds-icon { width: 1rem; height: 1rem; color: var(--ds-brand); }
.hb-tab:hover { transform: translateY(1px); background: #eef1f8; }
.hb-tab:hover .ds-icon { animation: hb-hop 420ms var(--ds-ease-pop); }
.hb-tab.is-active { transform: none; color: #fff; background: var(--ds-titlebar); text-shadow: 1px 1px 0 #0b184099; padding-bottom: .55rem; }
.hb-tab.is-active .ds-icon { color: #fff; }
.hb-tab:focus-visible { outline: 1px dotted var(--ds-dark); outline-offset: -4px; }
.hb-tab-panel { position: relative; padding: .9rem; border-radius: 0 4px 4px 4px; background: #ffffff59; box-shadow: 0 0 0 1px var(--ds-dark), inset 1px 1px 0 #ffffffb3; backdrop-filter: blur(2px); }
#screen.is-entering .hb-tabs .hb-tab { animation: hb-win-in 260ms var(--ds-ease-pop) both; }
#screen.is-entering .hb-tabs .hb-tab:nth-child(2) { animation-delay: 40ms; } #screen.is-entering .hb-tabs .hb-tab:nth-child(3) { animation-delay: 80ms; }
#screen.is-entering .hb-tabs .hb-tab:nth-child(4) { animation-delay: 120ms; } #screen.is-entering .hb-tabs .hb-tab:nth-child(5) { animation-delay: 160ms; }

/* Cartões de membro: corpo do avatar num quadro, nome, status, login e função */
.hb-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .6rem; }
.hb-span-4 .hb-members { grid-template-columns: 1fr; }
.hb-member { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: .65rem; align-items: start; padding: .55rem .6rem; border-radius: 3px; text-decoration: none; color: var(--ds-text-strong);
    background: linear-gradient(180deg, #fff 0%, #f3f5fb 100%); box-shadow: 0 0 0 1px #9aa3b5, inset 1px 1px 0 #fff, 2px 2px 0 #0b18401f;
    animation: hb-member-in 360ms var(--ds-ease-pop, cubic-bezier(.34, 1.56, .64, 1)) both; animation-delay: calc(var(--i) * 60ms); transition: transform 140ms var(--ds-ease-out, ease-out), box-shadow 140ms; }
@keyframes hb-member-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.hb-member:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--ds-dark), inset 1px 1px 0 #fff, 4px 4px 0 #0b184033; }
.hb-member:focus-visible { outline: 1px dotted var(--ds-dark); outline-offset: 2px; }
.hb-member-fig { position: relative; display: block; width: 58px; height: 100px; overflow: hidden; border-radius: 2px;
    background: radial-gradient(ellipse at 50% 90%, #ffffff 0%, #d9e6ff 60%, #b9cdf5 100%); box-shadow: inset 0 0 0 1px #9aa3b5, inset 1px 1px 0 #7b7f8c; }
.hb-member-fig img { position: absolute; left: 50%; top: -18px; max-width: none; width: auto; height: auto; transform: translateX(-50%); image-rendering: pixelated; transition: transform 160ms var(--ds-ease-pop); }
.hb-member:hover .hb-member-fig img { transform: translate(-50%, -3px); }
.hb-member-info { display: grid; gap: .2rem; min-width: 0; padding-right: 3.6rem; }
.hb-member-info b { font: 700 1rem/1.15 var(--ds-pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-member-line { display: flex; gap: .3rem; align-items: flex-start; font-size: .78rem; line-height: 1.3; color: var(--ds-text-muted); }
.hb-member-line .ds-icon { flex: 0 0 auto; width: .85rem; height: .85rem; margin-top: .1rem; color: var(--ds-brand); }
.hb-member-line em { font-style: normal; font-weight: 700; color: var(--ds-text-strong); }
.hb-status { position: absolute; top: .55rem; right: .55rem; display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .4rem; border-radius: 2px;
    font: 700 .62rem var(--ds-pixel); text-transform: uppercase; letter-spacing: .05em; color: #fff; background: #5d6578; box-shadow: 0 0 0 1px #0b1840; }
.hb-status i { width: 7px; height: 7px; border-radius: 50%; background: #c0392b; box-shadow: 0 0 4px #c0392b; }
.hb-status.is-on { color: #0b1840; background: var(--ds-lime); }
.hb-status.is-on i { background: #2f7a0b; box-shadow: 0 0 5px #b6ff3b; animation: hb-led 1.6s steps(2, end) infinite; }
.hb-team-empty { margin: .4rem 0; text-align: center; color: var(--ds-text-muted); font-size: .875rem; }
.hb-team-cta { margin: 0 0 .7rem; font-size: .875rem; line-height: 1.45; }
.hb-team-cta-btn { width: 100%; justify-content: center; text-transform: uppercase; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) {
    html:not(.hb-motion-on) .hb-member, html:not(.hb-motion-on) .hb-status.is-on i, html:not(.hb-motion-on) #screen.is-entering .hb-tabs .hb-tab { animation: none !important; }
}

/* ======================================================================
   Hall da Fama (aba da Comunidade): pódio do Top Comunidade e listas laterais
   ====================================================================== */
/* Ícone dourado do Hall da Fama na área de trabalho */
.hb-icon-tile.is-gold { background: linear-gradient(180deg, #fff1a8 0%, #ffd34d 50%, #f0a500 52%, #d98b00 100%); color: #4a2a00; }
.hb-icon-tile.is-gold .ds-icon { filter: none; }
.hb-hof-head { margin: 0 0 .8rem; }
.hb-hof-head h2 { margin: 0; font: 700 1.35rem var(--ds-display); color: var(--ds-text-strong); }
.hb-hof-head p { margin: .2rem 0 0; font-size: .875rem; color: var(--ds-text-muted); }
.hb-hof-card { overflow: hidden; border-radius: 4px; background: var(--ds-surface-muted); box-shadow: 0 0 0 1px var(--ds-dark), inset 1px 1px 0 #fff, 4px 4px 0 #0b184033;
    animation: hb-win-in 320ms var(--ds-ease-pop, cubic-bezier(.34, 1.56, .64, 1)) both; }
.hb-hof-banner { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; min-height: 64px; padding: .7rem .8rem; color: #fff;
    background: linear-gradient(90deg, #0b1840e6 0%, #0b184099 55%, #0b184033 100%), url(/habblit/cms-header.png) center 70% / cover no-repeat; image-rendering: pixelated; }
.hb-hof-banner.is-pink { background: linear-gradient(90deg, #5a0f36e6 0%, #8a1d5699 55%, #ff4fa333 100%), url(/habblit/cms-header.png) right 60% / cover no-repeat; }
.hb-hof-banner.is-lime { background: linear-gradient(90deg, #12360ae6 0%, #2c6a1699 55%, #b6ff3b33 100%), url(/habblit/cms-header.png) left 60% / cover no-repeat; }
.hb-hof-banner b { display: block; font: 700 1.25rem/1.05 var(--ds-display); letter-spacing: .03em; text-transform: uppercase; text-shadow: 2px 2px 0 #000; }
.hb-hof-banner span:not(.hb-hof-pill) { display: block; margin-top: .2rem; font-size: .78rem; color: #ffffffd9; }
.hb-hof-pill { flex: 0 0 auto; padding: .2rem .45rem; border-radius: 2px; font: 700 .65rem var(--ds-pixel); text-transform: uppercase; color: var(--ds-text-strong); background: #fff; box-shadow: 0 0 0 1px #000, 2px 2px 0 #0006; }
.hb-hof-banner::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; pointer-events: none; background: linear-gradient(90deg, transparent, #ffffff40, transparent); transform: translateX(-140%) skewX(-20deg); }
.hb-hof-card:hover .hb-hof-banner::after { animation: ds-sheen 800ms var(--ds-ease-out); }
.hb-hof-body { padding: .8rem; }

/* Pódio: 2º, 1º (mais alto) e 3º */
.hb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: .7rem; margin-bottom: .6rem; }
.hb-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .8rem .5rem .7rem; border-radius: 4px; text-decoration: none; color: var(--ds-text-strong); text-align: center;
    background: linear-gradient(180deg, #f6f7fb, #e6e9f2); box-shadow: 0 0 0 1px #9aa3b5, inset 1px 1px 0 #fff;
    animation: hb-pod-rise 520ms var(--ds-ease-pop, cubic-bezier(.34, 1.56, .64, 1)) both; animation-delay: calc(var(--i) * 140ms + 120ms); transition: transform 150ms var(--ds-ease-out, ease-out); }
@keyframes hb-pod-rise { from { opacity: 0; transform: translateY(40px) scaleY(.6); transform-origin: 50% 100%; } }
.hb-pod:hover { transform: translateY(-4px); }
.hb-pod.is-empty { min-height: 1px; background: none; box-shadow: none; animation: none; }
.hb-pod.is-p1 { padding-top: 1rem; background: linear-gradient(180deg, #fff6d6 0%, #ffe39a 100%); box-shadow: 0 0 0 1px #c99a1e, inset 1px 1px 0 #fff, 0 0 18px #ffcf3f66; }
.hb-pod.is-p3 { background: linear-gradient(180deg, #fbf3ee, #f1e1d5); box-shadow: 0 0 0 1px #c49a7a, inset 1px 1px 0 #fff; }
.hb-pod-place { position: absolute; top: .45rem; left: .45rem; padding: .1rem .35rem; border-radius: 2px; font: 700 .7rem var(--ds-pixel); color: var(--ds-text-strong); background: #dfe3ec; }
.is-p1 .hb-pod-place { background: #ffcf3f; } .is-p3 .hb-pod-place { background: #e7c9b2; }
.hb-pod-medal { position: absolute; top: .4rem; right: .45rem; transition: transform 300ms var(--ds-ease-pop); }
.hb-pod-medal .ds-icon { width: 1.15rem; height: 1.15rem; color: #9aa3b5; filter: drop-shadow(1px 1px 0 #0b184055); }
.is-p1 .hb-pod-medal .ds-icon { color: #e0a800; } .is-p3 .hb-pod-medal .ds-icon { color: #b8743f; }
.hb-pod:hover .hb-pod-medal { transform: rotateY(360deg) scale(1.2); }
.hb-pod-fig { position: relative; display: block; width: 72px; height: 96px; overflow: hidden; border-radius: 3px;
    background: radial-gradient(ellipse at 50% 85%, #ffffff 0%, #d9e6ff 60%, #b9cdf5 100%); box-shadow: inset 0 0 0 1px #9aa3b5, 0 0 0 2px #fff, 0 0 0 3px #9aa3b5; }
.is-p1 .hb-pod-fig { width: 84px; height: 112px; background: radial-gradient(ellipse at 50% 85%, #fffbe6 0%, #ffd34d 70%, #f0a500 100%); box-shadow: inset 0 0 0 1px #c99a1e, 0 0 0 2px #fff, 0 0 0 3px #c99a1e; }
.hb-pod-fig img { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); max-width: none; width: auto; height: auto; image-rendering: pixelated; }
.is-p1 .hb-pod-fig img { animation: hb-pod-bob 2.4s ease-in-out infinite; }
@keyframes hb-pod-bob { 50% { transform: translate(-50%, -3px); } }
.hb-pod-lead { margin-top: .15rem; font: 700 .58rem var(--ds-pixel); letter-spacing: .08em; text-transform: uppercase; color: #9a6a00; }
.hb-pod b { font: 700 1rem var(--ds-pixel); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-p1 b { font-size: 1.15rem; }
.hb-pod small { font-size: .72rem; color: var(--ds-text-muted); }
/* Brilho dourado passando no 1º lugar */
.hb-pod.is-p1::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, #ffffff8c 50%, transparent 65%) -200% 0 / 250% 100% no-repeat; animation: hb-pod-shine 3.2s ease-in-out 1s infinite; }
@keyframes hb-pod-shine { 0%, 55% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Listas (4º/5º e laterais) */
.hb-hof-list { list-style: none; margin: 0; padding: 0; }
.hb-hof-list li { border-top: 1px solid #d6dbe8; animation: hb-hof-slide 360ms var(--ds-ease-out, ease-out) both; animation-delay: calc(var(--i) * 70ms + 300ms); }
.hb-hof-list li:first-child { border-top: 0; }
.hb-podium + .hb-hof-list { border-top: 1px solid #d6dbe8; }
@keyframes hb-hof-slide { from { opacity: 0; transform: translateX(-12px); } }
.hb-hof-list a { display: grid; grid-template-columns: 2rem 46px minmax(0, 1fr); align-items: center; gap: .6rem; padding: .45rem .3rem; border-radius: 2px; text-decoration: none; color: var(--ds-text-strong);
    transition: background 120ms, transform 120ms; }
.hb-hof-list a:hover { background: #e3ebff; transform: translateX(3px); }
.hb-hof-list a:focus-visible { outline: 1px dotted var(--ds-dark); outline-offset: -2px; }
.hb-hof-pos { font: 400 1.2rem var(--ds-mono); color: var(--ds-text-muted); text-align: center; }
.hb-hof-fig { position: relative; display: block; width: 46px; height: 58px; overflow: hidden; border-radius: 2px; background: linear-gradient(#e8f0ff, #fff); box-shadow: inset 0 0 0 1px #c9ccd4; }
.hb-hof-fig img { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); max-width: none; width: auto; height: auto; image-rendering: pixelated; }
.hb-hof-who { display: grid; gap: .1rem; min-width: 0; }
.hb-hof-who b { font: 700 .95rem var(--ds-pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-hof-who small { font-size: .75rem; color: var(--ds-text-muted); }
.hb-span-8 .hb-hof-list a { grid-template-columns: 2rem 46px minmax(0, 1fr); }

@media (max-width: 600px) {
    .hb-podium { gap: .35rem; }
    .hb-pod { padding: .6rem .25rem .5rem; }
    .hb-pod-fig { width: 56px; height: 78px; } .is-p1 .hb-pod-fig { width: 64px; height: 88px; }
    .hb-pod b { font-size: .85rem; } .is-p1 b { font-size: .95rem; }
    .hb-pod small { font-size: .65rem; }
    .hb-hof-banner b { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
    html:not(.hb-motion-on) .hb-hof-card, html:not(.hb-motion-on) .hb-pod, html:not(.hb-motion-on) .is-p1 .hb-pod-fig img,
    html:not(.hb-motion-on) .hb-pod.is-p1::after, html:not(.hb-motion-on) .hb-hof-list li { animation: none !important; }
}

/* ======================================================================
   Cartão do jogador: "Entrar no hotel" (botão principal com quantos estão online) e "Meu perfil" (cabeça do avatar)
   ====================================================================== */
.hb-cta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: .5rem; margin: .1rem 0 .2rem; }
.hb-cta, .hb-cta-alt { position: relative; display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .5rem .7rem .5rem .5rem; border-radius: 4px; text-decoration: none; overflow: hidden;
    transition: transform 140ms var(--ds-ease-pop, cubic-bezier(.34, 1.56, .64, 1)), box-shadow 140ms, filter 140ms; }
.hb-cta-txt { display: grid; gap: .1rem; min-width: 0; line-height: 1.1; }
.hb-cta-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-cta-txt small { display: flex; align-items: center; gap: .3rem; overflow: hidden; white-space: nowrap; font-size: .72rem; font-weight: 600; }

/* Principal: verde Y2K com brilho passando, ícone num visor e seta que anda */
.hb-cta { color: #0b1840; background: linear-gradient(180deg, #e9ffb8 0%, #b6ff3b 48%, #8fd61f 52%, #6fbf12 100%);
    box-shadow: 0 0 0 1px #0b1840, inset 1px 1px 0 #ffffffcc, inset -1px -2px 0 #4f8f0c, 3px 3px 0 #0b184040; }
.hb-cta-txt b { font: 700 1.15rem/1 var(--ds-display, "Pixelify Sans", sans-serif); letter-spacing: .02em; text-shadow: 1px 1px 0 #ffffff99; }
.hb-cta small { color: #1e4a06; }
.hb-cta-led { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #2f7a0b; box-shadow: 0 0 0 1px #0b1840, 0 0 6px #2f7a0b; animation: hb-led 1.6s steps(2, end) infinite; }
.hb-cta-ico { display: grid; place-items: center; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 3px; color: var(--ds-lime, #b6ff3b);
    background: radial-gradient(circle at 50% 35%, #1f4fd8 0%, #0b1840 75%); box-shadow: 0 0 0 1px #0b1840, inset 0 0 8px #5aa8ff66; }
.hb-cta-ico .ds-icon { width: 1.5rem; height: 1.5rem; filter: drop-shadow(0 0 3px #b6ff3b99); }
.hb-cta-go { display: grid; place-items: center; flex: 0 0 auto; margin-left: auto; width: 1.7rem; height: 1.7rem; border-radius: 2px; color: #fff;
    background: #0b1840; box-shadow: inset 1px 1px 0 #ffffff33; }
.hb-cta-go .ds-icon { width: 1rem; height: 1rem; }
.hb-cta::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; pointer-events: none; background: linear-gradient(90deg, transparent, #ffffffb3, transparent);
    transform: translateX(-160%) skewX(-20deg); animation: hb-cta-sheen 3.4s ease-in-out 1s infinite; }
@keyframes hb-cta-sheen { 0%, 70% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(420%) skewX(-20deg); } }
.hb-cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 0 1px #0b1840, inset 1px 1px 0 #ffffffcc, inset -1px -2px 0 #4f8f0c, 4px 5px 0 #0b184040, 0 0 14px #b6ff3b88; }
.hb-cta:hover .hb-cta-go { animation: hb-cta-nudge 600ms ease-in-out infinite; }
.hb-cta:hover .hb-cta-ico .ds-icon { animation: hb-hop 420ms var(--ds-ease-pop, ease-out); }
@keyframes hb-cta-nudge { 50% { transform: translateX(3px); } }
.hb-cta:active { transform: translate(1px, 1px); box-shadow: 0 0 0 1px #0b1840, inset 1px 1px 0 #4f8f0c; }
.hb-cta:focus-visible, .hb-cta-alt:focus-visible { outline: 1px dotted #0b1840; outline-offset: 3px; }

/* Secundário: prata em relevo com a cabeça do avatar */
.hb-cta-alt { color: #0b1840; background: linear-gradient(180deg, #ffffff 0%, #e3e6ef 100%); box-shadow: 0 0 0 1px #0b1840, inset 1px 1px 0 #fff, inset -1px -1px 0 #9aa3b5, 3px 3px 0 #0b184026; }
.hb-cta-alt .hb-cta-txt b { font: 700 1rem/1 var(--ds-display, "Pixelify Sans", sans-serif); }
.hb-cta-alt small { color: #5d6578; }
.hb-cta-head { position: relative; display: block; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; overflow: hidden; border-radius: 3px;
    background: radial-gradient(ellipse at 50% 90%, #ffffff 0%, #d9e6ff 60%, #b9cdf5 100%); box-shadow: 0 0 0 1px #9aa3b5, inset 1px 1px 0 #7b7f8c; }
.hb-cta-head img { position: absolute; left: 50%; top: -33px; transform: translateX(-50%); max-width: none; image-rendering: pixelated; transition: transform 160ms var(--ds-ease-pop, ease-out); }
.hb-cta-alt:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #0b1840, inset 1px 1px 0 #fff, inset -1px -1px 0 #9aa3b5, 4px 5px 0 #0b184033; }
.hb-cta-alt:hover .hb-cta-head img { transform: translate(-50%, -2px); }
.hb-cta-alt:active { transform: translate(1px, 1px); }

@media (prefers-reduced-motion: reduce) {
    html:not(.hb-motion-on) .hb-cta::after, html:not(.hb-motion-on) .hb-cta-led, html:not(.hb-motion-on) .hb-cta:hover .hb-cta-go { animation: none !important; }
}

/* ---------- Celular (app) ----------
   CMS em pé no celular, pensando no app: atalhos em grade que cabe na tela, cartão do jogador compacto, oferta em
   formato de faixa (não cobre o conteúdo nem o login), barra de tarefas respeitando a área segura do aparelho. */
@media (max-width: 600px) {
    :root { --hb-wall: 96px; }
    .hb-wall-logo { height: 42px; }
    .hb-desk { gap: .75rem; padding-block: .75rem 1.25rem; }
    .hb-desk.ds-container, .hb-lobby .ds-container { padding-inline: .6rem; }

    /* Atalhos: todos numa linha (quantos houver), sem rolar para o lado */
    .hb-icons { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; gap: .2rem; }
    .hb-icon { min-width: 0; padding: .35rem 0; font-size: clamp(.56rem, 2.7vw, .7rem); line-height: 1.1; letter-spacing: -.01em; }
    .hb-icon-tile { width: 38px; height: 38px; }
    .hb-icon-tile .ds-icon { width: 20px; height: 20px; }

    /* Cartão do jogador: avatar ao lado das informações, sem o palco alto */
    .hb-me { grid-template-columns: 6rem minmax(0, 1fr) !important; gap: .7rem; align-items: start; }
    .hb-me-stage { min-height: 9.5rem; }
    /* Avatar a 90px (metade exata da imagem: continua nítido) e encostado na base do palco, sem cortar a cabeça */
    .hb-me-stage img { width: 90px; height: auto; max-width: none; bottom: 8px; }
    .hb-me h2 { font-size: 1.25rem; }
    .hb-me-motto { margin: .2rem 0 .5rem; font-size: .85rem; }
    .hb-wallet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
    .hb-wallet .hb-chip { min-width: 0; justify-content: flex-start; }
    .hb-me .ds-row { flex-wrap: wrap; gap: .4rem; }
    .hb-me .ds-row .ds-btn { flex: 1 1 8rem; justify-content: center; }
    .hb-me .hb-play { flex-basis: 100%; }

    /* Lobby/cadastro: menos espaço em volta, campos com 16px (o iPhone dá zoom em campos menores) */
    .hb-lobby { padding-block: 1rem; align-items: flex-start; }
    .hb-hello h1 { font-size: 1.5rem; }
    .ds-input, .ds-select, textarea { font-size: 16px; }

    /* Oferta relâmpago (/ds/promo-widget.js): faixa compacta acima da barra de tarefas, sem a vitrine grande */
    body.hb-os .hbp-popup { left: .5rem; right: .5rem; width: auto; padding-top: 0; bottom: calc(var(--hb-taskbar) + .5rem + env(safe-area-inset-bottom)); }
    body.hb-os .hbp-popup .hbp-hero, body.hb-os .hbp-popup .hbp-note, body.hb-os .hbp-popup .hbp-blocks { display: none; }
    body.hb-os .hbp-popup .hbp-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem; align-items: center; padding: 6px 30px 6px 8px; }
    body.hb-os .hbp-popup .hbp-tag, body.hb-os .hbp-popup .hbp-title { grid-column: 1 / -1; }
    body.hb-os .hbp-popup .hbp-tag { justify-self: start; }
    body.hb-os .hbp-popup .hbp-stock { white-space: nowrap; font-size: 10px; }
    body.hb-os .hbp-popup .hbp-lcd { font-size: 12px; white-space: nowrap; }
    body.hb-os .hbp-popup .hbp-title { margin: .2rem 0 0; font-size: 14px; }
    body.hb-os .hbp-popup .hbp-row { margin-top: 3px; }
    body.hb-os .hbp-popup .hbp-btn { width: auto; margin-top: 3px; grid-column: 2; grid-row: 3 / span 2; }
    body.hb-os .hbp-tab { bottom: calc(var(--hb-taskbar) + .5rem + env(safe-area-inset-bottom)); right: .5rem; }
    /* O conteúdo rola até acima da faixa; no login/cadastro a oferta some para não cobrir o formulário */
    body.hb-os:has(.hbp-popup) { padding-bottom: calc(var(--hb-taskbar) + 9rem + env(safe-area-inset-bottom)); }
    body.hb-os:has(#login-form, #reg-form) .hbp { display: none; }
}
/* Barra de tarefas acima da barra de gestos do aparelho (precisa de viewport-fit=cover no index.html) */
.hb-taskbar { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--hb-taskbar) + env(safe-area-inset-bottom)); }
/* Toque: sem efeito de "hover" preso depois de tocar (formigas na janela e brilho no título) */
@media (hover: none) {
    .hb-desk .ds-module:hover::after { opacity: 0; animation: none; }
    .hb-desk .ds-module:hover .ds-module-header::after { animation: none; }
    body.hb-os { -webkit-tap-highlight-color: transparent; }
}