/* ==========================================================
   DEMONSTRAÇÃO DOS JOGOS
========================================================== */
#demonstration{ width:100%; display:flex; justify-content:center;}
.demo-layout{display:grid; grid-template-columns:auto auto auto; column-gap:24px; align-items:center; justify-items:center;}
.demo-tablet,.demo-phone{display:flex; justify-content:center; position:relative;}
.demo-tablet{max-width:800px;}
.demo-phone{max-width:350px;}
.demo-frame{display:block; width:100%; height:auto;}
.demo-screen{position:absolute; overflow:hidden;}
.demo-tablet-screen{top:10%; left:10%; width:80%; height:80%;}
.demo-phone-screen{top:10%; left:10%; width:80%; height:80%;}
.demo-controller{ max-width: 164px; display:flex; flex-direction:column; gap:12px;}
.demo button{font-family:inherit;}


/* ==========================================================
CELULAR - TÍTULO, PERGUNTA e OPÇÃO
/*==========================================================*/
.demo-tablet-body{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    
    gap:12px;
    padding:12px;
    text-align:center;}

.demo-tablet-question-type{
    margin-top: 12px;
    font-size:1.5rem;
    font-weight:700;
    color:var(--lightyellow);
    text-transform:uppercase;
}

.demo-tablet-question{
    max-width:700px;
    font-size:1rem;
    font-weight:700;
    line-height:1.2;
    color:var(--tx1);
     text-transform:uppercase;
}

.demo-tablet-options{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.demo-tablet-option{
    width:100%;
    padding:10px 10px;
    border-radius:12px;
    background:var(--bg2);
    color:var(--tx1);
    text-align:left;
    font-size:0.9rem;
    font-weight:500;
}

.demo-tablet-footer{
    display:flex;
    justify-content:center;
    gap:10px;
    padding:10px;
    margin-bottom:36px;
}

/* ==========================================================
CELULAR - NOME e MINICARD
/*==========================================================*/
.demo-phone-player{margin-top:7px; margin-bottom: 7px; text-align:center;}
.demo-phone-status-name{font-size:1.2rem; font-weight: 700; color:var(--tx1); line-height:1.35;}
.demo-phone-status-number{font-size:1rem; font-weight: 700; color:var(--lightyellow); line-height:1.35;}
.demo-phone-status{ display:flex; justify-content:center; gap:8px; margin-top:12px;}
.demo-status-card{
    width:80px;
    padding:6px;
    border-radius:12px;
    background:transparent;
    color:var(--tx1);
    text-align:center;}
.demo-status-card small{
    display:block;
    font-size:.64rem;
    font-weight:700;
    letter-spacing:.08em;}


/*==========================================================*/
.demo-boc{
    border:none;
    border-radius:14px;
    padding:20px;
    background:var(--bg1);
    color:var(--tx1);
    font-size:1rem;
    font-weight:700;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    opacity:.55;
    cursor:default;
    transition:.25s;}

.demo-boc small{
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.05em;}

/*==========================================================*/
/* ESTADOS DOS BOC (BOTÕES E SELEÇÃO DE JOGOS              */
/*==========================================================*/
.demo-boc-active{opacity:1; background:var(--lightyellow); color:var(--bg1);}
.demo-boc-green{background:var(--lightgreen);
    color:var(--tx1);}
.demo-boc-red{background:var(--lightred);
    color:var(--tx1);}
.demo-boc-yellow{background:var(--lightyellow);
    color:var(--tx1);}
.boc-blue{background:var(--lightblue);
    color:var(--tx1);}
.boc-gray{background:var(--lightgray);
    color:var(--tx1);}

/* ========================================================================== */
/* CELULAR - BOTÃO BUZZER */
/* ========================================================================== */
.demo-buzzer{
    margin-top:12px;
    opacity:.6;
    width:100px;
    height:100px;
    border-radius:50%;
    border:none;
    background:var(--lightgray);
    color:#fff;
    font-weight:bold;
    font-size:18px;
    cursor:default;}
.demo-buzzer.active{opacity:1;background:var(--lightred)}




/* ========================================================================== */
/* CELULAR - BOTÕES VERDADEIRO ou FALSO */
/* ========================================================================== */
.demo-answer-vf{
    height:42px;
    border:none;
    margin: 7px;
    border-radius:12px;
    color:#fff;
    background: var(--lightgray);
    font-size:.85rem;
    font-weight:700;
    opacity:.6;
    cursor:default;}
.demo-answer-vf.active-true{background:var(--lightgreen); opacity:1;}
.demo-answer-vf.active-false{background:var(--lightred); opacity:1;}

/* ========================================================================== */
/* CELULAR - BOTÕES A B C D */
/* ========================================================================== */
.demo-answer{
    width:42px;
    height:42px;
    opacity:.60;
    flex:0 0 auto;
    border-radius:50%;
    border:none;
    background:var(--lightgray);
    color:var(--tx1);
    font-weight:700;
    cursor:default;}
.demo-answer.active-a{background:var(--lightblue); opacity:1;}
.demo-answer.active-b{background:var(--lightgreen); opacity:1;}
.demo-answer.active-c{background:var(--lightyellow); opacity:1;}
.demo-answer.active-d{background:var(--lightred); opacity:1;}

/* ========================================================================== */
/* CELULAR */
/* ========================================================================== */
.demo-phone-layout{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;}
.demo-phone-header{height:62px; display:flex; justify-content:center; align-items:center; overflow:hidden; padding:10px 10px;}
.demo-phone-header img{
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;}
.demo-phone-options{
    height:72px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    overflow:hidden;
    padding:0 10px;}
.demo-phone-options-vf{margin-top:12px; margin-bottom:12px; justify-content:center; align-items:center;}
.demo-phone-action{ height:100px; display:flex; justify-content:center; align-items:center;}

/* ========================================================================== */
/* TABLET */
/* ========================================================================== */
.demo-tablet-layout{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
}

.demo-tablet-body{
    flex:1;
    display:grid;
    justify-content:center;
    align-items:center;
     grid-template-rows:56px auto 1fr;
     gap:12px;
    padding:18px;
}

.demo-tablet-footer{
    min-height:72px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    padding:12px;

}

/*==========================================================*/
@media (max-width:1280px){
.demo-layout{grid-template-columns:1fr; gap:2rem;}
.demo-controller{width:100%; max-width:150px; margin:auto;}
.demo-tablet{max-width:360px;}
.demo-phone{max-width:360px;}
.demo-tablet,
.demo-phone{display:flex; justify-content:center; align-items:center;}

}