:root{
--app-min-height:100vh;
--safe-area-top:env(safe-area-inset-top, 0px);
--safe-area-bottom:env(safe-area-inset-bottom, 0px);
--carousel-icon-size:90px;
--carousel-icon-padding:13px;
--carousel-gap:12px;
--carousel-side-shift:10px;
--carousel-side-scale:0.9;
--carousel-center-scale:1.25;
--carousel-icon-outer-size:calc(var(--carousel-icon-size) + (var(--carousel-icon-padding) * 2));
--carousel-step:calc(var(--carousel-icon-size) + (var(--carousel-icon-padding) * 2) + var(--carousel-gap));
--carousel-side-offset:calc(var(--carousel-step) - var(--carousel-side-shift));
--carousel-width:calc(var(--carousel-icon-outer-size) * 3 + (var(--carousel-gap) * 2));
--carousel-height:calc(var(--carousel-icon-outer-size) * var(--carousel-center-scale));
--carousel-offscreen-offset:calc((var(--carousel-width) / 2) + ((var(--carousel-icon-outer-size) * var(--carousel-side-scale)) / 2) + 16px);
}

@supports (height:100dvh){

:root{
--app-min-height:100dvh;
}

}

html{
min-height:100%;
}

body{
margin:0;
background:#d1d5db;
display:flex;
justify-content:center;
align-items:center;
width:100vw;
height:100vh;
min-height:var(--app-min-height);
}

/* dispositivo */

#phone{

height:80vh;
max-height:80vh;
aspect-ratio:9/16;
width:auto;
max-width:calc(80vh * 9 / 16);

}

.game-icon{

position:absolute;
top:50%;
left:50%;

width:var(--carousel-icon-size);
height:var(--carousel-icon-size);

background:white;

padding:var(--carousel-icon-padding);

border-radius:22px;

box-shadow:
0 6px 12px rgba(0,0,0,0.15),
inset 0 2px 4px rgba(255,255,255,0.8);

display:flex;
align-items:center;
justify-content:center;

transform-origin:center center;
will-change:transform, opacity;

transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.2s ease;

}

.game-icon::after{
content:"";
position:absolute;
inset:-8px;
border:8px solid #41efb1;
border-radius:30px;
opacity:0;
pointer-events:none;
}

.game-icon img{

width:100%;
height:100%;
object-fit:cover;

border-radius:14px;

}

#carousel{
position:relative;
display:block;
width:var(--carousel-width);
height:var(--carousel-height);
}

.carousel-left{
transform:translate(calc(-50% - var(--carousel-side-offset)), -50%) scale(var(--carousel-side-scale));
opacity:0.6;
z-index:1;
}

.carousel-center{
transform:translate(-50%, -50%) scale(var(--carousel-center-scale));
opacity:1;
z-index:2;
box-shadow:
0 6px 12px rgba(0,0,0,0.15),
inset 0 2px 4px rgba(255,255,255,0.8);
}

.carousel-center::after{
opacity:1;
}

.pulse-outline::after{
animation:outline-pulse 2s ease-in-out infinite;
}

@keyframes outline-pulse{
0%,
100%{
opacity:1;
}
50%{
opacity:0.35;
}
}

.carousel-right{
transform:translate(calc(-50% + var(--carousel-side-offset)), -50%) scale(var(--carousel-side-scale));
opacity:0.6;
z-index:1;
}

.carousel-offscreen-left{
transform:translate(calc(-50% - var(--carousel-offscreen-offset)), -50%) scale(var(--carousel-side-scale));
opacity:0.6;
z-index:0;
pointer-events:none;
}

.carousel-offscreen-right{
transform:translate(calc(-50% + var(--carousel-offscreen-offset)), -50%) scale(var(--carousel-side-scale));
opacity:0.6;
z-index:0;
pointer-events:none;
}

.carousel-exit-left{
transform:translate(calc(-50% - var(--carousel-offscreen-offset)), -50%) scale(var(--carousel-side-scale));
opacity:0;
z-index:0;
pointer-events:none;
}

.carousel-exit-right{
transform:translate(calc(-50% + var(--carousel-offscreen-offset)), -50%) scale(var(--carousel-side-scale));
opacity:0;
z-index:0;
pointer-events:none;
}

.game-icon.no-transition{
transition:none;
}

/* profile trigger: breathing animation up to the same size as hover (scale-110) */

#profile-trigger{
transform-origin:center;
--profile-trigger-max-scale:1.1;
}

#profile-trigger:not(:hover):not(:focus-visible){
animation:profile-trigger-breath 2.6s ease-in-out infinite;
}

#profile-trigger:hover,
#profile-trigger:focus-visible{
animation:none;
transform:scale(var(--profile-trigger-max-scale));
}

@keyframes profile-trigger-breath{
0%,
100%{
transform:scale(var(--profile-trigger-max-scale));
}
50%{
transform:scale(1);
}
}

@media (prefers-reduced-motion:reduce){
#profile-trigger{
animation:none !important;
}
}

@media (min-width:481px){

body{
align-items:center;
}

}

/* su mobile usa tutto lo schermo */

@media (max-width:480px){

body{
height:var(--app-min-height);
max-height:var(--app-min-height);
overflow:hidden;
}

#phone{

width:100vw;
height:var(--app-min-height);
max-height:var(--app-min-height);
max-width:none;
border-radius:0;
padding-top:var(--safe-area-top);
padding-bottom:var(--safe-area-bottom);
box-sizing:border-box;

}

}