/* ==========================================================================
   DOMINÓ DO PORTO - main.css
   Base limpa + jogo + miniapp
   ========================================================================== */

/* ==========================================================================
   RESET / BASE ESSENCIAL
   ========================================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    min-height:var(--app-height, 100dvh);
    height:100%;
    margin:0;
    padding:0;
}

html{
    font-size:16px;
    line-height:1.4;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    overscroll-behavior:none;
    background:#031626;
}

body{
    overflow:hidden;
    color:#fff;
    font-family:'Nunito', Arial, sans-serif;
    min-height:var(--app-height, 100dvh);
    min-height:-webkit-fill-available;
    background:
        radial-gradient(circle at top, rgba(255,223,128,.12), transparent 30%),
        linear-gradient(180deg, #08263d 0%, #031626 100%);
}

img,
canvas,
video,
audio{
    display:block;
    max-width:100%;
    border:0;
}

button,
input,
select,
textarea{
    font:inherit;
    margin:0;
}

button{
    border:0;
    background:none;
    padding:0;
    cursor:pointer;
}

button:disabled,
input:disabled{
    cursor:default;
}

a{
    color:inherit;
    text-decoration:none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus{
    outline:none;
}

ul,
ol,
p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
form{
    margin:0;
    padding:0;
}

ul,
ol{
    list-style:none;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

textarea{
    resize:vertical;
}

::selection{
    background:#b3d4fc;
    color:#111;
    text-shadow:none;
}

::-moz-selection{
    background:#b3d4fc;
    color:#111;
    text-shadow:none;
}

/* ==========================================================================
   FONT
   ========================================================================== */

@font-face {
   font-family:'NunitoLocalFallback';
   src: url('fonts/bpreplaybold-webfont.woff2') format('woff2'),
        url('fonts/bpreplaybold-webfont.woff') format('woff');
   font-weight:700;
   font-style:normal;
   font-display:swap;
}

/* ==========================================================================
   ESTRUTURA PRINCIPAL
   ========================================================================== */

#mainHolder{
    position:fixed;
    inset:0;
    width:100%;
    height:var(--app-height, 100dvh);
    min-height:var(--app-height, 100dvh);
    min-height:-webkit-fill-available;
    overflow:hidden;

    background-color:#07243c;
    background-image:url('../assets/background_p.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
}

#canvasHolder{
    display:none;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
    z-index:1;
}

@media (orientation: landscape){
    #mainHolder{
        background-image:url('../assets/background.png');
    }
}

#gameCanvas{
    position:absolute;
    margin:auto;
}

canvas{
    position:absolute;
    margin:auto;
}

/* ==========================================================================
   LOADER LEGADO - mínimo
   ========================================================================== */

#mainLoader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    width:100%;
    height:100%;
    text-align:center;
    pointer-events:none;
}

/* ==========================================================================
   SUPORTE DE NAVEGADOR
   ========================================================================== */

#notSupportHolder{
    position:relative;
    width:min(90%, 960px);
    margin:5% auto;
    display:none;
    text-align:center;
    color:#fff;
    font-size:clamp(24px, 4vw, 35px);
    font-family:'Nunito', Arial, sans-serif;
}

.notSupport{
    margin-top:160px;
}

/* ==========================================================================
   FORM DE EDIÇÃO / DEBUG
   ========================================================================== */

#editWrapper{
    display:none;
}

#floatForm{
    position:fixed;
    left:0;
    top:0;
    z-index:100;
    width:280px;
    padding:15px;
    color:#fff;
    background:#0070EC;
    border:2px solid #fff;
    font-size:12px;
}

#floatForm #boardEditWrapper,
#floatForm #pathEditWrapper,
#floatForm #playersEditWrapper,
#floatForm #positionEditWrapper,
#floatForm #homePathEditWrapper,
#floatForm #nameEditWrapper{
    background:#0A55B2;
    padding:10px;
}

#floatForm #playersDetailsEditWrapper,
#floatForm #positionEditWrapper,
#floatForm #homePathEditWrapper,
#floatForm #nameEditWrapper{
    background:#0070EC;
}

#floatForm #pathWrapper,
#floatForm #positionWrapper,
#floatForm #homePathWrapper{
    border:1px solid #fff;
    padding:5px;
}

#floatForm input,
#floatForm textarea,
#floatForm select,
#floatForm option{
    width:100%;
}

#floatForm input,
#floatForm textarea{
    box-sizing:border-box;
}

#floatForm textarea{
    float:left;
    resize:none;
}

#floatForm input.button,
#floatForm select.half,
#floatForm label{
    width:49%;
}

#floatForm .formRow,
#floatForm .formRowLong{
    height:25px;
}

#floatForm .extraHeight{
    height:55px;
}

#floatForm .formRow input,
#floatForm .formRow select{
    float:right;
    width:48%;
}

#floatForm .formRow label{
    float:left;
    width:48%;
}

#floatForm .divider{
    margin:10px 0;
    padding:10px;
    border:1px solid #fff;
}

/* ==========================================================================
   TELEGRAM MINIAPP UI
   ========================================================================== */

#za-ui{
    position:fixed;
    inset:0;
    z-index:2000;
    pointer-events:none;
}

.ui-visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

#zaBackBtn,
#zaMenuBtn{
    position:absolute;
    top:max(14px, env(safe-area-inset-top));
    width:58px;
    height:58px;
    pointer-events:auto;
    border:0;
    border-radius:0;
    background-color:transparent;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    box-shadow:none;
    filter:none;
    cursor:pointer;
}

#zaBackBtn{
    left:14px;
    background-image:url('../assets/button_exit.png');
}

#zaMenuBtn{
    right:14px;
    background-image:url('../assets/button_settings.png');
}

#zaBackBtn:active,
#zaMenuBtn:active{
    transform:translateY(2px) scale(.98);
}

#zaDrawer,
#zaHelpPanel{
    position:fixed;
    right:14px;
    top:74px;
    width:min(292px, calc(100vw - 28px));
    opacity:1;
    transform:translateY(0);
    transition:opacity .18s ease, transform .18s ease;
    z-index:2002;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
}

#zaDrawer.closed,
#zaHelpPanel.closed{
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    visibility:hidden;
}

.za-drawer-card,
.za-help-panel-card{
    position:relative;
    pointer-events:auto;
    min-height:0;
    padding:78px 18px 22px;
    border:0;
    border-radius:0;
    color:#fff4cf;
    background:url('../assets/background_settings.png') center/100% 100% no-repeat !important;
    box-shadow:none !important;
    filter:none !important;
}

.za-drawer-card{
    min-height:360px;
}

.za-help-panel-card{
    min-height:325px;
}

.za-drawer-title{
    position:absolute;
    top:10px;
    left:50%;
    width:58%;
    transform:translateX(-58%);
    margin:0;
    font-size:20px;
    line-height:1;
    font-weight:900;
    text-align:center;
    white-space:nowrap;
    color:#fff0bd;
    text-shadow:0 2px 0 rgba(0,0,0,.24);
    pointer-events:none;
}

.za-help-panel-title{
    width:54%;
    transform:translateX(-58%);
}

.za-audio-block{
    width:100%;
    max-width:220px;
    margin:0 auto 28px;
}

.za-range-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    margin:0 0 16px;
    pointer-events:auto;
}

.za-range-label{
    display:block;
    padding-left:2px;
    font-size:16px;
    font-weight:900;
    color:#fff0bd;
    text-shadow:0 2px 0 rgba(0,0,0,.18);
}

.za-range{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:24px;
    margin:0;
    border-radius:999px;
    background:transparent;
    cursor:pointer;
    pointer-events:auto;
    touch-action:pan-x;
}

.za-range:focus{
    outline:none;
}

.za-range::-webkit-slider-runnable-track{
    height:6px;
    border-radius:999px;
    background:linear-gradient(90deg, #1c9fff 0 var(--fill,0%), rgba(255,255,255,.92) var(--fill,0%) 100%);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.18);
}

.za-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:18px;
    height:18px;
    margin-top:-6px;
    border-radius:50%;
    background:#1c9fff;
    border:0;
    box-shadow:0 2px 6px rgba(0,0,0,.28);
}

.za-range::-moz-range-track{
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.18);
}

.za-range::-moz-range-progress{
    height:6px;
    border-radius:999px;
    background:#1c9fff;
}

.za-range::-moz-range-thumb{
    width:18px;
    height:18px;
    border:0;
    border-radius:50%;
    background:#1c9fff;
    box-shadow:0 2px 6px rgba(0,0,0,.28);
}

.za-action-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:42px;
    padding-bottom:20px;
}

.za-image-action{
    width:66px;
    height:66px;
    flex:0 0 66px;
    pointer-events:auto;
}

.za-image-action img,
.za-help-close-btn img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.18));
}

.za-image-action:active,
.za-help-close-btn:active{
    transform:translateY(1px) scale(.98);
}

.za-help-block{
    margin:4px 0 0;
    padding:12px 14px;
    border:0 !important;
    border-radius:0;
    background:transparent !important;
    box-shadow:none !important;
}

.za-help-block-standalone{
    margin:12px 10px 0;
}

.za-help-title{
    margin-bottom:4px;
    font-size:18px;
    font-weight:900;
    color:#ffe5a1;
}

.za-help-block p{
    margin:0;
    font-family:'Nunito', Arial, sans-serif;
    font-size:14px;
    line-height:1.45;
    color:#f5e7c1;
}

.za-help-close-btn{
    position:absolute;
    right:20px;
    bottom:22px;
    width:56px;
    height:56px;
    pointer-events:auto;
}

body.za-modal-open #canvasHolder,
body.za-modal-open #gameCanvas{
    pointer-events:none !important;
}

@media (max-width: 520px){
    #zaDrawer,
    #zaHelpPanel{
        top:70px;
        width:min(290px, calc(100vw - 24px));
        right:12px;
    }

    .za-drawer-title{
        top:9px;
        left:50%;
        width:58%;
        transform:translateX(-58%);
        font-size:18px;
        line-height:1;
    }

    .za-help-panel-title{
        width:54%;
        transform:translateX(-58%);
    }
}

/* ==========================================================================
   BAÚ / RECOMPENSA
   ========================================================================== */

#chestOverlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:radial-gradient(circle at center, rgba(23,69,103,.30) 0%, rgba(4,28,49,.78) 48%, rgba(2,18,34,.96) 100%);
    backdrop-filter:none;
}

#chestOverlay.show{
    display:flex;
}

.chest-card{
    width:min(94vw, 480px);
    padding:6px 6px 10px;
    text-align:center;
    background:transparent;
}

.chest-title{
    margin-bottom:8px;
    font-size:clamp(34px, 6vw, 46px);
    line-height:.95;
    color:#fff0bd;
    font-weight:900;
    letter-spacing:.01em;
    text-shadow:0 4px 18px rgba(0,0,0,.45), 0 2px 0 rgba(60,28,5,.45);
}

#chestMessage{
    max-width:410px;
    margin:0 auto 16px;
    font-size:clamp(20px, 3.8vw, 27px);
    line-height:1.12;
    color:#fff3d2;
    font-weight:800;
    text-shadow:0 3px 14px rgba(0,0,0,.42);
}

.chest-choice-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:end;
    margin:0 auto 10px;
    max-width:430px;
}

.chest-choice{
    appearance:none;
    padding:2px 4px 0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#fff0c0;
    font-family:'Nunito', Arial, sans-serif;
    font-size:20px;
    font-weight:900;
    cursor:pointer;
    transition:transform .2s ease, opacity .2s ease, filter .2s ease;
}

.chest-choice img{
    display:block;
    width:min(30vw, 148px);
    height:auto;
    margin:0 auto 6px;
    filter:drop-shadow(0 14px 20px rgba(0,0,0,.34));
}

.chest-choice.is-picked{
    transform:translateY(-2px) scale(1.03);
}

.chest-choice.is-dimmed{
    opacity:.38;
    filter:saturate(.7);
}

.chest-choice span{
    display:block;
    min-height:1em;
    font-size:clamp(20px, 3.8vw, 24px);
    letter-spacing:.01em;
    text-shadow:0 3px 10px rgba(0,0,0,.45);
}

.chest-reveal{
    margin-top:4px;
    min-height:250px;
}

.chest-reveal-content{
    position:relative;
    width:min(76vw, 356px);
    margin:0 auto;
    opacity:0;
    transform:translateY(34px) scale(.92);
    pointer-events:none;
    transition:opacity .28s ease, transform .34s cubic-bezier(.22,.8,.25,1);
}

.chest-reveal-content.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

.chest-reveal-content.is-glowing .chest-parchment-base{
    filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 22px rgba(255,228,142,.55)) drop-shadow(0 16px 24px rgba(0,0,0,.28));
}

.chest-parchment-base{
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 16px 24px rgba(0,0,0,.28));
}

.chest-reveal-text{
    position:absolute;
    inset:11% 12% 15%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#5a3412;
    font-family:'Nunito', Arial, sans-serif;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .22s ease, transform .26s ease;
}

.chest-reveal-text.is-visible{
    opacity:1;
    transform:translateY(0);
}

.chest-reveal-title{
    font-size:clamp(28px, 5vw, 34px);
    line-height:.96;
    margin-bottom:10px;
    font-weight:900;
}

.chest-reveal-body{
    font-size:clamp(18px, 3.4vw, 22px);
    line-height:1.12;
    margin-bottom:10px;
    font-weight:800;
}

.chest-reveal-score{
    font-size:clamp(21px, 4.2vw, 26px);
    line-height:1;
    font-weight:900;
}

.chest-image-btn{
    appearance:none;
    display:block;
    margin:10px auto 0;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
}

.chest-image-btn img{
    display:block;
    width:min(54vw, 232px);
    height:auto;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.28));
}

.chest-image-btn:active{
    transform:translateY(2px);
}

#chestActionBtn{
    appearance:none;
    min-width:210px;
    padding:14px 24px;
    border:0;
    border-radius:999px;
    background:linear-gradient(180deg,#f3bb55,#c47c16);
    color:#4a260a;
    font-family:'Nunito', Arial, sans-serif;
    font-size:24px;
    font-weight:900;
    box-shadow:0 5px 0 #8a5208;
    cursor:pointer;
}

#chestActionBtn:active{
    transform:translateY(3px);
    box-shadow:0 2px 0 #8a5208;
}

/* ==========================================================================
   HELPERS
   ========================================================================== */

.hidden{
    display:none !important;
    visibility:hidden !important;
}

.invisible{
    visibility:hidden !important;
}

.clearfix::before,
.clearfix::after{
    content:"";
    display:table;
}

.clearfix::after{
    clear:both;
}

.ir{
    overflow:hidden;
    border:0;
    background-color:transparent;
    text-indent:-9999px;
}

/* ==========================================================================
   VIEWPORT
   ========================================================================== */

@-webkit-viewport{ width:device-width; }
@-moz-viewport{ width:device-width; }
@-ms-viewport{ width:device-width; }
@-o-viewport{ width:device-width; }
@viewport{ width:device-width; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 768px){
    #zaBackBtn,
    #zaMenuBtn{
        width:52px;
        height:52px;
    }

    .za-drawer-title{
        font-size:18px;
    }

    .chest-title{
        font-size:28px;
    }

    #chestMessage{
        font-size:21px;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print{
    *{
        background:transparent !important;
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
    }

    a,
    a:visited{
        text-decoration:underline;
    }

    img{
        max-width:100% !important;
        page-break-inside:avoid;
    }

    pre,
    blockquote{
        border:1px solid #999;
        page-break-inside:avoid;
    }

    thead{
        display:table-header-group;
    }

    tr{
        page-break-inside:avoid;
    }

    @page{
        margin:.5cm;
    }
}

#zaExitPanel{
    position:absolute;
    top:78px;
    right:16px;
    z-index:50;
    width:min(320px, calc(100vw - 32px));
    visibility:hidden;
    pointer-events:none;
}

#zaExitPanel.open{
    visibility:visible;
    pointer-events:auto;
}

#zaExitPanel.closed{
    visibility:hidden;
    pointer-events:none;
}

.za-exit-panel-card{
    min-height:300px;
    padding-bottom:28px;
}

.za-exit-copy{
    margin-top:22px;
}

.za-exit-actions{
    position:absolute;
    left:50%;
    bottom:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    width:100%;
    transform:translateX(-50%);
}

@media (max-width: 520px){
    #zaExitPanel{
        top:70px;
        width:min(290px, calc(100vw - 24px));
        right:12px;
    }
}