.bg-theme { 
    height: 30vh;
}

@media (max-width: 767px) {
    .bg-theme {
        height: 42vh; /* taller on mobile */
    }
}

#scoreboard {
  min-height: 420px; /* ensures no jump when JS fills it */
}

.score-table-wrapper {
  min-height: 180px; /* keeps height stable before data appears */
}

#reactionChartCanvas {
  display: block;
  width: 100% !important;
  height: 250px !important; /* fixed height avoids resizing */
}
   .rtestcss {
      background: #2b87d1;
      position: relative;
      color: white;
      overflow: hidden;
      text-align: center;
      cursor: pointer;
      user-select: none;
   }

   .current-reaction {
        display: inline-block;
        min-width: 100px;
        min-height: 28px;
        text-align: center;
    }

   #clickedBody {
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transition: background 0.4s ease;
    cursor: pointer;
}

#clickedBody.start { background: linear-gradient(135deg, #d12b2b, #ff4d4d); }
#clickedBody.go { background: linear-gradient(135deg, #2bd12b, #00ff00); }
#clickedBody.wait { background: linear-gradient(135deg, #2b87d1, #1e60b8); }

   .state-box {
      min-height: 450px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
   }

   h1.display-3 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 1.75rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 500; }
#averageReflexScoreUnique { font-size: 2.2rem; font-weight: 700; text-shadow: 1px 1px 4px rgba(0,0,0,0.3); }
 

   .f40 { font-size: 1.5rem !important; font-weight: bold; }

   /* Compact Leaderboard Styles */
   .scoreboard-card { width:100%; max-width:1200px; margin:15px auto; border-radius:8px; box-shadow:0 3px 15px rgba(0,0,0,0.25); background:#1e2a38; color:#fff; overflow:hidden; transition:all 0.3s ease; font-family:Arial,sans-serif; }
   .scoreboard-header { text-align:center; font-weight:bold; font-size:1.2rem; background:#0b1a28; padding:10px; }
   .scoreboard-body { padding:10px; text-align:center; }
   .current-reaction { font-size:1.4rem; margin-bottom:8px; min-height:30px; transition:transform 0.2s ease,color 0.2s ease; }
   .flash { animation: flashAnimation 0.25s ease; }
   @keyframes flashAnimation { 0%{transform:scale(1.2);color:#00ff00;} 50%{transform:scale(1);color:#00ff00;} 100%{transform:scale(1);color:#fff;} }
   .score-summary { display:flex; justify-content:space-around; flex-wrap:wrap; margin-bottom:8px; font-size:0.9rem; }
   .score-flex-container { display:flex; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
   .score-table-wrapper, .score-chart-wrapper { flex:1 1 45%; min-width:200px; max-height:300px; overflow-y:auto; }
   .score-table { width:100%; border-collapse:collapse; font-size:0.85rem; color:#adaba4; }
   .score-table th, .score-table td { padding:5px 8px; text-align:center; }
   .score-table th { background:#0b1a28; position:sticky; top:0; z-index:1; }
   .reset-btn { background:transparent; border:1px solid #fff; color:#fff; padding:4px 12px; border-radius:4px; cursor:pointer; transition:all 0.2s ease; font-size:0.85rem; }
   .reset-btn:hover { background:#0b1a28; }
   @media(max-width:800px){ .score-flex-container{flex-direction:column;} .score-table th,.score-table td{font-size:0.75rem;padding:4px 6px;} .current-reaction{font-size:1.2rem;} .scoreboard-header{font-size:1rem;padding:8px;} .score-summary{font-size:0.8rem;} }

   .scoreboard-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.scoreboard-header {
    background: linear-gradient(90deg, #0b1a28, #1a2b3c);
    color: #fff;
    font-size: 1.3rem;
}
.score-table tr:nth-child(even) { background: rgba(255,255,255,0.05); }
.reset-btn { position: sticky; bottom: 5px; margin-top: 10px; }