/* JOGO 1 - VERDADEIRO ou FALSO */
.demo-tablet-vf{border-style: none; display:flex; flex-direction:column; gap:12px; margin-top:24px;}
.demo-tablet-vf-option{border-style: none; padding:12px; border-radius:12px; background:var(--bg2); color:var(--tx1); font-weight:700; text-align:left;}
.demo-tablet-vf-option.option-correct{background:var(--lightgreen); color:var(--tx1);}
.demo-tablet-vf-option.option-wrong{background:var(--lightred); color:var(--tx1);}

/* JOGO 2 - ALTERNATIVAS */
.demo-tablet-option.option-correct{background:var(--lightgreen); color:var(--tx1);}
.demo-tablet-option.option-wrong{background:var(--lightred); color:var(--tx1);}

/* JOGO 3 - BUZZER */
.demo-buzzer-timestamp{color:var(--lightgreen); font-weight:700; line-height:1;}
.demo-boc.demo-boc-disabled{background:var(--lightgray)!important; color:var(--tx1)!important; opacity:.65;  cursor:not-allowed;}

/* JOGO 4 - DESCUBRA A PALVRA */
.demo-word-answer{gap:7px; margin-top:7px; display:flex; justify-content:center; flex-wrap:wrap;}
.demo-word-box{width:42px; height:52px; 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;}
.demo-word-letter.word-hit{background:var(--lightgreen); color:var(--tx1);}
.demo-word-letter.word-miss{background:var(--lightred); color:var(--tx1);}
.demo-word-letter.word-disabled{opacity:.6; background:var(--lightgray)!important; color:var(--tx1); cursor:default;}
.demo-word-box.word-disabled{opacity:.6; background:var(--lightgray); color:var(--tx1);}

/* RESPONSIVIDADE */
@media (max-width:1300px){
.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:10px;}
.demo-word-letter{width:36px; height:36px; font-weight:500;}
.demo-word-letters{gap:8px; display:flex; flex-wrap:wrap; justify-content:center}
.demo-word-box{width:30px; height:30px;}
}