:root{
  --color-bg: #0a0a0a;
  --color-text: #cbf078;
  --color-primary: #ff9f1c;
  --color-secondary: #cbf078;
  --color-accent: #e71d36;
  --color-surface: #1a1a1a;

  --cell: min(10vw, 9vmin, 12vh);
  --gap:  calc(var(--cell) * 0.14);
  --pad:  calc(var(--cell) * 0.18);
  --inset:calc(var(--cell) * 0.10);
  --disc: calc(var(--cell) - (2 * var(--inset)));
}

body{
  font-family: system-ui, Arial;
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;   
  background:
    radial-gradient(
      circle at top right,
      rgba(203,240,120,0.18) 0%,
      rgba(203,240,120,0.10) 20%,
      rgba(203,240,120,0.05) 35%,
      transparent 60%
    ),
    var(--color-bg);
  color: var(--color-text);
}
.app{
  width: max-content;
  max-width: 95vw;
  margin: 0 auto;
  padding: calc(var(--cell) * 0.25);
}

h1{
  margin: 0 0 calc(var(--cell) * 0.20) 0;
  font-size: calc(var(--cell) * 0.5);
  line-height: 1.05;
  color: var(--color-primary);
}

.controls{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: calc(var(--cell) * 0.20);
  row-gap: calc(var(--cell) * 0.18);
  margin-bottom: calc(var(--cell) * 0.20);
}

.controls > label,
#starterWrap{
  display: flex;
  align-items: center;
  gap: calc(var(--cell) * 0.16);
  min-width: 0;
  white-space: nowrap;
  font-size: calc(var(--cell) * 0.35);
}

.controls-right{
  display: flex;
  align-items: center;
  gap: calc(var(--cell) * 0.20);
  justify-content: flex-start;
}

.controls select,
.controls button{
  font-size: calc(var(--cell) * 0.34);
  padding: calc(var(--cell) * 0.12) calc(var(--cell) * 0.22);
  border-radius: calc(var(--cell) * 0.18);
  border: 2px solid var(--color-secondary);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.controls select{ width: 100%; }

.status{
  white-space: nowrap;
  font-weight: 700;
  font-size: calc(var(--cell) * 0.40);
  color: var(--color-secondary);
}

@media (max-width: 320px){
  .controls{
    grid-template-columns: 1fr;
  }
  .controls-right{
    justify-content: flex-start;
  }
}

.drop-row{
  display: grid;
  grid-template-columns: repeat(7, var(--cell));
  gap: var(--gap);
  padding: var(--pad);
  margin-bottom: calc(var(--cell) * 0.18);
  width: max-content;
}

.drop-row button{
  width: 100%;
  height: calc(var(--cell) * 0.65);
  font-weight: 700;
  font-size: calc(var(--cell) * 0.45);
  border-radius: calc(var(--cell) * 0.18);
  border: 2px solid var(--color-secondary);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.drop-row button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.board-wrap{
  display: inline-block;
  position: relative;
  margin: 0 auto;
}

.board{
  display: grid;
  grid-template-columns: repeat(7, var(--cell));
  gap: var(--gap);
  padding: var(--pad);
  border-radius: 12px;
  background: var(--color-surface);
}

.cell{
  width: var(--cell);
  height: var(--cell);
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.cell .disc{
  position: absolute;
  top: var(--inset);
  left: var(--inset);
  width: var(--disc);
  height: var(--disc);
  border-radius: 50%;
}
.cell.x .disc{
  background: var(--color-accent);

}

.cell.o .disc{
  background: var(--color-primary);

}




.fall-disc{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--disc);
  height: var(--disc);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.fall-disc.x{
  background: var(--color-accent);
}

.fall-disc.o{
  background: var(--color-primary);

}

/* -----------------------------
   PARTY MODE PANEL
------------------------------ */

.party-panel{
  margin-top: calc(var(--cell) * 0.25);
  padding: calc(var(--cell) * 0.25);
  border-radius: calc(var(--cell) * 0.25);
  background: var(--color-surface);
  border: 2px solid var(--color-secondary);
  display: none;
}

.party-panel.active{
  display: block;
}

.party-row{
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--cell) * 0.20);
  align-items: center;
  margin-bottom: calc(var(--cell) * 0.18);
}

.party-panel input{
  font-size: calc(var(--cell) * 0.34);
  padding: calc(var(--cell) * 0.12) calc(var(--cell) * 0.22);
  border-radius: calc(var(--cell) * 0.18);
  border: 2px solid var(--color-secondary);
  background: var(--color-bg);
  color: var(--color-text);
  min-width: calc(var(--cell) * 3);
}

.party-panel button{
  font-size: calc(var(--cell) * 0.34);
  padding: calc(var(--cell) * 0.12) calc(var(--cell) * 0.22);
  border-radius: calc(var(--cell) * 0.18);
  border: 2px solid var(--color-secondary);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.party-panel button:hover{
  background: var(--color-primary);
  color: #000;
}

.party-info{
  font-size: calc(var(--cell) * 0.32);
  color: var(--color-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--cell) * 0.30);
}