/* HADDO (03/10/2026) — il gioco sul telefono come l'app di Habbo: vedi telefono.js. */

/* l'invito a girare il telefono: stesso cielo stellato della schermata di disconnessione (.hh-dc-*) */
.hh-gira {
    display: none;
}

html.hh-gira-telefono .hh-client-shell.is-open .hh-gira {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 70;
    overflow: hidden;
    background: linear-gradient(#020a18, #062142 55%, #0c3a65);
}

.hh-gira-icona {
    width: 72px;
    height: 72px;
    color: #7ecaee;
    animation: hh-gira-ruota 2.6s ease-in-out infinite;
}

@keyframes hh-gira-ruota {
    0%, 20% { transform: rotate(0deg); }
    45%, 75% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hh-gira-icona { animation: none; }
}

/* la scala 2 dell'app (la variabile la mette telefono.js). Su Chrome con lo zoom: passa dentro l'iframe, che si disegna
   nitido a 2 pixel veri per pixel. */
html.hh-zoom-telefono .hh-client-shell.is-open .hh-client-frame {
    zoom: var(--hh-scala, 1);
}

/* dove lo zoom non passa negli iframe (Safari): l'iframe grande 1/scala e rimpicciolito con transform; il guscio
   aperto e' fisso a tutto schermo con overflow hidden, quindi la parte non scalata non sporge */
html.hh-scala-telefono .hh-client-shell.is-open .hh-client-frame {
    width: calc(100% / var(--hh-scala, 1));
    height: calc(100% / var(--hh-scala, 1));
    transform: scale(var(--hh-scala, 1));
    transform-origin: 0 0;
}

/* HADDO (04/10/2026) — col tema New l'invito a girare il telefono prende i colori neon del sito (col Classic resta
   il cielo blu della schermata di disconnessione) */
html.hh-gira-telefono .hh-tema-retro .hh-client-shell.is-open .hh-gira {
    background:
        radial-gradient(600px 300px at 15% 0, rgba(65, 141, 176, .28), transparent 70%),
        radial-gradient(500px 320px at 95% 20%, rgba(255, 154, 31, .14), transparent 70%),
        linear-gradient(180deg, #18202b 0, #10161e 50%, #0b1017 100%);
}

.hh-tema-retro .hh-gira-icona {
    color: #4ea6cf;
    filter: drop-shadow(0 0 8px rgba(65, 141, 176, .7));
}

.hh-tema-retro .hh-gira .hh-dc-title {
    text-shadow: 0 0 12px rgba(65, 141, 176, .6), 0 2px 0 rgba(0, 0, 0, .5);
}

.hh-tema-retro .hh-gira .hh-dc-text {
    color: #bfe3f3;
}