/* =========================================================
   Habbozeiros - estilo do site (CSS puro, sem framework)
   Tema escuro é o padrão; [data-theme="claro"] troca as cores.
   ========================================================= */

/* ---------- Cores e medidas ---------- */
:root {
    color-scheme: dark;

    --fundo: #142a55;
    --painel: #1b3466;
    --painel-2: #233f78;
    --borda: #31528f;
    --texto: #e2ebff;
    --suave: #a3b6dc;
    --topo: #10234a;
    --titulo: #fff;      /* cor de títulos: branco no escuro, azul-marinho no claro */
    --branco: #fff;      /* branco de verdade (texto sobre fundo colorido) */

    --marca-100: #cfe3ff;
    --marca-400: #5aa6ff;
    --marca-500: #2f8cff;
    --marca-600: #1b72e8;
    --marca-700: #155bc0;
    --marca-900: #0d2a57;
    --ouro: #ffc61a;
    --ambar: #f59e0b;
    --ao-vivo: #ff3b5c;
    --verde: #10b981;
    --verde-claro: #34d399;
    --verde-texto: #6ee7b7;
    --vermelho: #f87171;
    --fucsia: #e879f9;
    --fucsia-forte: #d946ef;
    --escuro: #0f172a;

    --sombra: 0 10px 15px -3px #0003, 0 4px 6px -4px #0003;
    --raio: 16px;
    --raio-m: 12px;
    --raio-p: 8px;
    --largura: 1840px;
    --altura-topo: 68px;
    --altura-player: 68px;

    --fonte: "Ubuntu", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --fonte-pixel: "Silkscreen", "Ubuntu", monospace;
    --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Cenário da cidade (partials/cenario.svg.twig) */
    --cn-ceu-1: #0b1d44;
    --cn-ceu-2: #234b98;
    --cn-ceu-3: #3466c2;
    --cn-skyline: #142c5e;
    --cn-janela: .55;
    --cn-estrelas: 1;
    --cn-sol: 0;
}

[data-theme="claro"] {
    color-scheme: light;
    --fundo: #eef3fb;
    --painel: #fff;
    --painel-2: #e8effb;
    --borda: #cbd8ee;
    --texto: #22314f;
    --suave: #5d6d8f;
    --topo: #fff;
    --titulo: #0f1d3d;
    --marca-100: #1d4e9e;
    --marca-400: #1b6fe0;
    --ouro: #f0b400;
    --verde-texto: #047857;
    --vermelho: #dc2626;
    --fucsia: #c026d3;
    --sombra: 0 10px 15px -3px #0d2a570d, 0 4px 6px -4px #0d2a570d;
    --cn-ceu-1: #4fa3f5;
    --cn-ceu-2: #92cdfb;
    --cn-ceu-3: #c9ebff;
    --cn-skyline: #8cb2e6;
    --cn-janela: 0;
    --cn-estrelas: 0;
    --cn-sol: 1;
}

/* Áreas que continuam escuras no tema claro (player, banners sobre o cenário). */
.escuro-fixo {
    color-scheme: dark;
    --fundo: #142a55;
    --painel: #1b3466;
    --painel-2: #233f78;
    --borda: #31528f;
    --texto: #e2ebff;
    --suave: #a3b6dc;
    --titulo: #fff;
    --marca-100: #cfe3ff;
    --marca-400: #5aa6ff;
    --ouro: #ffc61a;
    --verde-texto: #6ee7b7;
    --fucsia: #e879f9;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scrollbar-color: var(--marca-600) var(--fundo);
    scrollbar-width: thin;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--altura-player);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.5;
    color: var(--texto);
    background-color: var(--fundo);
    /* Piso em losangos, como o chão dos quartos do Habbo. */
    background-image:
        linear-gradient(135deg, #ffffff08 25%, transparent 25%),
        linear-gradient(225deg, #ffffff08 25%, transparent 25%),
        linear-gradient(45deg, #ffffff08 25%, transparent 25%),
        linear-gradient(315deg, #ffffff08 25%, transparent 25%);
    background-position: 22px 0, 22px 0, 0 0, 0 0;
    background-size: 44px 44px;
    -webkit-font-smoothing: antialiased;
}

[data-theme="claro"] body {
    background-image:
        linear-gradient(135deg, #1b72e80a 25%, transparent 25%),
        linear-gradient(225deg, #1b72e80a 25%, transparent 25%),
        linear-gradient(45deg, #1b72e80a 25%, transparent 25%),
        linear-gradient(315deg, #1b72e80a 25%, transparent 25%);
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--marca-400); outline-offset: 2px; }

::selection { background: var(--ouro); color: var(--escuro); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pular {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--ouro); color: var(--escuro); padding: 12px; font-weight: 700;
}
.pular:focus { left: 8px; top: 8px; }

/* Imagens do Habbo sempre nítidas. */
.pixel, .icone { image-rendering: pixelated; }
.icone { display: inline-block; flex-shrink: 0; object-fit: contain; }

.contorno {
    text-shadow: 2px 0 #0d2a57, -2px 0 #0d2a57, 0 2px #0d2a57, 0 -2px #0d2a57,
        2px 2px #0d2a57, -2px 2px #0d2a57, 2px -2px #0d2a57, -2px -2px #0d2a57, 0 5px #0006;
}

.pixelado { font-family: var(--fonte-pixel); }
.mono { font-family: var(--fonte-mono); }
.ouro { color: var(--ouro); }
.suave { color: var(--suave); }
.forte { color: var(--titulo); font-weight: 700; }
.verde { color: var(--verde-texto); }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.limitar-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.selecionavel { user-select: all; }

/* ---------- Estrutura ---------- */
.container {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: 16px;
}

.conteudo { flex: 1; padding-block: 24px; }

.pilha > * + * { margin-top: 20px; }
.pilha-p > * + * { margin-top: 8px; }

.colunas-lateral { display: grid; gap: 20px; }
.estreito { max-width: 448px; margin-inline: auto; }
.medio { max-width: 576px; margin-inline: auto; }

@media (min-width: 640px) {
    .container { padding-inline: 24px; }
}
@media (min-width: 1024px) {
    :root { --altura-topo: 76px; }
    .colunas-lateral { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
}
@media (min-width: 1536px) {
    .container { padding-inline: 40px; }
}

/* ---------- Componentes básicos ---------- */
.card {
    background: var(--painel);
    border: 1px solid color-mix(in oklab, var(--borda) 70%, transparent);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.card-corpo { padding: 16px; }
@media (min-width: 640px) { .card-corpo { padding: 20px; } .card-corpo-g { padding: 32px; } }
.card-corpo-g { padding: 20px; }

.bloco-cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.bloco-titulo {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.125rem; line-height: 1.4; font-weight: 700; color: var(--titulo);
}
.bloco-titulo .suave { font-weight: 400; }
.bloco-link {
    margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
    font-size: .75rem; font-weight: 700; color: var(--marca-400);
}
.bloco-link:hover { color: var(--ouro); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 16px; border-radius: var(--raio-m);
    font-size: .875rem; line-height: 1.43; font-weight: 700;
    transition: background-color .15s, filter .15s, transform .15s, color .15s;
    box-shadow: inset 0 -3px 0 #0003; white-space: nowrap;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.btn-ouro { background: var(--ouro); color: var(--escuro); }
.btn-ouro:hover { filter: brightness(1.05); }
.btn-verde { background: var(--verde); color: var(--branco); }
.btn-verde:hover { background: var(--verde-claro); }
.btn-azul { background: var(--marca-600); color: var(--branco); }
.btn-azul:hover { background: var(--marca-500); }
.btn-fantasma { color: var(--suave); box-shadow: none; }
.btn-fantasma:hover { background: var(--painel-2); color: var(--titulo); }
.btn-g { padding: 10px 20px; }
.btn-p { padding: 6px 12px; font-size: .75rem; }
.btn-bloco { width: 100%; }
.btn-redondo { border-radius: 999px; }

.input {
    width: 100%; padding: 10px 12px; border-radius: var(--raio-m);
    border: 1px solid var(--borda);
    background: color-mix(in oklab, var(--fundo) 60%, transparent);
    font-size: .875rem; color: var(--titulo);
}
.input::placeholder { color: color-mix(in oklab, var(--suave) 70%, transparent); }
.input:focus { outline: none; border-color: var(--marca-500); box-shadow: 0 0 0 2px color-mix(in oklab, var(--marca-500) 30%, transparent); }
.input-p { padding-block: 7px; }
[data-theme="claro"] .input { background: var(--branco); }
select.input { cursor: pointer; }
textarea.input { resize: vertical; min-height: 96px; }

.label { display: block; margin-bottom: 4px; font-size: .875rem; font-weight: 700; color: var(--texto); }
.label small { font-weight: 400; color: var(--suave); }
.campo + .campo { margin-top: 16px; }
.ajuda { margin-top: 4px; font-size: .75rem; color: var(--suave); }
.erro { margin-top: 4px; font-size: .875rem; color: var(--vermelho); }
.check { display: flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--verde); }

.tag {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase;
    color: var(--branco); background: var(--marca-600);
}
.selo {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 700; color: var(--branco);
}
.selo-ouro { background: var(--ouro); color: var(--escuro); text-transform: uppercase; letter-spacing: .05em; }
.selo-anon { background: color-mix(in oklab, var(--fucsia-forte) 25%, transparent); color: var(--fucsia); }
.selo-novo { color: var(--verde-texto); font-size: 10px; font-weight: 700; padding: 0; }

.vazio {
    display: flex; align-items: center; gap: 16px; padding: 16px;
    border-radius: var(--raio-m); background: color-mix(in oklab, var(--painel-2) 50%, transparent);
    font-size: .875rem; color: var(--suave);
}
.vazio .icone { width: 64px; height: 64px; }
.vazio b { display: block; color: var(--titulo); }
.vazio a { font-weight: 700; color: var(--marca-400); }
.vazio a:hover { color: var(--ouro); }
.vazio-centro { justify-content: center; text-align: center; padding: 40px 16px; }

/* Avisos (flash) */
.aviso {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-radius: var(--raio-m); border: 1px solid; font-size: .875rem; font-weight: 500;
}
.aviso .icone { width: 28px; height: 28px; }
.aviso-sucesso { background: color-mix(in oklab, var(--verde) 12%, transparent); border-color: color-mix(in oklab, var(--verde) 40%, transparent); color: var(--verde-texto); }
.aviso-erro { background: color-mix(in oklab, #ef4444 12%, transparent); border-color: color-mix(in oklab, #ef4444 40%, transparent); color: var(--vermelho); }
.aviso-aviso { background: color-mix(in oklab, var(--ouro) 12%, transparent); border-color: color-mix(in oklab, var(--ouro) 45%, transparent); color: var(--texto); }

/* Alerta geral do site (Alertas do Site, no painel) */
.alerta-site {
    background: linear-gradient(90deg, var(--marca-700), #2a2470);
    color: var(--branco); font-size: .875rem; font-weight: 500;
}
.alerta-site .container { display: flex; align-items: center; gap: 10px; padding-block: 8px; }

/* Abas e filtros em pílula */
.pilulas { display: flex; flex-wrap: wrap; gap: 4px; font-size: .75rem; font-weight: 700; }
.pilulas a, .pilulas button { padding: 6px 12px; border-radius: var(--raio-p); color: var(--suave); }
.pilulas a:hover, .pilulas button:hover { background: var(--painel-2); }
.pilulas .ativo { background: var(--marca-600); color: var(--branco); }
.pilulas .ativo:hover { background: var(--marca-600); }

/* Paginação */
.paginacao { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 24px; }
.paginacao a, .paginacao span {
    min-width: 38px; height: 38px; padding: 0 10px; display: grid; place-items: center;
    border-radius: var(--raio-m); font-size: .875rem; font-weight: 700;
    background: var(--painel-2); color: var(--texto);
}
.paginacao a:hover { background: var(--marca-600); color: var(--branco); }
.paginacao .atual { background: var(--ouro); color: var(--escuro); }
.paginacao .reticencias { background: none; color: var(--suave); }

/* Equalizador animado da rádio */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; color: var(--fucsia); flex-shrink: 0; }
.eq span { width: 3px; height: 12px; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: eq .9s ease-in-out infinite; }
.eq span:nth-child(2) { animation-delay: -.3s; }
.eq span:nth-child(3) { animation-delay: -.6s; }
.eq span:nth-child(4) { animation-delay: -.15s; }
.eq.parado span { animation: none; transform: scaleY(.3); }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-claro); animation: pulsar 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulsar { 50% { opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Avatares do Habbo recortados */
.avatar-cabeca { width: 32px; height: 32px; border-radius: 50%; background: var(--painel-2); object-fit: none; object-position: center 30%; }
.avatar-cabeca-p { width: 28px; height: 28px; }
.avatar-corte { position: relative; overflow: hidden; flex-shrink: 0; }
.avatar-corte img { position: absolute; left: 50%; transform: translateX(-50%); max-width: none; height: 110px; width: auto; }

/* =========================================================
   Topo
   ========================================================= */
.topo {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--topo) 95%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--borda) 70%, transparent);
    box-shadow: 0 10px 15px -3px #0003;
    backdrop-filter: blur(12px);
}
[data-theme="claro"] .topo { box-shadow: 0 10px 15px -3px #0d2a570d; }
.topo-linha { display: flex; align-items: center; gap: 12px; height: var(--altura-topo); }

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Mascote (dragãozinho) no lugar do ícone do hotel */
.logo-mascote { width: 44px; height: 44px; flex-shrink: 0; filter: drop-shadow(0 3px 4px #0006); transition: transform .2s; }
.logo:hover .logo-mascote { transform: rotate(-8deg) scale(1.06); }
.logo-nome { display: block; font-family: var(--fonte-pixel); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--branco); letter-spacing: -.025em; }
.logo-nome span, .marca-zeiros { color: var(--ouro); }
.logo-sub { display: none; margin-top: 4px; font-family: var(--fonte-pixel); font-size: 9px; letter-spacing: .05em; color: var(--suave); }
@media (min-width: 640px) { .logo-nome { font-size: 1.5rem; } .logo-sub { display: block; } }

/* Menu principal (computador) */
.menu { display: none; height: 100%; margin-left: 16px; align-items: stretch; }
.menu-item { position: relative; display: flex; }
.menu-link {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding-inline: 14px; font-size: 13px; font-weight: 700; color: var(--texto); transition: color .2s;
}
.menu-link .icone { width: 32px; height: 28px; transition: transform .2s; }
.menu-link:hover, .menu-item:focus-within .menu-link { color: var(--titulo); }
.menu-item:hover .menu-link .icone { transform: translateY(-2px) scale(1.1); }
.menu-link .seta { width: 12px; height: 12px; opacity: .6; transition: transform .2s; }
.menu-item:hover .seta { transform: rotate(180deg); }
.menu-link::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
    border-radius: 999px 999px 0 0; background: var(--ouro); box-shadow: 0 0 12px var(--ouro);
    transform: scaleX(0); transition: transform .2s;
}
.menu-item:hover .menu-link::after, .menu-link.ativo::after { transform: scaleX(1); }
.menu-link.ativo { color: var(--titulo); }

.submenu {
    position: absolute; top: 100%; left: 50%; z-index: 50; width: 320px; padding-top: 8px;
    transform: translate(-50%, 8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
}
.menu-item:hover .submenu, .menu-item:focus-within .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.submenu .card { padding: 8px; box-shadow: 0 25px 50px -12px #0006; }

.item-menu { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--raio-m); transition: background-color .15s; }
.item-menu:hover { background: var(--painel-2); }
.item-menu-icone { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--raio-p); background: var(--painel-2); }
.item-menu:hover .item-menu-icone { background: var(--painel); }
.item-menu-icone .icone { max-width: 32px; max-height: 32px; }
.item-menu-icone .cor { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px var(--painel); }
.item-menu b { display: block; font-size: .875rem; color: var(--titulo); }
.item-menu:hover b { color: var(--ouro); }
.item-menu small { display: block; font-size: .75rem; color: var(--suave); }

/* Ações do lado direito */
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.busca-topo { position: relative; display: none; }
.busca-topo .icone { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); opacity: .8; pointer-events: none; }
.busca-topo input {
    width: 176px; height: 40px; padding: 0 12px 0 40px; border-radius: 999px;
    border: 1px solid var(--borda); background: color-mix(in oklab, var(--fundo) 70%, transparent);
    font-size: .875rem; color: var(--titulo); transition: width .2s, border-color .2s;
}
.busca-topo input:focus { width: 240px; outline: none; border-color: var(--marca-500); }

.online {
    display: none; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    background: color-mix(in oklab, var(--verde) 10%, transparent); color: var(--verde-texto);
    font-size: .75rem; font-weight: 700;
}

.botao-redondo {
    display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    border: 1px solid var(--borda); background: color-mix(in oklab, var(--fundo) 70%, transparent); color: var(--texto);
    transition: color .15s, border-color .15s;
}
.botao-redondo:hover { color: var(--ouro); border-color: var(--ouro); }
.botao-redondo svg { width: 20px; height: 20px; }
.tema-claro-icone { display: none; }
[data-theme="claro"] .tema-escuro-icone { display: none; }
[data-theme="claro"] .tema-claro-icone { display: block; }

.conta { position: relative; }
.conta-botao { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--painel-2); font-size: .875rem; font-weight: 700; color: var(--titulo); }
.conta-botao img { width: 32px; height: 32px; border-radius: 50%; object-fit: none; object-position: center 30%; background: var(--painel); }
.conta-botao .nome { display: none; max-width: 120px; }
.conta-menu { position: absolute; right: 0; top: 100%; z-index: 50; width: 288px; padding-top: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.conta:hover .conta-menu, .conta:focus-within .conta-menu, .conta.aberta .conta-menu { opacity: 1; visibility: visible; transform: none; }
.conta-menu .card { padding: 16px; box-shadow: 0 25px 50px -12px #0006; }
.conta-cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.conta-cabeca .icone { height: 64px; }
.conta-cabeca p { font-size: .875rem; color: var(--suave); }
.conta-cabeca b { display: block; color: var(--titulo); }
.conta-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; text-align: center; }
.conta-dados div { padding: 8px; border-radius: var(--raio-m); background: var(--painel-2); }
.conta-dados b { display: block; font-size: 1.125rem; color: var(--ouro); }
.conta-dados small { font-size: .75rem; color: var(--suave); }
.form-rapido { display: grid; gap: 8px; }
.form-rapido .linha { display: flex; gap: 8px; }
.form-rapido select { width: 96px; flex-shrink: 0; }

.so-celular { display: grid; }

@media (min-width: 640px) { .online { display: inline-flex; } .conta-botao .nome { display: block; } }
@media (min-width: 768px) { .busca-topo { display: block; } }
@media (min-width: 1024px) { .menu { display: flex; } .so-celular { display: none; } }
@media (max-width: 1279px) { .online { display: none; } }

/* Gaveta (menu do celular) */
.gaveta { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.gaveta-fundo { position: absolute; inset: 0; background: #0009; opacity: 0; transition: opacity .3s; }
.gaveta-painel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 86%; max-width: 384px;
    display: flex; flex-direction: column; overflow-y: auto;
    background: var(--topo); border-left: 1px solid var(--borda);
    box-shadow: -20px 0 40px #0006; transform: translateX(100%); transition: transform .3s;
}
.gaveta.aberta { pointer-events: auto; }
.gaveta.aberta .gaveta-fundo { opacity: 1; }
.gaveta.aberta .gaveta-painel { transform: none; }
.gaveta-cabeca { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--borda); }
.gaveta-lista { flex: 1; padding: 8px; }
.gaveta-lista > a, .gaveta-lista summary {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--raio-m);
    font-weight: 700; color: var(--titulo); cursor: pointer; list-style: none;
}
.gaveta-lista summary::-webkit-details-marker { display: none; }
.gaveta-lista > a:hover, .gaveta-lista summary:hover { background: var(--painel-2); }
.gaveta-lista .icone { width: 32px; height: 32px; }
.gaveta-lista summary .seta { margin-left: auto; width: 16px; height: 16px; color: var(--suave); transition: transform .2s; }
.gaveta-lista details[open] .seta { transform: rotate(180deg); }
.gaveta-sub { margin: 0 0 8px 28px; padding-left: 12px; border-left: 2px solid var(--borda); }
.gaveta-sub a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--raio-p); font-size: .875rem; color: var(--texto); }
.gaveta-sub a:hover { background: var(--painel-2); color: var(--titulo); }
.gaveta-sub .icone { width: 24px; height: 24px; }
.gaveta-rodape { padding: 16px; border-top: 1px solid var(--borda); text-align: center; font-size: .75rem; color: var(--suave); }

/* =========================================================
   Player da rádio (barra fixa embaixo)
   ========================================================= */
.player {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    border-top: 1px solid #ffffff1a;
    background: linear-gradient(90deg, #162b5cf2, #2a2470f2, #162b5cf2);
    box-shadow: 0 -10px 30px #0005; backdrop-filter: blur(12px);
}
.player .container { display: flex; align-items: center; gap: 12px; height: var(--altura-player); }
.botao-play {
    display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--fucsia-forte), var(--ao-vivo)); color: var(--branco);
    box-shadow: 0 10px 15px -3px #70185a66; transition: transform .15s;
}
.botao-play:hover { transform: scale(1.05); }
.botao-play svg { width: 20px; height: 20px; }
.botao-play .icone-pause, .tocando .botao-play .icone-play { display: none; }
.tocando .botao-play .icone-pause { display: block; }
.player-locutor { position: relative; width: 40px; height: 48px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; }
.player-locutor img.avatar { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); height: 70px; width: auto; max-width: none; }
.player-locutor .icone { height: 40px; }
.player-info { flex: 1; min-width: 0; }
.player-linha1 { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; min-width: 0; }
.player-linha2 { display: flex; align-items: center; gap: 8px; font-size: .875rem; min-width: 0; }
.selo-radio { padding: 2px 6px; border-radius: 4px; background: color-mix(in oklab, var(--marca-600) 40%, transparent); color: var(--marca-100); flex-shrink: 0; }
.selo-radio.vivo { background: var(--ao-vivo); color: var(--branco); }
.player-noar { display: none; color: var(--suave); }
.player-ouvintes, .player-volume, .player-presenca, .player-curtir, .player-link { display: none; align-items: center; gap: 6px; flex-shrink: 0; }
.player-ouvintes { font-size: .75rem; color: var(--suave); }
.player-ouvintes svg, .player-volume svg { width: 16px; height: 16px; }
.player-volume { color: var(--suave); }
.player-volume input { width: 96px; accent-color: var(--fucsia-forte); }
.player-presenca { padding: 4px 4px 4px 12px; border-radius: 999px; background: color-mix(in oklab, var(--ouro) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ouro) 50%, transparent); }
.player-presenca label { display: none; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; color: var(--ouro); }
.player-presenca input { width: 80px; padding: 4px 8px; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--fundo) 70%, transparent); text-align: center; font-family: var(--fonte-mono); font-size: .75rem; text-transform: uppercase; color: var(--branco); }
.player-presenca button { padding: 4px 10px; border-radius: 999px; background: var(--ouro); color: var(--escuro); font-size: .75rem; font-weight: 700; }
.player-curtir { padding: 6px 10px; border-radius: 999px; background: #ffffff0d; font-size: .75rem; font-weight: 700; color: var(--texto); }
.player-curtir svg { width: 16px; height: 16px; }
.player-curtir:hover, .player-curtir.curtido { color: var(--ao-vivo); }
.ao-vivo .player-curtir { display: inline-flex; }
@media (min-width: 640px) {
    .player-noar { display: inline; }
    .player-presenca label { display: inline-flex; }
    .player-ouvintes { display: flex; }
    .player-presenca { display: flex; }
}
@media (min-width: 768px) { .player-volume { display: flex; } }
@media (min-width: 1024px) { .player-link { display: inline-flex; } }
.player-presenca.sem-login { display: none; }

/* =========================================================
   Cenário (arte usada no destaque, cards sem imagem e banners)
   ========================================================= */
.cenario { position: absolute; inset: 0; width: 100%; height: 100%; }
.capa { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--marca-700), #2a2470); }
.capa > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }

/* =========================================================
   Home
   ========================================================= */
.home-topo, .home-meio { display: grid; gap: 20px; }
.home-meio { margin-top: 20px; }
@media (min-width: 1024px) {
    .home-topo { grid-template-columns: minmax(0, 1fr) 340px; }
    .home-meio { grid-template-columns: minmax(0, 1fr) 340px; }
    .home-meio > .home-categorias { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
    .home-meio { grid-template-columns: 230px minmax(0, 1fr) 340px; }
    .home-meio > .home-categorias { grid-column: auto; }
}
@media (min-width: 1536px) {
    .home-topo { grid-template-columns: minmax(0, 1fr) 380px; }
    .home-meio { grid-template-columns: 230px minmax(0, 1fr) 380px; }
}

/* Carrossel de destaques */
.destaque {
    position: relative; height: 380px; overflow: hidden; border-radius: var(--raio);
    border: 1px solid color-mix(in oklab, var(--borda) 70%, transparent);
    background: var(--fundo); box-shadow: 0 20px 25px -5px #0004;
}
@media (min-width: 640px) { .destaque { height: 340px; } }
@media (min-width: 1536px) { .destaque { height: 380px; } }
.destaque-slide { position: absolute; inset: 0; transition: opacity .7s; }
.destaque-slide:not(.ativo) { opacity: 0; pointer-events: none; }
.destaque-slide > img.fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destaque-sombra { position: absolute; inset: 0; background: linear-gradient(90deg, #0c1a3a, #0c1a3acc 45%, transparent); }
.destaque-sombra-baixo { position: absolute; inset: 0; background: linear-gradient(0deg, #0c1a3acc, transparent 60%); }
@media (min-width: 640px) { .destaque-sombra-baixo { display: none; } }
.destaque-texto { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 576px; padding: 24px 24px 64px; }
@media (min-width: 640px) { .destaque-texto { padding: 32px 32px 64px; } }
.destaque-selos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.destaque-chamada { margin-bottom: 4px; font-size: .875rem; font-weight: 700; color: var(--marca-100); }
.destaque h2 { font-size: 1.5rem; line-height: 1.25; font-weight: 700; color: var(--branco); text-shadow: 0 4px 4px #0004; }
.destaque h2 a:hover { color: var(--ouro); }
@media (min-width: 640px) { .destaque h2 { font-size: 2rem; } }
.destaque-resumo { margin-top: 12px; font-size: .875rem; color: var(--texto); }
@media (min-width: 640px) { .destaque-resumo { font-size: 1rem; } }
.destaque-rodape { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.destaque-autor { display: none; align-items: center; gap: 8px; font-size: .75rem; color: var(--suave); }
.destaque-autor b { color: var(--texto); }
@media (min-width: 640px) { .destaque-autor { display: flex; } }
.destaque-pontos { position: absolute; left: 24px; bottom: 20px; display: flex; gap: 8px; }
@media (min-width: 640px) { .destaque-pontos { left: 32px; } }
.destaque-pontos button { width: 10px; height: 10px; border-radius: 999px; background: #fff6; transition: width .3s, background-color .3s; }
.destaque-pontos button:hover { background: #fffb; }
.destaque-pontos button.ativo { width: 32px; background: var(--ouro); }
.destaque-setas { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.destaque-setas button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0006; color: var(--branco); backdrop-filter: blur(4px); }
.destaque-setas button:hover { background: #0009; }
.destaque-setas svg { width: 16px; height: 16px; }

/* Card "Entre com seu Habbo" */
.card-entrar { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.card-entrar-ceu { position: relative; height: 96px; overflow: hidden; }
.card-entrar-frank { position: absolute; top: 24px; right: 16px; height: 112px; filter: drop-shadow(0 20px 13px #0004); }
.card-entrar-corpo { display: flex; flex: 1; flex-direction: column; padding: 16px 20px 20px; }
.card-entrar h2 { padding-right: 96px; font-size: 1.25rem; font-weight: 700; color: var(--titulo); }
.card-entrar-corpo > p { margin-top: 4px; padding-right: 80px; font-size: .875rem; color: var(--suave); }
.lista-icones { margin-top: 16px; display: grid; gap: 8px; font-size: .875rem; }
.lista-icones li { display: flex; align-items: center; gap: 8px; }
.lista-icones .icone { width: 20px; height: 20px; }
.card-entrar .btn { margin-top: auto; padding-block: 12px; }
.card-entrar .lista-icones { margin-bottom: 20px; }
.perfil-mini { display: flex; align-items: center; gap: 16px; }
.perfil-mini .avatar-corte { width: 64px; height: 96px; }
.perfil-mini .avatar-corte img { top: -4px; height: 110px; }

/* Categorias (coluna esquerda) */
.categorias { padding: 12px; }
.categorias-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 4px 8px 0; font-family: var(--fonte-pixel); font-size: .75rem; font-weight: 700; letter-spacing: .05em; color: var(--suave); text-transform: uppercase; }
.categorias-lista { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.categorias-lista a { display: flex; flex-shrink: 0; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--raio-m); font-size: .875rem; font-weight: 500; color: var(--texto); transition: background-color .15s; }
.categorias-lista a:hover { background: var(--painel-2); color: var(--titulo); }
.categorias-lista a.ativo { background: var(--ouro); color: var(--escuro); font-weight: 700; }
.categorias-lista .icone { width: 24px; height: 24px; transition: transform .15s; }
.categorias-lista a:hover .icone { transform: scale(1.1); }
.categorias-lista .cor { display: none; margin-left: auto; width: 10px; height: 10px; border-radius: 50%; }
@media (min-width: 1280px) {
    .categorias-lista { flex-direction: column; overflow: visible; padding-bottom: 0; }
    .categorias-lista .cor { display: block; }
}
.chamada-ranking { position: relative; display: none; overflow: hidden; padding: 16px; border-radius: var(--raio); border: 1px solid color-mix(in oklab, var(--ouro) 40%, transparent); background: linear-gradient(135deg, #3b2a7a, #2a2470, #142a55); box-shadow: var(--sombra); }
.chamada-ranking b { display: block; font-size: 1.125rem; line-height: 1.25; color: var(--ouro); }
.chamada-ranking span.texto { display: block; margin-top: 8px; padding-right: 48px; font-size: .875rem; color: var(--texto); }
.chamada-ranking .btn { margin-top: 12px; }
.chamada-ranking .icone { position: absolute; right: -4px; bottom: -4px; height: 80px; opacity: .9; transition: transform .2s; }
.chamada-ranking:hover .icone { transform: scale(1.1) rotate(-6deg); }
@media (min-width: 1280px) { .chamada-ranking { display: block; } }

/* Grade de notícias */
.grade-noticias { display: grid; gap: 16px; }
@media (min-width: 640px) { .grade-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .grade-noticias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1800px) { .grade-noticias-larga { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card-noticia {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--raio); border: 1px solid color-mix(in oklab, var(--borda) 70%, transparent);
    background: var(--painel); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card-noticia:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--ouro) 70%, transparent); box-shadow: 0 20px 25px -5px #0004; }
.card-noticia > a { display: flex; flex: 1; flex-direction: column; }
.card-noticia .capa { aspect-ratio: 16 / 10; }
.card-noticia:hover .capa > img { transform: scale(1.05); }
.capa-sombra { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(0deg, #0008, transparent); }
.capa-categoria { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: var(--raio-p); font-size: 11px; font-weight: 700; color: var(--branco); box-shadow: 0 4px 6px #0003; }
.capa-leituras { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; background: #0000008c; font-size: 11px; font-weight: 700; color: var(--branco); }
.capa-leituras svg { width: 14px; height: 14px; }
.capa-evento { position: absolute; top: 10px; left: 10px; }
.card-noticia-corpo { display: flex; flex: 1; flex-direction: column; padding: 14px; }
.card-noticia-chamada { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .025em; color: var(--marca-400); text-transform: uppercase; }
.card-noticia h3 { font-size: 1rem; line-height: 1.375; font-weight: 700; color: var(--titulo); transition: color .2s; }
.card-noticia:hover h3 { color: var(--ouro); }
.card-noticia-rodape { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-size: .75rem; color: var(--suave); }
.card-noticia-rodape .icone { width: 16px; height: 16px; }
.card-noticia-rodape .avatar-cabeca { margin-left: auto; }

.card-noticia-fixa::before { content: "📌"; position: absolute; z-index: 2; top: 8px; left: 8px; font-size: 18px; }

/* Mais lidas */
.lista-lidas { display: grid; gap: 4px; }
.lista-lidas a { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: var(--raio-m); transition: background-color .15s; }
.lista-lidas a:hover { background: var(--painel-2); }
.lista-lidas .capa { width: 80px; height: 56px; flex-shrink: 0; border-radius: var(--raio-p); }
.lista-lidas .posicao { position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 0 0 var(--raio-p) 0; background: var(--ouro); font-size: .75rem; font-weight: 700; color: var(--escuro); }
.lista-lidas .texto { flex: 1; min-width: 0; }
.lista-lidas b { font-size: .875rem; line-height: 1.375; color: var(--titulo); }
.lista-lidas a:hover b { color: var(--ouro); }
.lista-lidas small { display: block; margin-top: 2px; font-size: .75rem; color: var(--suave); }
.lista-lidas svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--suave); transition: transform .15s; }
.lista-lidas a:hover svg { transform: translateX(4px); color: var(--ouro); }

.duas-colunas { display: grid; gap: 20px; }
@media (min-width: 1536px) { .duas-colunas { grid-template-columns: 1fr 1fr; } }

/* Programas da rádio */
.lista-programas { display: grid; gap: 8px; }
.programa { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--raio-m); background: var(--painel-2); }
.programa-hora { width: 96px; flex-shrink: 0; font-size: .875rem; font-weight: 700; color: var(--titulo); }
.programa-hora span { color: var(--suave); }
.programa img { width: 36px; height: 36px; object-fit: none; object-position: center 30%; }
.programa-nome { flex: 1; min-width: 0; }
.programa-nome b { display: block; color: var(--titulo); }
.programa-nome small { display: block; font-size: .75rem; color: var(--suave); }
.programa.agora { box-shadow: inset 0 0 0 2px var(--ao-vivo); }

/* Rádio agora (coluna direita) */
.radio-agora {
    position: relative; overflow: hidden; padding: 16px; border-radius: var(--raio);
    border: 1px solid #ec6cff4d; background: linear-gradient(135deg, #2a2470, #3a1f6e, #142a55);
    box-shadow: 0 10px 15px -3px #0004;
}
.radio-agora h2 { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--branco); }
.radio-agora h2 .icone { width: 28px; height: 28px; }
.radio-agora-cabeca { display: flex; align-items: center; gap: 8px; }
.radio-agora-cabeca .selo-radio { margin-left: auto; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.radio-agora-corpo { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.radio-agora-avatar { position: relative; width: 48px; height: 64px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; }
.radio-agora-avatar img.avatar { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); height: 90px; width: auto; max-width: none; }
.radio-agora-avatar .icone { height: 32px; }
.radio-agora-texto { flex: 1; min-width: 0; }
.radio-agora-texto b { display: block; color: var(--branco); }
.radio-agora-texto p { display: flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--texto); }
.radio-agora-texto small { display: block; margin-top: 2px; font-size: .75rem; color: var(--suave); }
.radio-agora .botao-play { width: 48px; height: 48px; }
.radio-agora-pedir { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 8px; border-radius: var(--raio-m); background: #ffffff1a; font-size: .875rem; font-weight: 700; color: var(--branco); }
.radio-agora-pedir:hover { background: #fff3; }
.radio-agora-pedir .icone { height: 20px; }

/* Ranking pequeno */
.ranking-mini-cabeca, .ranking-mini-linha { display: grid; grid-template-columns: 28px 1fr 48px 64px; align-items: center; gap: 8px; padding-inline: 8px; }
.ranking-mini-cabeca { margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--suave); text-transform: uppercase; }
.ranking-mini-linha { padding-block: 6px; border-radius: var(--raio-m); transition: background-color .15s; }
.ranking-mini-linha:hover { background: var(--painel-2); }
.ranking-mini-linha .nick { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .875rem; font-weight: 500; color: var(--titulo); }
.ranking-mini-linha .nick img { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--painel-2); object-fit: none; object-position: center 30%; }
.ranking-mini-linha .nivel { text-align: center; font-size: .875rem; }
.ranking-mini-linha .pontos { text-align: right; font-size: .875rem; font-weight: 700; color: var(--ouro); }
.medalha { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .75rem; font-weight: 700; background: var(--painel-2); color: var(--texto); box-shadow: inset 0 -2px 0 #0003; }
.medalha-1 { background: var(--ouro); color: var(--escuro); }
.medalha-2 { background: #cbd5e1; color: var(--escuro); }
.medalha-3 { background: #d97706; color: var(--branco); }

/* Novidades do hotel */
.secao-titulo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.secao-titulo .bloco-titulo { font-size: 1.25rem; }
.secao-titulo .linha { flex: 1; height: 1px; background: linear-gradient(90deg, var(--borda), transparent); }
.grade-3 { display: grid; gap: 16px; }
@media (min-width: 768px) { .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grade-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.grade-icones > * { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--raio-m); background: var(--painel-2); transition: transform .15s, box-shadow .15s; }
.grade-icones > *:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--ouro); }
.grade-icones img { max-width: 40px; max-height: 40px; object-fit: contain; }
.mini-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mini-titulo h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: var(--titulo); }
.mini-titulo .icone { width: 28px; height: 28px; }

/* Dica (tooltip) */
[data-dica] { position: relative; }
[data-dica]:hover::after, [data-dica]:focus-visible::after {
    content: attr(data-dica); position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 20;
    transform: translateX(-50%); width: max-content; max-width: 200px; padding: 4px 8px;
    border-radius: 6px; background: var(--escuro); color: #fff; font-size: 11px; font-weight: 500;
    line-height: 1.3; text-align: center; pointer-events: none; box-shadow: 0 4px 12px #0006;
}

/* Banner da equipe */
.banner-equipe { position: relative; height: 220px; margin-top: 32px; overflow: hidden; border-radius: var(--raio); border: 1px solid color-mix(in oklab, var(--borda) 70%, transparent); box-shadow: 0 20px 25px -5px #0003; }
.banner-equipe-habbos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; pointer-events: none; }
@media (min-width: 640px) { .banner-equipe-habbos { justify-content: flex-end; padding-right: 48px; } }
.banner-equipe-habbos img { width: 64px; height: 110px; object-fit: none; }
.banner-equipe-habbos img:nth-child(even) { margin-bottom: 12px; }
.banner-equipe-texto { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 448px; padding: 24px; }
.banner-equipe-caixa { width: fit-content; padding: 16px; border-radius: var(--raio); background: #0c1a3acc; backdrop-filter: blur(4px); }
.banner-equipe h2 { font-family: var(--fonte-pixel); font-size: 1.25rem; line-height: 1.25; font-weight: 700; color: var(--branco); }
@media (min-width: 640px) { .banner-equipe h2 { font-size: 1.5rem; } .banner-equipe-texto { padding: 32px; } }
.banner-equipe p { margin-top: 8px; font-size: .875rem; color: var(--texto); }
.banner-equipe .btn { margin-top: 12px; }

/* =========================================================
   Rodapé
   ========================================================= */
.rodape { margin-top: 48px; border-top: 1px solid color-mix(in oklab, var(--borda) 70%, transparent); background: var(--topo); }
.rodape-golpe { border-bottom: 1px solid color-mix(in oklab, var(--borda) 70%, transparent); background: color-mix(in oklab, var(--ouro) 10%, transparent); }
.rodape-golpe .container { display: flex; align-items: center; gap: 12px; padding-block: 12px; font-size: .875rem; }
.rodape-golpe .icone { height: 48px; }
.rodape-grade { display: grid; gap: 32px; padding-block: 40px; }
@media (min-width: 640px) { .rodape-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rodape-grade { grid-template-columns: 2fr 1fr 1fr 1.5fr; } }
.rodape-marca { font-family: var(--fonte-pixel); font-size: 1.5rem; font-weight: 700; color: var(--branco); }
.rodape p { font-size: .875rem; color: var(--suave); }
.rodape h2 { margin-bottom: 12px; font-family: var(--fonte-pixel); font-size: .75rem; font-weight: 700; letter-spacing: .05em; color: var(--ouro); text-transform: uppercase; }
.rodape ul { display: grid; gap: 8px; font-size: .875rem; }
.rodape ul a { color: var(--suave); transition: color .15s, padding .15s; }
.rodape ul a:hover { padding-left: 4px; color: var(--titulo); }
.rodape-fansite img { width: 126px; height: 68px; }
.rodape-fansite p { margin-top: 12px; font-size: .75rem; }
.rodape-copia { padding-block: 16px; border-top: 1px solid color-mix(in oklab, var(--borda) 70%, transparent); text-align: center; font-size: .75rem; color: var(--suave); }
.rodape-copia .icone { display: inline; height: 14px; margin-left: 4px; vertical-align: -2px; }

.voltar-topo {
    position: fixed; right: 16px; bottom: 80px; z-index: 40; display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: var(--raio-m); border-bottom: 4px solid #0004;
    background: var(--ouro); color: var(--escuro); box-shadow: 0 20px 25px -5px #0006;
    opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s;
}
.voltar-topo.visivel { opacity: 1; transform: none; pointer-events: auto; }
.voltar-topo:hover { transform: translateY(-4px); }
.voltar-topo svg { width: 24px; height: 24px; }
@media (min-width: 640px) { .voltar-topo { right: 24px; bottom: 96px; } }

/* =========================================================
   Página da notícia
   ========================================================= */
.noticia-layout { display: grid; gap: 24px; }
@media (min-width: 1024px) { .noticia-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.noticia-capa { aspect-ratio: 21 / 9; }
.noticia-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.noticia-categoria { padding: 2px 8px; border: 2px solid #ffffffb3; border-radius: var(--raio-p); font-size: 11px; font-weight: 700; color: var(--branco); text-transform: uppercase; }
.noticia-chamada { display: flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--marca-400); }
.noticia-chamada::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.noticia h1 { margin-top: 12px; font-size: 1.875rem; line-height: 1.25; font-weight: 700; color: var(--titulo); }
@media (min-width: 640px) { .noticia h1 { font-size: 2.25rem; } }
.noticia-resumo { margin-top: 12px; font-size: 1.125rem; color: var(--suave); }
.noticia-autor { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px; border-radius: var(--raio); background: var(--painel-2); font-size: .875rem; }
.noticia-autor .avatar-corte { width: 48px; height: 56px; }
.noticia-autor .avatar-corte img { top: -16px; }
.noticia-autor b { display: block; color: var(--titulo); }
.noticia-autor small { font-size: .75rem; color: var(--suave); }
.noticia-evento { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: var(--raio-m); background: color-mix(in oklab, var(--ouro) 12%, transparent); border: 1px solid color-mix(in oklab, var(--ouro) 40%, transparent); font-size: .875rem; }
.noticia-evento .icone { width: 32px; height: 32px; }

.prose-hz { margin-top: 24px; font-size: 17px; line-height: 1.625; color: var(--texto); overflow-wrap: break-word; }
.prose-hz > * + * { margin-top: 16px; }
.prose-hz h1, .prose-hz h2 { margin-top: 32px; font-size: 1.5rem; line-height: 1.33; font-weight: 700; color: var(--titulo); }
.prose-hz h3, .prose-hz h4 { margin-top: 24px; font-size: 1.25rem; font-weight: 700; color: var(--titulo); }
.prose-hz a { font-weight: 500; color: var(--marca-400); text-decoration: underline; text-underline-offset: 2px; }
.prose-hz strong, .prose-hz b { color: var(--titulo); }
.prose-hz ul { list-style: disc; padding-left: 24px; }
.prose-hz ol { list-style: decimal; padding-left: 24px; }
.prose-hz li + li { margin-top: 4px; }
.prose-hz blockquote { padding: 12px 16px; border-left: 4px solid var(--ouro); border-radius: 0 var(--raio-m) var(--raio-m) 0; background: color-mix(in oklab, var(--ouro) 8%, transparent); }
.prose-hz img { height: auto; border-radius: var(--raio-m); }
.prose-hz img[src*="habbo"] { image-rendering: pixelated; }
.prose-hz pre { overflow-x: auto; padding: 12px; border-radius: var(--raio-m); background: var(--fundo); font-size: .875rem; }
.prose-hz code { font-family: var(--fonte-mono); font-size: .9em; }
.prose-hz iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--raio-m); }
.prose-hz .ql-align-center { text-align: center; }
.prose-hz .ql-align-right { text-align: right; }
.prose-hz .ql-align-center img { margin-inline: auto; }

.noticia-compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--borda); font-size: .875rem; }
.noticia-compartilhar .botoes { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.noticia-compartilhar a, .noticia-compartilhar button { display: grid; place-items: center; height: 32px; min-width: 32px; padding: 0 10px; border-radius: var(--raio-p); background: #ffffff1a; font-size: .75rem; font-weight: 700; color: var(--titulo); }
[data-theme="claro"] .noticia-compartilhar a, [data-theme="claro"] .noticia-compartilhar button { background: var(--painel-2); }
.noticia-compartilhar a.whatsapp { background: #25d36626; color: #25d366; }
.noticia-compartilhar svg { width: 16px; height: 16px; }

.reacoes { margin-top: 24px; padding: 16px; border-radius: var(--raio); background: color-mix(in oklab, var(--painel-2) 60%, transparent); }
.reacoes > p { margin-bottom: 12px; text-align: center; font-size: .875rem; font-weight: 700; color: var(--titulo); }
.reacoes-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.reacao { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; padding: 8px 0; border: 2px solid var(--borda); border-radius: var(--raio-m); background: var(--painel); transition: border-color .15s, transform .15s; }
.reacao:hover { border-color: var(--marca-500); transform: translateY(-2px); }
.reacao.minha { border-color: var(--ouro); background: color-mix(in oklab, var(--ouro) 15%, var(--painel)); }
.reacao .emoji { font-size: 1.5rem; line-height: 1.33; transition: transform .15s; }
.reacao:hover .emoji { transform: scale(1.25); }
.reacao small { font-size: 11px; color: var(--suave); }
.reacao b { font-size: .875rem; color: var(--titulo); }

.noticias-vizinhas { display: grid; border-top: 1px solid var(--borda); }
@media (min-width: 640px) { .noticias-vizinhas { grid-template-columns: 1fr 1fr; } }
.noticias-vizinhas a { padding: 20px; }
.noticias-vizinhas a:hover { background: var(--painel-2); }
.noticias-vizinhas a + a { border-top: 1px solid var(--borda); text-align: right; }
@media (min-width: 640px) { .noticias-vizinhas a + a { border-top: 0; border-left: 1px solid var(--borda); } }
.noticias-vizinhas small { font-size: .75rem; font-weight: 700; color: var(--suave); text-transform: uppercase; }
.noticias-vizinhas b { display: block; margin-top: 4px; color: var(--titulo); }
.noticias-vizinhas a:hover b { color: var(--ouro); }

/* Comentários */
.comentar { position: relative; display: flex; gap: 12px; margin-top: 20px; }
.comentar-avatar { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; flex-shrink: 0; }
.comentar-avatar .avatar-corte { width: 56px; height: 80px; border-radius: var(--raio-m); background: color-mix(in oklab, var(--marca-600) 25%, transparent); }
.comentar-avatar .avatar-corte img { top: -8px; }
.comentar-avatar.anonimo .avatar-corte { background: color-mix(in oklab, var(--fucsia-forte) 20%, transparent); }
.comentar-avatar .setas { display: flex; gap: 4px; }
.comentar-avatar .setas button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: color-mix(in oklab, var(--verde) 20%, transparent); font-size: .75rem; color: var(--verde-texto); }
.comentar-corpo { flex: 1; min-width: 0; }
.comentar-quem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .875rem; }
.comentar-quem b { color: var(--titulo); }
.comentar-quem small { font-size: .75rem; color: var(--suave); }
.comentar-quem small a { color: var(--ouro); }
.comentar-quem small a:hover { text-decoration: underline; }
.respondendo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 4px 8px; border-radius: var(--raio-p); background: color-mix(in oklab, var(--marca-600) 20%, transparent); font-size: .75rem; color: var(--marca-100); }
.respondendo button { margin-left: auto; color: inherit; }
.caixa-comentario { border: 1px solid var(--borda); border-radius: var(--raio-m); background: color-mix(in oklab, var(--fundo) 60%, transparent); }
.caixa-comentario:focus-within { border-color: var(--marca-500); }
.caixa-comentario textarea { display: block; width: 100%; min-height: 80px; padding: 10px 12px; border: 0; border-radius: var(--raio-m) var(--raio-m) 0 0; background: transparent; resize: vertical; font-size: .875rem; color: var(--titulo); }
.caixa-comentario textarea:focus { outline: none; }
.caixa-comentario textarea::placeholder { color: var(--suave); }
.figurinha-escolhida { display: flex; align-items: flex-end; gap: 8px; padding: 0 12px 8px; }
.figurinha-escolhida img { height: 96px; width: auto; }
.figurinha-escolhida button { margin-bottom: 4px; font-size: .75rem; color: var(--vermelho); }
.caixa-ferramentas { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--borda); }
.caixa-ferramentas > button:not(.btn) { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--raio-p); font-size: .75rem; font-weight: 700; color: var(--texto); }
.caixa-ferramentas > button:not(.btn):hover { background: var(--painel-2); }
.caixa-ferramentas .icone { width: 16px; height: 16px; }
.caixa-ferramentas .contador { margin-left: auto; font-size: .75rem; color: var(--suave); }
.caixa-ferramentas .btn { padding: 6px 16px; }
.figurinhas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border-top: 1px solid var(--borda); }
@media (min-width: 640px) { .figurinhas { grid-template-columns: repeat(5, 1fr); } }
.figurinhas button { display: flex; flex-direction: column; align-items: center; padding: 4px; border-radius: var(--raio-m); background: var(--painel-2); font-size: 11px; color: var(--suave); }
.figurinhas button:hover, .figurinhas button.ativo { box-shadow: inset 0 0 0 2px var(--ouro); color: var(--titulo); }
.figurinhas img { height: 72px; width: auto; }
.armadilha { position: absolute; left: -9999px; }

.lista-comentarios { display: grid; gap: 24px; margin-top: 32px; }
.comentario { display: flex; gap: 12px; scroll-margin-top: 100px; }
.comentario-avatar { width: 48px; height: 64px; border-radius: var(--raio-m); background: color-mix(in oklab, var(--marca-600) 25%, transparent); }
.comentario-avatar img { top: -12px; }
.comentario-avatar.anonimo { background: color-mix(in oklab, var(--fucsia-forte) 20%, transparent); }
.comentario-corpo { flex: 1; min-width: 0; }
.balao { padding: 12px 16px; border-radius: 4px var(--raio) var(--raio) var(--raio); background: var(--painel-2); }
.comentario:target .balao { box-shadow: 0 0 0 2px var(--ouro); }
.balao-quem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .875rem; }
.balao-quem .nome { font-weight: 700; color: var(--titulo); }
.balao-quem a.nome:hover { color: var(--ouro); }
.balao-quem time { font-size: .75rem; color: var(--suave); }
.balao-texto { margin-top: 4px; overflow-wrap: anywhere; white-space: pre-line; }
.balao-figurinha { margin-top: 8px; height: 128px; width: auto; }
.comentario-acoes { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-left: 8px; font-size: .75rem; color: var(--suave); }
.comentario-acoes button { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.comentario-acoes button:hover { color: var(--titulo); }
.comentario-acoes .curtir:hover, .comentario-acoes .curtir.curtido { color: var(--ao-vivo); }
.comentario-acoes svg { width: 16px; height: 16px; }
.respostas { display: grid; gap: 12px; margin-top: 12px; }
.respostas .comentario-avatar { width: 40px; height: 52px; }
.respostas .comentario-avatar img { height: 90px; top: -10px; }

/* Barra lateral */
.lateral-ranking-linha { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--raio-m); }
.lateral-ranking-linha:first-of-type { background: color-mix(in oklab, var(--ouro) 10%, transparent); }
.lateral-ranking-linha:hover { background: var(--painel-2); }
.lateral-ranking-linha img { width: 32px; height: 32px; border-radius: var(--raio-p); background: var(--painel-2); object-fit: none; object-position: center 30%; }
.lateral-ranking-linha .nick { flex: 1; font-size: .875rem; font-weight: 500; color: var(--titulo); }
.lateral-ranking-linha .pontos { font-size: .75rem; font-weight: 700; color: var(--ouro); }
.grade-equipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade-equipe a { display: grid; place-items: center; padding: 4px; border-radius: var(--raio-m); background: var(--painel-2); }
.grade-equipe a:hover { box-shadow: 0 0 0 2px var(--ouro); }
.grade-equipe img { width: 40px; height: 40px; object-fit: none; object-position: center 30%; }
.card-faca-parte { overflow: hidden; }
.card-faca-parte > div { padding: 16px; background: linear-gradient(135deg, color-mix(in oklab, var(--ouro) 25%, transparent), transparent); }
.card-faca-parte b { color: var(--titulo); }
.card-faca-parte p { margin-top: 4px; font-size: .875rem; color: var(--suave); }
.card-faca-parte .btn { margin-top: 12px; }
.aviso-fansite { display: flex; align-items: center; gap: 12px; font-size: .75rem; color: var(--suave); }
.aviso-fansite img { width: 95px; height: 51px; flex-shrink: 0; }
.aviso-fansite h2 { margin-bottom: 4px; font-size: .75rem; font-weight: 700; color: var(--texto); }

/* =========================================================
   Listas do hotel (emblemas, mobis) e páginas internas
   ========================================================= */
.cabeca-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.cabeca-pagina form { width: 100%; }
@media (min-width: 640px) { .cabeca-pagina form { width: 320px; margin-left: auto; } }

.grade-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .grade-itens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grade-itens { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .grade-itens { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.item-hotel { display: flex; gap: 12px; padding: 12px; border-radius: var(--raio-m); background: var(--painel-2); }
.item-hotel-icone { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--raio-p); background: color-mix(in oklab, var(--fundo) 60%, transparent); }
.item-hotel-icone img { max-width: 40px; max-height: 40px; }
.item-hotel-texto { min-width: 0; }
.item-hotel-texto b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--titulo); }
.item-hotel-texto b.sem-nome { color: var(--suave); font-weight: 500; font-style: italic; }
.item-hotel-texto .codigo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fonte-mono); font-size: 11px; color: var(--marca-400); user-select: all; }
.item-hotel-texto p { font-size: 11px; color: var(--suave); }
.item-hotel-texto p.limitar-2 { margin-top: 2px; }

/* Abas de ranking */
.abas-ranking { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.abas-ranking a { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--borda); border-radius: var(--raio-m); font-size: .875rem; font-weight: 700; color: var(--texto); background: var(--painel); transition: border-color .15s; }
.abas-ranking a:hover { border-color: var(--marca-500); }
.abas-ranking a.ativo { border-color: var(--marca-500); background: color-mix(in oklab, var(--marca-600) 25%, var(--painel)); color: var(--titulo); }
.abas-ranking .icone { width: 24px; height: 24px; }
.podio { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 12px; margin-bottom: 24px; }
.podio-lugar { display: flex; flex-direction: column; align-items: center; }
.podio-lugar .avatar-corte { width: 64px; height: 112px; }
.podio-lugar .avatar-corte img { top: -4px; }
.podio-base { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 8px 8px 12px; border-radius: var(--raio) var(--raio) 0 0; text-align: center; }
.podio-base .medalha { width: 32px; height: 32px; margin-bottom: 4px; font-size: .875rem; }
.podio-base a { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 700; color: var(--titulo); }
.podio-base a:hover { color: var(--ouro); }
.podio-base small { font-size: .75rem; color: var(--ouro); }
.podio-1 .podio-base { height: 112px; background: linear-gradient(0deg, color-mix(in oklab, var(--ouro) 10%, transparent), color-mix(in oklab, var(--ouro) 30%, transparent)); }
.podio-2 .podio-base { height: 88px; background: linear-gradient(0deg, #cbd5e10d, #cbd5e133); }
.podio-3 .podio-base { height: 72px; background: linear-gradient(0deg, #d977060d, #d9770633); }
.lista-ranking > li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid color-mix(in oklab, var(--borda) 60%, transparent); }
.lista-ranking .medalha { margin-inline: auto; }
.lista-ranking .nick { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; color: var(--titulo); }
.lista-ranking .nick img { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--painel-2); object-fit: none; object-position: center 30%; }
.lista-ranking .nick small { color: var(--suave); font-weight: 400; }
.lista-ranking .total { font-weight: 700; color: var(--ouro); text-align: right; }
.lista-ranking .total small { display: block; font-size: .75rem; font-weight: 400; color: var(--suave); }

/* Rádio */
.radio-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 24px; background: linear-gradient(90deg, #2a1659, #1d1a52, var(--painel)); }
.radio-topo-avatar { position: relative; display: grid; place-items: center; width: 80px; height: 96px; flex-shrink: 0; overflow: hidden; border-radius: var(--raio); background: #ffffff0d; }
.radio-topo-avatar img.avatar { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); height: 130px; width: auto; max-width: none; }
.radio-topo-avatar .icone { height: 64px; }
.radio-topo h1 { margin-top: 4px; font-size: 1.875rem; font-weight: 700; color: var(--branco); }
.radio-topo p { color: #f5d0fe; }
.radio-topo .botao-play { width: 56px; height: 56px; margin-left: auto; }
.radio-topo .botao-play svg { width: 24px; height: 24px; }
.grade-dia + .grade-dia { margin-top: 20px; }
.grade-dia h3 { margin-bottom: 8px; font-size: .875rem; font-weight: 700; color: var(--titulo); }
.grade-dia h3.hoje { color: var(--ouro); }
.grade-dia h3 span { font-weight: 400; color: var(--suave); }

/* Formulário de candidatura */
.vaga { scroll-margin-top: 100px; }
.vaga summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
.vaga summary::-webkit-details-marker { display: none; }
.vaga summary .icone { width: 40px; height: 40px; }
.vaga summary b { display: block; font-size: 1.125rem; color: var(--titulo); }
.vaga summary .seta { margin-left: auto; width: 20px; height: 20px; color: var(--suave); transition: transform .2s; }
.vaga[open] summary .seta { transform: rotate(180deg); }
.vaga-corpo { padding: 0 20px 20px; }
.grade-form { display: grid; gap: 16px; }
@media (min-width: 640px) { .grade-form-2 { grid-template-columns: 1fr 1fr; } }

/* Parceiros e equipe */
.grade-parceiros { display: grid; gap: 20px; }
@media (min-width: 768px) { .grade-parceiros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .grade-parceiros { grid-template-columns: repeat(3, 1fr); } }
.parceiro { display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.parceiro:hover { box-shadow: 0 0 0 2px var(--ouro), var(--sombra); transform: translateY(-3px); }
.parceiro-capa { height: 150px; background: linear-gradient(135deg, var(--marca-900), var(--painel-2)) center / cover no-repeat; }
.parceiro-corpo { position: relative; display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 0 20px 20px; }
.parceiro-logo { width: 84px; height: 84px; margin-top: -42px; padding: 6px; border-radius: var(--raio-m); object-fit: contain; background: var(--painel); box-shadow: 0 0 0 3px var(--painel), var(--sombra); }
.parceiro h2 { font-size: 1.125rem; font-weight: 700; color: var(--titulo); }
.parceiro p { font-size: .875rem; line-height: 1.5; color: var(--suave); }
.parceiro-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; }

/* Botões das redes sociais (macro redes) */
.redes { display: flex; flex-wrap: wrap; gap: 8px; }
.rede { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--painel-2); color: var(--texto); transition: transform .15s, background .15s, color .15s; }
.rede svg { width: 18px; height: 18px; }
a.rede:hover { transform: translateY(-2px); color: var(--branco); }
a.rede-facebook:hover { background: #1877f2; }
a.rede-x:hover { background: #000; }
a.rede-instagram:hover { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); }
a.rede-discord:hover { background: #5865f2; }
.rede.em-breve { opacity: .45; cursor: default; }

/* Banner dos parceiros na lateral (passa sozinho) */
.banner-parceiros { position: relative; overflow: hidden; aspect-ratio: 2 / 1; border-radius: var(--raio-m); background: var(--painel-2); }
.banner-parceiros a { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.banner-parceiros a.ativo { opacity: 1; pointer-events: auto; }
.banner-parceiros img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.banner-parceiros-pontos { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.banner-parceiros-pontos button { width: 8px; height: 8px; border-radius: 50%; background: var(--borda); }
.banner-parceiros-pontos button.ativo { width: 20px; border-radius: 999px; background: var(--ouro); }
.grade-membros { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.membro { display: flex; flex-direction: column; align-items: center; padding: 12px; border-radius: var(--raio); background: var(--painel-2); text-align: center; }
.membro .avatar-corte { width: 64px; height: 100px; }
.membro .avatar-corte img { top: -4px; }
.membro b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--titulo); }
.membro:hover b { color: var(--ouro); }

/* Conta */
.conta-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.conta-topo .avatar-corte { width: 80px; height: 120px; }
.conta-topo .avatar-corte img { top: 0; height: 130px; }
.estatisticas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
@media (min-width: 640px) { .estatisticas { grid-template-columns: repeat(4, 1fr); } }
.estatistica { padding: 12px; border-radius: var(--raio-m); background: var(--painel-2); text-align: center; }
.estatistica b { display: block; font-size: 1.5rem; color: var(--ouro); }
.estatistica small { font-size: .75rem; color: var(--suave); }

/* Missão */
.codigo-missao { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px 0; padding: 20px; border: 2px dashed var(--ouro); border-radius: var(--raio); background: color-mix(in oklab, var(--ouro) 8%, transparent); }
.codigo-missao code { font-family: var(--fonte-mono); font-size: 1.75rem; font-weight: 700; letter-spacing: .1em; color: var(--ouro); user-select: all; }
.passos { display: grid; gap: 12px; counter-reset: passo; }
.passos li { position: relative; padding-left: 40px; font-size: .875rem; }
.passos li::before { counter-increment: passo; content: counter(passo); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--marca-600); font-weight: 700; color: var(--branco); }

/* Perfil do Habbo */
.perfil-topo { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.perfil-topo .avatar-corte { width: 96px; height: 150px; border-radius: var(--raio); background: radial-gradient(circle at 50% 70%, var(--marca-600), transparent 70%); }
.perfil-topo .avatar-corte img { top: 0; height: 160px; }
.perfil-topo h1 { font-size: 2rem; font-weight: 700; color: var(--titulo); }
.perfil-missao { margin-top: 4px; font-style: italic; color: var(--suave); }
.perfil-selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.perfil-grade { display: grid; gap: 20px; margin-top: 20px; }
@media (min-width: 1024px) { .perfil-grade { grid-template-columns: 1fr 1fr; } }
.lista-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.grupo { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--raio-m); background: var(--painel-2); font-size: .75rem; font-weight: 700; color: var(--titulo); min-width: 0; }
.grupo img { width: 39px; height: 39px; flex-shrink: 0; }
.lista-quartos { display: grid; gap: 8px; }
.quarto { display: flex; gap: 12px; padding: 10px; border-radius: var(--raio-m); background: var(--painel-2); }
.quarto img { width: 110px; height: 110px; flex-shrink: 0; border-radius: var(--raio-p); object-fit: cover; background: var(--painel); }
.quarto b { display: block; color: var(--titulo); }
.quarto p { font-size: .75rem; color: var(--suave); }
.grade-amigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.grade-amigos a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: var(--raio-m); background: var(--painel-2); font-size: 10px; color: var(--suave); min-width: 0; }
.grade-amigos a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade-amigos a:hover { color: var(--titulo); box-shadow: 0 0 0 2px var(--ouro); }
.grade-amigos img { width: 40px; height: 40px; object-fit: none; object-position: center 30%; }

/* Habbo Imager */
.imager-topo { display: grid; gap: 24px; }
@media (min-width: 1024px) { .imager-topo { grid-template-columns: 380px minmax(0, 1fr); } }
.imager-previa { position: relative; display: grid; place-items: center; height: 288px; margin-top: 16px; border-radius: var(--raio); background: radial-gradient(circle at 50% 70%, var(--marca-600), var(--fundo) 70%); }
.imager-previa img { max-height: 256px; transition: opacity .2s; }
.imager-previa .carregando { position: absolute; bottom: 8px; font-size: .75rem; color: #fff9; }
.imager-previa .girar { position: absolute; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; transform: translateY(-50%); border-radius: 50%; background: #0006; font-size: 1.125rem; color: var(--branco); }
.imager-previa .girar:hover { background: #0009; }
.imager-previa .girar.esq { left: 8px; }
.imager-previa .girar.dir { right: 8px; }
.imager-config { margin-top: 20px; padding: 12px; border-radius: var(--raio); background: color-mix(in oklab, var(--painel-2) 60%, transparent); }
.imager-config > p { margin-bottom: 12px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; color: var(--suave); text-transform: uppercase; }
.imager-config .opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; font-size: .75rem; color: var(--suave); }
.imager-config .opcoes .inteiro { grid-column: 1 / -1; }
.imager-config .opcoes .input { margin-top: 4px; }
.generos { display: flex; padding: 4px; border-radius: var(--raio-m); background: var(--painel-2); font-size: .875rem; font-weight: 700; }
.generos button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: var(--raio-p); color: var(--suave); }
.generos button img { height: 26px; image-rendering: pixelated; opacity: .6; }
.generos button.ativo { background: var(--marca-600); color: var(--branco); }
.generos button.ativo img { opacity: 1; }
/* Abas do guarda-roupa no estilo do editor do Habbo: grupos em cima, peças embaixo */
.imager-abas { display: flex; gap: 4px; margin-top: 16px; border-bottom: 2px solid var(--ouro); }
.imager-abas button {
    display: grid; place-items: center; width: 64px; height: 48px; border-radius: var(--raio-m) var(--raio-m) 0 0;
    background: var(--painel-2); box-shadow: inset 0 -3px 0 #0003; transition: background .15s, transform .15s;
}
.imager-abas button img { max-height: 34px; image-rendering: pixelated; opacity: .55; filter: grayscale(.4); transition: opacity .15s, filter .15s; }
.imager-abas button:hover img { opacity: .9; filter: none; }
.imager-abas button.ativo { background: var(--ouro); box-shadow: none; transform: translateY(2px); }
.imager-abas button.ativo img { opacity: 1; filter: none; }
.imager-subabas { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 4px 2px; }
.imager-subabas button { display: grid; place-items: center; width: 56px; height: 44px; border-radius: var(--raio-p); }
.imager-subabas button[hidden] { display: none; }
.imager-subabas button img { max-height: 34px; image-rendering: pixelated; opacity: .4; transition: opacity .15s, transform .15s; }
.imager-subabas button:hover img { opacity: .8; transform: translateY(-2px); }
.imager-subabas button.ativo { background: var(--painel-2); box-shadow: inset 0 0 0 2px var(--ouro); }
.imager-subabas button.ativo img { opacity: 1; }
.roupas { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: 420px; margin-top: 12px; overflow-y: auto; padding: 2px; }
.roupa { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--raio-m); background: var(--painel-2); }
.roupa:hover { box-shadow: inset 0 0 0 2px var(--marca-500); }
.roupa.ativo { box-shadow: inset 0 0 0 2px var(--ouro); }
.roupa img { width: 64px; height: 64px; object-fit: none; }
.roupa .nova { position: absolute; top: 2px; left: 2px; padding: 0 4px; border-radius: 4px; font-size: 9px; font-weight: 700; background: var(--verde); color: var(--branco); }
/* Selo HC pequeno no canto, como no editor do Habbo */
.roupa img.hc { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 12px; image-rendering: pixelated; filter: drop-shadow(0 1px 0 #0006); }
.roupa img.roupa-nenhuma { width: 29px; height: 29px; object-fit: contain; image-rendering: pixelated; opacity: .7; }
.cores { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.cores button { width: 24px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 1px #0003; }
.cores button.ativo { box-shadow: 0 0 0 2px var(--ouro); }
.cores-titulo { margin-top: 12px; font-size: .75rem; font-weight: 700; color: var(--suave); }
.ampliar { display: grid; place-items: center; min-height: 192px; margin-top: 12px; overflow: auto; border-radius: var(--raio); background: repeating-conic-gradient(#1b3466 0 25%, #233f78 0 50%) 0 0 / 20px 20px; }
.grade-grupos-imager { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.grade-grupos-imager button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: var(--raio-m); background: var(--painel-2); font-size: .75rem; font-weight: 700; color: var(--titulo); text-align: center; }
.grade-grupos-imager button:hover { box-shadow: 0 0 0 2px var(--ouro); }
.grade-grupos-imager img { width: 39px; height: 39px; }

/* Página de erro */
.erro-pagina { display: flex; flex-direction: column; align-items: center; padding: 48px 16px; text-align: center; }
.erro-pagina .icone { height: 120px; }
.erro-pagina .codigo { margin-top: 16px; font-family: var(--fonte-pixel); font-size: 3rem; font-weight: 700; color: var(--ouro); }
.erro-pagina h1 { font-size: 1.5rem; font-weight: 700; color: var(--titulo); }
.erro-pagina p { margin-top: 8px; color: var(--suave); }
.erro-pagina pre { max-width: 100%; margin-top: 24px; padding: 16px; overflow: auto; border-radius: var(--raio-m); background: var(--fundo); font-size: .75rem; text-align: left; }

/* Utilidades pequenas */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.texto-p { font-size: .875rem; }
.texto-pp { font-size: .75rem; }
.centro { text-align: center; }
.linha-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.empurra { margin-left: auto; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Avisos flutuantes (criados pelo app.js) */
/* Ajustes */
.lista-lidas .capa { display: block; }
@media (min-width: 1024px) { .destaque { height: auto; min-height: 340px; } }

/* Celular: colunas de grade nunca maiores que a tela */
.home-topo, .home-meio, .colunas-lateral, .noticia-layout, .imager-topo, .perfil-grade, .duas-colunas, .grade-3, .grade-noticias {
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .grade-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .home-topo, .home-meio, .colunas-lateral { grid-template-columns: minmax(0, 1fr) 340px; }
    .noticia-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .imager-topo { grid-template-columns: 380px minmax(0, 1fr); }
    .perfil-grade { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1280px) { .home-meio { grid-template-columns: 230px minmax(0, 1fr) 340px; } }
@media (min-width: 1536px) {
    .home-topo { grid-template-columns: minmax(0, 1fr) 380px; }
    .home-meio { grid-template-columns: 230px minmax(0, 1fr) 380px; }
    .grade-noticias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .duas-colunas { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1800px) { .grade-noticias-larga { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Topo no celular: logo menor e "Entrar" só com o ícone */
.logo { min-width: 0; }
@media (max-width: 479px) {
    .topo-linha { gap: 8px; }
    .logo-mascote { width: 38px; height: 38px; }
    .logo-nome { font-size: 1rem; }
    .topo-acoes { gap: 6px; }
    .conta > .btn { width: 40px; padding: 0; font-size: 0; gap: 0; }
    .conta-menu { display: none; }
}

/* ---------- Destaques da semana (home) ---------- */
.destaques-semana { display: grid; gap: 12px; }
.destaques-semana.dois { grid-template-columns: 1fr 1fr; }
.destaque-semana { display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in oklab, var(--borda) 70%, transparent); border-radius: var(--raio-m); background: color-mix(in oklab, var(--painel-2) 60%, transparent); text-align: center; transition: border-color .2s; }
.destaque-semana:hover { border-color: color-mix(in oklab, var(--ouro) 70%, transparent); }
.destaque-semana-avatar { position: relative; height: 96px; overflow: hidden; padding-top: 8px; }
.destaque-semana-avatar img { position: absolute; top: -4px; left: 50%; height: 110px; max-width: none; transform: translateX(-50%); transition: transform .2s; }
.destaque-semana:hover .destaque-semana-avatar img { transform: translateX(-50%) scale(1.05); }
.destaque-semana-texto { display: grid; gap: 2px; padding: 8px; background: var(--painel); }
.destaque-semana-texto small { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ouro); }
.destaque-semana-texto b { font-size: .875rem; color: var(--titulo); }
.destaque-semana-texto span { font-size: 11px; color: var(--suave); }

/* ---------- Recordes, valores de mobis e Fale conosco ---------- */
.recordista { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; padding: 8px 16px 8px 8px; border-radius: var(--raio-m); background: color-mix(in oklab, var(--ouro) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ouro) 40%, transparent); }
.recordista:hover { box-shadow: inset 0 0 0 1px var(--ouro); }
.recordista span { display: grid; line-height: 1.2; }
.recordista small { font-size: .75rem; color: var(--suave); }
.recordista b { color: var(--titulo); }

.grade-valores { display: grid; gap: 12px; }
@media (min-width: 640px) { .grade-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grade-valores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .grade-valores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.valor { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid color-mix(in oklab, var(--borda) 70%, transparent); border-radius: var(--raio-m); background: color-mix(in oklab, var(--painel-2) 40%, transparent); }
.valor-imagem { display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--raio-m); background: var(--painel); }
.valor-imagem img { max-width: 48px; max-height: 48px; object-fit: contain; }
.valor h2 { font-size: 1rem; font-weight: 700; color: var(--titulo); }
.valor-preco { display: flex; align-items: center; gap: 4px; font-size: 1.125rem; font-weight: 700; color: var(--ouro); }
.valor-desce { color: var(--vermelho); }

.contato-grade { display: grid; gap: 20px; max-width: 1024px; margin-inline: auto; }
@media (min-width: 1024px) { .contato-grade { grid-template-columns: minmax(0, 1fr) 300px; } }
.contato-campos { display: grid; gap: 16px; }
@media (min-width: 640px) { .contato-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Minha conta: emblemas do site e moedas ---------- */
.emblemas-site { display: flex; flex-wrap: wrap; gap: 8px; }
.emblemas-site span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--raio-m); background: var(--painel-2); }
.emblemas-site img { max-width: 44px; max-height: 44px; }
.historico-moedas { display: grid; gap: 6px; font-size: .875rem; }
.historico-moedas li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; }

/* ---------- Rádio: top músicas ---------- */
.top-musicas { display: grid; gap: 4px; }
.top-musicas li { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--raio-m); }
.top-musicas li:hover { background: color-mix(in oklab, var(--painel-2) 60%, transparent); }
.top-musicas-posicao { width: 20px; text-align: center; font-weight: 700; color: var(--ouro); }
.top-musicas img { width: 36px; height: 36px; border-radius: var(--raio-p); object-fit: cover; }
.top-musicas b { display: block; font-size: .875rem; color: var(--titulo); }
.top-musicas small { display: block; font-size: .75rem; color: var(--suave); }

/* ---------- Home do usuário e loja ---------- */
.home-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; }
.home-cabeca h1 { font-size: 1.375rem; font-weight: 700; color: var(--titulo); }
.home-cabeca .btn .icone { margin-right: 6px; }

.home-moldura { position: relative; margin-top: 20px; overflow: hidden; border-radius: var(--raio); }
.home-area {
    position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden;
    border: 1px solid var(--borda); border-radius: var(--raio);
    background-color: var(--painel-2); background-repeat: repeat;
}
.home-el { position: absolute; touch-action: none; }
.home-colante img { display: block; max-width: none; user-select: none; }

/* Editando: tudo vira arrastável e o conteúdo dos widgets para de responder a clique */
.home-area.editando { outline: 2px dashed var(--ouro); outline-offset: -2px; }
.home-area.editando .home-el { cursor: grab; }
.home-area.editando .home-el:hover { filter: drop-shadow(0 0 4px var(--ouro)); }
.home-area.editando .home-el.arrastando { cursor: grabbing; filter: drop-shadow(0 8px 12px #0006); }
.home-area.editando .home-widget-corpo, .home-area.editando .home-nota p { pointer-events: none; }
.home-ferramentas { display: none; position: absolute; top: -14px; right: -8px; gap: 4px; align-items: center; }
.home-area.editando .home-ferramentas { display: flex; }
.home-ferramentas button, .home-ferramentas select {
    height: 26px; min-width: 26px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--borda);
    background: var(--painel); color: var(--texto); font-size: .75rem; font-weight: 700; cursor: pointer; box-shadow: var(--sombra);
}
.home-ferramentas [data-guardar]:hover, .home-ferramentas [data-apagar-nota]:hover { background: var(--vermelho); color: var(--branco); }

/* Widgets */
.home-widget { width: 300px; border-radius: var(--raio-m); background: var(--painel); border: 2px solid var(--borda); box-shadow: var(--sombra); color: var(--texto); }
.home-widget-titulo { padding: 8px 12px; border-radius: 9px 9px 0 0; background: var(--marca-600); color: var(--branco); font-family: var(--fonte-pixel); font-size: .8125rem; }
.home-widget-corpo { padding: 12px; font-size: .875rem; }
.home-vazio { color: var(--suave); font-size: .8125rem; }
.home-vazio a, .home-link { font-weight: 700; color: var(--marca-400); }
.home-perfil { display: flex; gap: 12px; }
.home-perfil b { display: block; font-size: 1rem; color: var(--titulo); }
.home-missao { font-size: .75rem; font-style: italic; color: var(--suave); overflow-wrap: anywhere; }
.home-perfil dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 8px 0; font-size: .75rem; }
.home-perfil dt { color: var(--suave); }
.home-perfil dd { font-weight: 700; color: var(--titulo); }
.home-emblemas { display: flex; flex-wrap: wrap; gap: 6px; }
.home-emblemas img { width: 40px; height: 40px; object-fit: contain; }
.home-recado-form { display: grid; gap: 6px; margin-bottom: 10px; }
.home-recado-form textarea { min-height: 56px; font-size: .8125rem; }
.home-recado-form .btn { justify-self: end; }
.home-recados { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.home-recados li { display: flex; gap: 8px; align-items: flex-start; }
.home-recados li > div { flex: 1; font-size: .8125rem; }
.home-recados small { color: var(--suave); font-size: .6875rem; }
.home-recados p { overflow-wrap: anywhere; }
.home-apagar { width: 22px; height: 22px; border-radius: 999px; color: var(--suave); font-weight: 700; }
.home-apagar:hover { background: var(--vermelho); color: var(--branco); }
.home-avaliacao { display: grid; justify-items: center; gap: 6px; text-align: center; }
.home-estrelas { --tamanho: 28px; height: var(--tamanho); font-size: var(--tamanho); line-height: 1; }
.home-estrelas::before {
    content: "★★★★★";
    background: linear-gradient(90deg, var(--ouro) calc(var(--nota) / 5 * 100%), color-mix(in oklab, var(--suave) 40%, transparent) 0);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-votar button { font-size: 1.375rem; line-height: 1; color: color-mix(in oklab, var(--suave) 50%, transparent); transition: color .15s, transform .15s; }
.home-votar button.marcada, .home-votar:hover button { color: var(--ouro); }
.home-votar button:hover ~ button { color: color-mix(in oklab, var(--suave) 50%, transparent); }
.home-votar button:hover { transform: scale(1.15); }

/* Notas */
.home-nota { width: 220px; min-height: 80px; padding: 14px 16px; border-radius: 4px; background: var(--painel); border: 2px solid var(--borda); box-shadow: var(--sombra); color: var(--texto); font-size: .875rem; overflow-wrap: anywhere; }

/* Estilos (skins) de widgets e notas, como os da Habbo Home clássica */
.skin-dourado { border-color: #d4a017; background: linear-gradient(#fff6d5, #ffe9a3); color: #4a3700; }
.skin-dourado .home-widget-titulo { background: linear-gradient(#f7c948, #d4a017); color: #3d2c00; }
.skin-metal { border-color: #7d8a9c; background: linear-gradient(#e9edf2, #c7cfd9); color: #1f2937; }
.skin-metal .home-widget-titulo { background: linear-gradient(#9aa6b5, #66727f); }
.skin-caderno { border-color: #9cb8d9; color: #1f2d44; background: repeating-linear-gradient(#fff 0 23px, #cfe0f5 23px 24px); }
.skin-caderno .home-widget-titulo { background: #3b6fb6; }
.skin-neon { border-color: var(--fucsia-forte); background: #140a26; color: #f5e9ff; box-shadow: 0 0 12px var(--fucsia-forte); }
.skin-neon .home-widget-titulo { background: var(--fucsia-forte); }
.skin-postit { border-color: #e6cf3c; background: #fff27a; color: #3b3300; }
.home-nota.skin-postit { transform: rotate(-1.5deg); }
.skin-postit .home-widget-titulo { background: #e6cf3c; color: #3b3300; }
:is(.skin-dourado, .skin-metal, .skin-caderno, .skin-postit) :is(.home-perfil b, .home-perfil dd) { color: inherit; }
:is(.skin-dourado, .skin-metal, .skin-caderno, .skin-postit) :is(.home-vazio, .home-perfil dt, .home-missao, .home-recados small) { color: color-mix(in oklab, currentColor 65%, transparent); }

/* Editor */
.home-editor { margin-top: 20px; padding: 16px 20px; display: grid; gap: 12px; border: 2px solid var(--ouro); }
.home-editor[hidden] { display: none; }
.home-editor-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.home-editor-acoes { display: flex; gap: 8px; }
.home-inventario { display: flex; flex-wrap: wrap; gap: 8px; max-height: 240px; overflow-y: auto; align-items: flex-start; }
.home-inventario[hidden], .home-inv-item[hidden] { display: none; }
.home-inv-item {
    display: grid; place-items: center; width: 72px; height: 72px; padding: 4px; border-radius: var(--raio-p);
    background: var(--painel-2); border: 1px solid var(--borda);
}
.home-inv-item:hover { border-color: var(--ouro); }
.home-inv-item img { max-width: 64px; max-height: 64px; object-fit: contain; }
.home-inv-texto { width: auto; height: auto; padding: 8px 12px; font-size: .8125rem; font-weight: 700; color: var(--texto); }
.home-inv-fundo { background-repeat: repeat; }
.home-nota-form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.home-nota-form textarea { flex: 1 1 260px; min-height: 44px; }
.home-nota-form select { width: auto; }

/* Loja */
.loja-saldo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--painel-2); font-size: .875rem; }
.loja-saldo b { color: var(--ouro); }
.loja-filtro { display: flex; flex-wrap: wrap; gap: 8px; }
.loja-filtro select, .loja-filtro input { width: auto; flex: 1 1 180px; }
.loja-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
.loja-item { display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: var(--raio-m); background: var(--painel-2); border: 1px solid var(--borda); text-align: center; }
.loja-item b { font-size: .8125rem; color: var(--titulo); }
.loja-item-img { display: grid; place-items: center; height: 96px; }
.loja-item-img img { max-width: 100%; max-height: 96px; object-fit: contain; }
.loja-item-fundo { display: block; height: 96px; border-radius: var(--raio-p); background-repeat: repeat; }
.loja-preco { display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 700; color: var(--ouro); }
.loja-tenho { font-size: .6875rem; color: var(--verde-texto); }
.loja-ranking { display: grid; gap: 8px; }
.loja-ranking li { display: flex; align-items: center; gap: 8px; font-size: .875rem; }
.loja-ranking a { flex: 1; font-weight: 700; color: var(--titulo); }
.loja-ranking small { color: var(--ouro); white-space: nowrap; }

/* ---------- Capa do topo (tema dragão) ---------- */
.capa-site {
    position: relative; height: 340px; overflow: hidden;
    background: var(--topo) url("../img/capa-dragao.jpg") center 15% / cover no-repeat;
}
/* Sombra à esquerda para o logo ler bem sobre o fogo; degradê embaixo para emendar no menu */
.capa-site::before {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, #050c24e0 0%, #050c2499 32%, transparent 60%),
        linear-gradient(to bottom, transparent 55%, var(--topo) 100%);
}
.capa-site-conteudo { position: relative; display: flex; align-items: center; height: 100%; }
.capa-logo { display: grid; gap: 8px; transition: transform .2s; }
.capa-logo:hover { transform: scale(1.02); }
.capa-logo-nome {
    font-family: var(--fonte-pixel); font-weight: 700; font-size: clamp(2rem, 4.6vw, 4.25rem); line-height: 1;
    color: var(--branco); letter-spacing: -.02em; filter: drop-shadow(0 6px 10px #000a);
}
.capa-logo-nome span { color: var(--ouro); }
.capa-logo-sub { font-family: var(--fonte-pixel); font-size: clamp(9px, 1vw, 13px); letter-spacing: .12em; color: #cfe3ff; text-transform: uppercase; text-shadow: 0 2px 0 #0a1430; }
@media (max-width: 639px) {
    .capa-site { height: 170px; background-position: 70% 40%; }
    .capa-site::before { background: linear-gradient(90deg, #050c24e6 0%, #050c24a6 55%, #050c2433 100%), linear-gradient(to bottom, transparent 50%, var(--topo) 100%); }
}

/* ---------- Avisos flutuantes (canto de cima, à direita) ---------- */
.toasts {
    position: fixed; top: calc(var(--altura-topo) + 14px); right: 16px; z-index: 80;
    display: grid; gap: 10px; width: min(380px, calc(100% - 32px)); pointer-events: none;
}
.toast {
    --cor: var(--marca-500);
    position: relative; display: flex; align-items: flex-start; gap: 12px; overflow: hidden;
    padding: 12px 40px 14px 12px; border-radius: var(--raio-m); pointer-events: auto;
    background: color-mix(in oklab, var(--painel) 92%, transparent); backdrop-filter: blur(10px);
    border: 1px solid color-mix(in oklab, var(--cor) 45%, var(--borda)); border-left: 4px solid var(--cor);
    box-shadow: 0 20px 25px -5px #0006, 0 0 0 1px #0002;
    animation: toast-entra .35s cubic-bezier(.2, .9, .3, 1.2);
    transition: opacity .3s, transform .3s;
}
.toast > .icone { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; }
.toast p { font-size: .875rem; line-height: 1.4; color: var(--texto); overflow-wrap: anywhere; }
.toast p b { display: block; font-size: .9375rem; color: var(--titulo); }
.toast-fechar { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; font-size: 1.125rem; line-height: 1; color: var(--suave); }
.toast-fechar:hover { background: var(--painel-2); color: var(--titulo); }
/* Barrinha que mostra quanto tempo falta; para quando o mouse está em cima */
.toast-tempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--cor); transform-origin: left; animation: toast-tempo var(--duracao, 4.5s) linear forwards; }
.toast:hover .toast-tempo { animation-play-state: paused; }
.toast-sucesso { --cor: var(--verde); }
.toast-erro { --cor: #ef4444; }
.toast-aviso { --cor: var(--ouro); }
.toast-info { --cor: var(--marca-400); }
.toast.saindo { opacity: 0; transform: translateX(24px); }
@keyframes toast-entra { from { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes toast-tempo { to { transform: scaleX(0); } }
@media (max-width: 639px) { .toasts { left: 16px; right: 16px; width: auto; } }

/* ---------- Seta no botão da conta ---------- */
.conta-seta { width: 16px; height: 16px; flex-shrink: 0; color: var(--suave); transition: transform .2s; }
.conta:hover .conta-seta, .conta.aberta .conta-seta, .conta:focus-within .conta-seta { transform: rotate(180deg); color: var(--ouro); }

/* ---------- Sino de notificações ---------- */
.notif { position: relative; }
.notif-botao { position: relative; }
.notif-botao .icone { width: 26px; height: 26px; object-fit: contain; }
.notif-botao:hover .icone, .notif.aberta .notif-botao .icone { animation: sino 0.6s ease-in-out; }
.notif-contador {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 999px; border: 2px solid var(--topo);
    background: var(--ao-vivo); color: var(--branco); font-size: 11px; font-weight: 700; line-height: 1;
    animation: pulsar 2s ease-in-out infinite;
}
.notif-menu {
    position: absolute; right: -48px; top: 100%; z-index: 60; width: 360px; max-width: calc(100vw - 24px); padding-top: 10px;
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.notif.aberta .notif-menu { opacity: 1; visibility: visible; transform: none; }
.notif-menu .card { overflow: hidden; box-shadow: 0 25px 50px -12px #0008; }
.notif-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.notif-cabeca b { color: var(--titulo); }
.notif-ler { font-size: .75rem; font-weight: 700; color: var(--marca-400); }
.notif-ler:hover { color: var(--ouro); }
.notif-lista { max-height: 380px; overflow-y: auto; }
.notif-vazio { padding: 24px 16px; text-align: center; font-size: .875rem; color: var(--suave); }
.notif-item {
    position: relative; display: flex; gap: 12px; padding: 12px 16px 12px 20px;
    border-bottom: 1px solid color-mix(in oklab, var(--borda) 50%, transparent); transition: background .15s;
}
a.notif-item:hover { background: var(--painel-2); }
.notif-item .icone { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; }
.notif-item > span { min-width: 0; display: grid; gap: 2px; }
.notif-item b { font-size: .875rem; line-height: 1.3; color: var(--titulo); }
.notif-item small { font-size: .8125rem; color: var(--suave); overflow-wrap: anywhere; }
.notif-item time { font-size: .6875rem; color: var(--suave); }
.notif-item.nova { background: color-mix(in oklab, var(--marca-500) 10%, transparent); }
.notif-item.nova::before { content: ""; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--marca-400); }
.notif-sucesso.nova::before { background: var(--verde); }
.notif-aviso.nova::before { background: var(--ouro); }
.notif-erro.nova::before { background: #ef4444; }
.notif-todas { display: block; padding: 12px 16px; text-align: center; font-size: .875rem; font-weight: 700; color: var(--marca-400); }
.notif-todas:hover { background: var(--painel-2); color: var(--ouro); }
@keyframes sino { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ao-vivo) 60%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* ---------- Página "Notificações" ---------- */
.lista-notificacoes { display: grid; }
.lista-notificacoes .notif-item { padding-block: 16px; }
.lista-notificacoes .notif-item:last-child { border-bottom: none; }