/* =========================================================
   NAKRIT APP LAYOUT ONLY
   Visual styling comes from Publii / Hero CSS
   ========================================================= */

#app{
    --nakrit-button-height:40px;
    --nakrit-button-font-size:.7rem;
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding-top:1.25rem;
}

/* ---------- Screen handling ---------- */

#app .screen{
    display:none;
    width:100%;
}

#app .screen.active{
    display:block;
}

#app .hidden{
    display:none !important;
}

/* Keep app controls proportional instead of inheriting the hero's 58px buttons. */
#app button{
    flex:0 0 auto;
    height:var(--nakrit-button-height);
    min-height:var(--nakrit-button-height);
    padding:0 10px;
    font-size:var(--nakrit-button-font-size) !important;
    line-height:1.2 !important;
}

/* Prepared features: keep markup and handlers, hide public UI entry points. */
#app #buy-recover,
#app #menu-history,
#app #menu-security{
    display:none !important;
}

/* ---------- Layout ---------- */

#app .field{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:18px 0;
}

#app .btn-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:14px;
}

#app .btn-row .btn{
    min-width:0;
    margin:5px 0;
}

#app .lore-main-button,
#app .aux-main-button{
    grid-column:1/-1;
}

#app .recharge-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

#app .menu-list,
#app .history-list{
    list-style:none;
    padding:0;
    margin:0;
}

#app .info-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin:10px 0;
}

#app .balance-row{
    text-align:center;
    margin:22px 0;
}

#app .artwork-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:24px auto;
    width:100%;
    max-width:360px;
    aspect-ratio:1;
}

#app .artwork-wrap figure{
    width:100%;
    height:100%;
    margin:0;
}

#app .artwork-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

#app .artwork-placeholder{
    width:100%;
    aspect-ratio:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

#app .pay-confirm{
    text-align:center;
    margin:20px 0;
}

#app .pay-success{
    text-align:center;
    margin:28px 0;
}

#app .section-head{
    margin:18px 0 12px;
}

#app .back-btn{
    margin-bottom:18px;
}

#app .aux-main-button{
    color:rgba(255,255,255,.48) !important;
    border-color:rgba(255,255,255,.24) !important;
    box-shadow:none !important;
    opacity:.72;
}

#app .nakrit-lore-copy{
    box-sizing:border-box;
    width:100%;
    padding:16px;
    border:1px solid rgba(255,58,51,.7);
    background:rgba(0,0,0,.5);
    color:rgba(255,255,255,.82);
    font-size:.74rem;
    line-height:1.55;
}

#app .nakrit-lore-copy p{
    margin:0 0 13px;
}

#app .nakrit-lore-copy p:last-child{
    margin-bottom:0;
}

#app .nakrit-lore-copy strong{
    color:#ff3a33;
    letter-spacing:.05em;
}

#app .aux-access-notice,
#app .spell-manual-copy{
    box-sizing:border-box;
    width:100%;
    margin:18px 0;
    padding:14px;
    border-left:3px solid rgba(255,58,51,.7);
    background:rgba(0,0,0,.5);
    color:rgba(255,255,255,.78);
    font-size:.68rem;
    line-height:1.55;
}

#app .aux-access-notice strong{
    color:#ff3a33;
    letter-spacing:.05em;
}

#app .aux-warning-copy{
    line-height:1.6;
}

#app .voice-screen-nav{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

#app .voice-manual-button{
    margin-left:auto;
}

#app .spell-manual-state,
#app .kitchen-control-state{
    margin:12px 0;
    padding:10px 12px;
    border-left:3px solid #ff3a33;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:.7rem;
}

#app .spell-manual-state.is-off,
#app .kitchen-control-state.is-off{
    color:rgba(255,255,255,.55);
    border-left-color:rgba(255,255,255,.3);
}

#app .spell-manual-copy p{
    margin:0 0 12px;
}

#app .spell-manual-copy p:last-child{
    margin-bottom:0;
}

/* ---------- Embedded card Checkout ---------- */

#app .checkout-explanation{
    font-size:.75rem;
}

#app .embedded-checkout{
    width:100%;
    min-height:420px;
    margin:16px 0;
    background:#fff;
    box-shadow:0 0 0 2px rgba(255,58,51,.7), 0 0 18px rgba(255,58,51,.3);
}

#app .embedded-checkout:empty{
    min-height:0;
    margin:0;
    background:transparent;
    box-shadow:none;
}

/* ---------- Voice & confirmed public bulletin ---------- */

#app .voice-advisory{
    margin:0 0 18px;
    font-size:.75rem;
    line-height:1.55;
}

#app .voice-panel{
    margin:20px 0;
    padding:18px;
    border:1px solid rgba(255,58,51,.7);
    background:rgba(0,0,0,.44);
}

#app .voice-panel-head,
#app .bulletin-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

#app .voice-panel-head{
    align-items:center;
}

#app .voice-panel-title{
    color:#ff3a33;
    font-weight:700;
    letter-spacing:.04em;
}

#app .voice-question{
    margin:14px 0 8px;
    color:#fff;
    line-height:1.5;
}

#app .voice-meta{
    margin-bottom:14px;
    font-size:.72rem;
}

#app .voice-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:12px;
}

#app .voice-option{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;
    align-self:stretch;
    box-sizing:border-box;
    width:100%;
    height:auto;
    min-height:92px;
    margin:0 !important;
    padding:14px;
    color:#fff;
    border:1px solid #ff3a33;
    background:#111;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

#app .voice-option:not(:disabled):hover,
#app .voice-option:not(:disabled):focus-visible{
    background:#25100f;
    outline:2px solid #fff;
    outline-offset:2px;
}

#app .voice-option:disabled{
    cursor:not-allowed;
    opacity:.58;
}

#app .voice-option-text{
    overflow-wrap:anywhere;
    line-height:1.35;
}

#app .voice-option-tally{
    margin-top:12px;
    color:#ff3a33;
    font-size:.68rem;
}

#app .voice-refresh{
    flex:0 0 auto;
    margin:0;
    color:#fff;
    border:1px solid rgba(255,58,51,.7);
    background:transparent;
    font:inherit;
    cursor:pointer;
}

#app .voice-refresh:disabled{
    cursor:wait;
    opacity:.55;
}

#app .spell-filters,
#app .spell-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0;
}

#app .spell-filters{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    width:100%;
}

#app .spell-filters .spell-filter{
    width:100%;
    min-width:0;
    padding-right:3px;
    padding-left:3px;
    font-size:.7rem !important;
    letter-spacing:.01em;
}

#app .spell-filter,
#app .spell-action{
    flex:0 0 auto;
    margin:0;
    color:rgba(255,255,255,.72);
    border:1px solid rgba(255,58,51,.62);
    background:#090909;
    font:inherit;
    letter-spacing:.04em;
    cursor:pointer;
}

#app .spell-filter.is-active,
#app .spell-action.is-active{
    color:#fff;
    background:#44100e;
    border-color:#ff3a33;
    box-shadow:0 0 12px rgba(255,58,51,.32);
}

#app .spell-filter:focus-visible,
#app .spell-action:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px;
}

#app .spell-builder-fields{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:14px 0;
}

#app .spell-field{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
    color:rgba(255,255,255,.72);
    font-size:.63rem;
}

#app .spell-field input,
#app .spell-field select{
    width:100%;
    min-width:0;
    padding:11px 9px;
    color:#fff;
    border:1px solid #ff3a33;
    border-radius:0;
    background:#090909;
    font:inherit;
    font-size:.75rem;
}

#app .spell-preview-label{
    margin-top:8px;
    font-size:.62rem;
}

#app .spell-preview{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:7px 0 14px;
    padding:13px;
    color:#fff;
    border-left:3px solid #ff3a33;
    background:rgba(0,0,0,.72);
    font-size:.78rem;
    line-height:1.45;
    overflow-wrap:anywhere;
}

#app .spell-preview.invalid{
    color:rgba(255,255,255,.48);
    border-left-color:rgba(255,58,51,.4);
}

#app .bulletin-list{
    list-style:none;
    padding:0;
    margin:0;
}

#app .bulletin-entry{
    padding:16px 0;
    border-top:1px solid rgba(255,255,255,.16);
}

#app .bulletin-entry.spell-state-death{
    opacity:.58;
}

#app .bulletin-entry.spell-state-accepted{
    box-shadow:inset 3px 0 0 #ff3a33, 0 0 18px rgba(255,58,51,.16);
    padding-right:12px;
    padding-left:12px;
}

#app .bulletin-entry:first-child{
    border-top:0;
}

#app .bulletin-author{
    color:#ff3a33;
    font-weight:700;
    font-size:.64rem;
    letter-spacing:.03em;
}

#app .spell-identity{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
}

#app .spell-state{
    padding:2px 6px;
    color:#fff;
    border:1px solid rgba(255,58,51,.7);
    font-size:.58rem;
    letter-spacing:.06em;
}

#app .bulletin-time{
    flex:0 0 auto;
    margin-left:auto;
    font-size:.58rem;
    text-align:right;
}

#app .bulletin-message{
    margin:8px 0 0;
    color:#fff;
    font-size:1.06rem !important;
    line-height:1.45 !important;
    text-align:left;
    overflow-wrap:anywhere;
    white-space:pre-wrap;
}

#app .spell-strength{
    margin-top:7px;
    font-size:.64rem;
    line-height:1.4;
}

#app .spell-booking-status,
#app .spell-booking-owned{
    margin-top:10px;
    color:#ff3a33;
    font-size:.68rem;
    line-height:1.4;
}

#app .spell-booking-owned{
    color:#fff;
}

#app .spell-decision-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

#app .spell-book-button{
    margin-top:12px;
}

#app .bulletin-empty{
    padding:12px 0 0;
}

/* ---------- Lean Jinx utility ---------- */

#app .jinx-main-button{
    width:100%;
}

#app .jinx-panel{
    margin:20px 0;
    padding:18px;
    border:1px solid rgba(255,58,51,.7);
    background:rgba(0,0,0,.52);
}

#app .jinx-reward{
    color:#ff3a33;
    font-size:1.05rem;
    font-weight:700;
    letter-spacing:.06em;
}

#app .jinx-description{
    margin:12px 0;
    color:#fff;
    line-height:1.5;
}

#app .jinx-source{
    padding:10px 0;
    border-top:1px solid rgba(255,255,255,.16);
    font-size:.66rem;
    overflow-wrap:anywhere;
}

#app .jinx-service{
    margin:10px 0 16px;
    padding:12px;
    border-left:3px solid #ff3a33;
    background:rgba(255,255,255,.06);
    color:#fff;
    line-height:1.45;
}

#app .kitchen-jinx-fields{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:12px;
    margin:14px 0;
}

#app .kitchen-jinx-fields input{
    box-sizing:border-box;
    width:100%;
    min-width:0;
    height:40px;
    padding:8px 10px;
    color:#fff;
    border:1px solid #ff3a33;
    border-radius:0;
    background:#090909;
    font:inherit;
    font-size:.72rem;
}

#app .jinx-service-summary{
    margin:14px 0;
    font-size:.72rem;
}

#app .jinx-booking-list{
    list-style:none;
    margin:0;
    padding:0;
}

#app .jinx-booking-entry{
    padding:14px 0;
    border-top:1px solid rgba(255,255,255,.16);
}

#app .jinx-booking-copy{
    color:#fff;
    font-size:.72rem;
    line-height:1.5;
    overflow-wrap:anywhere;
}

#app .jinx-booking-actions{
    display:flex;
    gap:8px;
    margin-top:10px;
}

#app .meal-choice-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
    gap:8px;
    margin:14px 0;
}

#app .meal-choice{
    display:flex;
    align-items:center;
    justify-content:space-between;
    align-self:start;
    gap:8px;
    width:100%;
    margin:0 !important;
    border:1px solid #ff3a33;
    background:rgba(0,0,0,.62);
    color:#fff;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#app .meal-choice-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#app .meal-choice-count{
    flex:0 0 auto;
    color:rgba(255,255,255,.78);
    font-size:.9em;
}

#app .meal-choice-empty{
    grid-column:1/-1;
    box-sizing:border-box;
    width:100%;
    min-height:56px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

#app .meal-choice.is-active{
    color:#ff3a33;
    box-shadow:0 0 10px rgba(255,58,51,.55);
}

#app [data-meal-target="pay"].meal-choice{
    color:rgba(255,255,255,.56);
    border-color:rgba(255,255,255,.24);
    box-shadow:none;
}

#app [data-meal-target="pay"].meal-choice .meal-choice-count{
    color:rgba(255,255,255,.48);
}

#app [data-meal-target="pay"].meal-choice.is-active{
    color:#fff;
    border-color:#ff3a33;
    box-shadow:0 0 10px rgba(255,58,51,.55);
}

#app [data-meal-target="pay"].meal-choice.is-active .meal-choice-count{
    color:rgba(255,255,255,.82);
}

#app .kitchen-menu-items{
    display:grid;
    gap:14px;
    margin:14px 0;
}

#app .kitchen-menu-item{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(72px,.8fr) 64px;
    align-items:start;
    gap:8px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.16);
}

#app .kitchen-menu-item input{
    display:block;
    align-self:start;
    box-sizing:border-box;
    width:100%;
    min-width:0;
    height:40px;
    margin:0 !important;
    padding:8px;
    color:#fff;
    border:1px solid #ff3a33;
    border-radius:0;
    background:#090909;
    font:inherit;
    font-size:.7rem;
}

#app .kitchen-menu-adjust{
    display:flex;
    grid-column:1/-1;
    gap:7px;
    flex-wrap:wrap;
}

#app .kitchen-menu-status{
    grid-column:1/-1;
    font-size:.68rem;
}

#app .kitchen-mode-buttons{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px;
    margin:12px 0;
}

#app .kitchen-mode-buttons .spell-filter{
    width:100%;
    min-width:0;
    padding-right:4px;
    padding-left:4px;
}

/* ---------- Utilities ---------- */

#app .text-center{
    text-align:center;
}

#app .mt-sm{
    margin-top:.5rem;
}

#app .mt-md{
    margin-top:1rem;
}

@media (max-width:640px){
    #app{
        --nakrit-button-height:30px;
        --nakrit-button-font-size:.7rem;
    }

    #app button{
        padding-right:6px;
        padding-left:6px;
    }

    #app .voice-panel{
        padding:14px;
    }

    #app .jinx-panel{
        padding:14px;
    }

    #app .voice-options{
        grid-template-columns:1fr;
    }

    #app .spell-builder-fields{
        grid-template-columns:1fr;
    }

    #app .kitchen-jinx-fields{
        grid-template-columns:1fr;
    }

    #app .kitchen-menu-item{
        grid-template-columns:minmax(0,1fr) 74px 54px;
    }

    #app .kitchen-mode-buttons{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    #app .meal-choice-list{
        grid-template-columns:1fr;
        gap:10px;
    }

    #app .meal-choice{
        height:44px;
        min-height:44px;
        padding-right:12px;
        padding-left:12px;
        font-size:.78rem !important;
    }

    #app .voice-option{
        min-height:54px;
        padding:10px;
    }

    #app .voice-option-tally{
        margin-top:7px;
        font-size:10px;
    }

    #app .spell-filters{
        display:flex;
        flex-wrap:nowrap;
        justify-content:flex-start;
        gap:6px;
    }

    #app .spell-filters .spell-filter{
        flex:0 1 auto;
        width:auto;
        padding-right:6px;
        padding-left:6px;
        font-size:var(--nakrit-button-font-size) !important;
    }

    #app .bulletin-message{
        font-size:1.06rem !important;
    }

    #app .bulletin-author{
        font-size:.64rem !important;
        line-height:1.2;
    }

    #app .bulletin-time{
        font-size:.58rem;
    }

    #app .spell-state{
        padding:3px 7px;
        font-size:12px;
    }

    #app .spell-identity{
        gap:7px;
    }

    #app .bulletin-heading{
        gap:8px;
    }

    #app .spell-strength{
        font-size:.64rem;
    }

    #app .bulletin-time{
        text-align:right;
    }
}

@media (max-width:420px){
    #app .btn-row{
        gap:7px;
    }

    #app .btn-row .btn{
        padding-right:5px;
        padding-left:5px;
        font-size:.7rem;
    }

    #app .voice-panel-head{
        align-items:center;
    }
}