/* Viendo Games v6.11 — clean game layouts
   Loaded LAST. This file intentionally owns the game-screen geometry. */

:root{
    --game-font:"Alexandria",Tahoma,"Segoe UI",Arial,sans-serif;
    --game-gold:#f2b84b;
    --game-panel:rgba(18,15,13,.91);
    --game-border:rgba(242,184,75,.30);
}

/* shared */
.game-layout,
.single-wheel-game,
.game-layout *,
.single-wheel-game *{
    box-sizing:border-box;
    font-family:var(--game-font)!important;
}
.game-wheel-card{
    position:relative;
    width:100%;
    border:1px solid var(--game-border);
    border-radius:28px;
    background:var(--game-panel);
    overflow:hidden;
}
.game-wheel-card canvas{
    display:block;
    height:auto;
    margin-inline:auto;
}
.game-result-card{
    position:relative;
    width:100%;
    margin:0 auto;
    border:1px solid var(--game-border);
    border-radius:22px;
    background:rgba(11,9,8,.94);
    overflow:hidden;
    isolation:isolate;
}
.game-result-card[hidden]{display:none!important}
.game-result-inner{
    position:relative;
    z-index:5;
    text-align:center;
}
.game-result-inner .result-kicker{
    display:block;
    margin-bottom:4px;
    font-size:15px;
    color:#d9cec3;
}
.game-result-inner strong{
    display:block;
    font-size:clamp(28px,4vw,44px);
    line-height:1.15;
    color:#74f08b;
}
.game-celebration-layer{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
}
.game-celebration-layer span{
    position:absolute;
    opacity:.68;
    font-size:clamp(24px,4vw,42px);
    animation:gameFloat 1.45s ease-in-out infinite alternate;
}
.game-celebration-layer span:nth-child(1){top:10%;right:5%}
.game-celebration-layer span:nth-child(2){top:12%;left:6%;animation-delay:.2s}
.game-celebration-layer span:nth-child(3){bottom:10%;right:9%;animation-delay:.35s}
.game-celebration-layer span:nth-child(4){bottom:12%;left:10%;animation-delay:.5s}
@keyframes gameFloat{from{transform:translateY(-3px) rotate(-7deg)}to{transform:translateY(4px) rotate(7deg)}}

/* ---------- WHO PAYS ---------- */
#whoPaysFlow{
    width:min(1180px,100%);
    margin:0 auto;
}
#whoPaysFlow .mobile-input-step,
#whoPaysFlow .mobile-wheel-step{
    min-width:0;
}
#whoPaysFlow .game-display-column{
    width:100%;
    min-width:0;
}
#whoPaysFlow .who-wheel-card{
    display:flex;
    align-items:center;
    justify-content:center;
}
#whoPaysFlow .who-wheel-card canvas{
    width:min(680px,86vw);
}
#whoPaysFlow .who-result-card{
    width:min(690px,100%);
    margin-top:10px;
    padding:12px 16px;
}
#whoPaysFlow .retry-button{
    position:absolute;
    top:12px;
    right:14px;
    z-index:7;
    width:auto!important;
    min-width:112px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:12px!important;
    background:linear-gradient(135deg,var(--game-gold),#ff7a38)!important;
    color:#241407!important;
    font-size:12px!important;
    font-weight:900!important;
    box-shadow:0 10px 24px rgba(0,0,0,.25)!important;
}
#whoPaysFlow:not(.is-result) .retry-button{display:none!important}

/* ---------- MEAL ---------- */
.single-wheel-game{
    width:min(930px,100%);
    margin:0 auto;
}
.meal-title{
    margin:0 0 8px;
    text-align:center;
    color:var(--game-gold);
    font-size:clamp(27px,3vw,40px);
    line-height:1.2;
    font-weight:900;
}
.meal-wheel-shell{
    width:100%;
}
.meal-wheel-shell .game-wheel-card{
    padding:12px 14px;
}
.meal-wheel-shell canvas{
    width:min(650px,84vw);
}
.meal-spin-button{
    width:min(650px,92%)!important;
    min-height:58px!important;
    margin:8px auto 0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:20px!important;
}
.meal-result-card{
    width:min(690px,100%);
    margin-top:9px;
    padding:10px 14px;
}
.meal-result-card .weekly-best-note{
    width:100%!important;
    margin:8px auto 0!important;
    padding:9px 12px!important;
    background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(242,184,75,.18)!important;
    border-radius:13px!important;
}
.meal-result-card .weekly-best-note span,
.meal-result-card .weekly-best-note strong{
    position:relative;
    z-index:5;
}
.meal-result-card .weekly-best-note strong{
    font-size:18px!important;
}

/* ---------- DESKTOP ---------- */
@media(min-width:901px){
    #whoPaysFlow{
        display:grid!important;
        grid-template-columns:390px minmax(0,1fr)!important;
        gap:22px!important;
        align-items:start!important;
    }
    #whoPaysFlow .mobile-input-step{
        grid-column:1!important;
    }
    #whoPaysFlow .mobile-wheel-step{
        grid-column:2!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
    }
    #whoPaysFlow .who-wheel-card{
        min-height:640px;
    }
    #whoPaysFlow.is-result .who-wheel-card canvas{
        width:min(540px,72vw);
    }

    .single-wheel-game{
        min-height:calc(100svh - 110px);
    }
    .meal-wheel-shell .game-wheel-card{
        min-height:630px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    .meal-wheel-shell.is-result .game-wheel-card{
        min-height:510px;
    }
    .meal-wheel-shell.is-result canvas{
        width:min(520px,70vw);
    }
}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
    body:has(#whoPaysFlow) .page-shell,
    body:has(.single-wheel-game) .page-shell{
        padding:2px 4px 4px!important;
    }

    /* Who pays input screen: no wheel at all */
    #whoPaysFlow[data-mobile-step="input"] .mobile-wheel-step{
        display:none!important;
    }
    #whoPaysFlow[data-mobile-step="input"] .mobile-input-step{
        display:block!important;
        width:100%!important;
    }
    #whoPaysFlow[data-mobile-step="wheel"] .mobile-input-step{
        display:none!important;
    }
    #whoPaysFlow[data-mobile-step="wheel"] .mobile-wheel-step{
        display:flex!important;
        flex-direction:column!important;
        width:100%!important;
        min-height:calc(100dvh - 82px)!important;
        gap:5px!important;
    }
    #whoPaysFlow .who-wheel-card{
        flex:1 1 auto!important;
        min-height:0!important;
        width:100%!important;
        padding:42px 2px 4px!important;
    }
    #whoPaysFlow:not(.is-result) .who-wheel-card canvas{
        width:min(95vw,calc(100dvh - 135px))!important;
        max-width:100%!important;
    }
    #whoPaysFlow.is-result .who-wheel-card{
        flex:1 1 auto!important;
        padding-top:42px!important;
    }
    #whoPaysFlow.is-result .who-wheel-card canvas{
        width:min(68vw,43dvh)!important;
    }
    #whoPaysFlow .who-result-card{
        flex:0 0 auto!important;
        width:calc(100vw - 12px)!important;
        margin:0 auto!important;
        padding:9px 10px!important;
    }
    #whoPaysFlow .retry-button{
        top:7px!important;
        right:9px!important;
    }

    /* meal: title OUTSIDE card, with breathing room */
    .single-wheel-game{
        width:100%!important;
        min-height:calc(100dvh - 82px)!important;
        display:flex!important;
        flex-direction:column!important;
    }
    .meal-title{
        flex:0 0 auto!important;
        margin:5px 0 7px!important;
        padding:0 8px!important;
        font-size:clamp(25px,7vw,34px)!important;
    }
    .meal-wheel-shell{
        flex:1 1 auto!important;
        min-height:0!important;
        display:flex!important;
        flex-direction:column!important;
        gap:5px!important;
    }
    .meal-wheel-shell .game-wheel-card{
        flex:1 1 auto!important;
        min-height:0!important;
        width:100%!important;
        padding:6px 3px!important;
        display:flex!important;
        flex-direction:column!important;
        justify-content:center!important;
        align-items:center!important;
    }
    .meal-wheel-shell:not(.is-result) canvas{
        width:min(94vw,calc(100dvh - 205px))!important;
    }
    .meal-wheel-shell.is-result canvas{
        width:min(66vw,42dvh)!important;
    }
    .meal-spin-button{
        flex:0 0 52px!important;
        height:52px!important;
        min-height:52px!important;
        width:94%!important;
        margin:4px auto 0!important;
        font-size:18px!important;
    }
    .meal-result-card{
        flex:0 0 auto!important;
        width:calc(100vw - 12px)!important;
        margin:0 auto!important;
        padding:8px 9px!important;
        animation:mealResultReveal .28s ease-out both;
    }
    @keyframes mealResultReveal{
        from{opacity:0;transform:translateY(7px)}
        to{opacity:1;transform:none}
    }
    .meal-result-card .game-result-inner strong{
        font-size:clamp(25px,7vw,33px)!important;
    }
}

/* ---------- Big displays ---------- */
.display-result{
    isolation:isolate!important;
}
.display-result .result-emoji-ring{display:none!important}
.display-celebration-layer{
    position:fixed;
    inset:0;
    z-index:2;
    pointer-events:none;
    overflow:hidden;
}
.display-celebration-layer span{
    position:absolute;
    opacity:.5;
    font-size:clamp(34px,5vw,70px);
    animation:displayFloat 2.2s ease-in-out infinite alternate;
}
.display-celebration-layer span:nth-child(1){top:18%;left:8%}
.display-celebration-layer span:nth-child(2){top:22%;right:8%;animation-delay:.3s}
.display-celebration-layer span:nth-child(3){bottom:18%;left:12%;animation-delay:.6s}
.display-celebration-layer span:nth-child(4){bottom:20%;right:12%;animation-delay:.9s}
@keyframes displayFloat{from{transform:translateY(-8px) rotate(-8deg)}to{transform:translateY(10px) rotate(8deg)}}
.display-result,
.display-result *{
    position:relative;
    z-index:5;
}