/* Viendo Games v6.13
   Meal wheel: zero layout shift between spin and result. */

/* DESKTOP:
   reserve result area and keep wheel card/canvas geometry identical. */
@media(min-width:901px){
    .single-wheel-game{
        width:min(930px,100%)!important;
        margin-inline:auto!important;
    }

    .meal-wheel-shell,
    .meal-wheel-shell.is-result{
        width:100%!important;
        display:grid!important;
        grid-template-rows:minmax(590px,1fr) 150px!important;
        gap:8px!important;
        align-items:stretch!important;
    }

    .meal-wheel-shell .game-wheel-card,
    .meal-wheel-shell.is-result .game-wheel-card{
        grid-row:1!important;
        width:100%!important;
        max-width:100%!important;
        min-height:590px!important;
        height:100%!important;
        margin:0 auto!important;
        padding:10px 14px!important;

        display:flex!important;
        flex-direction:column!important;
        justify-content:center!important;
        align-items:center!important;

        transform:none!important;
        transition:none!important;
    }

    .meal-wheel-shell #wheelCanvas,
    .meal-wheel-shell.is-result #wheelCanvas{
        width:min(62vh,640px,78vw)!important;
        max-width:100%!important;
        height:auto!important;
        margin-inline:auto!important;
        transform:none!important;
        transition:none!important;
    }

    .meal-wheel-shell .meal-spin-button,
    .meal-wheel-shell.is-result .meal-spin-button{
        width:min(640px,92%)!important;
        height:56px!important;
        min-height:56px!important;
        margin:7px auto 0!important;
        flex:0 0 56px!important;
    }

    /* Reserved result slot — always occupies same 150px. */
    .meal-wheel-shell .meal-result-card,
    .meal-wheel-shell.is-result .meal-result-card{
        grid-row:2!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;

        width:min(690px,100%)!important;
        height:150px!important;
        min-height:150px!important;
        max-height:150px!important;
        margin:0 auto!important;
        padding:8px 12px!important;

        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
        transform:none!important;
        transition:opacity .20s ease-out!important;
    }

    .meal-wheel-shell.is-result .meal-result-card{
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
    }
}

/* MOBILE:
   fixed two-row viewport so appearance of result cannot move the wheel. */
@media(max-width:900px){
    body:has(.single-wheel-game) .site-header{
        padding-bottom:2px!important;
        margin-bottom:0!important;
    }

    body:has(.single-wheel-game) .page-shell{
        padding-top:0!important;
        margin-top:0!important;
    }

    .single-wheel-game{
        width:100%!important;
        height:calc(100dvh - 76px)!important;
        min-height:calc(100dvh - 76px)!important;
        max-height:calc(100dvh - 76px)!important;
        margin:0!important;
        overflow:hidden!important;

        display:grid!important;
        grid-template-rows:auto minmax(0,1fr)!important;
    }

    /* Title stays above the card and never participates in result transition. */
    .single-wheel-game .meal-title{
        grid-row:1!important;
        margin:2px 0 4px!important;
        padding:0 7px!important;
        font-size:clamp(23px,6.5vw,31px)!important;
        line-height:1.15!important;
    }

    .meal-wheel-shell,
    .meal-wheel-shell.is-result{
        grid-row:2!important;
        width:100%!important;
        min-height:0!important;
        height:100%!important;
        max-height:100%!important;

        display:grid!important;
        grid-template-rows:minmax(0,1fr) 142px!important;
        gap:5px!important;
        align-items:stretch!important;
        overflow:hidden!important;
    }

    /* Wheel card and wheel NEVER resize at result time. */
    .meal-wheel-shell .game-wheel-card,
    .meal-wheel-shell.is-result .game-wheel-card{
        grid-row:1!important;
        width:calc(100vw - 6px)!important;
        max-width:calc(100vw - 6px)!important;
        height:100%!important;
        min-height:0!important;
        margin:0 auto!important;
        padding:4px 3px!important;

        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;

        transform:none!important;
        transition:none!important;
    }

    .meal-wheel-shell #wheelCanvas,
    .meal-wheel-shell.is-result #wheelCanvas{
        width:min(88vw,calc(100dvh - 270px))!important;
        max-width:100%!important;
        height:auto!important;
        margin:auto!important;
        transform:none!important;
        transition:none!important;
    }

    .meal-wheel-shell .meal-spin-button,
    .meal-wheel-shell.is-result .meal-spin-button{
        width:94%!important;
        height:48px!important;
        min-height:48px!important;
        flex:0 0 48px!important;
        margin:3px auto 0!important;
        font-size:17px!important;
    }

    /* Result + weekly note permanently reserve the same bottom area. */
    .meal-wheel-shell .meal-result-card,
    .meal-wheel-shell.is-result .meal-result-card{
        grid-row:2!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;

        width:calc(100vw - 10px)!important;
        height:142px!important;
        min-height:142px!important;
        max-height:142px!important;
        margin:0 auto!important;
        padding:7px 9px!important;

        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
        transform:none!important;
        animation:none!important;
        transition:opacity .18s ease-out!important;
    }

    .meal-wheel-shell.is-result .meal-result-card{
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
    }

    .meal-result-card .game-result-inner{
        width:100%!important;
        position:relative!important;
        z-index:5!important;
    }

    .meal-result-card .game-result-inner .result-kicker{
        font-size:13px!important;
        margin-bottom:2px!important;
    }

    .meal-result-card .game-result-inner strong{
        font-size:clamp(23px,6.4vw,30px)!important;
        line-height:1.1!important;
    }

    .meal-result-card .weekly-best-note{
        width:96%!important;
        margin:5px auto 0!important;
        padding:6px 9px!important;
        min-height:0!important;
    }

    .meal-result-card .weekly-best-note span{
        font-size:11px!important;
    }

    .meal-result-card .weekly-best-note strong{
        font-size:14px!important;
        margin-top:2px!important;
    }

    .meal-result-card .game-celebration-layer{
        position:absolute!important;
        inset:0!important;
        z-index:1!important;
        pointer-events:none!important;
        overflow:hidden!important;
    }
}

@media(max-width:430px) and (max-height:760px){
    .meal-wheel-shell #wheelCanvas,
    .meal-wheel-shell.is-result #wheelCanvas{
        width:min(84vw,calc(100dvh - 265px))!important;
    }
}