/* ===== Variabili globali ===== */
:root {
    --fade-in: 0.5s;
    --fade-out: 0.1s;
    --background-color-rgb: 235, 235, 235; /* #ebebeb */

    --base-maxw: 1000px;
    --base-wheel-size: 630px;
    --base-face-size: 300px;
    --base-back-home-size: 50px;
    --base-tooltip-info-icon-size: 20px;
    --base-footer-icons-size: 25px;
    --base-lang-flags-width: 30px;
    --base-lang-flags-height: 20px;
    --base-sub-title-max-width: 580px;
    --base-video-trailer-width: 560px;
    --base-video-trailer-height: 315px;
    --base-font-size-title: 35px;
    --base-font-size-text: 20px;
    --base-font-size-tooltip: 14px;
    --base-wheel-menu-items-distance: 45px;
    --base-divider-margin-top: 15px;
    --base-tooltip-margin-top: 7px;
    --base-tooltip-border-width: 6px;
    --base-footer-link-padding: 10px;
    --base-footer-link-padding-top: 5px;
    --base-lang-menu-margin-top: 20px;
    --base-lang-switcher-margin-top: 10px;
    --base-secret-input-border-size: 2px;
    --base-secret-input-border-radius: 2px;
    --base-secret-input-padding-top-bottom: 2px;
    --base-secret-input-padding-left-right: 8px;

    --ui-scale: 1;

    --maxw: calc(var(--base-maxw) * var(--ui-scale));
    --wheel-size: calc(var(--base-wheel-size) * var(--ui-scale));
    --face-size: calc(var(--base-face-size) * var(--ui-scale));
    --back-home-size: calc(var(--base-back-home-size) * var(--ui-scale));
    --tooltip-info-icon-size: calc(var(--base-tooltip-info-icon-size) * var(--ui-scale));
    --footer-icons-size: calc(var(--base-footer-icons-size) * var(--ui-scale));
    --lang-flags-width: calc(var(--base-lang-flags-width) * var(--ui-scale));
    --lang-flags-height: calc(var(--base-lang-flags-height) * var(--ui-scale));
    --sub-title-max-width: calc(var(--base-sub-title-max-width) * var(--ui-scale));
    --video-trailer-width: calc(var(--base-video-trailer-width) * var(--ui-scale));
    --video-trailer-height: calc(var(--base-video-trailer-height) * var(--ui-scale));
    --font-size-title: calc(var(--base-font-size-title) * var(--ui-scale));
    --font-size-text: calc(var(--base-font-size-text) * var(--ui-scale));
    --font-size-tooltip: calc(var(--base-font-size-tooltip) * var(--ui-scale));
    --wheel-menu-items-distance: calc(var(--base-wheel-menu-items-distance) * var(--ui-scale));
    --divider-margin-top: calc(var(--base-divider-margin-top) * var(--ui-scale));
    --tooltip-margin-top: calc(var(--base-tooltip-margin-top) * var(--ui-scale));
    --tooltip-border-width: calc(var(--base-tooltip-border-width) * var(--ui-scale));
    --footer-link-padding: calc(var(--base-footer-link-padding) * var(--ui-scale));
    --footer-link-padding-top: calc(var(--base-footer-link-padding-top) * var(--ui-scale));
    --lang-menu-margin-top: calc(var(--base-lang-menu-margin-top) * var(--ui-scale));
    --lang-switcher-margin-top: calc(var(--base-lang-switcher-margin-top) * var(--ui-scale));
    --secret-input-border-size: calc(var(--base-secret-input-border-size) * var(--ui-scale) * 1.2);
    --secret-input-border-radius: calc(var(--base-secret-input-border-radius) * var(--ui-scale));
    --secret-input-padding-top-bottom: calc(var(--base-secret-input-padding-top-bottom) * var(--ui-scale));
    --secret-input-padding-left-right: calc(var(--base-secret-input-padding-left-right) * var(--ui-scale));
}

@media (min-aspect-ratio: 1/1) and (max-height: 750px) {
    :root { --ui-scale: 0.667; }
    .lang-menu { padding: 2px !important; }
}

@media (min-aspect-ratio: 1/1) and (min-height: 1300px) {
    :root { --ui-scale: 1.43; }
}

@media (min-aspect-ratio: 1/1) and (min-height: 1800px) {
    :root { --ui-scale: 2; }
}

@media (min-aspect-ratio: 1/1) and (min-height: 3000px) {
    :root { --ui-scale: 3.3; }
}

/* Phone */
@media (max-width: 760px) {
    :root {
        --maxw: 1000px;
        --wheel-size: 440px;
        --face-size: 190px;
        --back-home-size: 35px;
        --tooltip-info-icon-size: 20px;
        --footer-icons-size: 25px;
        --lang-flags-width: 45px;
        --lang-flags-height: 30px;
        --sub-title-max-width: 580px;
        --video-trailer-width: 320px;
        --video-trailer-height: 180px;
        --font-size-title: 25px;
        --font-size-text: 14px;
        --font-size-tooltip: 13px;
        --tooltip-margin-top: 6px;
        --lang-switcher-margin-top: 5px;
    }
    .lang-selection-text { display: none !important; }
    .answers-desktop { display: none !important; }
    .answers-smartphone { display: flex !important; }
    .game1-screen img { min-width: 262px !important; }
    .divider { z-index: 0 !important; }
}

/* ===== Font ===== */
@font-face {
    font-family: "PatrickHand";
    src: url("/fonts/PatrickHand-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}

/* ===== Body ===== */
body {
    font-family: "PatrickHand", Arial, sans-serif;
    font-size: var(--font-size-text);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 16px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity var(--fade-in) ease;
    background-color: rgba(var(--background-color-rgb));
}

body > * {
    width: 100%;
    max-width: var(--maxw);
}

body.page-loaded {
    opacity: 1;
    transition: opacity var(--fade-in) ease;
}

body.page-leave {
    opacity: 0;
    transition: opacity var(--fade-out) ease;
}

.page-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-height: 10dvh;
    position: sticky;
    top: 0;
    background-color: rgba(var(--background-color-rgb));
}

.page-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 0;
}

.page-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 10dvh;
}

.divider {
    width: 100%;
    margin-top: var(--divider-margin-top);
    margin-bottom: 0px;
    z-index: 1;
}

/* ===== Titles e text ===== */
.title {
    text-align: center;
    font-size: var(--font-size-title);
    margin: 0;
}

.sub-title {
    text-align: center;
    width: 100%;
    max-width: var(--sub-title-max-width);
    margin-top: 5px;
    margin-bottom: 5px;
}

.text-paragraph {
    text-align: left;
    width: 90%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 10px;
}

/* ===== Speaker image ===== */
.face {
    position: relative;
    inset: 0;
    display: grid;
    place-items: center;
}

.face img {
    width: min(var(--face-size), 44vw);
    height: auto;
    display: block;
}

/* ===== Tooltip ===== */
.tooltip-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: var(--tooltip-margin-top);
}

.tooltip-info-icon {
    width: var(--tooltip-info-icon-size);
}

.tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    color: black;
    font-size: var(--font-size-tooltip);
    white-space: nowrap;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: var(--tooltip-border-width);
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip-icon-container:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* ===== Links ===== */
a {
    display: inline-block;
    padding: 5px 5px;
    color: black;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease;
}

a:hover {
    transform: translateY(-2px);
}

.footer-icons {
    width: var(--footer-icons-size);
    height: var(--footer-icons-size);
    cursor: pointer;
}

.footer-link {
    padding-top: var(--footer-link-padding-top);
    padding-bottom: 0px;
    padding-right: var(--footer-link-padding);
    padding-left: var(--footer-link-padding);
}

/* ===== Rows and columns ===== */
.row {
    /* position: relative; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.col {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

/* ===== Back home ===== */
.back-home {
    position: absolute;
    left: 0;
    width: var(--back-home-size);
    height: var(--back-home-size);
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.back-home img {
    width: 100%;
    height: auto;
    display: block;
}

.back-home:hover {
    transform: translateX(-6px);
}

/* ===== Pages background ===== */
body.face-background::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("/images/speaker/neutral.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(var(--face-size), 44vw);
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
}

/* selettore lingua */
.lang-switcher {
    margin-top: var(--lang-switcher-margin-top);
    position: absolute;
    right: 0;
    font-family: inherit;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px;
    font: inherit;
    cursor: pointer;
}

.lang-current img {
    width: var(--lang-flags-width);
    height: var(--lang-flags-height);
}

.lang-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--lang-menu-margin-top);
    padding: 4px;
    list-style: none;
    background-color: rgba(var(--background-color-rgb), 0.8);
    display: none;
    z-index: 1;
}

.lang-menu li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 4px 0;
    cursor: pointer;
    font: inherit;
}

.lang-menu li img {
    width: var(--lang-flags-width);
    height: var(--lang-flags-height);
}

.lang-menu li:hover {
    opacity: 0.7;
}

.lang-switcher.open .lang-menu {
    display: block;
}