/* DEMONSTRAÇÃO DOS JOGOS */
#demonstration{width:100%; display:flex; justify-content:center;}
.demoController{gap:36px; max-width:256px; display:flex; flex-direction:column;}
.demo-frame{display:block; width:100%; height:auto;}
.demo-layout{column-gap:42px; display:grid; grid-template-columns:auto auto auto; 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:280px;}
.demo-screen{position:absolute; overflow:hidden;}

/* CELULAR - NOME e MINICARD */
.demo-phone-player{margin-top:7px; margin-bottom: 7px; text-align:center;}
.demo-phone-screen{top:10%; left:10%; width:80%; height:80%;}
.demo-phone-status{display:flex; justify-content:center; gap:7px;}
.demo-phone-status-name{font-size:1rem; font-weight: 700; color:var(--tx1); line-height:1.35;}
.demo-phone-status-number{font-size:1rem; font-weight: 700; color:var(--tx1); line-height:1.35;}

/* CELULAR - TEMPO ALTERADO COM EFEITO */
.demo-status-card,.demo-status-time{width:72px;padding:7px;border-radius:12px;background:transparent;color:var(--tx1);text-align:center;transition:.2s;}
.demo-status-card small,.demo-status-time small{display:block;font-size:.64rem;font-weight:700;letter-spacing:.08em;}
.demo-status-time.time-warning small,.demo-status-time.time-warning i,.demo-status-time.time-warning strong{color:var(--lightyellow);}
.demo-status-time.time-danger small,.demo-status-time.time-danger i,.demo-status-time.time-danger strong,.demo-status-time.time-zero small,.demo-status-time.time-zero i,.demo-status-time.time-zero strong{color:var(--lightred);}
.demo-status-time.time-warning{animation:demoTimePulse .7s infinite;}
.demo-status-time.time-danger{animation:demoTimePulse .7s infinite;}
.demo-status-time.time-zero{animation:none;}
@keyframes demoTimePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.10);}}

/* CELULAR - TEMPO DO CRONÔMETRO */
#demoTime,
#demoPoints{display:inline-block;}
#demoTime.time-warning{color: var(--lightyellow);}
#demoTime.time-danger{color: var(--lightred); animation: demoTimePulse .12s infinite;}
@keyframes demoTimePulse{0%, 100%{transform: scale(1);}  50%{transform: scale(1.12);}}

/* ESTADOS - BOTÕES E SELEÇÃO DE JOGOS */
.demo-boc{background:var(--bg1); color:var(--tx1); font-size:1rem; font-weight:700; border-radius:12px; padding:12px; gap:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:none; cursor:default; opacity:.6; transition:.25s;}
.demo-boc small{ font-size:.75rem; font-weight:600; letter-spacing:.05em;}
.demo-boc-active{opacity:1; background:var(--lightyellow); color:var(--tx1);}
.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 - CARTAS DO JOGADOR */
.demo-cards-overlay{
    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    padding:7px;
    background:var(--bg3);
    z-index:999;

}
.demo-cards-overlay.active{display:flex;}

/* CELULAR - FERRAMENTAS*/
.demo-phone-tools{display:flex; justify-content:center; align-items:center; margin:7px; gap:24px; padding:0%;}
.demo-tool{width:42px; height:42px; flex:0 0 42px; display:flex; cursor:pointer; justify-content:center; align-items:center; border:none; border-radius:50%; opacity:0.6; background:var(--lightgray); color:var(--tx1); font-size:1rem; transition:.20s;}
.demo-tool.active{opacity:1;background:var(--lightblue)}

/* DEMONSTRAÇÃO - JOGO DE DESCUBRA A PALVRA */
.demo-word-answer{gap:7px; margin-top:7px; display:flex; justify-content:center; flex-wrap:wrap;}
.demo-word-box{width:40px; height:60px; font-size:1rem; font-weight:700; background:var(--tx1); border-radius:5px; color:var(--bg1); display:flex; justify-content:center; align-items:center;}
.demo-word-letter{border:0px; width:48px; height:48px; font-weight:700; border-radius:50%; background:var(--lightgray); display:flex; justify-content:center; align-items:center;}
.demo-word-letters{border:0px; gap:12px; display:flex; flex-wrap:wrap; justify-content:center;}

/* CELULAR - BOTÕES VERDADEIRO ou FALSO */
.demo-answer-vf{width: 42px; height:42px; border:none; margin: 7px; border-radius:7px; font-size:.9rem; font-weight:700; color: var(--tx1); background: var(--lightgray); opacity:.6; cursor:default;}
.demo-answer-vf.active-true{background:var(--lightcyan); opacity:1;}
.demo-answer-vf.active-false{background:var(--lightpurple); 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:64px; 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:64px; display:flex; justify-content:center; align-items:center; overflow:hidden; gap:7px;}
.demo-phone-options-vf{justify-content:center; align-items:center; gap:12px;}
.demo-phone-action{ height:100px; display:flex; justify-content:center; align-items:center;}

/* TABLET - TÍTULO, PERGUNTA e OPÇÃO */
.demo-tablet-screen{padding:24px;}
.demo-tablet-body{padding:0 12px;  gap:24px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center;}
.demo-tablet-footer{gap:24px; padding:12px; display:flex; justify-content:center;}
.demo-tablet-layout{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;}
.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-question{
    max-width:700px;
    font-size:0.9rem;
    font-weight:500;
    line-height:1.2;
    color:var(--tx2);
     text-transform:uppercase;}
.demo-tablet-question-type{margin-top: 24px; font-size:1.4rem; font-weight:700; color:var(--tx1); text-transform:uppercase;}

/* RESPONSIVIDADE */
@media (max-width:1280px){
.demoController{max-width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.demo-boc{font-size:0.9rem; padding:7px; gap:6px;}
.demo-layout{gap:12px; grid-template-columns:1fr;}
.demo-phone{max-width:280px; display:flex; justify-content:center; align-items:center;}
.demo-tablet{max-width:380px; display:flex; justify-content:center; align-items:center;}
.demo-tablet-body{padding:0 24px;  gap:24px; }
.demo-tablet-footer{gap:5px; padding:7px; display:flex; justify-content:center;}
.demo-tablet-question-type {margin-top: 0px; font-size:1.2rem;}
.demo-tablet-screen{padding:12px;}
.demo-word-letter{width:38px; height:38px; font-weight:500;}
.demo-word-letters{gap:10px; display:flex; flex-wrap:wrap; justify-content:center}
.demo-word-box{width:30px; height:40px;}
}