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

/* affects all elements in code */
* { 
  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;
}

/* goal section */
.equation {
  border-radius: 0;
  background-color: #0033cc;
  top: 67vh;
  left: 2vw;
  width: 56vw;
  height: 25vh;
  font-size: 4vh;
}

.box.equation {
  padding-top: 15vh;
}

.box.equation .line {
  position: absolute;
  top: 15vh;
  left: 4vw;
  width: 50vw;
  height: 0.3vh;
  background: white;
  margin: 0.926vh auto;
}

.box.equation .goal-text {
  text-align: center;
}

/* forbidden */
.forbidden {
  border-radius: 0;
  background-color: #009688;
  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: #009688;
  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: #009688;
  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 #0033cc;
  border-bottom: 0.3vh solid #0033cc;
  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 #0033cc;
  border-top: 0.3vh solid #0033cc;
}

.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: #0033cc;
}
#chatMessages .system-line {
  text-align: center;
}

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