@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap");
/* ============================================================================
   HADDO (03/10) — TEMA "RETRO": il sito di Habbo del 2014 (screenshot dell'utente, pagina
   "Aankoop opties" di habbo.nl), coi colori spostati verso il petrolio di Haddo.
   Si carica solo per chi ha il tema retro (App\Support\TemaSito), sopra al CSS del classic:
   l'header e' components/site-header-retro.blade.php, qui la pelle. Niente Vite sul server,
   per questo sta in public/assets come gli altri stili aggiunti dopo il 12/09.

   Colori dello screenshot -> nostri:
     fascia alta   #0f171d -> #10171d      banda/fondo  #05364a -> #0b3a52
     filo          #809baf -> #5a8aa2      striscia     #082a38 -> #072a3c
     separatore    #416a7a -> #3f6d82      verde        piu' acceso e meno giallo
   ============================================================================ */

:root {
    --hhr-alto: #0f151d;
    --hhr-filo: #4ea6cf;
    --hhr-banda: #18202b;
    --hhr-fondo: #10161e;
    --hhr-fondo-basso: #0b1017;
    --hhr-striscia: #0d1219;
    --hhr-separa: #343d4f;
    --hhr-link: #4ea6cf;
    --hhr-link-attivo: #ffffff;
    --hhr-testo: #e7eef7;
    --hhr-tenue: #8b9cae;
    --hhr-scheda: #a3b1c0;
    --hhr-verde-alto: #86d653;
    --hhr-verde-basso: #4c9f22;
    --hhr-verde-bordo: #2c6e12;
}

/* ---------------------------------------------------------------- fondale unico
   Nel classic ogni pagina ha il suo fondale (bianco di Atom, blu dei messaggi, gradiente della
   community, delle impostazioni...): nel retro c'e' un fondale solo, come sul sito del 2014.
   Il profilo tiene il suo sfondo personale. */
body.hh-tema-retro {
    background: var(--hhr-fondo-basso);
}

.hh-tema-retro #app:not(.hh-profile-page) {
    background: linear-gradient(180deg, var(--hhr-banda) 0, var(--hhr-fondo) 360px, var(--hhr-fondo-basso) 100%) !important;
}

/* le barre di navigazione delle pagine (community, messaggi, shop, schede della home):
   nel retro le sostituisce il sotto-menu della banda */
.hh-tema-retro .habbo-tabs,
.hh-tema-retro .hh-tabs {
    display: none !important;
}

/* ---------------------------------------------------------------- header */
.hhr {
    position: relative;
    z-index: 200;
    font-family: Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
}

.hhr-giro {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hhr-alto {
    height: 97px;
    background: var(--hhr-alto);
    border-bottom: 1px solid var(--hhr-filo);
}

.hhr-alto .hhr-giro {
    height: 100%;
}

/* il logo piccolo dello sprite del sito (116x46), della misura di quello del 2014 */
.hhr-logo {
    position: absolute;
    left: 20px;
    top: 26px;
    width: 116px;
    height: 46px;
    background: url("/assets/images/habbostyle/sprite.png") -620px -830px no-repeat;
}

/* la tacca: il triangolo scuro che scende nella banda (nello screenshot sta 129px a destra
   dell'inizio del logo), CONTORNATO dal filo chiaro come nel 2014: il filo della fascia scende
   lungo i due lati obliqui e risale. Sotto c'e' un triangolo chiaro piu' largo di 2px per lato,
   sopra quello scuro; tutti e due partono dalla riga del filo (top 100% = 96px), cosi' sopra la
   tacca la fascia continua senza la riga in mezzo (scatto 397) e il filo la gira tutta intorno. */
.hhr-alto .hhr-giro::before,
.hhr-alto .hhr-giro::after {
    content: "";
    position: absolute;
    top: 100%;
    border-style: solid;
    border-color: transparent;
}

.hhr-alto .hhr-giro::before {
    left: 147px;
    border-width: 30px 30px 0;
    border-top-color: var(--hhr-filo);
    z-index: 1;
}

.hhr-alto .hhr-giro::after {
    left: 149px;
    border-width: 28px 28px 0;
    border-top-color: var(--hhr-alto);
    z-index: 2;
}

/* ---------------------------------------------------------------- schede */
.hhr-schede {
    position: absolute;
    right: 20px;
    bottom: -1px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.hhr-scheda {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 31px;
    padding: 0 14px 0 11px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    font-family: "Ubuntu Condensed", Ubuntu, "Trebuchet MS", sans-serif;
    font-size: 19px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--hhr-scheda);
    text-decoration: none;
    white-space: nowrap;
}

.hhr-scheda::before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background: url("/assets/images/habbostyle/sprite.png") no-repeat;
}

/* (03/10) le icone del 2014: Home = la testa del proprio avatar (img nella scheda, come il "ME"; da ospite
   la casetta dello sprite), Community = tre busti e un fumetto e Sicurezza = il lucchetto (disegnati a pixel,
   tema-retro/disegna-icone.php), Shop = la moneta "H" che c'e' gia' nello sprite del sito */
.hhr-scheda--home::before { background-position: -552px -359px; }
.hhr-scheda--community::before { background-image: url("/assets/temi/retro-community.png"); background-position: 0 0; }
.hhr-scheda--sicurezza::before { background-image: url("/assets/temi/retro-sicurezza.png"); background-position: 0 0; }
.hhr-scheda--shop::before { background-position: -673px -587px; }

.hhr-scheda--io::before {
    display: none;
}

.hhr-scheda-testa {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    overflow: hidden;
}

/* la testa dell'imager (size=s, 27x31) centrata nei 22x22 */
.hhr-scheda-testa img {
    position: absolute;
    left: -3px;
    top: -6px;
    width: 27px;
    height: 31px;
    max-width: none;
    image-rendering: pixelated;
}

.hhr-scheda:hover {
    color: #ffffff;
}

/* la scheda attiva si apre sulla banda: stesso colore e niente filo sotto */
.hhr-scheda.is-attiva {
    background: var(--hhr-banda);
    border-color: var(--hhr-filo);
    height: 32px;
    padding-bottom: 1px;
    color: #ffffff;
}

/* ---------------------------------------------------------------- lingua, Gioca, utente */
.hhr-attrezzi {
    position: absolute;
    right: 20px;
    top: 8px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.hhr-gioca {
    display: inline-block;
    padding: 6px 18px 7px;
    border: 2px solid var(--hhr-verde-bordo);
    border-radius: 5px;
    background: linear-gradient(180deg, var(--hhr-verde-alto) 0, var(--hhr-verde-basso) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .35);
    font-family: Ubuntu, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    color: #ffffff !important;
    text-decoration: none;
}

.hhr-gioca:hover {
    filter: brightness(1.08);
}

.hhr-gioca:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 1px 0 rgba(0, 0, 0, .35);
}

/* il menu utente del classic (partials.header-small) dentro la fascia: via il suo logo e la sua
   altezza da 70, la pastiglia col nome resta quella teal, che col 2014 sta benissimo */
.hhr .hh-header-small {
    background: none;
    position: static;
}

.hhr .hh-small-wrapper {
    height: 46px;
    max-width: none;
    margin: 0;
    padding: 0;
}

.hhr .hh-small-logo {
    display: none;
}

.hhr .hh-header-aside {
    margin: 0;
}

/* ---------------------------------------------------------------- banda: sotto-menu e testata */
.hhr-banda {
    background: var(--hhr-banda);
}

.hhr-sotto {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px 22px;
    padding-top: 13px;
    font-size: 14px;
    line-height: 18px;
}

.hhr-sotto-voce {
    color: var(--hhr-link);
    text-decoration: none;
}

.hhr-sotto-voce:hover {
    color: #e6f3f9;
    text-decoration: underline;
}

.hhr-sotto-voce.is-attiva {
    color: var(--hhr-link-attivo);
    font-weight: 700;
}

.hhr-testata {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    min-height: 74px;
    padding: 20px 0 14px;
    border-bottom: 1px solid var(--hhr-separa);
}

/* senza sotto-menu (Notizie) la testata parte subito sotto la tacca */
.hhr-banda .hhr-giro > .hhr-testata:first-child {
    padding-top: 34px;
}

.hhr-titolo {
    margin: 0;
    font-family: Ubuntu, "Trebuchet MS", sans-serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1.15;
    color: #f2f8fb;
    overflow-wrap: anywhere;
}

.hhr-portafoglio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 7px;
    font-size: 13px;
    line-height: 16px;
    color: var(--hhr-tenue);
    white-space: nowrap;
}

.hhr-moneta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--hhr-testo);
}

.hhr-moneta::before {
    content: "";
    width: 15px;
    height: 15px;
    background: no-repeat center;
}

.hhr-moneta--crediti::before { background-image: url("/assets/images/icons/credits.png"); }
.hhr-moneta--duckets::before { background-image: url("/assets/images/icons/duckets.png"); }
.hhr-moneta--diamanti::before { background-image: url("/assets/images/icons/diamond.png"); }

/* ---------------------------------------------------------------- schermi stretti */
@media (max-width: 1100px) {
    .hhr-scheda {
        font-size: 16px;
        padding: 0 9px 0 8px;
        gap: 5px;
    }
}

@media (max-width: 860px) {
    .hhr-alto {
        height: auto;
    }

    .hhr-alto .hhr-giro {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        padding-top: 12px;
    }

    .hhr-alto .hhr-giro::before,
    .hhr-alto .hhr-giro::after {
        display: none;
    }

    .hhr-logo,
    .hhr-attrezzi,
    .hhr-schede {
        position: static;
    }

    .hhr-attrezzi {
        margin-left: auto;
    }

    .hhr-schede {
        width: 100%;
        margin-top: 10px;
        overflow-x: auto;
    }

    .hhr-scheda::before,
    .hhr-scheda-testa {
        display: none;
    }

    .hhr-portafoglio {
        display: none;
    }

    .hhr-titolo {
        font-size: 28px;
    }
}

/* ---------------------------------------------------------------- lingua: la chip bianca del classic diventa scura */
.hhr .hh-lang-current {
    background: #18202b;
    border-color: #4ea6cf;
    color: #ffffff;
    box-shadow: 0 1px 0 2px rgba(0, 0, 0, .3);
}

.hhr .hh-lang-current:hover { border-color: #8fcbe4; }
.hhr .hh-lang-caret { border-top-color: #ffffff; }
.hhr .hh-lang[open] .hh-lang-caret { border-top-color: transparent; border-bottom-color: #ffffff; }

/* ---------------------------------------------------------------- dentro le pagine
   Il classic usa il blu di habbo.it di oggi (riquadri #0b6395, testate #0e3955, bordi #2685bc,
   testi #7ecaee): qui diventano il petrolio del 2014. Solo i colori, le misure restano. */
.hh-tema-retro .hh-help-box,
.hh-tema-retro .hh-aside-box,
.hh-tema-retro .card {
    background-color: #252d3b;
}

.hh-tema-retro .hh-help-box h3,
.hh-tema-retro .hh-aside-box h3 {
    background-color: #121822;
}

.hh-tema-retro .card {
    border-color: #2b6c87;
}

.hh-tema-retro .card__creator {
    background: #283041;
    border-top-color: #2b6c87;
}

.hh-tema-retro .photos__header {
    background-color: #212836;
}

.hh-tema-retro .hh-static,
.hh-tema-retro .hh-help-content {
    color: #2c3440;
}

/* il piede: scuro come la fascia in alto */
.hh-tema-retro .hh-footer {
    background: var(--hhr-alto);
    border-top: 1px solid var(--hhr-filo);
    color: var(--hhr-tenue);
}

/* ---------------------------------------------------------------- negozio (stili in shop/shop.blade.php) */
.hh-tema-retro .hh-thumb {
    background: #252d3b;
}

/* i bottoni blu del classic diventano i verdi del 2014 ("Ga verder", "Redeem") */
.hh-tema-retro .hh-shop-item__buy,
.hh-tema-retro .hh-code__btn,
.hh-tema-retro .hh-settings-save {
    background: linear-gradient(180deg, var(--hhr-verde-alto) 0, var(--hhr-verde-basso) 100%);
    border-color: var(--hhr-verde-bordo);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40);
}

.hh-tema-retro .hh-shop-item__buy:hover,
.hh-tema-retro .hh-code__btn:hover,
.hh-tema-retro .hh-settings-save:hover {
    background: linear-gradient(180deg, #98e266 0, #58ae2b 100%);
    border-color: var(--hhr-verde-bordo);
}

.hh-tema-retro .hh-settings-save:active {
    background: var(--hhr-verde-basso);
    border-color: var(--hhr-verde-bordo);
}

/* "gia' tuo": grigio petrolio, non un verde spento */
.hh-tema-retro .hh-shop-item__buy:disabled {
    background: #343d4f;
    border-color: #343d4f;
    color: #9fb7c3;
    text-shadow: none;
    box-shadow: none;
    opacity: 1;
}

/* il campo del codice come quello del voucher del 2014 */
.hh-tema-retro .hh-code input {
    background: #ffffff;
    border-color: #96a2b1;
    color: #2c3440;
}

.hh-tema-retro .hh-code input::placeholder {
    color: #8b96a5;
}

.hh-tema-retro .hh-shop-item__desc,
.hh-tema-retro .hh-code__hint,
.hh-tema-retro .hh-shop-empty {
    color: #6a7688;
}

/* ---------------------------------------------------------------- impostazioni */
/* la striscia delle schede come quella del 2014 ("Mobiel | Online | Prepaid"): scura, scritte azzurre
   Ubuntu Condensed, quella aperta verde chiaro. Il titolo grande sta gia' nella banda. */
/* HADDO (18/10/2026): come Habbo le schede stanno nella banda sotto il titolo "Impostazioni" (site-header-retro):
   la striscia separata dello shell non serve piu' */
.hh-tema-retro .hh-settings-tabs {
    display: none;
}

.hhr-testata--impostazioni {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
    padding-bottom: 2px;
}

.hhr-impostazioni .hh-settings-tablist {
    row-gap: 0;
}

.hh-tema-retro .hhr-impostazioni .hh-settings-tab,
.hh-tema-retro .hhr-impostazioni .hh-settings-tab[aria-current="page"] {
    font-family: Ubuntu, "Trebuchet MS", sans-serif;
    font-size: 16px;
    line-height: 44px;
    text-transform: uppercase;
    color: #ffffff;
}

.hh-tema-retro .hhr-impostazioni .hh-settings-tab:hover {
    color: #bfe3f3;
    text-decoration: underline;
}

.hh-tema-retro .hhr-impostazioni .hh-settings-tablist li:not(:first-child)::before {
    margin: 0 20px;
    color: rgba(255, 255, 255, .45);
}

.hh-tema-retro .hh-settings-title {
    display: none;
}

.hh-tema-retro .hh-settings-tab {
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 22px;
    text-transform: none;
    color: #3d6b80;
}

.hh-tema-retro .hh-settings-tab:hover {
    color: #1e7295;
}

.hh-tema-retro .hh-settings-tab[aria-current="page"] {
    color: #b9f3a5;
}

.hh-tema-retro .hh-settings-tablist li:not(:first-child)::before {
    color: #333b4d;
}

.hh-tema-retro .hh-settings-fieldset--box,
.hh-tema-retro .hh-settings-status {
    background-color: #212836;
}

.hh-tema-retro .hh-settings-aside-box {
    background-color: #252d3b;
}

.hh-tema-retro .hh-settings-aside-box h5 {
    background-color: #121822;
}

.hh-tema-retro .hh-settings-desc,
.hh-tema-retro .hh-settings-choice,
.hh-tema-retro .hh-settings-aside-box p {
    color: #2c3440;
}

.hh-tema-retro .hh-settings-input {
    border-color: #96a2b1;
    box-shadow: inset 0 2px #a9c5d1;
}

.hh-tema-retro .hh-settings-input:focus {
    border-color: #96a2b1;
}

/* ============================================================================
   HADDO (03/10) — LE PAGINE DEL NEW, CON MANO LIBERA (l'utente: "non pensare al CMS di Habbo, sorprendimi").
   Un solo linguaggio: pannelli petrolio con la striscia gialla del logo di Haddo, titoli Ubuntu
   Condensed, numeri e valori in giallo, azioni in verde. I componenti condivisi (content-card,
   staff-content-section, staff-card, page-header, leaderboard-card) hanno un ramo New col loro
   markup (classi hhn-*); profilo, stanze e notizie del classic sono solo ricolorati qui.
   ============================================================================ */
:root {
    --hhn-alto: #2a3242;
    --hhn-basso: #222936;
    --hhn-bordo: #2b6c87;
    --hhn-testa: #121822;
    --hhn-oro: #ffd23c;
    --hhn-arancio: #ff9a1f;
    --hhn-testo: #dce6ef;
    --hhn-tenue: #9fb2c2;
}

/* ---------------------------------------------------------------- pannello (content-card e sezioni dello staff) */
.hh-tema-retro .hhn-pannello {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--hhn-bordo) !important;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
    color: var(--hhn-testo);
}

.hhn-pannello-testa {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 18px;
    background: linear-gradient(90deg, var(--hhn-testa) 0, #151b25 100%);
    border-bottom: 1px solid var(--hhn-bordo);
}

/* la firma: la striscia gialla e arancio del logo */
.hhn-pannello-testa::before,
.hhn-classifica-testa::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hhn-oro) 0, var(--hhn-arancio) 100%);
}

.hhn-pannello-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #18202b;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset 0 0 0 2px var(--hhn-bordo), 0 2px 6px rgba(0, 0, 0, .3);
}

.hhn-pannello-icona--distintivo img {
    image-rendering: pixelated;
}

.hhn-pannello-titoli {
    min-width: 0;
}

.hhn-pannello-titolo {
    margin: 0;
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 21px;
    line-height: 24px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #f2f8fb;
}

.hhn-pannello-sotto {
    margin: 0;
    font-size: 13px;
    line-height: 17px;
    color: #d5ecf6;
}

.hhn-pannello-corpo {
    padding: 14px 16px 16px;
    font-size: 14px;
    line-height: 1.55;
}

/* dentro, le pagine scrivono coi grigi di Tailwind pensati per il bianco */
.hh-tema-retro .hhn-pannello-corpo [class*="text-gray"],
.hh-tema-retro .hhn-pannello-corpo [class*="text-[#"] {
    color: var(--hhn-tenue) !important;
}

.hh-tema-retro .hhn-pannello-corpo a {
    color: #4ea6cf;
}

/* le regole: numero del paragrafo in giallo, una riga per regola */
.hh-tema-retro .hhn-pannello-corpo ul > li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.hh-tema-retro .hhn-pannello-corpo ul > li:last-child {
    border-bottom: 0;
}

.hh-tema-retro .hhn-pannello-corpo ul > li > strong:first-child {
    display: inline-block;
    min-width: 36px;
    color: var(--hhn-oro);
}

.hhn-presentazione {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--hhn-tenue);
}

/* ---------------------------------------------------------------- staff */
.hhn-staff {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    min-height: 118px;
    padding: 8px 14px 10px 10px;
    overflow: hidden;
    border: 1px solid var(--hhn-bordo);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(16, 22, 30, .95) 0, rgba(16, 22, 30, .72) 55%, rgba(16, 22, 30, .35) 100%),
        var(--hhn-staff-fondo) center / cover;
    color: #2c3440;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.hhn-staff:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35), 0 0 0 1px #6fb6d6;
}

/* il personaggio intero, in piedi sul suo tondo di luce; passandoci sopra saluta */
.hhn-staff-figura {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 110px;
}

.hhn-staff-figura::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(65, 141, 176, .40) 0, rgba(65, 141, 176, 0) 70%);
}

.hhn-staff-figura img {
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 64px;
    height: 110px;
    max-width: none;
    image-rendering: pixelated;
    transition: opacity .1s;
}

.hhn-staff-saluta,
.hhn-staff:hover .hhn-staff-fermo {
    opacity: 0;
}

.hhn-staff:hover .hhn-staff-saluta {
    opacity: 1;
}

.hhn-staff-dati {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-bottom: 6px;
}

.hhn-staff-nome {
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 24px;
    line-height: 26px;
    /* HADDO (29/10, l'utente: "il nome dell'autore non e' molto leggibile"): bianco, prima ereditava #2c3440 dalla
       scheda e spariva sul fondo scuro */
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}

.hhn-staff-motto {
    overflow: hidden;
    font-size: 13px;
    font-style: italic;
    color: var(--hhn-tenue);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hhn-staff-stato {
    position: relative;
    align-self: flex-start;
    margin-top: 4px;
    padding: 1px 9px 1px 19px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .38);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #ff9b9b;
}

.hhn-staff-stato::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: #ff5c5c;
}

.hhn-staff.is-online .hhn-staff-stato {
    color: #b9f3a5;
}

.hhn-staff.is-online .hhn-staff-stato::before {
    background: #5ee05e;
    box-shadow: 0 0 6px #5ee05e;
}

/* ---------------------------------------------------------------- classifica: il podio */
.hhn-classifica {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--hhn-bordo);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

.hhn-classifica-testa {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 18px;
    background: var(--hhn-testa);
    border-bottom: 1px solid var(--hhn-bordo);
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    color: #f2f8fb;
}

.hhn-classifica-testa img {
    width: auto;
    height: 16px;
    image-rendering: pixelated;
}

.hhn-podio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
    padding: 14px 12px 12px;
    background: radial-gradient(ellipse at 50% 75%, rgba(255, 210, 60, .14) 0, rgba(255, 210, 60, 0) 65%);
}

.hhn-podio-posto {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    color: #f2f8fb;
    text-decoration: none;
}

.hhn-podio-figura {
    order: 0;
    position: relative;
    z-index: 1;
    width: 64px;
    height: 110px;
    max-width: none;
    margin-bottom: -12px;
    image-rendering: pixelated;
    transition: transform .15s ease;
}

.hhn-podio-posto:hover .hhn-podio-figura {
    transform: translateY(-3px);
}

.hhn-podio-blocco {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 4px 4px 0 0;
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 26px;
    font-weight: 700;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .18);
}

/* HADDO (30/10/2026, l'utente: "il podio fallo stile habbo, magari come piattaforma metti un furni adatto"): i blocchi
   sono il furni "Podio Haddo-lympix Bianco" (track12_ele_podium2) impilato (3, 2, 1) e tinto oro, argento e bronzo:
   immagini fatte da edits/classifica-podio-20261030/podi.py. I gradienti qui sotto restano solo come ripiego */
.hhn-podio .hhn-podio-posto .hhn-podio-blocco {
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.hhn-podio .hhn-podio-posto .hhn-podio-blocco img {
    display: block;
    width: 60px;
    height: auto;
    max-width: none;
    image-rendering: pixelated;
}

.hhn-podio .hhn-podio-figura {
    margin-bottom: -26px;
}

.hhn-podio-posto--1 .hhn-podio-blocco {
    height: 64px;
    background: linear-gradient(180deg, #ffe680 0, #ff9a1f 100%);
    color: #7a5200;
}

.hhn-podio-posto--2 .hhn-podio-blocco {
    height: 48px;
    background: linear-gradient(180deg, #f2f6f9 0, #b8c4cc 100%);
    color: #4a5560;
}

.hhn-podio-posto--3 .hhn-podio-blocco {
    height: 36px;
    background: linear-gradient(180deg, #f6c08e 0, #c47a3a 100%);
    color: #5a2f0e;
}

.hhn-podio-nome {
    order: 2;
    max-width: 100%;
    margin-top: 6px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hhn-podio-valore {
    order: 3;
    font-size: 12px;
    font-weight: 700;
    color: var(--hhn-oro);
}

.hhn-classifica-righe {
    margin: 0;
    padding: 4px 0 8px;
    list-style: none;
}

.hhn-classifica-riga {
    display: grid;
    grid-template-columns: 26px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-top: 1px solid rgba(255, 255, 255, .05);
}

.hhn-classifica-riga:hover {
    background: rgba(65, 141, 176, .08);
}

.hhn-classifica-numero {
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 18px;
    text-align: center;
    color: #6a7688;
}

.hhn-classifica-testina {
    position: relative;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    background: #18202b;
    box-shadow: inset 0 0 0 2px var(--hhn-bordo);
}

.hhn-classifica-testina img {
    position: absolute;
    left: -10px;
    top: -16px;
    max-width: none;
    image-rendering: pixelated;
}

.hhn-classifica-nome {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    color: #2c3440;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hhn-classifica-nome:hover {
    color: #1e7295;
    text-decoration: underline;
}

.hhn-classifica-valore {
    font-size: 13px;
    font-weight: 700;
    color: var(--hhn-oro);
}

/* ---------------------------------------------------------------- profilo (classic ricolorato) */
.hh-tema-retro .hh-profile-panel {
    border: 1px solid var(--hhn-bordo);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.hh-tema-retro .hh-profile-item-frame {
    border-color: #3f8fae;
    background-color: rgba(16, 22, 30, .55);
}

.hh-tema-retro .hh-profile-more {
    border-top-color: var(--hhn-bordo);
    color: var(--hhn-testo);
}

.hh-tema-retro .hh-profile-more:hover {
    color: var(--hhn-oro);
}

/* ---------------------------------------------------------------- galleria stanze */
.hh-tema-retro .rooms__header {
    background-color: #212836;
}

.hh-tema-retro .hh-rooms-empty {
    color: var(--hhn-tenue);
}

/* le pagine col contenitore di Atom (regole, classifica, staff, ticket...): stessa larghezza e stessi
   margini della banda, invece di toccare i bordi dello schermo a 1280 */
.hh-tema-retro .main-content > .max-w-7xl {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ============================================================================
   HADDO (03/10) — LA HOME DEL NEW (partials/home-new.blade.php).
   L'utente: "agli elementi in home starebbe bene una cornice, nera o grigia, attualmente sembrano buttati
   li' senza corpo o anima, sorprendimi ancora". Ogni elemento e' una finestra con la CORNICE: filo nero,
   fascia grigia "canna di fucile" con la luce in alto e una vite per angolo, filo nero, poi il contenuto.
   ============================================================================ */
.hhn-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 26px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 44px;
}

.hhn-home-principale,
.hhn-home-lato {
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
}

/* ---------------------------------------------------------------- la cornice */
.hhn-cornice {
    position: relative;
    padding: 5px;
    border: 1px solid #01090e;
    border-radius: 11px;
    background:
        radial-gradient(circle at 4.5px 4.5px, #e4ebee 0, #8d9ba3 1.1px, #26323a 2.1px, transparent 2.6px),
        radial-gradient(circle at calc(100% - 4.5px) 4.5px, #e4ebee 0, #8d9ba3 1.1px, #26323a 2.1px, transparent 2.6px),
        radial-gradient(circle at 4.5px calc(100% - 4.5px), #e4ebee 0, #8d9ba3 1.1px, #26323a 2.1px, transparent 2.6px),
        radial-gradient(circle at calc(100% - 4.5px) calc(100% - 4.5px), #e4ebee 0, #8d9ba3 1.1px, #26323a 2.1px, transparent 2.6px),
        linear-gradient(180deg, #7a8a93 0, #4d5b63 38%, #2f3b42 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .38),
        inset 0 -1px 0 rgba(0, 0, 0, .35),
        0 12px 26px rgba(0, 0, 0, .38),
        0 2px 0 rgba(0, 0, 0, .3);
}

.hhn-cornice-dentro {
    position: relative;
    overflow: hidden;
    border: 1px solid #01090e;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    color: var(--hhn-testo);
}

/* le testate dei pannelli (stesse delle altre pagine del New) con l'icona che esce dal tondo */
.hhn-home .hhn-pannello-testa {
    min-height: 56px;
}

.hhn-home .hhn-pannello-icona {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.hhn-pannello-icona img {
    max-width: none;
    image-rendering: pixelated;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
}

.hhn-testa-link {
    margin-left: auto;
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 16px;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hhn-oro) !important;
    text-decoration: none;
}

.hhn-testa-link:hover {
    color: #ffffff !important;
}

.hhn-home .hhn-pannello-corpo p {
    margin: 0 0 10px;
}

.hhn-home .hhn-pannello-corpo p:last-child {
    margin-bottom: 0;
}

.hhn-home .hhn-pannello-corpo a:not(.hhn-bottone):not(.hh-mc-mappa) {
    color: #ffffff;
    font-weight: 700;
}

.hhn-vuoto {
    margin: 0;
    padding: 18px;
    color: var(--hhn-tenue);
}

/* ---------------------------------------------------------------- la scena: l'avatar nella hotel view del client */
.hhn-scena {
    height: 300px;
    background:
        var(--hhn-scena-sfondo, none) 0 0 / 100% 100% no-repeat,
        var(--hhn-scena-colore, #3a2fc9);
}

.hhn-scena-sinistra,
.hhn-scena-destra {
    position: absolute;
    bottom: 0;
    max-width: none;
    image-rendering: pixelated;
    pointer-events: none;
    user-select: none;
}

.hhn-scena-sinistra {
    left: 0;
}

.hhn-scena-destra {
    right: 0;
}

/* l'avatar sul pavimento della stanza, come nella hotel view dell'app */
.hhn-scena-io {
    position: absolute;
    left: 210px;
    bottom: 50px;
    z-index: 2;
    width: 64px;
}

.hhn-scena-avatar {
    position: relative;
    display: block;
    width: 64px;
    height: 110px;
}

/* l'ombra per terra */
.hhn-scena-avatar::before {
    content: "";
    position: absolute;
    left: 17px;
    bottom: 3px;
    width: 30px;
    height: 9px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .32);
}

.hhn-scena-avatar img {
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 110px;
    max-width: none;
    image-rendering: pixelated;
}

.hhn-scena-saluta,
.hhn-scena-avatar:hover .hhn-scena-fermo {
    opacity: 0;
}

.hhn-scena-avatar:hover .hhn-scena-saluta {
    opacity: 1;
}

/* il motto come un fumetto della chat di Habbo: bianco, filo nero, la testa a sinistra, "Nome: testo" */
.hhn-fumetto {
    position: absolute;
    left: -14px;
    bottom: calc(100% - 12px); /* l'imager lascia ~20px sopra la testa per i cappelli */
    display: flex;
    align-items: center;
    gap: 3px;
    width: max-content;
    max-width: 330px;
    min-height: 26px;
    padding: 1px 9px 1px 1px;
    border: 1px solid #000000;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
    font-family: Ubuntu, "Trebuchet MS", sans-serif;
    font-size: 12px;
    line-height: 15px;
    color: #000000;
    animation: hhn-fumetto 0.5s ease-out both;
}

/* la punta verso la testa */
.hhn-fumetto::before,
.hhn-fumetto::after {
    content: "";
    position: absolute;
    left: 40px;
    border-style: solid;
    border-color: transparent;
}

.hhn-fumetto::before {
    bottom: -8px;
    border-width: 8px 6px 0;
    border-top-color: #000000;
}

.hhn-fumetto::after {
    left: 41px;
    bottom: -6px;
    border-width: 7px 5px 0;
    border-top-color: #ffffff;
}

.hhn-fumetto-testa {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border-radius: 5px 0 0 5px;
    background: #e3f1f8;
}

.hhn-fumetto-testa img {
    position: absolute;
    left: -2px;
    top: -6px;
    width: 27px;
    height: 31px;
    max-width: none;
    image-rendering: pixelated;
}

.hhn-fumetto-testo {
    padding: 4px 0;
    overflow-wrap: anywhere;
}

@keyframes hhn-fumetto {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* la barra in basso, scura come la barra dell'hotel: chi c'e' adesso ed "Entra in hotel" */
.hhn-scena-barra {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 50px;
    padding: 0 10px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    background: linear-gradient(180deg, rgba(12, 18, 24, .82) 0, rgba(4, 8, 12, .94) 100%);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .55);
}

.hhn-scena-online {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: #f0f7fa;
    text-shadow: 0 1px 0 #000000;
}

.hhn-scena-online i {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #5ee05e;
    box-shadow: 0 0 0 3px rgba(94, 224, 94, .28);
    animation: hhn-batte 1.8s ease-in-out infinite;
}

@keyframes hhn-batte {
    50% {
        box-shadow: 0 0 0 6px rgba(94, 224, 94, 0);
    }
}

.hhn-entra {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 24px;
    overflow: hidden;
    border: 2px solid var(--hhr-verde-bordo);
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhr-verde-alto) 0, var(--hhr-verde-basso) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .5);
    font-family: Ubuntu, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    white-space: nowrap;
    color: #ffffff !important;
    text-decoration: none;
}

/* un lampo di luce che ci passa sopra ogni tanto */
.hhn-entra::after {
    content: "";
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: -70px;
    width: 40px;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%);
    animation: hhn-lampo 4.5s ease-in-out 1s infinite;
}

@keyframes hhn-lampo {
    0%,
    72% {
        left: -70px;
    }

    100% {
        left: calc(100% + 30px);
    }
}

.hhn-entra:hover {
    filter: brightness(1.08);
}

.hhn-entra:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------- notizie */
/* la prima: l'immagine di Habbo ha la parte sinistra a tinta unita apposta per il testo */
.hhn-notizia {
    position: relative;
    display: block;
    height: 300px;
    overflow: hidden;
    border-bottom: 1px solid #01090e;
    background: #0d1219;
    color: #ffffff;
    text-decoration: none;
}

.hhn-notizia:last-child {
    border-bottom: 0;
}

.hhn-notizia-immagine {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: right center;
    image-rendering: pixelated;
    transition: filter .2s ease;
}

.hhn-notizia:hover .hhn-notizia-immagine {
    filter: brightness(1.06) saturate(1.05);
}

.hhn-notizia-testo {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    width: 44%;
    padding: 22px 22px 20px 24px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 100%);
}

.hhn-etichetta {
    padding: 2px 9px;
    border-radius: 3px;
    background: var(--hhn-oro);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #4a3300;
}

.hhn-etichetta--nuovo {
    background: #ff5c8a;
    color: #ffffff;
}

.hhn-notizia-titolo {
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 32px;
    line-height: 1.02;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

.hhn-notizia-data {
    font-size: 12px;
    font-style: italic;
    color: rgba(255, 255, 255, .78);
}

.hhn-notizia-sommario {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.hhn-notizia-leggi {
    margin-top: auto;
    padding: 5px 14px;
    border: 2px solid var(--hhr-verde-bordo);
    border-radius: 5px;
    background: linear-gradient(180deg, var(--hhr-verde-alto) 0, var(--hhr-verde-basso) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .4);
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.hhn-notizia:hover .hhn-notizia-leggi {
    filter: brightness(1.08);
}

/* le altre: in fila, piccole, ognuna con la sua cornicetta */
.hhn-notizie-altre {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 12px;
    list-style: none;
    background: rgba(0, 0, 0, .14);
}

.hhn-notizia-piccola {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-content: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 6px;
    border: 1px solid #01090e;
    border-radius: 5px;
    background: #212836;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
    text-decoration: none;
    transition: background .15s ease;
}

.hhn-notizia-piccola:hover {
    background: #2a3344;
}

.hhn-notizia-piccola-foto {
    grid-row: 1 / span 2;
    width: 96px;
    height: 48px;
    overflow: hidden;
    border: 1px solid #01090e;
    border-radius: 3px;
    background: #0d1219;
}

.hhn-notizia-piccola-foto img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 82% center;
}

.hhn-notizia-piccola-titolo {
    overflow: hidden;
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 16px;
    line-height: 19px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: #f2f8fb;
}

.hhn-notizia-piccola-data {
    font-size: 11px;
    color: var(--hhn-tenue);
}

/* ---------------------------------------------------------------- scatti dall'hotel: polaroid sulla bacheca */
.hhn-bacheca {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
    padding: 28px 24px 26px;
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1.6px) 0 0 / 7px 7px,
        linear-gradient(180deg, #141a23 0, #10161e 100%);
}

.hhn-polaroid {
    --hhn-giro: -3deg;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #f3f2ed 0, #e1e0d9 100%);
    box-shadow: 0 7px 14px rgba(0, 0, 0, .42), 0 1px 0 rgba(0, 0, 0, .3);
    color: #2f3640;
    text-decoration: none;
    transform: rotate(var(--hhn-giro));
    transition: transform .18s ease, box-shadow .18s ease;
}

.hhn-polaroid:nth-child(4n + 2) {
    --hhn-giro: 2deg;
    margin-top: 10px;
}

.hhn-polaroid:nth-child(4n + 3) {
    --hhn-giro: -1.5deg;
    margin-top: 2px;
}

.hhn-polaroid:nth-child(4n + 4) {
    --hhn-giro: 3deg;
    margin-top: 8px;
}

.hhn-polaroid:hover {
    z-index: 2;
    transform: rotate(0deg) translateY(-5px) scale(1.04);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .5), 0 1px 0 rgba(0, 0, 0, .3);
}

/* il nastro adesivo che la tiene su */
.hhn-polaroid::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    width: 56px;
    height: 17px;
    margin-left: -28px;
    background: rgba(255, 238, 178, .62);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    transform: rotate(calc(var(--hhn-giro) * -1.6));
}

.hhn-polaroid-foto {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .3);
    background: #111111;
}

.hhn-polaroid-foto img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.hhn-polaroid-firma {
    overflow: hidden;
    padding: 6px 2px 9px;
    font-family: "Patrick Hand", "Comic Sans MS", cursive;
    font-size: 19px;
    line-height: 20px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hhn-polaroid-cuori {
    position: absolute;
    right: 13px;
    top: 13px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    color: #ff9ab8;
}

/* ---------------------------------------------------------------- a lato */
.hhn-progresso {
    position: relative;
    height: 22px;
    margin: 2px 0 12px;
    overflow: hidden;
    border: 1px solid #01090e;
    border-radius: 11px;
    background: #0d1219;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45);
}

.hhn-progresso-pieno {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--hhn-progresso, 0%);
    background: linear-gradient(180deg, #ffe680 0, #ff9a1f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

.hhn-progresso-testo {
    position: relative;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 0 #000000;
    color: #ffffff;
}

.hhn-copia {
    display: flex;
    gap: 6px;
}

.hhn-campo {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #96a2b1;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .25);
    font-size: 12px;
    color: #2c3440;
}

.hhn-bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border: 2px solid var(--hhr-verde-bordo);
    border-radius: 5px;
    background: linear-gradient(180deg, var(--hhr-verde-alto) 0, var(--hhr-verde-basso) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 rgba(0, 0, 0, .35);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    color: #ffffff !important;
    text-decoration: none;
    cursor: pointer;
}

.hhn-bottone:hover {
    filter: brightness(1.08);
}

.hhn-bottone--largo {
    width: 100%;
    margin-top: 10px;
}

/* il riquadro Minecraft: lo stile delle righe sta in assets/minecraft/sito.css */
.hhn-home .hh-mc .hh-mc-giocatori,
.hhn-home .hh-mc .hh-mc-mappa:not(.hh-mc-richiedi) {
    border: 1px solid #01090e;
    background: rgba(0, 0, 0, .22);
}

/* ---------------------------------------------------------------- movimento: solo per chi lo vuole */
@media (prefers-reduced-motion: reduce) {
    .hhn-entra::after,
    .hhn-scena-online i,
    .hhn-fumetto {
        animation: none;
    }
}

/* ---------------------------------------------------------------- schermi stretti */
@media (max-width: 1000px) {
    .hhn-home {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .hhn-scena-destra {
        display: none;
    }

    .hhn-scena-io {
        left: 120px;
    }

    .hhn-notizia-testo {
        width: 100%;
        background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .15) 100%);
    }

    .hhn-notizie-altre {
        grid-template-columns: minmax(0, 1fr);
    }

    .hhn-bacheca {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hhn-entra {
        padding: 0 14px;
        font-size: 14px;
    }
}

/* ============================================================================
   HADDO (03/10) — LE PAGINE DA COLLEGATO NELLO STILE DELLA HOME (messaggi, impostazioni, shop, acquisti,
   profilo, centro aiuto): gli stessi riquadri del Classic, senza markup nuovo. La cornice qui e' fatta col
   bordo (filo nero) e tre anelli di box-shadow (luce, fascia grigia, filo nero esterno): gli anelli escono
   di 6px, per questo i margini fra un riquadro e l'altro crescono. Nelle testate la striscia gialla del logo.
   ============================================================================ */
.hh-tema-retro .hh-aside-box,
.hh-tema-retro .hh-settings-aside-box,
.hh-tema-retro .hh-help-box,
.hh-tema-retro .hh-settings-form,
.hh-tema-retro .msg-empty,
.hh-tema-retro .msg-disc__item,
.hh-tema-retro .hh-order,
.hh-tema-retro .hh-thumb {
    border: 1px solid #01090e !important;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 14px 26px rgba(0, 0, 0, .4) !important;
}

.hh-tema-retro .hh-aside-box,
.hh-tema-retro .hh-settings-aside-box,
.hh-tema-retro .hh-help-box {
    overflow: hidden;
    margin-bottom: 36px;
}

/* le testate dei riquadri: piu' scure, filo nero sotto, striscia gialla e arancio a sinistra */
.hh-tema-retro .hh-aside-box h3,
.hh-tema-retro .hh-settings-aside-box h5,
.hh-tema-retro .hh-help-box h3 {
    position: relative;
    background: linear-gradient(90deg, var(--hhn-testa) 0, #151b25 100%);
    border-bottom: 1px solid #01090e;
    letter-spacing: .3px;
}

.hh-tema-retro .hh-aside-box h3::before,
.hh-tema-retro .hh-settings-aside-box h5::before,
.hh-tema-retro .hh-help-box h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hhn-oro) 0, var(--hhn-arancio) 100%);
}

/* il titolo della pagina sta gia' nella banda: via il secondo (Messaggi, Impostazioni, Shop, Acquisti) */
.hh-tema-retro .msg-content > section > .hh-section-title,
.hh-tema-retro .hh-shop__header,
.hh-tema-retro .hh-settings-section-title {
    display: none;
}

/* ---------------------------------------------------------------- messaggi */
.hh-tema-retro .msg-content {
    margin: 30px auto 44px;
    padding: 0 26px;
}

.hh-tema-retro .msg-empty {
    margin-top: 6px;
    padding: 26px 20px;
    gap: 6px;
}

.hh-tema-retro .msg-empty__text {
    top: 0;
    color: var(--hhn-testo);
}

.hh-tema-retro .msg-disc__item {
    margin-top: 0;
    margin-bottom: 30px;
    padding: 16px 18px 4px;
}

.hh-tema-retro .msg-disc__imager::before {
    background-color: #18202b;
    border-color: var(--hhn-bordo);
}

.hh-tema-retro .msg-disc__timeago::before,
.hh-tema-retro .msg-disc__timeago::after {
    background: var(--hhn-bordo);
}

/* i messaggi come i fumetti della chat di Habbo, come il motto nella Home */
.hh-tema-retro .msg-disc__bubble {
    padding: 6px 10px;
    border: 1px solid #000000;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
    font-size: 13px;
    color: #000000;
}

.hh-tema-retro .msg-disc__date {
    color: var(--hhn-tenue);
}

.hh-tema-retro .msg-disc__reply {
    border: 2px solid var(--hhr-verde-bordo);
    background: linear-gradient(180deg, var(--hhr-verde-alto) 0, var(--hhr-verde-basso) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .45);
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.hh-tema-retro .msg-disc__reply:hover {
    border-color: var(--hhr-verde-bordo);
    background: linear-gradient(180deg, #98e266 0, #58ae2b 100%);
}

/* ---------------------------------------------------------------- impostazioni */
.hh-tema-retro .hh-settings-form {
    max-width: 440px;
    padding: 16px 18px 18px;
}

.hh-tema-retro .hh-settings-fieldset--box {
    border: 1px solid rgba(1, 9, 14, .6);
    border-radius: 4px;
}

.hh-tema-retro .hh-settings-aside-box h5 {
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------- shop */
.hh-tema-retro .hh-thumb {
    padding: 0;
    background:
        radial-gradient(ellipse at 62% 42%, rgba(65, 141, 176, .2) 0, rgba(65, 141, 176, 0) 60%),
        linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
}

.hh-tema-retro .hh-thumb__icon {
    border-radius: 5px;
}

.hh-tema-retro .hh-thumb__banner {
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0 0 5px 5px;
    background: rgba(1, 9, 14, .62);
}

.hh-tema-retro .hh-thumb__title {
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* il prezzo: un nastro d'oro con la coda a rondine che scende dal bordo, invece del rettangolone */
.hh-tema-retro .hh-thumb__ribbon {
    top: -7px;
    left: 18px;
    width: 64px;
    height: 94px;
    justify-content: flex-start;
    padding-top: 17px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45));
}

.hh-tema-retro .hh-thumb__ribbon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #ef9f0b 0, #ffdc55 45%, #f6b214 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 81%, 0 100%);
}

/* la piega: il nastro passa sopra il bordo della scheda */
.hh-tema-retro .hh-thumb__ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    border-left: 6px solid #9c5c06;
    border-top: 7px solid transparent;
}

.hh-tema-retro .hh-thumb__price {
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 30px;
    line-height: 1;
    color: #6b3a05;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.hh-tema-retro .hh-thumb__currency {
    margin-top: 1px;
    font-size: 14px;
    color: #6b3a05;
}

.hh-tema-retro .hh-shop-grid {
    gap: 30px;
}

.hh-tema-retro .hh-shop-section__title {
    margin-bottom: 20px;
}

.hh-tema-retro .hh-order {
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------- profilo: la stessa cornice sui pannelli */
.hh-tema-retro .hh-profile-panel {
    border: 1px solid #01090e;
    border-radius: 6px;
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 14px 26px rgba(0, 0, 0, .4);
}

/* senza il titolo doppio la colonna di destra delle impostazioni sale in pari col modulo; flow-root al posto di
   overflow:hidden per tenere i float senza tagliare la cornice che esce di 6px */
.hh-tema-retro .hh-settings-content {
    overflow: visible;
    display: flow-root;
    margin-top: 30px;
    padding: 0 20px;
}

.hh-tema-retro .hh-settings-aside {
    margin-top: 0;
}

/* profilo: le cornici escono di 6px, i pannelli affiancati vogliono piu' spazio */
.hh-tema-retro .hh-profile-grid {
    column-gap: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

/* ============================================================================
   HADDO (03/10, scatti 404-406) — PROFILO, FINESTRE "VEDI TUTTO" E PAGINA DELLA NOTIZIA NEL NEW.
   L'utente: "la pagina profilo e le varie finestre che si aprono premendo SEE ALL ancora non l'avevi
   fatte?" e "nella pagina della news vanno sistemate alcune cose". Profilo e finestre: solo CSS sopra il
   markup del Classic; la notizia ha il suo ramo New in community/article.blade.php (e l'autore in
   components/community/article-author.blade.php).
   ============================================================================ */

/* ---------------------------------------------------------------- profilo */
/* il fondo e' quello di tutte le pagine del New (il blu di habbo.it era rimasto); la striscia di pixel art resta */
.hh-tema-retro #app.hh-profile-page {
    background: linear-gradient(180deg, var(--hhr-banda) 0, var(--hhr-fondo) 360px, var(--hhr-fondo-basso) 100%) !important;
}

/* il nome sta gia' nella banda: accanto all'avatar resta il motto, come un fumetto della chat */
.hh-tema-retro .hh-profile-page .hh-profile-username {
    display: none;
}

.hh-tema-retro .hh-profile-page .hh-profile-identity {
    position: relative;
    width: auto;
    max-width: min(460px, calc(100% - 130px));
    margin-left: 62px;
    padding: 6px 12px;
    border: 1px solid #000000;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}

.hh-tema-retro .hh-profile-page .hh-profile-identity:not(:has(.hh-profile-motto)) {
    display: none;
}

/* la punta verso l'avatar */
.hh-tema-retro .hh-profile-page .hh-profile-identity::before,
.hh-tema-retro .hh-profile-page .hh-profile-identity::after {
    content: "";
    position: absolute;
    top: 50%;
    border-style: solid;
    border-color: transparent;
}

.hh-tema-retro .hh-profile-page .hh-profile-identity::before {
    left: -9px;
    margin-top: -6px;
    border-width: 6px 9px 6px 0;
    border-right-color: #000000;
}

.hh-tema-retro .hh-profile-page .hh-profile-identity::after {
    left: -7px;
    margin-top: -5px;
    border-width: 5px 8px 5px 0;
    border-right-color: #ffffff;
}

.hh-tema-retro .hh-profile-page .hh-profile-motto {
    max-width: none;
    font-size: 13px;
    line-height: 17px;
    white-space: normal;
    color: #000000;
}

/* il tondo dell'avatar con la cornice grigia della Home */
.hh-tema-retro .hh-profile-page .hh-profile-avatar::before {
    border-color: #01090e;
    background-color: #18202b;
    box-shadow: 0 0 0 1px #4ea6cf, 0 0 0 4px #232a37, 0 0 0 5px #01090e, 0 8px 16px rgba(0, 0, 0, .4);
}

.hh-tema-retro .hh-profile-photos-title::after {
    background-color: var(--hhn-bordo);
}

/* le foto del profilo come le polaroid della Home */
.hh-tema-retro .hh-profile-photos .columns__column {
    padding: 10px 12px 18px;
}

.hh-tema-retro .hh-profile-photos .card {
    position: relative;
    padding: 8px 8px 34px;
    border: 0 !important;
    border-radius: 2px;
    background: linear-gradient(180deg, #f3f2ed 0, #e1e0d9 100%) !important;
    box-shadow: 0 7px 14px rgba(0, 0, 0, .42), 0 1px 0 rgba(0, 0, 0, .3);
    transform: rotate(-2deg);
    transition: transform .18s ease, box-shadow .18s ease;
}

.hh-tema-retro .hh-profile-photos .columns__column:nth-child(2n) .card {
    transform: rotate(2deg);
}

.hh-tema-retro .hh-profile-photos .columns__column:nth-child(3n) .card {
    transform: rotate(-1deg);
}

.hh-tema-retro .hh-profile-photos .card:hover {
    z-index: 2;
    transform: rotate(0deg) translateY(-5px) scale(1.03);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .5), 0 1px 0 rgba(0, 0, 0, .3);
}

/* il nastro adesivo */
.hh-tema-retro .hh-profile-photos .card::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    z-index: 3;
    width: 56px;
    height: 17px;
    margin-left: -28px;
    background: rgba(255, 238, 178, .62);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    transform: rotate(3deg);
}

.hh-tema-retro .hh-profile-photos .card__content {
    position: static;
    height: auto;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(0, 0, 0, .3);
    background: #111111;
}

.hh-tema-retro .hh-profile-photos .card__link {
    height: 100%;
}

.hh-tema-retro .hh-profile-photos .card__image__aligner {
    float: none;
    left: auto;
    height: 100%;
}

.hh-tema-retro .hh-profile-photos .card__image {
    float: none;
    right: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: none;
}

/* data e "mi piace" scritti sul bordo bianco, a mano */
.hh-tema-retro .hh-profile-photos .card__meta {
    padding: 5px 10px;
    background: none;
    font-family: "Patrick Hand", "Comic Sans MS", cursive;
    font-size: 17px;
    text-shadow: none;
    color: #2f3640;
}

.hh-tema-retro .hh-profile-photos .card__like {
    right: 10px;
    bottom: 5px;
    color: #2f3640;
}

.hh-tema-retro .hh-profile-photos .card__like button {
    color: #2f3640;
}

.hh-tema-retro .hh-profile-photos .like__icon {
    filter: brightness(.25);
}

/* ---------------------------------------------------------------- finestre "vedi tutto" */
.hh-tema-retro .hh-friends-modal,
.hh-tema-retro .hh-expand-modal {
    background-color: rgba(12, 17, 24, .82);
}

.hh-tema-retro .hh-friends-window,
.hh-tema-retro .hh-expand-window {
    border: 1px solid #01090e !important;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%) !important;
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 22px 50px rgba(0, 0, 0, .6) !important;
}

.hh-tema-retro .hh-friends-window {
    margin-top: 10px;
}

.hh-tema-retro .hh-friends-titlebar,
.hh-tema-retro .hh-expand-titlebar {
    position: relative;
    border-bottom: 1px solid #01090e;
    border-radius: 0;
    background: linear-gradient(90deg, var(--hhn-testa) 0, #151b25 100%);
}

/* la striscia gialla del logo, come nelle testate dei pannelli */
.hh-tema-retro .hh-friends-titlebar::before,
.hh-tema-retro .hh-expand-titlebar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hhn-oro) 0, var(--hhn-arancio) 100%);
}

.hh-tema-retro .hh-friends-title,
.hh-tema-retro .hh-expand-title {
    padding-left: 20px;
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    letter-spacing: .3px;
    text-align: left;
    text-transform: uppercase;
    color: #f2f8fb;
}

.hh-tema-retro .hh-friends-close {
    opacity: .85;
}

.hh-tema-retro .hh-friends-close:hover {
    opacity: 1;
}

/* la ricerca: il campo azzurro del 2014 (come il codice dello shop), lente e X chiare */
.hh-tema-retro .hh-friends-search {
    border-bottom: 1px solid rgba(1, 9, 14, .6);
    background: rgba(0, 0, 0, .12);
}

.hh-tema-retro .hh-friends-search-input {
    border: 1px solid #96a2b1;
    background: #ffffff;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .25);
    color: #2c3440;
}

.hh-tema-retro .hh-friends-search-input::placeholder {
    color: #8b96a5;
}

.hh-tema-retro .hh-friends-search-input:focus {
    border-color: #96a2b1;
    background: #ffffff;
    outline: none;
}

.hh-tema-retro .hh-friends-search::before,
.hh-tema-retro .hh-friends-search-clear {
    filter: brightness(0) invert(1);
    opacity: .85;
}

/* le righe */
.hh-tema-retro .hh-friend-row,
.hh-tema-retro .hh-room-row,
.hh-tema-retro .hh-badge-row {
    border-bottom: 1px solid rgba(1, 9, 14, .55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}

.hh-tema-retro .hh-friend-row:hover,
.hh-tema-retro .hh-room-row:hover,
.hh-tema-retro .hh-badge-row:hover {
    background-color: rgba(65, 141, 176, .08);
}

.hh-tema-retro .hh-badge-icon,
.hh-tema-retro .hh-room-thumb {
    border: 2px solid var(--hhn-bordo);
    background-color: #18202b;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 1px #01090e;
}

.hh-tema-retro .hh-friend-name,
.hh-tema-retro .hh-room-name,
.hh-tema-retro .hh-badge-name {
    color: #2c3440;
}

.hh-tema-retro .hh-friend-motto,
.hh-tema-retro .hh-badge-desc,
.hh-tema-retro .hh-friends-noresults__text {
    color: var(--hhn-tenue);
}

.hh-tema-retro .hh-friends-status {
    color: var(--hhn-tenue);
}

.hh-tema-retro .hh-friends-list {
    scrollbar-width: thin;
    scrollbar-color: #5b6a72 rgba(1, 9, 14, .35);
}

/* ---------------------------------------------------------------- la notizia */
.hhn-articolo-testa {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-bottom: 1px solid #01090e;
    background: #0d1219;
}

/* il titolo sta nella banda: sull'immagine restano etichetta, data e autore, il riassunto */
.hhn-articolo-testa .hhn-notizia-testo {
    justify-content: flex-end;
    gap: 9px;
    padding-bottom: 24px;
}

.hhn-articolo-info {
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

.hhn-articolo-testa .hhn-notizia-sommario {
    font-size: 16px;
    -webkit-line-clamp: 6;
}

.hhn-articolo-corpo {
    padding: 24px 28px 26px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--hhn-testo);
}

.hhn-articolo-corpo > :first-child {
    margin-top: 0;
}

.hhn-articolo-corpo > :last-child {
    margin-bottom: 0;
}

.hhn-articolo-corpo p {
    margin: 0 0 14px;
}

/* la prima lettera d'oro, come nei giornali */
.hhn-articolo-corpo > p:first-of-type::first-letter {
    float: left;
    margin: 5px 9px 0 0;
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 56px;
    line-height: .82;
    color: var(--hhn-oro);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

.hhn-articolo-corpo h1,
.hhn-articolo-corpo h2,
.hhn-articolo-corpo h3,
.hhn-articolo-corpo h4 {
    margin: 22px 0 10px;
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
    color: #2c3440;
}

.hhn-articolo-corpo h1,
.hhn-articolo-corpo h2 {
    font-size: 26px;
}

.hhn-articolo-corpo h3,
.hhn-articolo-corpo h4 {
    font-size: 21px;
}

.hhn-articolo-corpo a {
    font-weight: 700;
    color: var(--hhn-oro);
}

.hhn-articolo-corpo a:hover {
    color: #1e7295;
}

.hhn-articolo-corpo strong,
.hhn-articolo-corpo b {
    color: #2c3440;
}

.hhn-articolo-corpo ul,
.hhn-articolo-corpo ol {
    margin: 0 0 14px 24px;
}

.hhn-articolo-corpo ul {
    list-style: disc;
}

.hhn-articolo-corpo ol {
    list-style: decimal;
}

.hhn-articolo-corpo img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.hhn-articolo-corpo blockquote {
    margin: 0 0 14px;
    padding: 8px 14px;
    border-left: 4px solid var(--hhn-oro);
    background: rgba(0, 0, 0, .16);
}

.hhn-articolo-extra {
    min-width: 0;
}

/* le altre notizie a lato: in colonna, ognuna con la sua miniatura */
.hhn-altre-notizie {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 12px;
    list-style: none;
}

/* l'autore: la scheda dello staff dentro la cornice */
.hhn-staff--in-cornice {
    min-height: 132px;
    border: 0;
    border-radius: 0;
}

.hhn-staff--in-cornice:hover {
    transform: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------- notizia: ritocchi dopo la prima prova */
/* il testo sull'immagine sta in alto: l'immagine di Habbo e' tagliata in diagonale e la parte a tinta unita e'
   larga in alto e stretta in basso */
.hhn-articolo-testa .hhn-notizia-testo {
    justify-content: flex-start;
    width: 42%;
    padding: 24px 22px 20px 24px;
}

/* niente capolettera (col primo paragrafo di una riga sola faceva un rientro strano): il primo paragrafo fa da
   occhiello, piu' grande e bianco, con l'iniziale d'oro */
.hhn-articolo-corpo > p:first-of-type {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: #2c3440;
}

.hhn-articolo-corpo > p:first-of-type::first-letter {
    float: none;
    margin: 0;
    font-size: 1.5em;
    line-height: 1;
}

/* reazioni e commenti: la cornice fatta con gli anelli esce di 6px, qui rientra per allinearsi all'articolo */
.hhn-articolo-extra .hh-aside-box {
    width: auto;
    margin-left: 6px;
    margin-right: 6px;
}

.hh-tema-retro .hh-comment-form textarea {
    border: 1px solid #96a2b1;
    background-color: #ffffff;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
}

.hh-tema-retro .hh-comment-form textarea::placeholder {
    color: #8b96a5;
}

.hh-tema-retro .hh-comment-form textarea:focus {
    border-color: #96a2b1;
}

.hh-tema-retro .hh-comment-submit,
.hh-tema-retro .hh-react-add {
    border: 2px solid var(--hhr-verde-bordo);
    background: linear-gradient(180deg, var(--hhr-verde-alto) 0, var(--hhr-verde-basso) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .4);
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.hh-tema-retro .hh-comment-submit:hover,
.hh-tema-retro .hh-react-add:hover {
    border-color: var(--hhr-verde-bordo);
    background: linear-gradient(180deg, #98e266 0, #58ae2b 100%);
}

.hh-tema-retro .hh-react-btn {
    border: 1px solid #2b6c87;
    background-color: #18202b;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.hh-tema-retro .hh-react-btn:hover {
    background-color: #2a3344;
}

.hh-tema-retro .hh-react-btn--active {
    border-color: var(--hhn-oro);
    background-color: #2b5a73;
}

.hh-tema-retro .hh-react-pop-head {
    background-color: var(--hhn-testa);
}

/* la finestrella "Scegli una reazione" come le finestre del profilo */
.hh-tema-retro .hh-react-modal-backdrop {
    background: rgba(12, 17, 24, .82);
}

.hh-tema-retro .hh-react-modal {
    overflow: hidden;
    padding: 0;
    border: 1px solid #01090e;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 22px 50px rgba(0, 0, 0, .6);
}

.hh-tema-retro .hh-react-modal-head {
    position: relative;
    margin: 0 0 16px;
    padding: 10px 16px 10px 20px;
    border-bottom: 1px solid #01090e;
    background: linear-gradient(90deg, var(--hhn-testa) 0, #151b25 100%);
}

.hh-tema-retro .hh-react-modal-head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hhn-oro) 0, var(--hhn-arancio) 100%);
}

.hh-tema-retro .hh-react-modal-grid {
    padding: 0 16px 18px;
}

.hh-tema-retro .hh-react-pick {
    border: 1px solid #2b6c87;
    background-color: #18202b;
}

.hh-tema-retro .hh-react-pick:hover {
    background-color: #2a3344;
}

/* ============================================================================
   HADDO (03/10, scatti 409-413) — TESTATA DEL PROFILO, FOTO, FOTO SINGOLA, STANZE E LE PAGINE CHE ERANO ANCORA
   "CLASSIC RICOLORATE" (elenco notizie, ticket, pagine di testo, sessioni). L'utente: "la parte superiore va ancora
   fatta per bene, magari togliendo quell'immagine tagliata. anche altre pagine vanno fatte per bene. Anche pagina
   foto. stile new". Profilo, foto, foto singola e stanze hanno un ramo New nel loro blade; il resto e' solo CSS.
   ============================================================================ */

/* contenitore delle pagine New: stessa larghezza e stessi margini della banda e della Home */
.hhn-pagina,
.hhn-profilo-testa {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 44px;
}

.hhn-profilo-testa {
    padding-bottom: 0;
}

/* via le strisce di pixel art tagliate in cima al profilo e alla foto singola */
.hh-tema-retro #app.hh-profile-page::before,
.hh-tema-retro #app.hh-photo-hero::before {
    display: none;
}

/* ---------------------------------------------------------------- profilo: la testata */
.hhn-profilo-testa .hhn-scena {
    height: 280px;
}

.hhn-scena-dati {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.hhn-scena-online.is-spento {
    color: #b9c7ce;
}

.hhn-scena-online.is-spento i {
    background: #8a9aa3;
    box-shadow: none;
    animation: none;
}

.hhn-scena-dal {
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 #000000;
    color: #dce6ef;
}

.hhn-scena-punti {
    flex: 0 0 auto;
    padding: 4px 12px;
    border: 1px solid #8a6500;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe680 0, #ff9a1f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 0 rgba(0, 0, 0, .4);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: #5a3b00;
}

/* "Registrato su Haddo il ..." sta gia' nella testata */
.hh-tema-retro .hh-profile-joined {
    display: none;
}

.hh-tema-retro .hh-profile-hearts {
    margin-top: 26px;
}

/* ---------------------------------------------------------------- foto: la bacheca di polaroid */
.hhn-bacheca--foto {
    gap: 28px 22px;
    padding: 34px 26px 32px;
}

.hhn-bacheca--foto .columns__column {
    float: none;
    width: auto;
    padding: 0;
}

.hhn-bacheca--foto .card {
    --hhn-giro: -2.5deg;
    position: relative;
    padding: 8px 8px 0;
    border: 0 !important;
    border-radius: 2px;
    background: linear-gradient(180deg, #f3f2ed 0, #e1e0d9 100%) !important;
    box-shadow: 0 7px 14px rgba(0, 0, 0, .42), 0 1px 0 rgba(0, 0, 0, .3);
    transform: rotate(var(--hhn-giro));
    transition: transform .18s ease, box-shadow .18s ease;
}

.hhn-bacheca--foto .columns__column:nth-child(4n + 2) .card {
    --hhn-giro: 2deg;
    margin-top: 8px;
}

.hhn-bacheca--foto .columns__column:nth-child(4n + 3) .card {
    --hhn-giro: -1deg;
    margin-top: 3px;
}

.hhn-bacheca--foto .columns__column:nth-child(4n + 4) .card {
    --hhn-giro: 3deg;
    margin-top: 6px;
}

.hhn-bacheca--foto .card:hover {
    z-index: 2;
    transform: rotate(0deg) translateY(-5px) scale(1.03);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .5), 0 1px 0 rgba(0, 0, 0, .3);
}

.hhn-bacheca--foto .card::before,
.hhn-foto-polaroid::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    z-index: 3;
    width: 56px;
    height: 17px;
    margin-left: -28px;
    background: rgba(255, 238, 178, .62);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    transform: rotate(calc(var(--hhn-giro, -2deg) * -1.4));
}

.hhn-bacheca--foto .card__content {
    height: auto;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(0, 0, 0, .3);
    background: #111111;
}

.hhn-bacheca--foto .card__link,
.hhn-bacheca--foto .card__image__aligner {
    float: none;
    left: auto;
    height: 100%;
}

.hhn-bacheca--foto .card__image {
    float: none;
    right: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: none;
}

/* la data stampata sulla foto, arancione come le vecchie macchinette; il mi piace in una pastiglia scura */
.hhn-bacheca--foto .card__meta {
    padding: 6px 8px;
    background: none;
    text-shadow: none;
}

.hhn-bacheca--foto .card__date {
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffa52e;
    text-shadow: 0 0 3px rgba(255, 120, 0, .75), 0 1px 0 rgba(0, 0, 0, .6);
}

.hhn-bacheca--foto .card__like {
    right: 6px;
    bottom: 6px;
    padding: 0 4px 0 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .58);
}

/* il nome scritto a mano sul bordo bianco, con la testina */
.hhn-bacheca--foto .card__creator {
    min-height: 40px;
    padding: 5px 6px 7px 36px;
    border: 0;
    background: none;
}

.hhn-bacheca--foto .card__creator::before {
    display: none;
}

.hhn-bacheca--foto .card__creator .avatar__image {
    top: 6px;
    left: 3px;
    width: 27px;
    height: 31px;
    image-rendering: auto;
}

.hhn-bacheca--foto .card__creator .avatar__name {
    font-family: "Patrick Hand", "Comic Sans MS", cursive;
    font-size: 20px;
    line-height: 1.2;
    text-shadow: none;
    color: #2f3640;
}

/* ---------------------------------------------------------------- foto singola */
.hhn-foto-pagina {
    max-width: 780px;
}

.hhn-pannello-titolo a {
    color: inherit;
    text-decoration: none;
}

.hhn-pannello-titolo a:hover {
    text-decoration: underline;
}

.hhn-foto-scena {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 38px 20px 34px;
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1.6px) 0 0 / 7px 7px,
        linear-gradient(180deg, #141a23 0, #10161e 100%);
}

.hhn-foto-polaroid {
    --hhn-giro: -1.5deg;
    position: relative;
    margin: 0;
    padding: 12px 12px 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #f3f2ed 0, #e1e0d9 100%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .5), 0 1px 0 rgba(0, 0, 0, .3);
    transform: rotate(var(--hhn-giro));
}

.hhn-foto-polaroid img {
    display: block;
    width: 320px;
    height: 320px;
    max-width: 100%;
    border: 1px solid rgba(0, 0, 0, .3);
    background: #111111;
}

.hhn-foto-polaroid figcaption {
    padding: 8px 4px 12px;
    font-family: "Patrick Hand", "Comic Sans MS", cursive;
    font-size: 26px;
    line-height: 1.1;
    text-align: center;
    color: #2f3640;
}

.hhn-foto-freccia {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid #01090e;
    border-radius: 50%;
    background: linear-gradient(180deg, #5b6a72 0, #2f3b42 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 6px rgba(0, 0, 0, .45);
    transition: transform .15s ease;
}

.hhn-foto-freccia:hover {
    transform: scale(1.08);
}

.hhn-foto-freccia.is-spenta {
    opacity: .28;
    pointer-events: none;
}

.hhn-foto-azioni {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    border-top: 1px solid #01090e;
    background: rgba(0, 0, 0, .14);
}

.hhn-foto-segnala {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    font-size: 13px;
    text-decoration: none;
    color: var(--hhn-tenue) !important;
}

.hhn-foto-segnala:hover {
    color: #1e7295 !important;
}

.hh-tema-retro .hhn-foto-like {
    position: static;
    padding: 2px 6px 2px 12px;
    border: 1px solid #2b6c87;
    border-radius: 999px;
    background: #18202b;
}

.hhn-foto-cancella {
    margin: 0;
}

.hhn-bottone--rosso {
    border-color: #7a1022;
    background: linear-gradient(180deg, #ff6b7f 0, #c8324f 100%);
}

/* ---------------------------------------------------------------- stanze */
.hhn-stanze {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.hhn-stanza {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #01090e;
    border-radius: 6px;
    background: #212836;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition: background .15s ease;
}

.hhn-stanza:hover {
    background: #2a3344;
}

/* la miniatura nella sua cornicetta grigia, col numero di chi c'e' dentro */
.hhn-stanza-foto {
    position: relative;
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    margin: 4px;
    overflow: hidden;
    border: 1px solid #01090e;
    border-radius: 3px;
    background: #18202b url("/assets/images/profile/room_placeholder.png") center / cover no-repeat;
    box-shadow: 0 0 0 1px #4ea6cf, 0 0 0 3px #232a37, 0 0 0 4px #01090e;
}

.hhn-stanza-foto img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    image-rendering: pixelated;
}

.hhn-stanza-utenti {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .72);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

.hhn-stanza-utenti i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5ee05e;
    box-shadow: 0 0 5px #5ee05e;
}

.hhn-stanza-dati {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding-top: 4px;
}

.hhn-stanza-nome {
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 23px;
    line-height: 1.1;
    overflow-wrap: anywhere;
    text-decoration: none;
    color: #2c3440 !important;
}

.hhn-stanza-nome:hover {
    text-decoration: underline;
}

.hhn-stanza-descrizione {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    color: var(--hhn-tenue);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hhn-stanza-ufficiale {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 3px;
    background: var(--hhn-oro);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #4a3300;
}

.hhn-stanza-proprietario {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: #6a7688 !important;
}

.hhn-stanza-testina {
    position: relative;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 50%;
    background: #18202b;
    box-shadow: inset 0 0 0 1px var(--hhn-bordo);
}

.hhn-stanza-testina img {
    position: absolute;
    left: -1px;
    top: -5px;
    width: 27px;
    height: 31px;
    max-width: none;
    image-rendering: pixelated;
}

/* ---------------------------------------------------------------- pagine di testo (sicurezza, termini, privacy,
   cookie, regole di Minecraft): il testo in un pannello con la cornice; il primo titolo e' lo stesso della banda */
.hh-tema-retro .hh-static-main {
    width: calc(100% - 340px);
    margin-top: 6px;
    padding: 22px 26px 24px;
    border: 1px solid #01090e;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 14px 26px rgba(0, 0, 0, .4);
    color: var(--hhn-testo);
}

.hh-tema-retro .hh-static-main > h1:first-child {
    display: none;
}

.hh-tema-retro .hh-static-main > h1:first-child + * {
    margin-top: 0;
}

.hh-tema-retro .hh-static-main h3 {
    position: relative;
    padding-left: 14px;
}

.hh-tema-retro .hh-static-main h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    bottom: .15em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--hhn-oro) 0, var(--hhn-arancio) 100%);
}

.hh-tema-retro .hh-static-main a {
    font-weight: 700;
    color: var(--hhn-oro);
}

.hh-tema-retro .hh-static-main a:hover {
    color: #1e7295;
}

/* ---------------------------------------------------------------- campi dei moduli (ticket, minecraft, ...) */
.hh-tema-retro .hh-input {
    border: 1px solid #96a2b1;
    background-color: #ffffff;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
    color: #2c3440;
}

.hh-tema-retro .hh-input::placeholder {
    color: #8b96a5;
}

.hh-tema-retro .hh-input:focus {
    border-color: #96a2b1;
    background-color: #ffffff;
}

.hh-tema-retro .hh-input option {
    background: #18202b;
    color: #2c3440;
}

/* le tabelle di Tailwind dentro i pannelli (i miei ticket): niente intestazioni bianche */
.hh-tema-retro .hhn-pannello-corpo table {
    background: rgba(0, 0, 0, .12);
}

.hh-tema-retro .hhn-pannello-corpo .bg-gray-100 {
    background-color: var(--hhn-testa) !important;
}

.hh-tema-retro .hhn-pannello-corpo th {
    color: #f2f8fb !important;
}

.hh-tema-retro .hhn-pannello-corpo .border-gray-200,
.hh-tema-retro .hhn-pannello-corpo .divide-gray-200 > * {
    border-color: rgba(1, 9, 14, .6) !important;
}

/* ---------------------------------------------------------------- sessioni */
.hh-tema-retro .hh-settings-session {
    margin-bottom: 18px;
    border: 1px solid #01090e;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow: 0 0 0 1px #4ea6cf, 0 0 0 5px #232a37, 0 0 0 6px #01090e, 0 10px 20px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------- elenco notizie */
.hh-tema-retro .hh-newscat-main {
    width: calc(100% - 340px);
    margin-top: 6px;
    padding: 18px 24px 20px;
    border: 1px solid #01090e;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 14px 26px rgba(0, 0, 0, .4);
}

.hh-tema-retro .hh-newscat-filter {
    color: var(--hhn-tenue);
}

.hh-tema-retro .hh-newscat-pill {
    padding: 2px 12px;
    border: 1px solid #2b6c87;
    border-radius: 999px;
    background-color: #18202b;
    font-size: 14px;
}

.hh-tema-retro .hh-newscat-pill:hover {
    background-color: #2a3344;
}

.hh-tema-retro .hh-newscat-pill--active {
    border-color: #8a6500;
    background-color: var(--hhn-oro);
    color: #4a3300;
}

.hh-tema-retro .hh-newscat-item + .hh-newscat-item {
    padding-top: 24px;
    border-top: 1px solid rgba(1, 9, 14, .5);
}

.hh-tema-retro .hh-newscat-item + .hh-newscat-item .hh-newscat-viewport {
    top: 24px;
}

.hh-tema-retro .hh-newscat-viewport {
    border: 1px solid #01090e;
    border-radius: 3px;
    box-shadow: 0 0 0 1px #4ea6cf, 0 0 0 3px #232a37, 0 0 0 4px #01090e;
}

.hh-tema-retro .hh-newscat-info {
    color: var(--hhn-tenue);
}

.hh-tema-retro .hh-newscat-summary {
    color: var(--hhn-testo);
}

/* ---------------------------------------------------------------- schermi stretti */
@media (max-width: 860px) {
    .hhn-bacheca--foto {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hhn-stanze {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-tema-retro .hh-static-main,
    .hh-tema-retro .hh-newscat-main {
        float: none;
        width: auto;
    }

    .hhn-foto-scena {
        gap: 10px;
    }

    .hhn-foto-freccia {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }
}

/* ---------------------------------------------------------------- pagina della stanza (room/show): in una cornice, il
   nome sta gia' nella banda; miniatura nella cornicetta grigia, "Entra in stanza" verde come le altre azioni */
.hh-tema-retro .hh-room-shell {
    max-width: 1160px;
    margin: 6px auto 44px;
    padding: 22px 24px 20px;
    border: 1px solid #01090e;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 14px 26px rgba(0, 0, 0, .4);
}

.hh-tema-retro .hh-room-title {
    display: none;
}

.hh-tema-retro .hh-room-pic {
    margin: 4px 22px 16px 4px;
    border: 1px solid #01090e;
    background-color: #18202b;
    box-shadow: 0 0 0 1px #4ea6cf, 0 0 0 3px #232a37, 0 0 0 4px #01090e;
}

.hh-tema-retro .hh-room-owner-av::before {
    border-color: var(--hhn-bordo);
    background-color: #18202b;
}

.hh-tema-retro .hh-room-info-h {
    padding-right: 18px;
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    color: #2c3440;
}

.hh-tema-retro .hh-room-info-v {
    color: var(--hhn-testo);
}

.hh-tema-retro .hh-room-enter {
    border: 2px solid var(--hhr-verde-bordo);
    background: linear-gradient(180deg, var(--hhr-verde-alto) 0, var(--hhr-verde-basso) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .45);
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    color: #ffffff;
}

.hh-tema-retro .hh-room-enter:hover {
    border-color: var(--hhr-verde-bordo);
    background: linear-gradient(180deg, #98e266 0, #58ae2b 100%);
}

/* la freccia dello sprite e' nera: sul verde diventa bianca */
.hh-tema-retro .hh-room-enter-text::after {
    filter: brightness(0) invert(1);
}

.hh-tema-retro .hh-room-details {
    border: 1px solid #01090e;
    border-radius: 5px;
    background: #212836;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.hh-tema-retro .hh-room-details-head {
    position: relative;
    border-bottom: 1px solid #01090e;
    background: linear-gradient(90deg, var(--hhn-testa) 0, #151b25 100%);
}

.hh-tema-retro .hh-room-details-head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hhn-oro) 0, var(--hhn-arancio) 100%);
}

.hh-tema-retro .hh-room-report:hover {
    color: var(--hhn-oro);
}

/* le aree di testo dei moduli (descrizione del ticket, candidature Minecraft) come i campi */
.hh-tema-retro .hh-textarea {
    border: 1px solid #96a2b1;
    background-color: #ffffff;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
    color: #2c3440;
}

.hh-tema-retro .hh-textarea::placeholder {
    color: #8b96a5;
}

.hh-tema-retro .hh-textarea:focus {
    border-color: #96a2b1;
    background-color: #ffffff;
}

/* ============================================================================
   HADDO (03/10, scatto 414) — LE PAGINE DI CHI NON E' ENTRATO, PRIMA DI METTERE IL NEW PER TUTTI: la finestrella di
   login, registrazione, password dimenticata / reimposta / conferma, codice 2FA, verifica email, pagina 404.
   Solo CSS sopra il markup del Classic (la Home da ospite sta in partials/home-new).
   ============================================================================ */

/* ---------------------------------------------------------------- tutti i campi dei moduli scuri come nel resto del New */
.hh-tema-retro .hh-settings-input,
.hh-tema-retro .hh-select,
.hh-tema-retro .form__input {
    border: 1px solid #96a2b1;
    background-color: #ffffff;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
    color: #2c3440;
}

.hh-tema-retro .hh-settings-input::placeholder,
.hh-tema-retro .form__input::placeholder {
    color: #8b96a5;
}

.hh-tema-retro .hh-settings-input:focus,
.hh-tema-retro .hh-select:focus,
.hh-tema-retro .form__input:focus {
    border-color: #96a2b1;
    background-color: #ffffff;
    outline: none;
}

.hh-tema-retro .hh-select option {
    background: #18202b;
    color: #2c3440;
}

.hh-tema-retro .hh-settings-input--error,
.hh-tema-retro .hh-input--invalid {
    border-color: #96a2b1 !important;
}

/* ---------------------------------------------------------------- la finestrella di login */
.hh-tema-retro .modal-backdrop {
    opacity: 1;
    background-color: rgba(12, 17, 24, .84);
}

.hh-tema-retro .modal-content {
    overflow: hidden;
    border: 1px solid #01090e;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 22px 50px rgba(0, 0, 0, .6);
}

.hh-tema-retro .modal__title {
    position: relative;
    padding-left: 20px;
    border-bottom: 1px solid #01090e;
    border-radius: 0;
    background: linear-gradient(90deg, var(--hhn-testa) 0, #151b25 100%);
    font-family: "Ubuntu Condensed", Ubuntu, sans-serif;
    letter-spacing: .3px;
    text-align: left;
    text-transform: uppercase;
}

.hh-tema-retro .modal__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hhn-oro) 0, var(--hhn-arancio) 100%);
}

.hh-tema-retro .login-form__login-text {
    color: var(--hhn-testo);
}

.hh-tema-retro .login-form__button,
.hh-tema-retro .hh-auth-card-submit,
.hh-tema-retro .hh-2fa-challenge-submit,
.hh-tema-retro .hh-reg-submit {
    border: 2px solid var(--hhr-verde-bordo);
    background: linear-gradient(180deg, var(--hhr-verde-alto) 0, var(--hhr-verde-basso) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .45);
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    color: #ffffff;
}

.hh-tema-retro .login-form__button:hover,
.hh-tema-retro .hh-auth-card-submit:hover,
.hh-tema-retro .hh-2fa-challenge-submit:hover,
.hh-tema-retro .hh-reg-submit:hover {
    border-color: var(--hhr-verde-bordo);
    background: linear-gradient(180deg, #98e266 0, #58ae2b 100%);
}

.hh-tema-retro .login-form__register a,
.hh-tema-retro .login-form__rpx {
    font-weight: 700;
    color: var(--hhn-oro);
}

/* ---------------------------------------------------------------- password dimenticata / reimposta / conferma, codice 2FA,
   verifica email: la scheda con la cornice e la testata come le finestre */
.hh-tema-retro .hh-auth-card-box,
.hh-tema-retro .hh-2fa-challenge-box {
    border: 1px solid #01090e;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 14px 26px rgba(0, 0, 0, .4);
}

.hh-tema-retro .hh-auth-card-title,
.hh-tema-retro .hh-2fa-challenge-title {
    position: relative;
    padding-left: 22px;
    border-bottom: 1px solid #01090e;
    background: linear-gradient(90deg, var(--hhn-testa) 0, #151b25 100%);
    letter-spacing: .3px;
}

.hh-tema-retro .hh-auth-card-title::before,
.hh-tema-retro .hh-2fa-challenge-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hhn-oro) 0, var(--hhn-arancio) 100%);
}

.hh-tema-retro .hh-auth-card-sub,
.hh-tema-retro .hh-2fa-challenge-sub {
    color: var(--hhn-testo);
}

.hh-tema-retro .hh-auth-card,
.hh-tema-retro .hh-2fa-challenge {
    padding-top: 34px;
}

/* ---------------------------------------------------------------- registrazione: il modulo in cornice, il titolo
   sta nella banda, avatar di partenza nelle loro caselle, il bottone verde */
.hh-tema-retro .hh-reg > .hh-section-title {
    display: none;
}

.hh-tema-retro .hh-reg {
    padding-top: 30px;
}

.hh-tema-retro .hh-reg-form {
    padding: 18px 16px 20px;
    border: 1px solid #01090e;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 14px 26px rgba(0, 0, 0, .4);
}

.hh-tema-retro .hh-form-box {
    border: 1px solid rgba(1, 9, 14, .6);
    border-radius: 4px;
    background-color: #212836;
}

.hh-tema-retro .hh-form-helper,
.hh-tema-retro .hh-form-check,
.hh-tema-retro .hh-reg-safety {
    color: var(--hhn-tenue);
}

.hh-tema-retro .hh-form-check a,
.hh-tema-retro .hh-reg-safety a {
    color: var(--hhn-oro);
}

.hh-tema-retro .hh-reg-eye {
    color: #6a7688;
}

.hh-tema-retro .hh-reg-look {
    border: 1px solid #01090e;
    background-color: #18202b;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35);
}

.hh-tema-retro .hh-reg-look:hover {
    border-color: #4ea6cf;
}

.hh-tema-retro .hh-reg-look:has(input:checked) {
    border-color: var(--hhn-oro);
    background-color: #2b5a73;
    box-shadow: 0 0 0 2px var(--hhn-oro), inset 0 0 16px rgba(255, 210, 60, .25);
}

.hh-tema-retro .hh-reg-social {
    border: 1px solid #01090e;
    border-radius: 6px;
    background: rgba(16, 22, 30, .9);
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 14px 26px rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------------- pagina 404: Frank in cornice */
.hh-tema-retro .hh-404 {
    max-width: 640px;
    margin: 34px auto 44px;
    padding: 26px 24px 28px;
    border: 1px solid #01090e;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--hhn-alto) 0, var(--hhn-basso) 100%);
    box-shadow:
        0 0 0 1px #4ea6cf,
        0 0 0 5px #232a37,
        0 0 0 6px #01090e,
        0 14px 26px rgba(0, 0, 0, .4);
}

.hh-tema-retro .hh-404-text {
    color: var(--hhn-testo);
}

.hh-tema-retro .hh-404-text a {
    font-weight: 700;
    color: var(--hhn-oro);
}

/* ---------------------------------------------------------------- Home da ospite: gli avatar di partenza nella scena,
   e nella barra "Accedi" e "Iscriviti gratis" */
.hhn-scena-gruppo {
    position: absolute;
    left: 150px;
    bottom: 50px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
}

.hhn-scena-gruppo .hhn-scena-avatar + .hhn-scena-avatar {
    margin-left: -18px;
}

.hhn-scena-gruppo .hhn-scena-avatar--2 {
    margin-bottom: -10px;
}

.hhn-fumetto--gruppo {
    left: 40px;
    padding-left: 9px;
}

.hhn-scena-azioni {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hhn-scena-accedi {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: var(--hhn-oro);
    text-shadow: 0 1px 0 #000000;
}

.hhn-scena-accedi:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* HADDO (03/10/2026): nel riquadro Amici del profilo le figure stanno in piedi senza il fondo scuro delle caselle
   (lo chiede l'utente); distintivi, stanze e gruppi lo tengono */
.hh-tema-retro .hh-profile-panel--friends .hh-profile-item-frame {
    background-color: transparent;
}

/* ============================================================================
   HADDO (03/10, chiesto dall'utente) — TESTATA DEL NEW SUI TELEFONI. Sotto gli 860 px gli attrezzi (lingua 50 px,
   Gioca 88, menu utente 240 fisso) restavano una riga sola larga 406 px: fino a ~445 px di schermo la pagina
   diventava larga 426 e scorreva di lato. Sotto i 480 px: logo e Gioca sopra, lingua e menu utente sotto (gli
   attrezzi con display: contents diventano pezzi della riga della testata, a capo forzato col pseudo-elemento della
   tacca, spento sotto gli 860); il menu perde i margini vuoti del classic (240 -> 198, pastiglia e testa identiche);
   la testata rientra 12 px invece di 20, cosi' le quattro schede (295 px) stanno anche in 320.
   ============================================================================ */
@media (max-width: 480px) {
    .hhr-alto .hhr-giro {
        align-items: center;
        column-gap: 10px;
        padding: 12px 12px 0;
    }

    .hhr-attrezzi {
        display: contents;
    }

    .hhr-logo { order: 1; }

    .hhr-gioca {
        order: 2;
        margin-left: auto;
    }

    .hhr-alto .hhr-giro::after {
        display: block;
        order: 3;
        position: static;
        flex-basis: 100%;
        height: 0;
        border: 0;
    }

    .hhr .hh-lang {
        order: 4;
        margin-top: 12px;
    }

    .hhr .hh-header-small {
        order: 5;
        margin-top: 12px;
        margin-left: auto;
    }

    .hhr-schede {
        order: 6;
        margin-top: 14px;
    }

    .hhr .hh-user-menu {
        width: 198px;
    }

    .hhr .hh-user-menu-header {
        padding: 0 6px 0 0;
    }

    /* la lingua qui sta a sinistra: la tendina si apre verso destra (con right: 0 usciva dallo schermo) */
    .hhr .hh-lang-menu {
        right: auto;
        left: 0;
    }

    .hhr-banda .hhr-giro {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ============================================================================
   HADDO (04/10/2026) — COLORI NEON. L'utente: "cambia i colori del CMS per dare piu' nell'occhio, cosi' e' troppo
   spento e sembra un basic habbo style"; scelta "scuro con accenti al neon", variante R2 (dopo indaco, blu elettrico,
   tramonto, sei neon e tre sfumati). I colori sopra sono gia' mappati sulla tavolozza (edits/colori-neon-20261004/
   costruisci-neon.py: fondi quasi neri, viola #b26bff per fili e link, la sfumatura fucsia #ff3dcf -> viola #b26bff -> ciano #22e6ff
   al posto dell'oro, bottoni fucsia -> viola). Qui gli aloni e le sfumature.
   ============================================================================ */
.hhr .hh-user-menu-name { background: #18202b; border-color: #4ea6cf; box-shadow: 0 0 10px rgba(65, 141, 176, .45); }
.hhr .hh-user-menu-avatar::before { background-color: #18202b; border-color: #4ea6cf; box-shadow: 0 0 10px rgba(65, 141, 176, .45); }
.hhr-scheda.is-attiva { box-shadow: 0 -3px 14px rgba(65, 141, 176, .45); color: #ffffff; text-shadow: 0 0 8px rgba(65, 141, 176, .9); }
.hhr-sotto-voce.is-attiva { color: #ffffff; text-shadow: 0 0 8px rgba(65, 141, 176, .9); }
.hh-tema-retro .hhn-pannello-titolo { text-shadow: 0 0 10px rgba(65, 141, 176, .6); }
.hh-tema-retro a:hover { text-shadow: 0 0 8px rgba(65, 141, 176, .7); }
.hhr-gioca { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .35), 0 0 12px rgba(255, 210, 60, .35); }

/* il titolo della pagina sfumato, con l'alone */
.hhr-titolo {
    background: linear-gradient(90deg, #ffffff 0, #bfe3f3 60%, #ffe680 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 10px rgba(65, 141, 176, .45));
}

/* la riga sfumata sotto la barra in alto (al posto del filo) */
.hhr-alto {
    border-bottom: 0;
    background: linear-gradient(90deg, #ffd23c 0, #4ea6cf 50%, #ff9a1f 100%) left bottom / 100% 2px no-repeat, #0f151d;
    box-shadow: 0 8px 26px rgba(65, 141, 176, .20);
}

/* ...e GIRA INTORNO al triangolino come il filo di prima: il triangolo parte 2px piu' su, il suo scuro copre la riga
   sotto la base e il contorno e' la stessa sfumatura, allineata alla sua posizione sullo schermo. Solo dove il
   triangolino c'e': sotto gli 860 i pseudo-elementi spariscono, e sotto i 480 ::after fa da a capo della testata */
@media (min-width: 861px) {
    .hhr-alto .hhr-giro::before,
    .hhr-alto .hhr-giro::after {
        border: 0;
        top: calc(100% - 2px);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .hhr-alto .hhr-giro::before {
        left: 147px;
        width: 60px;
        height: 32px;
        background: linear-gradient(90deg, #ffd23c 0, #4ea6cf 50%, #ff9a1f 100%);
        background-size: 100vw 100%;
        background-position: calc(-1 * (max(0px, (100vw - 1200px) / 2) + 147px)) 0;
    }

    .hhr-alto .hhr-giro::after {
        left: 149px;
        width: 56px;
        height: 30px;
        background: #0f151d;
    }
}

/* il fondo blu notte, come la pagina in arrivo. HADDO (27/10/2026): tolti i tre bagliori del periodo neon (blu in alto
   a sinistra, arancione in alto a destra, giallo in basso), scelta dell'utente */
.hh-tema-retro #app:not(.hh-profile-page),
.hh-tema-retro #app.hh-profile-page {
    background: linear-gradient(180deg, #18202b 0, #10161e 360px, #0b1017 100%) !important;
}

.hhr-banda {
    background: transparent;
}

/* le cornici: scure, col filo sottile sfumato e un alone leggero, senza viti */
.hhn-cornice {
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, #252c3a 0, #1e2430 100%) padding-box,
        linear-gradient(135deg, #ffd23c 0, #4ea6cf 50%, #ff9a1f 100%) border-box;
    box-shadow: 0 0 16px rgba(65, 141, 176, .22), 0 14px 30px rgba(0, 0, 0, .5);
}

/* ---- i pezzi rimasti coi colori di Habbo (04/10, l'utente: "Hai dimenticato le altre pagine?"): stanno nel CSS
   compilato del tema o nelle pagine, che il New non ricopriva ---- */

/* il bottone LOGIN degli ospiti, come la pastiglia del nome */
.hh-tema-retro .hh-login-btn {
    border-color: #4ea6cf;
    background: #18202b;
    box-shadow: 0 1px 0 2px rgba(0, 0, 0, .3), 0 0 10px rgba(65, 141, 176, .45);
}

.hh-tema-retro .hh-login-btn:hover {
    border-color: #8fcbe4;
}

/* i bottoni verdi delle pagine (Centro aiuto, Unisciti allo staff, candidature, VIP, regole di Minecraft): come
   .hhn-bottone */
.hh-tema-retro .hh-aside-button {
    border-color: #2c6e12;
    background: linear-gradient(180deg, #86d653 0, #4c9f22 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 1px rgba(0, 0, 0, .3), 0 0 12px rgba(255, 210, 60, .3);
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.hh-tema-retro .hh-aside-button:hover {
    border-color: #58ae2b;
    background: linear-gradient(180deg, #98e266 0, #58ae2b 100%);
}

.hh-tema-retro .hh-aside-button--disabled,
.hh-tema-retro .hh-aside-button--disabled:hover {
    border-color: #343d4f;
    background: #232a37;
    box-shadow: none;
}

/* "Richiedi l'accesso" del riquadro Minecraft: era verde con la scritta viola */
.hh-tema-retro .hh-mc a.hh-mc-richiedi {
    border: 1px solid #2c6e12;
    background: linear-gradient(180deg, #86d653 0, #4c9f22 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 rgba(0, 0, 0, .35), 0 0 12px rgba(255, 210, 60, .3);
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    color: #ffffff;
}

.hh-tema-retro .hh-mc a.hh-mc-richiedi:hover,
.hh-tema-retro .hh-mc a.hh-mc-richiedi:focus-visible {
    background: linear-gradient(180deg, #98e266 0, #58ae2b 100%);
    color: #ffffff;
}

/* il piede: le scritte azzurre di Habbo nei toni del neon */
.hh-tema-retro .hh-footer-media-label {
    color: #bfe3f3;
}

.hh-tema-retro .hh-footer-nav-item {
    color: #a3b1c0;
}

.hh-tema-retro .hh-footer-copyright {
    color: #5d6b7d;
}

/* il cerchio dietro la testa nelle conversazioni dei Messaggi, come quello dell'avatar in alto */
.hh-tema-retro .msg-disc__imager::before {
    border-color: #4ea6cf;
    background-color: #18202b;
    box-shadow: 0 1px 0 2px rgba(0, 0, 0, .3), 0 0 10px rgba(65, 141, 176, .45);
}

/* la scheda attiva delle Impostazioni era verde chiaro: bianca con l'alone, come le altre schede attive */
.hh-tema-retro .hh-settings-tab[aria-current="page"] {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(65, 141, 176, .9);
}

/* le etichette (es. "Tutte" nelle Notizie): sul fucsia la scritta marrone dell'oro non si leggeva */
.hh-tema-retro .hhn-etichetta {
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    color: #ffffff;
}

/* "punti traguardo" nella scena del profilo: la pastiglia neon al posto di quella d'oro */
.hh-tema-retro .hhn-scena-punti {
    border-color: #2c6e12;
    background: linear-gradient(180deg, #86d653 0, #4c9f22 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .4), 0 0 10px rgba(255, 210, 60, .35);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    color: #ffffff;
}

/* le scritte azzurre di Habbo (#7ecaee) rimaste nel CSS compilato: testi chiari, note tenui, nomi in lilla */
.hh-tema-retro .hh-content-wrapper,
.hh-tema-retro .hh-article-body,
.hh-tema-retro .hh-newscat-safety p,
.hh-tema-retro .rooms__header__content p,
.hh-tema-retro .photos__header__content p,
.hh-tema-retro .room-item__description,
.hh-tema-retro .hh-settings-status-text,
.hh-tema-retro .hh-settings-2fa-intro,
.hh-tema-retro .hh-room-limited-text {
    color: #2c3440;
}

.hh-tema-retro .hh-news-empty,
.hh-tema-retro .hh-newscat-empty,
.hh-tema-retro .hh-react-empty,
.hh-tema-retro .hh-settings-2fa-recovery,
.hh-tema-retro .hh-settings-session-meta,
.hh-tema-retro .hh-settings-session-empty,
.hh-tema-retro .hh-verify-logout,
.hh-tema-retro .hh-verify-toggle {
    color: #6a7688;
}

.hh-tema-retro .hh-profile-panel--badges .hh-profile-item-name {
    color: #2c3440;
}

.hh-tema-retro .hh-expand-close:hover,
.hh-tema-retro .hh-tab-link:hover,
.hh-tema-retro .tab__link:hover {
    color: #4ea6cf;
}

.hh-tema-retro .tab:not(:last-child)::after {
    background-color: #343d4f;
}

.hh-tema-retro .hh-tabs,
.hh-tema-retro .habbo-tabs {
    background-color: var(--hhr-striscia);
}

/* i bottoni blu di Habbo (carica altri, metodi 2FA, invio del login): fucsia -> viola */
.hh-tema-retro .hh-login-button-submit,
.hh-tema-retro .hh-expand-loadmore,
.hh-tema-retro .hh-settings-2fa-method,
.hh-tema-retro .hh-register-button {
    border: 2px solid #2c6e12;
    background: linear-gradient(180deg, #86d653 0, #4c9f22 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .45);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    color: #ffffff;
}

.hh-tema-retro .hh-login-button-submit:hover,
.hh-tema-retro .hh-expand-loadmore:hover,
.hh-tema-retro .hh-settings-2fa-method:hover,
.hh-tema-retro .hh-register-button:hover {
    border-color: #2c6e12;
    background: linear-gradient(180deg, #98e266 0, #58ae2b 100%);
}

.hh-tema-retro .hh-login-button-submit:active,
.hh-tema-retro .hh-settings-2fa-method:active {
    border-color: #2c6e12;
    background: linear-gradient(180deg, #4c9f22 0, #2c6e12 100%);
}

/* i campi chiari rimasti (il link d'invito nella Home, le tendine dei moduli) scuri come gli altri */
.hh-tema-retro .hh-aside-input,
.hh-tema-retro .form__select {
    border: 1px solid #96a2b1;
    background-color: #ffffff;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
    color: #2c3440;
}

.hh-tema-retro .hh-aside-input:focus,
.hh-tema-retro .form__select:focus {
    border-color: #96a2b1;
    background-color: #ffffff;
    outline: none;
}

/* pastiglie, riquadri e fili blu delle pagine di stanze, foto e notizie */
.hh-tema-retro .hh-room-tag {
    border-color: #2b6c87;
    background-color: #232a37;
    color: #1e7295;
}

.hh-tema-retro .hh-comment-avatar {
    border-color: #2b6c87;
    background-color: #18202b;
}

.hh-tema-retro .hh-article-author {
    background-color: #232a37;
}

.hh-tema-retro .hh-article-author-banner,
.hh-tema-retro .hh-news-image--placeholder,
.hh-tema-retro .hh-newscat-image--placeholder,
.hh-tema-retro .hh-article-hero-img--placeholder {
    background-color: #212836;
}

.hh-tema-retro .rooms__header__title,
.hh-tema-retro .photos__header__title,
.hh-tema-retro .creation-content__meta {
    border-bottom-color: #343d4f;
}

.hh-tema-retro .rooms__header__title::after,
.hh-tema-retro .photos__header__title::after,
.hh-tema-retro .creation-content__meta::after {
    background: linear-gradient(90deg, #ffd23c 0, #4ea6cf 50%, #ff9a1f 100%);
}

.hh-tema-retro .hh-settings-eye {
    color: #4ea6cf;
}

.hh-tema-retro .hh-settings-session--current {
    box-shadow: inset 0 0 0 2px #4ea6cf;
}

.hh-tema-retro .hh-verify-divider {
    border-top-color: #343d4f;
}

/* ============================================================================
   HADDO (04/10/2026) — LE SCHEDE AL CENTRO. L'utente: "tutta la parte con le categorie Home Community Safety e Shop
   la sposti al centro": le schede in mezzo alla fascia e il sotto-menu della scheda attiva centrato sotto di loro.
   Nella testata (components/site-header-retro) le Notizie sono passate in Community e nella Home e' rimasto solo
   Messaggi.
   ============================================================================ */
.hhr-schede {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.hhr-sotto {
    justify-content: center;
}

@media (max-width: 860px) {
    .hhr-schede {
        transform: none;
    }

    /* centrate finche' ci stanno: se la riga e' piu' larga dello schermo i margini automatici si azzerano e scorre da
       sinistra (con justify-content: center l'inizio della riga resterebbe fuori, irraggiungibile) */
    .hhr-schede > :first-child {
        margin-left: auto;
    }

    .hhr-schede > :last-child {
        margin-right: auto;
    }
}


/* ============================================================================
   HADDO (10/10/2026) — COLORI DEL GIOCO. Al posto del neon del 04/10 (scelta dell'utente, variante A delle prove
   in edits/colori-gioco-20261010): chrome blu notte come la barra del gioco, blu delle testate delle finestre
   dell'app (#377998 / #418db0), oro del logo, bottoni verdi. Niente aloni ne' sfumature al neon.
   ============================================================================ */
.hh-tema-retro a:hover, .hh-tema-retro .hhn-pannello-titolo, .hhr-scheda.is-attiva, .hhr-sotto-voce.is-attiva { text-shadow: none; }
.hhr-scheda.is-attiva { box-shadow: none; }
.hhr .hh-user-menu-name, .hhr .hh-user-menu-avatar::before { box-shadow: none; }
.hhr-gioca { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .35); }
.hhr-titolo { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffffff; filter: none; }
.hh-tema-retro .hh-mc a.hh-mc-richiedi { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 rgba(0, 0, 0, .35); }

/* la riga sotto la barra in alto e il triangolino: blu delle finestre, a tinta unita */
.hhr-alto { background: linear-gradient(#418db0, #418db0) left bottom / 100% 2px no-repeat, #0f151d; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.hhr-alto .hhr-giro::before { background: #418db0; }

/* RIQUADRI CHIARI COME LE FINESTRE DEL GIOCO. Le variabili dei pannelli le usano tutti i contenitori del tema
   (pannelli, cornici, finestre degli amici, impostazioni, accesso, stanze...): corpo #e9e9e1, testata blu, testi
   scuri del gioco. L'oro come testo su fondo chiaro diventa ambra (le strisce d'oro delle testate non ci sono piu'). */
:root {
    --hhn-alto: #e9e9e1;
    --hhn-basso: #e9e9e1;
    --hhn-bordo: #000000;
    --hhn-testa: #377998;
    --hhn-oro: #ffd23c;
    --hhn-arancio: #ff9a1f;
    --hhn-testo: #2c3440;
    --hhn-tenue: #6a7688;
}
.hh-tema-retro .hhn-pannello, .hhn-classifica, .hh-tema-retro .hh-profile-panel, .hh-tema-retro .hh-aside-box,
.hh-tema-retro .hh-settings-aside-box, .hh-tema-retro .hh-thumb, .hh-tema-retro .hh-friends-window,
.hh-tema-retro .hh-expand-window, .hh-tema-retro .hh-react-modal, .hh-tema-retro .hh-static-main,
.hh-tema-retro .hh-settings-session, .hh-tema-retro .hh-newscat-main, .hh-tema-retro .hh-room-shell,
.hh-tema-retro .modal-content, .hh-tema-retro .hh-auth-card-box, .hh-tema-retro .hh-2fa-challenge-box {
    border-color: #000000 !important;
    box-shadow: inset 0 0 0 2px #ffffff, 3px 3px 4px rgba(0, 0, 0, .35);
}
.hhn-pannello-testa, .hhn-classifica-testa { background: #377998; border-bottom: 1px solid #030f18; box-shadow: inset 0 2px 0 #418db0; }
.hhn-pannello-testa::before, .hhn-classifica-testa::before { display: none; }
.hhn-pannello-titolo, .hhn-classifica-testa { color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.hhn-testa-link { color: #ffe680 !important; }
.hhn-testa-link:hover { color: #ffffff !important; }

/* la cornice della Home: era una cornice di metallo con le viti, ora e' la finestra del gioco */
.hhn-cornice { padding: 0; border: 1px solid #000000; border-radius: 8px; background: #e9e9e1;
    box-shadow: inset 0 0 0 2px #ffffff, 3px 3px 4px rgba(0, 0, 0, .35); }
.hhn-cornice-dentro { margin: 2px; border: 0; border-radius: 6px; background: #e9e9e1; color: #2c3440; }
.hh-tema-retro .hhn-pannello-corpo a { color: #1e7295; }
.hhn-home .hhn-pannello-corpo a:not(.hhn-bottone):not(.hh-mc-mappa) { color: #1e7295; }
.hhn-home .hh-mc .hh-mc-giocatori, .hhn-home .hh-mc .hh-mc-mappa:not(.hh-mc-richiedi) { border: 1px solid #96a2b1; background: #ffffff; color: #2c3440; }
.hhn-bacheca, .hhn-foto-scena { background: #dcdcd2; }

/* testate dei riquadri: blu piatto come le finestre del gioco (prima sfumatura verso il nero con la striscia d'oro) */
.hh-tema-retro .hh-aside-box h3, .hh-tema-retro .hh-settings-aside-box h5, .hh-tema-retro .hh-help-box h3,
.hh-tema-retro .hh-friends-titlebar, .hh-tema-retro .hh-expand-titlebar, .hh-tema-retro .hh-react-modal-head,
.hh-tema-retro .hh-room-details-head, .hh-tema-retro .modal__title, .hh-tema-retro .hh-auth-card-title,
.hh-tema-retro .hh-2fa-challenge-title {
    background: #377998; border-bottom: 1px solid #030f18; box-shadow: inset 0 2px 0 #418db0; color: #ffffff;
}
.hh-tema-retro .hh-aside-box h3::before, .hh-tema-retro .hh-settings-aside-box h5::before, .hh-tema-retro .hh-help-box h3::before,
.hh-tema-retro .hh-friends-titlebar::before, .hh-tema-retro .hh-expand-titlebar::before, .hh-tema-retro .hh-react-modal-head::before,
.hh-tema-retro .hh-room-details-head::before, .hh-tema-retro .modal__title::before, .hh-tema-retro .hh-auth-card-title::before,
.hh-tema-retro .hh-2fa-challenge-title::before { display: none; }

/* riquadri dentro i riquadri: chiari (prima blu notte) */
.hh-tema-retro .hh-help-box, .hh-tema-retro .hh-aside-box, .hh-tema-retro .card, .hh-tema-retro .hh-thumb,
.hh-tema-retro .hh-settings-aside-box { background-color: #e9e9e1; background-image: none; }
.hh-tema-retro .hh-settings-fieldset--box, .hh-tema-retro .hh-settings-status, .hh-tema-retro .hh-form-box,
.hh-tema-retro .hh-room-details, .hhn-stanza, .hhn-notizia-piccola, .hh-tema-retro .hh-article-author,
.hh-tema-retro .card__creator, .hh-tema-retro .photos__header, .hh-tema-retro .rooms__header {
    background: #ffffff; border-color: #96a2b1;
}
.hhn-stanza:hover, .hhn-notizia-piccola:hover { background: #f3f6f8; }
/* HADDO (29/10): il titolo delle altre notizie era rimasto #f2f8fb (quasi bianco) sul riquadro ora bianco */
.hhn-notizia-piccola-titolo { color: #2c3440; }
.hh-tema-retro .hh-article-author-banner, .hh-tema-retro .hh-news-image--placeholder { background-color: #cdd3d9; }
/* tondi e caselle degli avatar, dei distintivi e delle stanze: il grigio delle caselle del gioco */
.hhn-pannello-icona, .hhn-classifica-testina, .hh-tema-retro .msg-disc__imager::before,
.hh-tema-retro .hh-profile-page .hh-profile-avatar::before, .hh-tema-retro .hh-badge-icon, .hh-tema-retro .hh-room-thumb,
.hh-tema-retro .hh-react-btn, .hh-tema-retro .hh-react-pick, .hhn-stanza-testina, .hhn-stanza-foto, .hh-tema-retro .hh-room-pic,
.hh-tema-retro .hh-room-owner-av::before, .hh-tema-retro .hh-reg-look, .hh-tema-retro .hh-comment-avatar, .hh-tema-retro .hhn-foto-like {
    background-color: #cdd3d9;
}
.hh-tema-retro .hh-react-btn:hover, .hh-tema-retro .hh-react-pick:hover { background-color: #bcc4cc; }
.hhn-pannello-testa .hhn-pannello-icona { background-color: #2b6c87; }
.hh-tema-retro .hh-newscat-pill { background-color: #d5d5cc; color: #2c3440; }
.hh-tema-retro .hh-newscat-pill:hover { background-color: #c8c8be; }
.hh-tema-retro .hh-newscat-pill--active { color: #4a3300; }
.hh-tema-retro .hh-room-tag { background-color: #d5ecf6; }
.hh-tema-retro .hh-shop-item__buy:disabled { background: #b9b9b0; }
.hh-tema-retro .hh-aside-button--disabled, .hh-tema-retro .hh-aside-button--disabled:hover { background: #c8c8be; }
.hh-tema-retro .hh-input option, .hh-tema-retro .hh-select option { background: #ffffff; color: #2c3440; }
.hh-tema-retro .hhn-pannello-corpo thead th { color: #ffffff !important; }

/* testi scuri dove il colore arriva dal CSS compilato del tema o dai fogli delle pagine (candidature, VIP,
   Minecraft): erano bianchi perche' i riquadri erano blu (Classic) o scuri (neon) */
.hh-tema-retro .hh-settings-label, .hh-tema-retro .hh-settings-fieldset > h5, .hh-tema-retro .hh-static-main h2,
.hh-tema-retro .hh-static-main h3, .hh-tema-retro .hh-static-main h4, .hh-tema-retro .hh-profile-panel-title,
.hh-tema-retro .hh-profile-count, .hh-tema-retro .hh-profile-item-name, .hh-tema-retro .hh-ticket-label,
.hh-tema-retro .hh-newscat-title, .hh-tema-retro .hh-purse__item, .hh-tema-retro .hh-room-owner span,
.hh-tema-retro .hh-room-report-text, .hh-tema-retro .hh-form-label, .hh-tema-retro .hh-404-title,
.hh-tema-retro .hh-settings-session-device, .hh-tema-retro .hh-cand-spunta span, .hh-tema-retro .hh-cand-membro figcaption strong,
.hh-tema-retro .hh-mca-spunta span, .hh-tema-retro .hh-mca-server dd, .hh-tema-retro .hh-vip-vantaggi strong,
.hh-tema-retro .hh-mc-stato, .hh-tema-retro .hh-info p, .hhn-podio-nome, .hh-tema-retro .hh-comment-form textarea {
    color: #2c3440;
}
.hh-tema-retro .hh-cand-aiuto, .hh-tema-retro .hh-cand-scadenza, .hh-tema-retro .hh-mca-nota, .hh-tema-retro .hh-mca-aiuto,
.hh-tema-retro .hh-mca-server dt, .hh-tema-retro .hh-comment-meta span, .hh-tema-retro .hh-settings-session-label,
.hh-tema-retro .hh-cand-membro figcaption span {
    color: #6a7688;
}
/* link: blu come nel gioco (prima oro o bianchi) */
.hh-tema-retro .hh-settings-aside-box p a, .hh-tema-retro .hh-aside-box p a, .hh-tema-retro .hh-newscat-author,
.hh-tema-retro .hh-purse__hc, .hh-tema-retro .hh-info p a, .hh-tema-retro .hh-mca-spunta a, .hh-tema-retro .hh-mca-nota a,
.hh-tema-retro .hh-mca-server dd a, .hhn-articolo-corpo a, .hh-tema-retro .hh-static-main a,
.hh-tema-retro .login-form__register a, .hh-tema-retro .login-form__rpx, .hh-tema-retro .hh-form-check a,
.hh-tema-retro .hh-reg-safety a, .hh-tema-retro .hh-404-text a {
    color: #1e7295;
}
.hh-tema-retro .hh-room-report:hover, .hh-tema-retro .hh-profile-more:hover { color: #1e7295; }
/* oro come testo su fondo chiaro: ambra */
.hh-tema-retro .hhn-pannello-corpo ul > li > strong:first-child, .hhn-podio-valore, .hhn-classifica-valore,
.hhn-articolo-corpo > p:first-of-type::first-letter { color: #b86e00; }
/* comandi e indirizzi nei riquadri: campi bianchi */
.hh-tema-retro .hh-mca-server code, .hh-tema-retro .hh-vip-comandi code { background: #ffffff; border: 1px solid #96a2b1; color: #2c3440; }
.hh-tema-retro .hh-vip-icona { background-color: #377998; }
/* ritocchi dopo il controllo del contrasto (10/10) */
.hh-tema-retro .hhn-pannello-corpo.hh-mc .hh-mc-stato, .hh-tema-retro .hh-settings-status-title { color: #2c3440; }
.hh-tema-retro .hh-purse__footer .hh-purse__hc { color: #1e7295; }
.hh-tema-retro .hh-purse__badge { color: #ffffff; }
.hh-tema-retro .hh-shop-item__buy:disabled { color: #f5f5f0; background: #9a9a92; }
.hhn-articolo-testa .hhn-notizia-testo { color: #ffffff; }
.hh-tema-retro .hh-room-details-body dt { color: #6a7688; }
.hh-tema-retro .hh-room-details-body dd { color: #2c3440; }
.hh-tema-retro .hhn-pannello-corpo thead th[class] { color: #ffffff !important; }
.hh-tema-retro .hhn-pannello-corpo table { background: #ffffff; }
.hh-tema-retro .hh-cand-squadra, .hhn-foto-azioni { background: #dcdcd2; }
.hh-tema-retro .hhn-foto-like { background-color: #377998; }
/* le cornici "di metallo" (anelli di box-shadow attorno ai riquadri) diventano la cornice delle finestre del gioco */
.hh-tema-retro .hh-aside-box, .hh-tema-retro .hh-settings-aside-box, .hh-tema-retro .hh-help-box,
.hh-tema-retro .hh-settings-form, .hh-tema-retro .msg-empty, .hh-tema-retro .msg-disc__item, .hh-tema-retro .hh-order,
.hh-tema-retro .hh-thumb, .hh-tema-retro .hh-profile-panel, .hh-tema-retro .hh-friends-window, .hh-tema-retro .hh-expand-window,
.hh-tema-retro .hh-react-modal, .hh-tema-retro .hh-static-main, .hh-tema-retro .hh-settings-session,
.hh-tema-retro .hh-newscat-main, .hh-tema-retro .hh-room-shell, .hh-tema-retro .modal-content,
.hh-tema-retro .hh-auth-card-box, .hh-tema-retro .hh-2fa-challenge-box, .hh-tema-retro .hh-reg-form,
.hh-tema-retro .hh-reg-social, .hh-tema-retro .hh-404 {
    border: 1px solid #000000 !important;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px #ffffff, 3px 3px 4px rgba(0, 0, 0, .35) !important;
}
.hh-tema-retro .hh-reg-social { background: #e9e9e1; }
.hh-tema-retro .hh-reg-social-title { color: #2c3440; }
.hh-tema-retro .hh-settings-sessions-intro { color: #a3b1c0; }
/* scheda Tema (stili nella vista user/settings/tema): caselle chiare, scelta in blu */
.hh-tema-retro .hh-temi-form .hh-tema-scelta { border: 1px solid #96a2b1; background: #ffffff; box-shadow: none; }
.hh-tema-retro .hh-temi-form .hh-tema-scelta:hover { border-color: #1e7295; }
.hh-tema-retro .hh-temi-form .hh-tema-scelta:has(input:checked) { border-color: #377998; box-shadow: 0 0 0 2px #377998; }
.hh-tema-retro .hh-temi-form .hh-tema-nome { color: #2c3440; }
.hh-tema-retro .hh-temi-form .hh-tema-nome::before { border-color: #1e7295; }
.hh-tema-retro .hh-temi-form .hh-tema-scelta:has(input:checked) .hh-tema-nome::before { border-color: #377998; background: radial-gradient(circle, #377998 0 3px, transparent 3.5px); }
.hh-tema-retro .hh-temi-form .hh-tema-descrizione { color: #6a7688; }
.hh-tema-retro .hh-temi-form .hh-tema-predefinito { background: #ffd23c; color: #4a3300; text-shadow: none; }

/* HADDO (18/10/2026): stile unico delle pagine. Le cornici con testata (Stanze, Foto, una foto, una notizia) avevano
   il riquadro interno staccato di 2px dal bordo: intorno alla testata blu si vedeva il filo bianco, mentre nelle
   schede content-card (hhn-pannello) la testata arriva al bordo. Ora sono uguali. La Home resta com e. */
.hhn-cornice-dentro:has(> .hhn-pannello-testa):not(.hhn-home *) { margin: 0; border-radius: 7px; background: transparent; }
/* HADDO (18/10/2026): la pagina della stanza dentro la scheda (room/show): il vecchio riquadro hh-room-shell perde
   cornice, sfondo e margini, che ora sono quelli della scheda. */
.hh-tema-retro .hhn-pannello .hh-room-shell--scheda { max-width: none; margin: 0; padding: 0; border: 0 !important; border-radius: 0;
    background: none; box-shadow: none !important; }
/* HADDO (18/10/2026): "Entra in stanza" come su Habbo (riferimenti/VENDO - Habbo.html, .room__enter-button): giallo
   col bordo chiaro, testo nero e la torretta dell hotel coi suoi colori. Il New l aveva fatto verde con l icona
   tutta bianca (una macchia) e, dentro la scheda, il testo prendeva il blu dei link. */
.hh-tema-retro a.hh-room-enter { border: 2px solid #ffea00; border-radius: 5px; background: #ffb900; color: #000000 !important;
    box-shadow: 0 3px 0 1px rgba(0, 0, 0, .3); font-weight: 400; text-shadow: none; text-decoration: none; }
.hh-tema-retro a.hh-room-enter:hover { border-color: #fffd70; background: #ffd400; }
.hh-tema-retro a.hh-room-enter:active { border-color: #ffce37; background: #f89400; box-shadow: 0 1px 0 1px rgba(0, 0, 0, .3);
    transform: translateY(2px); }
.hh-tema-retro .hh-room-enter-text::after { filter: none; }
/* la stanza chiusa nella scheda: testo scuro leggibile, bottone sotto */
.hh-room-chiusa p { margin: 0 0 16px; color: #2c3440; font-size: 14px; line-height: 1.5; }
/* HADDO (18/10/2026): il riquadro per entrare nella home (partials/home-new), come quello di Habbo ("O usa la tua
   email & password", campi chiari, ENTRA! blu, Password dimenticata?) nella scheda del 2026 */
.hhn-accedi-testo { margin: 0 0 10px; color: #2c3440; font-size: 14px; font-weight: 700; }
.hhn-accedi-modulo { display: grid; gap: 10px; }
.hhn-accedi-campo { width: 100%; height: 38px; padding: 0 12px; border: 2px solid #1e5f86; border-radius: 4px; background: #e3ebf0;
    color: #2c3440; font: 15px Ubuntu, "Trebuchet MS", Arial, sans-serif; }
.hhn-accedi-campo::placeholder { color: #7a8794; }
.hhn-accedi-campo:focus { border-color: #1478c1; background: #ffffff; outline: none; }
/* come Habbo: il campo lasciato vuoto ha il bordo bordeaux, senza testo */
/* come Habbo il bordo rosso è spesso 3px: i 2px del bordo + 1px di ombra, così il campo non si sposta */
.hhn-accedi-campo.hhn-accedi-campo-errore { border-color: #903352; box-shadow: 0 0 0 1px #903352; }
.hhn-accedi-errore { margin: 0; color: #c0392b; font-size: 13px; font-weight: 700; }
.hhn-accedi-entra { height: 44px; border: 2px solid #4fb6ef; border-radius: 5px; background: linear-gradient(180deg, #2a9ee4 0, #1478c1 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 rgba(0, 0, 0, .3); color: #ffffff; cursor: pointer;
    font: 400 18px/1 Ubuntu, "Trebuchet MS", Arial, sans-serif; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); text-transform: uppercase; }
.hhn-accedi-entra:hover { background: linear-gradient(180deg, #3aaef0 0, #1b86d3 100%); }
.hhn-accedi-entra:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 rgba(0, 0, 0, .3); transform: translateY(2px); }
.hhn-home .hhn-pannello-corpo a.hhn-accedi-link { display: block; margin-top: 12px; color: #1e7295; font-size: 14px; text-align: center; }

/* =====================================================================================================================
   HADDO (18/10/2026): UN SOLO BOTTONE, come su Habbo (riferimenti/VENDO - Habbo_files/app.a8ea7435.css: login-form__button,
   register-banner__button, room__enter-button...). L utente: "tutti questi bottoni dovrebbero essere uguali e cambiare
   solo il colore". Stessa forma per tutti: angoli 5px, bordo 2px piu chiaro, ombra 0 3px 0 1px, testo maiuscolo 16px
   senza grassetto; al passaggio il colore si schiarisce, al clic il bottone scende di 2px. Colori di Habbo:
   verde #00813e/#8eda55, blu #0f7dbc/#2a9cde, giallo #ffb900/#ffea00, rosso #c0174e/#f37387, grigio #efefef/#999.
   Qui si ridisegnano le classi gia usate dalle pagine; larghezze e margini restano quelli di ogni pagina.
   ===================================================================================================================== */
.hh-tema-retro .hhn-bottone, .hh-tema-retro .hhn-entra, .hh-tema-retro .hhn-notizia-leggi, .hh-tema-retro .hhn-accedi-entra,
.hh-tema-retro .hh-mc .hh-mc-mappa, .hh-tema-retro .hh-aside-button, .hh-tema-retro a.hh-room-enter, .hh-tema-retro .hh-rg-bottone,
.hh-tema-retro .hh-rg-fatto {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; height: auto; padding: 8px 20px;
    border: 2px solid; border-radius: 5px;
    box-shadow: 0 3px 0 1px rgba(0, 0, 0, .3) !important; filter: none;
    font: 400 16px/1.2 Ubuntu, "Trebuchet MS", Arial, sans-serif; letter-spacing: 0; text-transform: uppercase; text-shadow: none;
    text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .1s, border-color .1s;
}
.hh-tema-retro .hhn-bottone:active, .hh-tema-retro .hhn-entra:active, .hh-tema-retro .hhn-accedi-entra:active,
.hh-tema-retro .hh-mc .hh-mc-mappa:active, .hh-tema-retro .hh-aside-button:active, .hh-tema-retro a.hh-room-enter:active,
.hh-tema-retro .hh-rg-bottone:active, .hh-tema-retro .hh-rg-fatto:active {
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .3) !important; transform: translateY(2px);
}
.hh-tema-retro .hhn-entra::after { display: none; }
.hh-tema-retro .hh-aside-button, .hh-tema-retro .hh-rg-fatto, .hh-tema-retro .hh-rg-bottone, .hh-tema-retro .hhn-accedi-entra,
.hh-tema-retro .hh-mc .hh-mc-mappa, .hh-tema-retro .hhn-bottone--largo { display: flex; width: 100%; white-space: normal; }

/* verde */
.hh-tema-retro .hhn-bottone, .hh-tema-retro .hhn-entra, .hh-tema-retro .hhn-notizia-leggi, .hh-tema-retro .hh-mc a.hh-mc-richiedi,
.hh-tema-retro .hh-aside-button, .hh-tema-retro .hh-rg-bottone {
    border-color: #8eda55; background: #00813e; color: #ffffff !important;
}
.hh-tema-retro .hhn-bottone:hover, .hh-tema-retro .hhn-entra:hover, .hhn-notizia:hover .hhn-notizia-leggi, .hh-tema-retro .hh-mc a.hh-mc-richiedi:hover,
.hh-tema-retro .hh-aside-button:hover, .hh-tema-retro .hh-rg-bottone:hover { border-color: #b9f373; background: #00ab54; }
/* blu */
.hh-tema-retro .hhn-accedi-entra, .hh-tema-retro .hh-rg-fatto { border-color: #2a9cde; background: #0f7dbc; color: #ffffff !important; }
.hh-tema-retro .hhn-accedi-entra:hover, .hh-tema-retro .hh-rg-fatto:hover { border-color: #53bdf9; background: #2a9cde; }
/* giallo, col testo nero */
.hh-tema-retro a.hh-room-enter { padding: 6px 8px 6px 16px; border-color: #ffea00; background: #ffb900; color: #000000 !important; }
.hh-tema-retro a.hh-room-enter:hover { border-color: #fffd70; background: #ffd400; }
/* rosso */
.hh-tema-retro .hhn-bottone--rosso { border-color: #f37387; background: #c0174e; }
.hh-tema-retro .hhn-bottone--rosso:hover { border-color: #ff9598; background: #f9586d; }
/* grigio chiaro, col testo scuro: la "Mappa del mondo" */
.hh-tema-retro .hh-mc .hh-mc-mappa:not(.hh-mc-richiedi), .hhn-home .hh-mc .hh-mc-mappa:not(.hh-mc-richiedi) {
    border: 2px solid #999999; background: #efefef; color: #2c3440 !important;
}
.hh-tema-retro .hh-mc .hh-mc-mappa:not(.hh-mc-richiedi):hover { border-color: #cccccc; background: #ffffff; }
/* Discord: il suo viola, stessa forma */
.hh-tema-retro .hh-rg-bottone--discord { border-color: #8b93f8; background: #5865f2; }
.hh-tema-retro .hh-rg-bottone--discord:hover { border-color: #b3b9fb; background: #6d78f5; }
/* spento */
.hh-tema-retro .hh-aside-button--disabled, .hh-tema-retro .hh-aside-button--disabled:hover {
    border-color: #b4b4ac; background: #9a9a92; box-shadow: none !important; cursor: default; transform: none;
}
/* HADDO (18/10/2026): il saluto degli avatar della home coi due fotogrammi PNG (frame_num 0 e 1 dell imager) che si
   alternano, invece della GIF a 256 colori che scoloriva i capelli */
.hhn-scena-avatar:hover .hhn-scena-saluta--2 { animation: hhn-saluta .5s steps(1) infinite; }
@keyframes hhn-saluta { 0% { opacity: 0; } 50% { opacity: 1; } }
.hh-tema-retro .hh-mc a.hh-mc-richiedi { font-weight: 400; text-shadow: none; }
.hh-tema-retro .hh-mc a.hh-mc-richiedi { border: 2px solid #8eda55; background: #00813e; }
.hh-tema-retro .hh-mc a.hh-mc-richiedi:hover, .hh-tema-retro .hh-mc a.hh-mc-richiedi:focus-visible { border-color: #b9f373; background: #00ab54; }
/* il GIOCA in alto: stesso bottone verde (piu basso, sta nella barra) */
.hh-tema-retro .hhr-gioca { min-height: 34px; padding: 6px 18px; border: 2px solid #8eda55; border-radius: 5px; background: #00813e;
    box-shadow: 0 3px 0 1px rgba(0, 0, 0, .3); font: 400 16px/1.2 Ubuntu, "Trebuchet MS", Arial, sans-serif; text-transform: uppercase;
    text-shadow: none; color: #ffffff !important; filter: none; }
.hh-tema-retro .hhr-gioca:hover { border-color: #b9f373; background: #00ab54; }
.hh-tema-retro .hhr-gioca:active { box-shadow: 0 1px 0 1px rgba(0, 0, 0, .3); transform: translateY(2px); }
/* HADDO (18/10/2026): i due fotogrammi del saluto si danno il cambio (prima il secondo si accendeva sopra il primo
   rimasto acceso: per un attimo si vedevano due mani). 0,2 secondi per fotogramma. */
.hhn-scena-avatar:hover .hhn-scena-saluta { animation: hhn-saluta-1 .4s steps(1) infinite; }
.hhn-scena-avatar:hover .hhn-scena-saluta--2 { animation: hhn-saluta-2 .4s steps(1) infinite; }
@keyframes hhn-saluta-1 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hhn-saluta-2 { 0% { opacity: 0; } 50% { opacity: 1; } }

/* HADDO (18/10/2026): lo stesso bottone di Habbo esteso a tutte le pagine del CMS (l utente: "vanno estesi per tutte le
   pagine"). Qui solo l aspetto (colore, bordo, angoli, ombra, testo): larghezza, posizione e spazi restano quelli di
   ogni pagina. Verde = azione, blu = entrare/andare avanti, grigio = annulla. */
.hh-tema-retro .hh-auth-card-submit, .hh-tema-retro .hh-settings-save, .hh-tema-retro .hh-shop-item__buy, .hh-tema-retro .hh-code__btn,
.hh-tema-retro .hh-comment-submit, .hh-tema-retro .hh-aiuto-bottone, .hh-tema-retro .hh-verify-cta, .hh-tema-retro .badge-drawer-button,
.hh-tema-retro .login-form__button, .hh-tema-retro .hh-gate-submit, .hh-tema-retro .hh-2fa-challenge-submit, .hh-tema-retro .hh-mca-annulla {
    min-height: 40px; border: 2px solid #8eda55; border-radius: 5px; background: #00813e;
    box-shadow: 0 3px 0 1px rgba(0, 0, 0, .3) !important; filter: none;
    font-family: Ubuntu, "Trebuchet MS", Arial, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.2;
    text-transform: uppercase; text-shadow: none; text-decoration: none; color: #ffffff !important; cursor: pointer;
    transition: background-color .1s, border-color .1s;
}
.hh-tema-retro .hh-auth-card-submit:hover, .hh-tema-retro .hh-settings-save:hover, .hh-tema-retro .hh-shop-item__buy:hover:not(:disabled),
.hh-tema-retro .hh-code__btn:hover, .hh-tema-retro .hh-comment-submit:hover, .hh-tema-retro .hh-aiuto-bottone:hover,
.hh-tema-retro .hh-verify-cta:hover, .hh-tema-retro .badge-drawer-button:hover { border-color: #b9f373; background: #00ab54; }
.hh-tema-retro .login-form__button, .hh-tema-retro .hh-gate-submit, .hh-tema-retro .hh-2fa-challenge-submit { border-color: #2a9cde; background: #0f7dbc; }
.hh-tema-retro .login-form__button:hover, .hh-tema-retro .hh-gate-submit:hover, .hh-tema-retro .hh-2fa-challenge-submit:hover { border-color: #53bdf9; background: #2a9cde; }
.hh-tema-retro .hh-mca-annulla { border-color: #999999; background: #efefef; color: #2c3440 !important; }
.hh-tema-retro .hh-mca-annulla:hover { border-color: #cccccc; background: #ffffff; }
.hh-tema-retro .hh-auth-card-submit:active, .hh-tema-retro .hh-settings-save:active, .hh-tema-retro .hh-shop-item__buy:active,
.hh-tema-retro .hh-code__btn:active, .hh-tema-retro .hh-comment-submit:active, .hh-tema-retro .hh-aiuto-bottone:active,
.hh-tema-retro .hh-verify-cta:active, .hh-tema-retro .badge-drawer-button:active, .hh-tema-retro .login-form__button:active,
.hh-tema-retro .hh-gate-submit:active, .hh-tema-retro .hh-2fa-challenge-submit:active, .hh-tema-retro .hh-mca-annulla:active,
.hh-tema-retro .hhn-notizia:active .hhn-notizia-leggi {
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .3) !important; transform: translateY(2px);
}
.hh-tema-retro .hh-shop-item__buy:disabled, .hh-tema-retro .hh-settings-save:disabled, .hh-tema-retro .hh-auth-card-submit:disabled {
    border-color: #b4b4ac; background: #9a9a92; box-shadow: none !important; color: #f5f5f0 !important; cursor: default; transform: none;
}


/* ============================================================================
   HADDO (18/10/2026) — LA TESTATA "2026" (components/site-header-retro, ?testata2026=1 finche' non e' approvata).
   Come habbo.it oggi, coi colori del tema: fascia scura col logo grande e il menu utente; la BARRA DEL MENU chiara a
   tutta larghezza (icona + voce Ubuntu Condensed maiuscola blu, la sezione aperta sottolineata in petrolio, GIOCA
   verde a freccia a destra); la banda col titolo e sotto le schede della sezione (come le Impostazioni).
   ============================================================================ */
.hhr26-alto { height: 82px; background: var(--hhr-alto); }
/* HADDO (27/10/2026): la fascia sta SOPRA la barra del menu (z-index 5), altrimenti le tendine della lingua e del menu
   utente si aprivano sotto la barra e se ne vedeva solo l'inizio */
.hhr26-alto { position: relative; z-index: 6; }
.hhr26-alto .hhr-giro { height: 100%; }
.hhr26-logo { position: absolute; left: 20px; top: 5px; width: 197px; height: 73px; background: url("/assets/images/habbostyle/logo-haddo-email.png") no-repeat; }
.hhr26 .hhr-attrezzi { top: 18px; }

.hhr26-menu { position: relative; z-index: 5; background: #e6edf1; border-top: 1px solid #ffffff; border-bottom: 1px solid #9fb0bc; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.hhr26-menu .hhr-giro { display: flex; align-items: center; gap: 48px; height: 70px; }
/* le voci come .navigation__link di habbo.it: Ubuntu Condensed 24px maiuscola, #036 (sezione aperta #09c, mouse sopra
   #999), le icone 22x22 dello sprite del sito con le tre versioni; sprite@2x sugli schermi densi */
.hhr26-voce { display: flex; align-items: center; gap: 6px; height: 100%; font: 400 24px/1 "Ubuntu Condensed", Ubuntu, "Trebuchet MS", sans-serif;
    color: #036; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.hhr26-voce::before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; background: url("/assets/images/habbostyle/sprite.png") no-repeat; }
.hhr26-voce:hover { color: #999999; text-decoration: none; text-shadow: none; }
.hhr26-voce.is-attiva { color: #0099cc; text-shadow: none; box-shadow: none; }
.hhr26-voce--home::before { background-position: -552px -359px; }
.hhr26-voce--home:hover::before { background-position: -576px -359px; }
.hhr26-voce--home.is-attiva::before { background-position: -354px -286px; }
.hhr26-voce--community::before { background-position: -434px -588px; }
.hhr26-voce--community:hover::before { background-position: -458px -588px; }
.hhr26-voce--community.is-attiva::before { background-position: -482px -588px; }
.hhr26-voce--sicurezza::before { background-position: -506px -588px; }
.hhr26-voce--sicurezza:hover::before { background-position: -530px -588px; }
.hhr26-voce--sicurezza.is-attiva::before { background-position: -554px -588px; }
.hhr26-voce--shop::before { background-position: -602px -588px; }
.hhr26-voce--shop:hover::before { background-position: -626px -588px; }
.hhr26-voce--shop.is-attiva::before { background-position: -650px -588px; }
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
    .hhr26-voce::before { background-image: url("/assets/images/habbostyle/sprite@2x.png"); background-size: 607px 577px; }
    .hhr26-voce--home::before { background-position: -278px -461px; }
    .hhr26-voce--home:hover::before { background-position: -301px -461px; }
    .hhr26-voce--home.is-attiva::before { background-position: -324px -461px; }
    .hhr26-voce--community::before { background-position: -347px -461px; }
    .hhr26-voce--community:hover::before { background-position: -370px -461px; }
    .hhr26-voce--community.is-attiva::before { background-position: -393px -461px; }
    .hhr26-voce--sicurezza::before { background-position: -416px -461px; }
    .hhr26-voce--sicurezza:hover::before { background-position: -439px -461px; }
    .hhr26-voce--sicurezza.is-attiva::before { background-position: -462px -461px; }
    .hhr26-voce--shop::before { background-position: -508px -461px; }
    .hhr26-voce--shop:hover::before { background-position: -531px -461px; }
    .hhr26-voce--shop.is-attiva::before { background-position: -554px -461px; }
}

/* GIOCA come habbo.it: il bottone verde unico del sito con la punta a freccia. La forma sta in due strati (::before
   il bordo #8eda55, ::after il corpo #00813e), cosi' l'ombra del bottone (drop-shadow sul link) segue la freccia:
   con il clip-path sul link stesso l'ombra e il bordo della punta venivano tagliati */
.hhr26-gioca { position: relative; isolation: isolate; margin-left: auto; display: inline-flex; align-items: center; height: 40px; padding: 0 34px 0 20px;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); font: 400 18px/1 Ubuntu, "Trebuchet MS", sans-serif; color: #ffffff; text-transform: uppercase; text-decoration: none; }
.hhr26-gioca::before, .hhr26-gioca::after { content: ""; position: absolute; z-index: -1; }
.hhr26-gioca::before { inset: 0; border-radius: 5px; background: #8eda55; clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%); }
.hhr26-gioca::after { inset: 2px 3px 2px 2px; border-radius: 3px; background: #00813e; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); }
.hhr26-gioca:hover { color: #ffffff; text-decoration: none; text-shadow: none; }
.hhr26-gioca:hover::before { background: #b9f373; }
.hhr26-gioca:hover::after { background: #00ab54; }
.hhr26-gioca:active { transform: translateY(2px); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }

.hhr26-banda { background: var(--hhr-banda); }
.hhr26-testata { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 26px 0 16px; border-bottom: 1px solid var(--hhr-separa); }
.hhr26-testata--schede { padding-bottom: 0; }
.hhr26-testata .hhr-portafoglio { padding-bottom: 12px; }
.hhr26-testata:not(.hhr26-testata--schede) .hhr-portafoglio { padding-bottom: 0; }
.hhr26-titoli { min-width: 0; }
.hhr26-schede { margin-top: 6px; row-gap: 0; }
.hh-tema-retro .hhr26-schede .hh-settings-tab { position: relative; font-family: Ubuntu, "Trebuchet MS", sans-serif; font-size: 16px; line-height: 44px; text-transform: uppercase; color: #a3b1c0; }
.hh-tema-retro .hhr26-schede .hh-settings-tab:hover { color: #ffffff; text-decoration: none; text-shadow: none; }
.hh-tema-retro .hhr26-schede .hh-settings-tab.is-attiva { color: #ffffff; }
.hh-tema-retro .hhr26-schede .hh-settings-tab.is-attiva::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: #4ea6cf; }
.hh-tema-retro .hhr26-schede li:not(:first-child)::before { margin: 0 18px; color: rgba(255, 255, 255, .3); }

@media (max-width: 760px) {
    .hhr26-alto { height: 60px; }
    .hhr26-logo { top: 7px; width: 116px; height: 46px; background: url("/assets/images/habbostyle/sprite.png") -620px -830px no-repeat; }
    .hhr26 .hhr-attrezzi { top: 8px; }
    .hhr26-menu .hhr-giro { gap: 20px; overflow-x: auto; }
    .hhr26-voce { font-size: 20px; }
    .hhr26-gioca { margin-left: 0; }
    .hhr26-testata { flex-direction: column; align-items: flex-start; }
}


/* HADDO (18/10/2026): gli ultimi bottoni rimasti col verde sfumato del 2014 (l'utente: "questo tasto e' dello stile
   vecchio"): App Authenticator (Impostazioni > 2FA), Rispondi (Messaggi), il + delle reazioni (Notizie), Carica altro
   (Profilo). Lo stesso bottone unico verde degli altri; larghezze e spazi restano quelli di ogni pagina. */
.hh-tema-retro .hh-settings-2fa-method, .hh-tema-retro .msg-disc__reply, .hh-tema-retro .hh-react-add, .hh-tema-retro .hh-expand-loadmore {
    border: 2px solid #8eda55; border-radius: 5px; background: #00813e; box-shadow: 0 3px 0 1px rgba(0, 0, 0, .3); filter: none;
    font-family: Ubuntu, "Trebuchet MS", Arial, sans-serif; font-weight: 400; text-shadow: none; color: #ffffff; text-transform: uppercase; }
.hh-tema-retro .hh-settings-2fa-method:hover, .hh-tema-retro .msg-disc__reply:hover, .hh-tema-retro .hh-react-add:hover, .hh-tema-retro .hh-expand-loadmore:hover {
    border-color: #b9f373; background: #00ab54; color: #ffffff; }
.hh-tema-retro .hh-settings-2fa-method:active, .hh-tema-retro .msg-disc__reply:active, .hh-tema-retro .hh-react-add:active, .hh-tema-retro .hh-expand-loadmore:active {
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .3); transform: translateY(2px); }

/* HADDO (18/10/2026): nelle Impostazioni i bottoni sono AZZURRI come su Habbo ("CAMBIA", "SALVA"; scelta dell'utente):
   lo stesso bottone unico, nel colore blu (#0f7dbc, bordo #2a9cde). Disattivati restano grigi. */
.hh-tema-retro .hh-settings-save, .hh-tema-retro .hh-settings-2fa-method { border-color: #2a9cde; background: #0f7dbc; }
.hh-tema-retro .hh-settings-save:hover:not(:disabled), .hh-tema-retro .hh-settings-2fa-method:hover:not(:disabled) { border-color: #53bdf9; background: #2a9cde; }

/* ============================================================================
   HADDO (30/10/2026, l'utente: "Tutte le finestre del CMS vanno fatte come quella di Crea un nuovo personaggio").
   Il modello e' .hh-pgf di user/settings/personaggi.blade.php: finestra chiara del gioco (#e9e9e1) con bordo nero,
   filo bianco interno e angoli di 8 px; testata petrolio #377998 staccata di 2 px, titolo MAIUSCOLO centrato in
   Ubuntu Condensed 21/50 e la X dello sprite del tema a destra. Qui sotto le stesse regole sulle finestre gia'
   esistenti: Amici, Distintivi, Stanze, Gruppi del profilo (hh-friends-*, hh-expand-*), Reazioni delle notizie
   (hh-react-modal-*) e la finestra generica x-modals.regular-modal (hh-finestra-*). In fondo al file: vince.
   ============================================================================ */
.hh-tema-retro .hh-friends-window,
.hh-tema-retro .hh-expand-window,
.hh-tema-retro .hh-react-modal,
.hh-finestra {
    overflow: hidden;
    border: 1px solid #000000 !important;
    border-radius: 8px !important;
    background: #e9e9e1 !important;
    box-shadow: inset 0 0 0 2px #ffffff, 3px 3px 4px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .45) !important;
    color: #2c3440;
    font-family: Ubuntu, "Trebuchet MS", Arial, sans-serif;
}

.hh-tema-retro .hh-friends-modal,
.hh-tema-retro .hh-expand-modal,
.hh-tema-retro .hh-react-modal-backdrop {
    background-color: rgba(5, 10, 16, .78) !important;
}

.hh-tema-retro .hh-friends-titlebar,
.hh-tema-retro .hh-expand-titlebar,
.hh-tema-retro .hh-react-modal-head,
.hh-finestra-testa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin: 2px 2px 0;
    padding: 0 44px !important;
    border-bottom: 1px solid #030f18;
    border-radius: 6px 6px 0 0;
    background: #377998 !important;
    box-shadow: inset 0 2px 0 #418db0;
}

.hh-tema-retro .hh-friends-titlebar::before,
.hh-tema-retro .hh-expand-titlebar::before,
.hh-tema-retro .hh-react-modal-head::before {
    display: none !important;
}

.hh-tema-retro .hh-friends-title,
.hh-tema-retro .hh-expand-title,
.hh-tema-retro .hh-react-modal-title,
.hh-finestra-testa,
.hh-finestra-testa h2,
.hh-finestra-testa h3 {
    margin: 0;
    padding: 0 !important;
    color: #ffffff !important;
    font: 400 21px/50px "Ubuntu Condensed", Ubuntu, "Trebuchet MS", sans-serif !important;
    letter-spacing: 0;
    text-align: center !important;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.hh-tema-retro .hh-friends-close,
.hh-tema-retro .hh-expand-close,
.hh-tema-retro .hh-react-modal-close,
.hh-finestra-chiudi {
    position: absolute !important;
    top: 15px !important;
    right: 12px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: url("/assets/images/habbostyle/sprite.png") -762px -588px no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
    opacity: 1 !important;
    cursor: pointer;
}

@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
    .hh-tema-retro .hh-friends-close,
    .hh-tema-retro .hh-expand-close,
    .hh-tema-retro .hh-react-modal-close,
    .hh-finestra-chiudi {
        background-image: url("/assets/images/habbostyle/sprite@2x.png") !important;
        background-position: -152px -508px !important;
        background-size: 607px 577px !important;
    }
}

.hh-tema-retro .hh-friends-close::before,
.hh-tema-retro .hh-friends-close::after,
.hh-tema-retro .hh-expand-close::before,
.hh-tema-retro .hh-expand-close::after,
.hh-tema-retro .hh-react-modal-close::before,
.hh-tema-retro .hh-react-modal-close::after {
    display: none !important;
}

.hh-finestra-corpo {
    padding: 20px 26px 24px;
    color: #2c3440;
}

/* HADDO (30/10/2026, l'utente: "sì rendile più basse"): le righe di Amici, Distintivi e Stanze nelle finestre
   "Vedi tutto" del profilo erano alte quasi quanto due avatar (figura intera 64x110 + 17 px sopra e sotto). Ora:
   dell'avatar si vede la parte alta (testa e busto) in un riquadro 44x56, distintivo 44x44, nome 17 px e motto 13 px. */
.hh-tema-retro .hh-friend-row,
.hh-tema-retro .hh-badge-row,
.hh-tema-retro .hh-room-row {
    gap: 12px;
    padding: 6px 14px;
}

.hh-tema-retro .hh-friend-avatar {
    position: relative;
    width: 44px;
    height: 56px;
    overflow: hidden;
}

.hh-tema-retro .hh-friend-avatar .hh-friend-fig {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 64px;
    height: 110px;
    max-width: none;
    transform: translateX(-50%);
    image-rendering: pixelated;
}

.hh-tema-retro .hh-badge-icon {
    width: 44px;
    height: 44px;
    border-width: 2px;
}

.hh-tema-retro .hh-friend-info,
.hh-tema-retro .hh-badge-info {
    gap: 2px;
}

.hh-tema-retro .hh-friend-name,
.hh-tema-retro .hh-badge-name,
.hh-tema-retro .hh-room-name {
    font-size: 17px;
    line-height: 20px;
}

.hh-tema-retro .hh-friend-motto,
.hh-tema-retro .hh-badge-desc {
    font-size: 13px;
    line-height: 17px;
}

/* HADDO (30/10/2026, l'utente: "sì allarga il riquadro"): con 44 px gli accessori larghi (maschere, ali, palloncini)
   venivano tagliati ai lati; la figura e' larga 64, quindi il riquadro e' largo 64 */
.hh-tema-retro .hh-friend-avatar {
    width: 64px;
}

/* HADDO (30/10/2026, l'utente: "passando il mouse sul mio avatar, compare e scompare a intermittenza"): il lampeggio
   hhn-saluta-1/-2 serve solo alla home, dove il saluto sono DUE fotogrammi PNG che si danno il cambio. Nel profilo il
   saluto e' una GIF animata da sola: col lampeggio spariva un attimo si' e uno no. Le GIF restano sempre accese */
.hhn-scena-avatar:hover img.hhn-scena-saluta[src*="img_format=gif"] {
    animation: none;
    opacity: 1;
}