/* ===== Clases custom del theme HOCCO (lo que no cubre Tailwind) ===== */

/* Fuente REAL del nitro-react (Ubuntu Condensed, el mismo TTF que el cliente, con
   sus glifos/iconos incluidos). NO usar el CDN de Google: este es el .ttf bundleado. */
@font-face {
    font-family: 'Ubuntu';
    src: url('/assets/hocco/fonts/Ubuntu-C.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* Aplicar a nombres de sala y a la misión/motto del jugador (igual que el nitro). */
.hocco-nitro-font {
    font-family: 'Ubuntu', sans-serif;
}

/* Firma del footer con Pixelify Sans (Google Fonts). */
.hocco-pixelify {
    font-family: 'Pixelify Sans', sans-serif;
}

/* Carrusel con scroll-snap nativo (touch + trackpad horizontal) sin barra visible. */
.hocco-snap {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.hocco-snap::-webkit-scrollbar { display: none; }

/* Contenido HTML de una noticia (Tailwind CDN no trae el plugin typography). */
.hocco-article-content { line-height: 1.7; }
.hocco-article-content p { margin: 0 0 1rem; }
.hocco-article-content h1,
.hocco-article-content h2,
.hocco-article-content h3 { color: rgb(var(--hocco-plum)); font-weight: 800; margin: 1.25rem 0 .6rem; line-height: 1.25; }
.hocco-article-content h1 { font-size: 1.6rem; }
.hocco-article-content h2 { font-size: 1.35rem; }
.hocco-article-content h3 { font-size: 1.15rem; }
.hocco-article-content a { color: rgb(var(--hocco-pink-dark)); font-weight: 700; text-decoration: underline; }
.hocco-article-content a:hover { color: rgb(var(--hocco-pink)); }
.hocco-article-content ul,
.hocco-article-content ol { margin: 0 0 1rem 1.25rem; }
.hocco-article-content ul { list-style: disc; }
.hocco-article-content ol { list-style: decimal; }
.hocco-article-content li { margin: .25rem 0; }
.hocco-article-content img { max-width: 100%; height: auto; border-radius: 1rem; margin: .5rem 0; display: inline-block; }
/* Imágenes colocadas desde el editor de HoccoKeeping */
.hocco-article-content img.hk-left { float: left; margin: .25rem 1rem .5rem 0; }
.hocco-article-content img.hk-right { float: right; margin: .25rem 0 .5rem 1rem; }
.hocco-article-content img[style*="float: left"] { margin-right: 1rem; }
.hocco-article-content img[style*="float: right"] { margin-left: 1rem; }
.hocco-article-content figure.image { display: table; margin: .5rem auto; }
.hocco-article-content figure.image figcaption { text-align: center; font-size: .85rem; color: rgb(var(--hocco-muted)); }
.hocco-article-content table { border-collapse: collapse; margin: 0 0 1rem; max-width: 100%; }
.hocco-article-content td, .hocco-article-content th { border: 2px solid rgb(var(--hocco-border)); padding: .35rem .6rem; }
.hocco-article-content iframe, .hocco-article-content video { max-width: 100%; }
.hocco-article-content::after { content: ""; display: block; clear: both; }
.hocco-article-content blockquote {
    border-left: 4px solid rgb(var(--hocco-border)); background: rgb(var(--hocco-bg));
    padding: .6rem 1rem; border-radius: .5rem; margin: 0 0 1rem; color: rgb(var(--hocco-text));
}
.hocco-article-content strong { color: rgb(var(--hocco-plum)); }

/* Oculta elementos Alpine (menú móvil, icono X) hasta que Alpine inicializa */
[x-cloak] { display: none !important; }

/* Avatares (pixel art): SIEMPRE completos y a tamaño original, nunca redimensionar.
   Anula el preflight de Tailwind (img{max-width:100%}). Úsalo envolviendo el <img>
   en un contenedor con la clase .hocco-avatar. */
.hocco-avatar img {
    max-width: none;
    width: auto;
    height: auto;
    image-rendering: pixelated;
    margin-top: -28px;
}

/* Contorno blanco bonito para TODOS los avatares (img). Aplicar a cualquier <img>
   de avatar con la clase .hocco-avatar-img, o ya incluido en los contenedores de avatar. */
.hocco-avatar img,
.hocco-avatar-box img,
.hocco-avatar-img {
    -webkit-filter: drop-shadow(2px 1px 0 #fff) drop-shadow(-2px 1px 0 #fff) drop-shadow(0 -2px 0 #fff);
    filter: drop-shadow(2px 1px 0 #fff) drop-shadow(-2px 1px 0 #fff) drop-shadow(0 -2px 0 #fff);
}

/* Miniatura de sala a TAMAÑO ORIGINAL (pixel art, nunca escalar). El card se
   dimensiona al thumb (110px) para que lo llene a 1:1 sin contener ni deformar. */
.hocco-room-thumb {
    display: block;
    max-width: none;
    width: auto;
    height: auto;
    image-rendering: pixelated;
}

/* Cuadro del avatar en /user/me — efecto típico de Habbo. */
.hocco-avatar-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    width: 130px;
    height: 195px;
    overflow: hidden;
    border-radius: 1rem;
    border: 2px solid rgb(var(--hocco-border));
    background: linear-gradient(180deg, rgb(var(--hocco-pink-soft)) 0%, rgb(var(--hocco-purple-soft)) 100%);
}

/* IMPORTANTE: el avatar es pixel art → NUNCA redimensionar (anula el preflight de
   Tailwind img{max-width:100%}). */
.hocco-avatar-box img {
    max-width: none;
    width: auto;
    height: auto;
    image-rendering: pixelated;
    margin-top: -32px;
}

/* Capa del fondo configurable desde el panel del tema.
   Va en un <div> fijo propio (no en `background-image` del body) porque así
   `opacity` y `filter` afectan SOLO al fondo. Con z-index:-1 se pinta encima del
   degradado del <html> y por debajo de todo el contenido, sin crear conflictos con
   el header sticky. Las reglas por modo (imagen, posicion, etc.) las inyecta
   App\Support\HoccoAssets::backgroundCss(). */
.hocco-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
}

/* ===== Modo oscuro: colores de aviso de Tailwind (rojo/verde/ámbar…) =====
   Las clases claras (bg-red-50, text-red-700, bg-violet-100…) están pensadas para fondo blanco: en oscuro
   salían cajas blancas con texto claro encima o texto rojo oscuro ilegible. Aquí van sus versiones oscuras.
   Si un elemento ya trae su propio dark:…, gana el suyo (Tailwind se carga después). */
.dark .bg-red-50, .dark .hover\:bg-red-50:hover { background-color: rgb(127 29 29 / .32); }
.dark .bg-red-100 { background-color: rgb(127 29 29 / .5); }
.dark .bg-green-50 { background-color: rgb(20 83 45 / .3); }
.dark .bg-green-100 { background-color: rgb(20 83 45 / .5); }
.dark .bg-green-200 { background-color: rgb(20 83 45 / .65); }
.dark .bg-amber-50 { background-color: rgb(120 53 15 / .3); }
.dark .bg-yellow-100 { background-color: rgb(113 63 18 / .5); }
.dark .bg-violet-100 { background-color: rgb(76 29 149 / .5); }
.dark .bg-sky-100 { background-color: rgb(12 74 110 / .55); }
.dark .bg-orange-100 { background-color: rgb(124 45 18 / .5); }
.dark .text-red-500, .dark .text-red-600, .dark .text-red-700, .dark .text-red-800 { color: #fca5a5; }
.dark .text-green-600, .dark .text-green-700, .dark .text-green-800 { color: #86efac; }
.dark .text-amber-700, .dark .text-amber-900, .dark .text-yellow-800 { color: #fcd34d; }
.dark .text-violet-800 { color: #c4b5fd; }
.dark .text-sky-700, .dark .text-sky-800 { color: #7dd3fc; }
.dark .text-orange-800 { color: #fdba74; }
.dark .border-red-300, .dark .border-red-400 { border-color: rgb(248 113 113 / .45); }
.dark .border-green-300 { border-color: rgb(74 222 128 / .4); }
.dark .border-amber-300 { border-color: rgb(251 191 36 / .4); }
.dark .hover\:ring-red-200:hover { --tw-ring-color: rgb(248 113 113 / .45); }
.dark .bg-gray-300 { background-color: #6b7280; }
/* Palabras resaltadas en el chat */
.dark mark.bg-yellow-200 { background-color: rgb(202 138 4 / .45); color: inherit; }

/* ===== HoccoKeeping: botones Dar / Quitar (peligro) y scroll de listas ===== */
.hk-btn-give, .hk-btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .45rem 1rem; border-radius: 9999px; font-size: .875rem; font-weight: 800; line-height: 1.1;
    transition: background-color .15s, color .15s, box-shadow .15s, opacity .15s;
}
.hk-btn-give { background: #16a34a; color: #fff; box-shadow: 0 2px 6px rgb(22 163 74 / .25); }
.hk-btn-give:hover { background: #15803d; }
.hk-btn-danger { background: #fee2e2; color: #b91c1c; box-shadow: inset 0 0 0 1px rgb(220 38 38 / .25); }
.hk-btn-danger:hover { background: #fecaca; }
.hk-btn-give:disabled, .hk-btn-danger:disabled { opacity: .4; cursor: not-allowed; }
.dark .hk-btn-give { background: #22c55e; color: #052e16; box-shadow: none; }
.dark .hk-btn-give:hover { background: #4ade80; }
.dark .hk-btn-danger { background: rgb(239 68 68 / .18); color: #fecaca; box-shadow: inset 0 0 0 1px rgb(248 113 113 / .35); }
.dark .hk-btn-danger:hover { background: rgb(239 68 68 / .3); }

.hk-scroll { scrollbar-width: thin; scrollbar-color: rgb(var(--hocco-border)) transparent; scrollbar-gutter: stable; }
.hk-scroll::-webkit-scrollbar { width: 8px; }
.hk-scroll::-webkit-scrollbar-thumb { background: rgb(var(--hocco-border)); border-radius: 8px; }