#newGame {width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem;}

#gameHistory {display: flex; flex-direction:column;}
#gameInput, .historyRow, .historyIco {position: relative; display: inline-flex; align-items: center; justify-content: space-around;}

#gameInput > button {flex: 0 1 auto; }

.controls {gap: 0 1em;}
.controls > button {height: 48px;}

#logicTime {font-family: 'DIGIT'; display: flex; justify-content: center; align-items: center; font-size: 3.5rem; padding: .3rem 1rem; border-radius: 15px; 
    min-width: 80px; background: #00000099; color: #e0bf00;}

.color-trigger {width: 25px; height: 25px; margin-bottom: 1rem;}
.color-trigger:is([data-number=""]) {border: none; background-image: url('../img/wrong.svg'); background-size: 120%; background-position: 50%;}
.color-trigger, #gameHistory span {border-radius: 50%;}
#gameHistory span {width: 25px; height: 25px;}


#colorPanel {position: fixed; z-index: 3; width: 100vw; height: 100vh; left: 0; top: 0; display: grid; transform: scale(0); background: rgba(0,0,0,.6);
    align-content: center; justify-content: center; grid-template-rows: repeat(4, 50px); grid-template-columns: repeat(3, 50px); gap: 2rem;
    transform-origin: 50% 50%;}

.black {background-color: #000; color: #fff; border: 1px solid #fff;}
.brown {background-color: #442525; color: #fff;}
.gray {background-color: #5c5c5c;}
.red {background-color: #bb1a1a;}
.green {background-color: #1e831e;}
.blue {background-color: #1f4596;}
.pink {background-color: #a5237e;}
.orange {background-color: #bb7213;}
.white {background-color: #fff; border: 1px solid #e0bf00;}