/* sets html content to fill 100% of screen */
html, body {
    width: 100vw;
    height: 100vh;
}

/* affects all elements in code 4b0014 yellow is D1CF44 */
* { 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* affects all elements in html body */
body {
  font-family: sans-serif;
  background-color: white;
}

/* EQUATIONS.html */
/* EQUATIONS.html */
/* EQUATIONS.html */
/* EQUATIONS.html */
/* EQUATIONS.html */

/* the top header bar */
.app-bar {
  position: absolute;
  left: 0vw;
  top: 0vw;
  width: 100vw;
  height: 6vh;
  background-color: #2c2c2c;
  color: white;
  font-size: 3.5vh;   
  font-weight: bold;
  display: flex;
  align-items: center;  
  justify-content: center;
  padding: 0 0; 
}

/* quit game button */
.lobby{
  position: absolute;
  left: 0;
  top: 0;
  width: 10vw;
  height: 6vh;
  background-color: #2c2c2c;
  border: none;

  color: white;
  font-size: 2vh;   
  display: flex;
  align-items: center;  
  justify-content: left;
  padding: 0 2vw;
  cursor: pointer;
}

/* join code */
.join-code {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 6vh;

  color: white;
  font-size: 3vh;   
  /* makes it a 'flex display' which allows the text to be centered to the box size */
  display: flex;
  align-items: center;  
  justify-content: right;
  padding: 0 2vw;
}

/* everything besides top header */
.container {
  display: flex;
  position: relative;
  top: 6vh;
  height: 94vh;
}

/* left half of screen */
.left-panel {
  position: absolute;
  width: 60vw;
  height: 75vh;
}

/* applies to goal, forbidden, permitted, required */
.box {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 0.37vh;
  font-weight: bold;
}
.equation {
  border-radius: 0;
  background-color: #4b0014;
  top: 67vh;
  left: 2vw;
  width: 56vw;
  height: 25vh;
  font-size: 4vh;

  display: flex;
  flex-direction: row;
}

/* halves */
.equation .half {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.equation .left {
  border-right: 0.3vh solid white;
  height: 25vh;
}

/* Cards text */
.cards-text {
  font-size: 5vh;
}

/* Buttons */
.card-btn {
  position: absolute;
  top: 1vh;
  padding: 1vh 0.6vh;
  font-size: 1.4vh;
  background: #222;
  color: white;
  border: 0.2vh solid white;
  border-radius: 0.5vh;
  cursor: pointer;
}

.set-cards {
  right: 10.5vh;
  top: 20.2vh;
}

.os-chart-wrap{
  position:absolute;           /* or relative; match your layout */
  left:12.5vw; top:1.5vh;
  width:18vh; height:18vh;
  /* display:none; */
}

.os-chart-img{
  display:block;
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index: 10;
}

.os-overlay{
  position:absolute; 
  inset:9.3%;  
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  pointer-events:none;
  z-index: 11;                  /* above the image */
}

/* cells + blackout block */
.os-cell{ position:relative; }

.os-block{
  position:absolute; inset:0;
  background:#000;
  opacity:.9;                  /* tweak to taste */
  border:1px solid #222;       /* grid lines */
  display:block;               /* default visible (for NOT selected) */
}




.toggle-chart {
  right: 0.6vh;
  top: 20.2vh;
}

/* Right half layout */
.equation .right {
  justify-content: flex-start; /* so we can control spacing */
}

.equation .right .line {
  width: 80%;
  height: 0.3vh;
  background: white;
  margin-top: 14vh;   /* space down from top */
}

.equation .goal-text {
  margin-top: 1vh;   /* sits under line */
  text-align: center;
}
:root{
  --card-w: 46px;
  --card-h: 70px;
  --card-gap: 8px;
}

/* The viewport for cards: fixed height (2 rows), L/R scroll enabled */
.cards-wrap {
  position: relative;
  left: 0vw;
  width: 100%;   /* or whatever fits your layout (can be 38vw, etc.) */
  height: 600px; /* 2 card heights + 1 gap */
  overflow-x: auto;   /* horizontal scroll */
  overflow-y: hidden; /* lock vertical */
  z-index: 1;
}



/* The actual 2×8 grid; let it size to its content width */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(8, var(--card-w));
  grid-template-rows: repeat(2, var(--card-h));
  gap: var(--card-gap);
  width: 100%;   /* grid fills wrapper exactly */
  height: 100%;  /* optional, not required */
  padding: 0 11.5vh;
  padding-top: 2vh;
}


.card .label {
  font-size: 14px;   /* 👈 change this */
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.6);
  color: #fff;
  position: absolute;
  left: 8px;
  bottom: 8px;
}


/* Card visuals */
.card{
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  background: #eee center/cover no-repeat;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  z-index:-1;
}
.card.hidden{ display: none; }   /* leaves a hole but preserves 2×8 grid */



/* .os-chart{
  position: absolute;
  left: 31vh;
  top: 2.5vh;
  width: 18vh;
} */


/* Overlay + modal, fixed to the viewport, very high z-index */
#setcards-overlay{
  position: fixed; 
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  z-index: 999999;           /* big number so it beats other overlays */
}

#setcards-modal{
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000000;          /* above overlay */
}

#setcards-modal .modal-body{
  background: #fff; color:#111;
  width: 340px; max-width: 90vw;
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font: 500 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

#setcards-modal h3{ margin: 0 0 10px; font-size: 18px; }
#setcards-modal label{ display:block; margin:8px 0 6px; }
#setcards-modal input[type="number"]{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc; border-radius: 8px;
  font-size: 14px; box-sizing: border-box;
}
#setcards-modal .actions{
  margin-top: 14px; display: flex; gap: 10px; justify-content: flex-end;
}
#setcards-modal .actions button{
  padding: 8px 12px; border-radius: 8px; border: 1px solid #bbb; background: #f6f6f6; cursor: pointer;
}
#setcards-modal .actions #setcards-confirm{
  background: #222; color: #fff; border-color:#222;
}




/* forbidden */
.forbidden {
  border-radius: 0;
  background-color: #D1CF44;
  top: 2vh;
  left: 2vw; 
  width: 17.33vw;
  height: 63vh;
  font-size: 3vh;
  justify-content: center;
  align-items: flex-start;
  padding-top: 3vh;
}

/* permitted */
.permitted {
  border-radius: 0;
  background-color: #D1CF44;
  top: 2vh;
  left: 21.33vw;
  width: 17.33vw;
  height: 63vh;
  font-size: 3vh;
  justify-content: center;
  align-items: flex-start;
  padding-top: 3vh;
}

/* required */
.required {
  border-radius: 0;
  background-color: #D1CF44;
  top: 2vh;
  left: 40.67vw;
  width: 17.33vw;
  height: 63vh;
  font-size: 3vh;
  justify-content: center;
  align-items: flex-start;
  padding-top: 3vh;
}

/* right half of screen */
.right-panel {
  position: absolute;
  left: 60vw;
  width: 40vw;
  height: 94vh;
  display: flex;
  flex-direction: column;
  border-left: 0.6vh solid #4b0014;
  border-bottom: 0.3vh solid #4b0014;
  z-index: 10000;
}

/* top right section */
.utilities {
  flex: 1;
  position: absolute;
  width: 40vw;
  display: flex;
}

/* variation sheet */
.sr-vars {
  position: absolute;
  top: 7vh;
  left: 0.3vw;
  width: 39vw;
  border: 0.2vh solid black;
}

/* new shake button */
.new-shake {
  position: absolute;
  top: 0vh;
  right: 0.281vw;
  background-color: #ddd;
  border: none;
  padding: 2vh 1.125vw;
  font-weight: bold;
  margin-top: 0.7vh;
  margin-right: 0.394vw;
  cursor: pointer;
  pointer-events: auto;
}

/* box encapsulating the timer */
.timer-box {
  border: 0.6vh solid black;
  width: fit-content;
  margin: 1em auto;
  padding: 0.2vh 1.125vw;
  border-radius: 0.74vh;
  background-color: #f4f4f4;
  position: absolute;
  top: -0.75vh;
  right: 9.563vw;
  cursor: pointer;
}

/* timer */
#timer {
  font-size: 2rem;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}

/* challenge cube */
.challenge-cube {
  background-image: url('images/cc3.png');
  background-size: cover;
  position: absolute;
  top: -2.5vh;
  left: 0vw;
  width: 8.438vw;
  height: 9vh;
  border: none;
  cursor: pointer;
  background-color: transparent;
}

/* resources mat */
.resources {
  background-color: #bbb;
  position: relative;
  top: 46vh;
  left: 0;
  width: calc(39.5vw-0.3vh);
  height: 47.7vh;
  flex-shrink: 0;
  z-index: 999; 
  display: flex;
  color: white;
  font-size: 3vh;  
  font-weight: bold;
  align-items: top;  
  justify-content: center;
  padding: 1vh 0; 
  border-right: 0.169vw solid #4b0014;
  border-top: 0.3vh solid #4b0014;
}

.cube {
  position: absolute; /* this will be applied dynamically anyway */
  background-size: contain;
  z-index: 1000;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

/* cubes */
#cubes {
  position: relative;
  background-size: contain;
}

/* pop-up exit */
.exit-popup {
  /* Popup container styling */
  position: fixed;
  top: 30vh;
  left: 30vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40vw;
  height: 18vh;
  padding: 2.315vh;
  background-color: #2c3e50;
  border-radius: 0.926vh;
  box-shadow: 0 0.37vh 0.74vh rgba(0, 0, 0, 0.3);
  color: white;
  font-family: Arial, sans-serif;
  z-index: 999999;
}


.confirm-question {
  /* Question text styling - spans full width */
  width: 100%;
  text-align: center;
  font-size: 2.5vh;
  font-weight: bold;
  margin-bottom: 1.852vh;
  padding-bottom: 0.926vh;
  border-bottom: 0.093vh solid rgba(255, 255, 255, 0.2);
}

.button-row {
  /* Container for side-by-side buttons */
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 0.787vw; /* Space between buttons */
}

.exit-options {
  /* Base button styling */
  padding: 1.852vh 1.042vw;
  border: none;
  border-radius: 0.463vh;
  font-size: 2vh;
  cursor: pointer;
  flex: 1; /* Makes buttons share available space equally */
  transition: all 0.3s ease;
}

#confirm-exit {
  background-color: #e74c3c;
  color: white;
}

#confirm-exit:hover {
  background-color: #c0392b;
}

#continue-game {
  background-color: #2ecc71;
  color: white;
}

#continue-game:hover {
  background-color: #27ae60;
}

.screen-area {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0,0,0,0.5);
  z-index: 999998;
}

#fullscreenButton {
  position: absolute;
  top: 1vh;
  right: 0.5vw;
  width: 0.563vw;
  height: 1vh;
  font-size: 2.5vh;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 0.463vh;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

#fullscreenButton:hover {
  background-color: #555;
}







/* SCORE SHEET */
/* SCORE SHEET */
/* SCORE SHEET */
/* SCORE SHEET */
/* SCORE SHEET */
/* SCORE SHEET */

/* Scoresheet Table Base */
table {
  border-collapse: collapse;
  border: 0.185vh solid #ccc;
  background-color: white;
  color: black;
  font-family: sans-serif;
  font-size: 1.8vh;
  table-layout: fixed;
}

/* Positioning */
#dataTable {
  position: absolute;
  top: 8vh; /* 18vh - 10vh */
  left: 1vw;
  width: 38vw;
}

#scoreData {
  position: absolute;
  top: 14vh; /* 25vh - 10vh */
  left: 1vw;
  width: 38vw;
  height: 10vh;
  overflow-y: auto;
  background: white;
  display: block;
  margin: 0;
  padding: 0;

}

#scoreData table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#scoreData td {
  border: 0.14vh solid #ccc;
  text-align: center;
  height: 2.3vh;
  vertical-align: middle;
  padding: 0;
}

/* Remove left border of first cell and right border of last cell */
#scoreData tr td:first-child {
  border-left: none;
}
#scoreData tr td:last-child {
  border-right: none;
}


#scoreData input[type="text"] {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  text-align: center;
  font-size: 1.6vh;
  padding: 0;
}


#sumTable {
  position: absolute;
  top: 24.5vh; /* 41.5vh - 10vh */
  left: 1vw;
  width: 38vw;
  height: 3.5vh;
  background-color: #333;
  color: #f0f0f0;
  font-weight: bold;
  text-align: center;
}

/* Headers */
thead th {
  background-color: #333;
  color: white;
  padding: 0.3vh;
  text-align: center;
}

/* Header input (player names) */
thead th input {
  background: transparent;
  border: none;
  color: white;
  font-weight: bold;
  text-align: center;
  width: 100%;
  height: 2vh;
  font-size: 1.7vh;
}

thead th input:focus {
  outline: none;
  background: #555;
}

/* Table body cells */
#scoreData td,
#dataTable th,
#sumTable td {
  border: 0.14vh solid #ccc;
  text-align: center;
  padding: 0;
  height: 3vh;
  vertical-align: middle;
}

#scoreData td {
  height: 2.3vh;
}

#scoreData input[type="text"] {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  text-align: center;
  font-size: 1.6vh;
  padding: 0;
}

#scoreData input[type="text"]:focus {
  outline: none;
  background-color: #eef;
}

/* Sum row */
#sumRow td {
  font-size: 1.7vh;
}

/* Hide/show button */
.scorehide {
  position: absolute;
  top: 8.6vh; /* 19vh - 10vh */
  left: 1.4vw;
  width: 2vh;
  height: 2vh;
  font-size: 2vh;
  font-weight: bold;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border: 0.093vh solid #ccc;
  cursor: pointer;
}

#scoreBorder {
  position: absolute;
  top: 9vh; /* 17vh - 10vh */
  left: 1vw;
  width: 0.079vw;
  height: 1vh;
  background-color: #ccc;
  display: block !important;
  z-index: 1000000000;
}

#scoreBorder2 {
  position: absolute;
  top: 9vh; /* 17vh - 10vh */
  right: 1vw;
  width: 0.079vw;
  height: 1vh;
  background-color: #ccc;
  display: block !important;
  z-index: 1000000000;
}


/* VARIATION SHEET */
/* VARIATION SHEET */
/* VARIATION SHEET */
/* VARIATION SHEET */
/* VARIATION SHEET */
/* VARIATION SHEET */

#variationSheet {
  position: absolute;
  top: 13vh; /* Adjust if needed based on your layout 16 change */
  left: 1vw;
  width: 38vw;
  background: white;
  border: 0.185vh solid #ccc;
  table-layout: fixed;
  font-size: 1.6vh;
  color: black;
  transition: top 0.3s ease;
}

#variationSheet th {
  background-color: #333;
  color: white;
  padding: 0.3vh;
  text-align: center;
  font-size: 2.3vh;
}

#variationSheet td {
  border: 0.14vh solid #ccc;
  text-align: center;
  padding: 0;
  height: 3.3vh;
}

#variationSheet input[type="text"] {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  text-align: center;
  font-size: 1.2em;
  padding: 0;
}

.variation-toggle {
  position: absolute;
  top: 13.6vh;
  left: 1.4vw;
  width: 2vh;
  height: 2vh;
  font-size: 2vh;
  font-weight: bold;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border: 0.093vh solid #ccc;
  cursor: pointer;
  transition: top 0.3s ease;
}

#variationWrapper {
  position: absolute;
  top: 13vh;
  left: 1vw;
  width: 38vw;
  height: 3vh; /* enough height for scrolling */
  overflow-y: scroll; /* enables scrolling */
  background: white;
  transition: top 0.3s ease;
}


/* CHAT BOX */
/* CHAT BOX */
/* CHAT BOX */
/* CHAT BOX */
/* CHAT BOX */

/* ===== Chat styled like Variation Sheet ===== */

/* === Chat wrapper & table === */
#chatWrapper {
  position: absolute;
  top: 18vh;
  left: 1vw;
  width: 38vw;
  background: white;
  border: 0.185vh solid #ccc;
  color: black;
  font-size: 1.6vh;
  transition: top 0.3s ease;
}

#chatBox {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: white;
  border: none;           /* wrapper provides the border */
  position: relative;     /* anchor for the overlay */
}

#chatBox th {
  background-color: #333;
  color: white;
  padding: 0.3vh;
  text-align: center;
  font-size: 2.3vh;
}

#chatBox td {
  /* border: 0.14vh solid #ccc; */
  text-align: center;
  padding: 0;
  height: 3.3vh;
}

/* === Username row is a spacer only (no height) === */
#usernameRow,
#usernameRow td {
  height: 0;
  padding: 0;
  border: 0;
}

/* === Overlay prompt (floats over messages; no extra height) === */
.username-overlay {
  position: absolute;
  left: 0;
  right: 0;
  /* Top is set by JS to equal the header height; default is ~3.1vh as fallback */
  top: 3.1vh;
  z-index: 20000;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 0.3vh solid #ccc;
  padding: 0.3vh 0.338vw;
  border-left: 0.079vw solid #ccc;
  border-right: 0.079vw solid #ccc;
}

/* Bar contents */
.username-bar {
  display: flex;
  align-items: center;
  gap: 0.338vw;
  background: transparent;
}

.username-bar:focus-within {
  outline: none;
  border-color: #333;
}

/* Smaller, open look for fields */
#usernameInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 3.4vh;
  border: none;
  opacity: 1;
  padding: 0.2vh 0.225vw;
  text-align: left;
  outline: none;
  font-size: 0.95em;
}

#usernameInput::placeholder {
  color: #888;
}

#usernameSubmit {
  background: transparent;
  border: none;
  color: #333;
  height: 3.45vh;
  padding: 0 0.45vw;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95em;
}

#usernameSubmit:hover {
  text-decoration: underline;
}

/* === Messages & input === */
#chatMessages {
  height: 15.5vh;
  overflow-y: auto;
  padding: 0.5vh 0.563vw;
  border-top: 0.14vh solid #ccc;
  border-bottom: 0.14vh solid #ccc;
  background: #f9f9f9;
  text-align: left;
}

#chatInput {
  width: 100%;
  height: 3.3vh;
  box-sizing: border-box;
  border: none;
  text-align: left;
  font-size: 0.95em;
  padding: 0 0.563vw;
}

/* === Toggle button (to match variation toggle) === */
.chat-toggle {
  position: absolute;
  top: 18.6vh;
  left: 1.4vw;
  width: 2vh;
  height: 2vh;
  font-size: 2vh;
  font-weight: bold;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border: 0.093vh solid #ccc;
  cursor: pointer;
  transition: top 0.3s ease;
}

/* Stop collapse rounding gaps */
#chatBox { border-collapse: separate; border-spacing: 0; }


/* Utility */
.hidden { display: none !important; }


/* --- NEW SHAKE button: match .lobby look --- */


/* --- NEW SHAKE popup: match .exit-popup --- */
.newshake-popup.confirm-popup{
  position: fixed;
  top: 30vh;
  left: 30vw;
  display: none;
  flex-direction: column;
  align-items: center;
  width: 40vw;
  font-size: 2.5vh;
  font-weight: bold;
  height: 18vh;
  padding: 2.315vh;
  background-color: #2c3e50;   /* same as exit */
  border-radius: 0.926vh;
  box-shadow: 0 0.37vh 0.417vw rgba(0,0,0,0.3);
  color: white;
  font-family: Arial, sans-serif;
  z-index: 9999999;
}

.newshake-popup .confirm-buttons {
  border-top: 0.093vh solid rgba(255,255,255,0.2); /* same look as exit */
  margin-top: 0.926vh;
  padding-top: 1.852vh;
}



/* Buttons row in the modal */
.confirm-buttons{
  display: flex;
  gap: 0.926vh;
  width: 100%;
  margin-top: auto;
}

/* Base button style: same as .exit-options */
.confirm-buttons button{
  min-height: 6vh;
  flex: 1;
  padding: 0.463vh 1.042vw;
  border: none;
  border-radius: 0.463vh;
  font-size: 2vh;
  cursor: pointer;
  transition: all .3s ease;
  z-index: 9999999
}

/* Keep “Continue Game” same green as your quit popup */
#cancel-newshake{
  background-color: #2ecc71;
  color: white;
}
#cancel-newshake:hover{
  background-color: #27ae60;
}

/* “Start New Shake” as primary (blue) so it’s distinct from the red Quit */
#confirm-newshake{
  background-color: #3498db;
  color: white;
}
#confirm-newshake:hover{
  background-color: #2980b9;
}




/* Wrapper (same look as chat/variation wrappers) */
#playersWrapper {
  position: absolute;
  top: 42vh;        /* tweak for your layout */
  left: 10vw;
  width: 20vw;
  background: white;
  border: 0.185vh solid #ccc;
  color: black;
  font-size: 1.6vh;
  transition: top 0.15s ease;
}

/* Table */
#playersBox {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: white;
  border: none;                 /* wrapper draws the border */
  position: relative;
}

#playersBox th {
  background-color: #333;
  color: white;
  padding: 0.3vh;
  text-align: center;
  font-size: 2.3vh;
}

#playersBox td {
  border: 0.14vh solid #ccc;
  padding: 0;
  height: 3.3vh;
  text-align: left;
}

/* List area */
.player-list {
  list-style: none;
  margin: 0;
  padding: 0.6vh 0.563vw;
  max-height: 12vh;             /* scroll if long */
  overflow-y: auto;
}

.player-list li {
  display: flex;
  align-items: center;
  gap: 0.338vw;
  padding: 0.3vh 0;
  font-size: 0.95em;
}

.player-dot {
  width: 0.506vw;
  height: 0.9vh;
  border-radius: 50%;
  background: #2ecc71;
  flex: 0 0 auto;
}

.player-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.player-row {
  display: flex;
  align-items: center;
  gap: 0.741vh;
  padding: 0.185vh 0.313vw;
}

/* regular player = green dot */
.player-indicator.player {
  width: 0.417vw;
  height: 0.741vh;
  border-radius: 50%;
  background: #2ecc71;
  display: inline-block;
  flex: 0 0 0.741vh;
}


/* Make each row align its children vertically */
#playerList li {
  display: flex;
  align-items: center;
  gap: 0.741vh;
}

/* Common box for indicators */
.player-dot,
.spectator-indicator {
  flex: 0 0 0.926vh;   /* fixed width like the dot */
  width: 0.521vw;
  height: 0.926vh;
}

/* Player = solid green circle */
.player-dot {
  display: inline-block;
  border-radius: 50%;
  background: #2ecc71;
}

/* Spectator = centered ◉ glyph inside the same box */
.spectator-indicator {
  display: inline-flex;              /* center the glyph in the box */
  align-items: center;
  justify-content: center;
  font-size: 1.6vh;               
  line-height: 1;
  color: #bbb;
  /* tiny nudge if you want pixel-perfect alignment: */
  transform: translateY(-0.046vh);    
}

.no-drag .cube { pointer-events: none; cursor: default !important; }
.new-shake:disabled, .new-shake.disabled { opacity: 0.5; cursor: not-allowed; }

/* Spectators: show default cursor on interactive stuff */
body.spectator #challengeCube,
body.spectator .resources .cube,   /* all 24 cubes */
body.spectator #timerBox,
body.spectator #newShake {
  cursor: default !important;
}

/* If you ALSO want to prevent interaction, uncomment this: */

body.spectator #challengeCube,
body.spectator .resources .cube,
body.spectator #timerBox,
body.spectator #newShake {
  pointer-events: none;
}
 
#playersBox thead th {
  user-select: none;
  cursor: pointer;
  position: relative;
}

#timer{
  font-family: "Orbitron", "Share Tech Mono", monospace;
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums; /* fixed width digits */
  text-shadow: 0 0 0.056vh rgba(0,0,0,.35); /* crisp “digital” vibe */
}

/* Chat username styling */
#chatMessages .username { font-weight: 600; }
#chatMessages .username.spectator { color: rgba(0,0,0,0.55); }

/* System messages: message-only, bold */
#chatMessages .system-message { 
  font-weight: 700; 
  color: #4b0014;
}
#chatMessages .system-line {
  text-align: center;
}

.user-line .name { font-weight: 700; }
.user-line.spectator .name { color: #575551; font-weight: 700; }