/* Viendo Wheels v6.10 — stable game screens */

/* Keep game columns geometrically centered. */
.single-wheel-game,
.meal-game-stack,
.meal-game-stack .wheel-only-card,
#whoPaysFlow .game-display-column,
#whoPaysFlow .wheel-only-card{
    box-sizing:border-box!important;
    min-width:0!important;
}

.meal-game-stack .wheel-only-card,
#whoPaysFlow .wheel-only-card{
    margin-inline:auto!important;
    transform:none!important;
}

/* RESULT LAYERS: decorations are always behind the words. */
.result-panel-card,
.display-result{
    isolation:isolate!important;
}
.result-panel-card .result-box,
.display-result > small,
.display-result > strong,
.display-result > span:not(.result-emoji-ring){
    position:relative!important;
    z-index:5!important;
}
.result-panel-card .result-emoji-ring,
.display-result .result-emoji-ring{
    z-index:1!important;
    overflow:hidden!important;
    opacity:.82!important;
}
.result-panel-card .result-emoji-ring span,
.display-result .result-emoji-ring span{
    z-index:1!important;
    opacity:.72!important;
}
.result-stage-meal .result-emoji-ring span:nth-child(5),
.result-stage-meal .result-emoji-ring span:nth-child(6),
.display-result.meal-display-result .result-emoji-ring span:nth-child(5),
.display-result.meal-display-result .result-emoji-ring span:nth-child(6){
    display:none!important;
}

/* Desktop meal wheel: showing a result must NEVER change the wheel/card width.
   Only canvas height is reduced, so there is no right-side jump. */
@media(min-width:901px){
    .meal-game-stack,
    .meal-game-stack.result-mode{
        width:100%!important;
        grid-template-columns:minmax(0,1fr)!important;
    }
    .meal-game-stack .wheel-only-card,
    .meal-game-stack.result-mode .wheel-only-card{
        width:100%!important;
        max-width:100%!important;
        margin-inline:auto!important;
        padding-inline:14px!important;
    }
    .meal-game-stack #wheelCanvas{
        width:min(66vh,680px,88vw)!important;
        margin-inline:auto!important;
    }
    .meal-game-stack.result-mode #wheelCanvas{
        width:min(51vh,520px,72vw)!important;
        margin-inline:auto!important;
    }
    .meal-game-stack.result-mode .result-panel-card{
        width:min(760px,100%)!important;
        margin-inline:auto!important;
    }
}

/* MOBILE WHO-PAYS FLOW
   Input step = input only. Wheel is not allowed to leak into the first screen. */
@media(max-width:900px){
    #whoPaysFlow.mobile-flow[data-mobile-step="input"] .mobile-wheel-step{
        display:none!important;
    }
    #whoPaysFlow.mobile-flow[data-mobile-step="input"] .mobile-input-step{
        display:block!important;
        width:100%!important;
    }
    #whoPaysFlow.mobile-flow[data-mobile-step="wheel"] .mobile-input-step{
        display:none!important;
    }
    #whoPaysFlow.mobile-flow[data-mobile-step="wheel"] .mobile-wheel-step{
        display:grid!important;
        width:100%!important;
        min-height:calc(100dvh - 78px)!important;
        grid-template-rows:minmax(0,1fr) auto!important;
        align-items:stretch!important;
        gap:5px!important;
        padding:0 4px 3px!important;
        overflow:hidden!important;
    }

    /* Before result: wheel fills the useful screen instead of floating in the middle. */
    #whoPaysFlow.mobile-flow[data-mobile-step="wheel"]:not(.result-mode) .wheel-only-card{
        width:calc(100vw - 8px)!important;
        max-width:calc(100vw - 8px)!important;
        height:100%!important;
        min-height:calc(100dvh - 84px)!important;
        padding:43px 2px 5px!important;
        justify-content:flex-start!important;
    }
    #whoPaysFlow.mobile-flow[data-mobile-step="wheel"]:not(.result-mode) #wheelCanvas{
        width:min(96vw,calc(100dvh - 150px))!important;
        max-width:100%!important;
        margin:auto!important;
    }

    /* Result state: one wheel card + one result card, no phantom card behind it. */
    #whoPaysFlow.result-mode .game-display-column{
        min-height:calc(100dvh - 78px)!important;
        grid-template-rows:minmax(0,1fr) auto!important;
    }
    #whoPaysFlow.result-mode .wheel-only-card{
        width:calc(100vw - 10px)!important;
        max-width:calc(100vw - 10px)!important;
        min-height:0!important;
        height:100%!important;
        padding:42px 2px 2px!important;
        background:transparent!important;
        border-color:transparent!important;
        box-shadow:none!important;
    }
    #whoPaysFlow.result-mode #wheelCanvas{
        width:min(66vw,44dvh)!important;
        margin:auto!important;
    }
    #whoPaysFlow.result-mode .result-panel-card{
        width:calc(100vw - 14px)!important;
        margin:0 auto!important;
        padding:7px!important;
        background:rgba(20,17,15,.94)!important;
    }
    #whoPaysFlow.result-mode .mobile-back.retry-button{
        top:4px!important;
        right:50%!important;
        transform:translateX(50%)!important;
        min-width:105px!important;
        height:34px!important;
        min-height:34px!important;
        font-size:11.5px!important;
    }

    /* Meal wheel: stable full screen before result. */
    .single-wheel-game{
        min-height:calc(100dvh - 78px)!important;
    }
    .meal-game-stack,
    .meal-game-stack:not(.result-mode){
        min-height:calc(100dvh - 78px)!important;
        grid-template-rows:minmax(0,1fr)!important;
        gap:0!important;
    }
    .meal-game-stack:not(.result-mode) .wheel-only-card{
        width:calc(100vw - 8px)!important;
        max-width:calc(100vw - 8px)!important;
        height:100%!important;
        min-height:calc(100dvh - 80px)!important;
        padding:3px 3px 6px!important;
        justify-content:flex-start!important;
    }
    .meal-game-stack:not(.result-mode) #wheelCanvas{
        width:min(94vw,calc(100dvh - 205px))!important;
        margin:auto!important;
    }
    .meal-game-stack:not(.result-mode) .wheel-action{
        flex:0 0 54px!important;
        min-height:54px!important;
        height:54px!important;
        margin:4px auto 0!important;
    }

    /* Meal result appears smoothly; no sudden card/layout snap. */
    .meal-game-stack.result-mode{
        min-height:calc(100dvh - 78px)!important;
        grid-template-rows:minmax(0,1fr) auto!important;
        gap:5px!important;
    }
    .meal-game-stack.result-mode .wheel-only-card{
        width:calc(100vw - 10px)!important;
        max-width:calc(100vw - 10px)!important;
        min-height:0!important;
        height:100%!important;
        padding:3px!important;
    }
    .meal-game-stack.result-mode #wheelCanvas{
        width:min(64vw,42dvh)!important;
        margin:auto!important;
    }
    .meal-game-stack.result-mode .wheel-action{
        height:46px!important;
        min-height:46px!important;
        margin:2px auto 0!important;
    }
    .meal-game-stack.result-mode .result-panel-card{
        width:calc(100vw - 14px)!important;
        margin:0 auto!important;
        padding:6px!important;
        animation:v610MealResultIn .26s ease-out both!important;
    }
    @keyframes v610MealResultIn{
        from{opacity:0;transform:translateY(8px) scale(.985)}
        to{opacity:1;transform:none}
    }
}

/* Very small screens: preserve one-screen composition. */
@media(max-width:430px) and (max-height:760px){
    #whoPaysFlow.mobile-flow[data-mobile-step="wheel"]:not(.result-mode) #wheelCanvas{
        width:min(91vw,calc(100dvh - 145px))!important;
    }
    .meal-game-stack:not(.result-mode) #wheelCanvas{
        width:min(90vw,calc(100dvh - 195px))!important;
    }
    #whoPaysFlow.result-mode #wheelCanvas,
    .meal-game-stack.result-mode #wheelCanvas{
        width:min(60vw,39dvh)!important;
    }
}