/* BOTÃO BUZZER */
.button-buzzer{font-size:15px; margin-top:7px; opacity:.6; background:var(--lightgray); width:72px; height:72px; border-radius:50%; border:none; color:var(--tx1); font-weight:bold; cursor:default;}
.button-buzzer.active{opacity:1;background:var(--lightred)}
.button-buzzer.buzzer-pressed{background:var(--lightgreen); color:var(--tx1); animation:buzzerPulse .7s infinite;}
.button-buzzer:disabled:not(.button-buzzer-pressed){background:var(--lightgray); color:var(--tx1);}
.demo-phone-action-buzzer{height:100px; display:flex; justify-content:center; align-items:center;}
@keyframes buzzerPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.03);}}

/* 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;}
.demo-phone-options-vf{justify-content:center; align-items:center; gap:12px;}

/* 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;}

/* FERRAMENTAS DO JOGADOR*/
.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)}

/* FERRAMENTAS DE BOTÃO*/
.boc-blue{background:var(--lightblue); color:var(--tx1);}
.boc-gray{background:var(--lightgray); color:var(--tx1);}

/* 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;}

/* PONTUAÇÃO COM EFEITO */
.demo-status-card.score-positive small,
.demo-status-card.score-positive i,
.demo-status-card.score-positive strong{color:var(--lightgreen);}
.demo-status-card.score-negative small,
.demo-status-card.score-negative i,
.demo-status-card.score-negative strong{color:var(--lightred);}

/* TEMPO DO CRONÔMETRO 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,
.demo-status-time.time-good small,
.demo-status-time.time-good i,
.demo-status-time.time-good strong{color:var(--lightgreen);}

.demo-status-time.time-danger{animation:demoTimePulse .7s infinite;}
.demo-status-time.time-zero{animation:none;}


/* TEMPO DO CRONÔMETRO - ESGOTADO */
.demo-status-time.time-disabled{animation:none;}
.demo-status-time.time-disabled small,
.demo-status-time.time-disabled i,
.demo-status-time.time-disabled strong{color:var(--lightred);}


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