body {
    display: grid;
    place-items: center;
    height: 100vh;
    margin: 0;
    box-sizing: border-box;
}

.coalition-timer {
    display: block !important; /* Force visibility for debugging */
    font-size: 1em;
    font-weight: bold;
    color: black;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: -2em;
}

.board {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: center;
    margin-top: 0.2em;
    pointer-events: all;

}

.participants p, .player-info p {
    font-weight: bold;
    font-size: 1.2em;
}

.row {
    display: flex;
    justify-content: center;
    margin-top: -0.3em;
}

.cell {
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    border: 3px solid gray;
    background-color: rgba(200, 200, 200, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 1px;
    position: relative;  /* Added for absolute positioning of rings */
}

.cell:hover {
    background-color: rgba(200, 200, 200, 0.8);
}

/* Inner rings */
.ring {
    position: absolute;
    border-color: transparent;
    border-radius: 50%;
    border-style: solid;
    border-width: 3.2px;
    pointer-events: none; /* Ensures clicks pass through to the cell */
}

.ring-1 {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}

.ring-2 {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

.ring-3 {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
}

.ring-4 {
  border: none;          /* dot has no border */
  border-radius: 50%;
  width: 40%;            /* smaller than ring-3 (60%) */
  height: 40%;
  top: 30%;              /* centered inside ring-3 */
  left: 30%;
  pointer-events: none;
  z-index: 3;            /* above all rings */
}

/* Red fill */
.dot {
  background-color: red;
}

.ring-purple {
    border-color: hsl(280, 70%, 50%);  /* lower lightness = darker */
}
.ring-blue {
    border-color: hsl(210, 90%, 50%);  /* bright dodger blue tone */
}

.ring-green {
    border-color: hsl(125, 70%, 50%);  /* vivid lime-green tone */
}

.ring-red {
    border-color: hsl(0, 80%, 50%);    /* strong red */
}
.player-info, .participant-left, .participant-right {
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    color: inherit; /* Ensures the color is set via JS */
}
.player-info p, .participant-left p, .participant-right p {
    color: #000;     /* Default color (black or another base color) */
}
.gain-box {
    font-size: 1em;
    font-weight: bold;
    color: black;
    text-align: center;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}
.round-floating {
  position: fixed;
  width: auto;
  display: inline-block;
  right: auto;        /* distance from the right edge */
  top: 15px;               /* sit near the top edge */
  left: 50%;               /* center horizontally */
  transform: translateX(calc(-50% - 0.5rem)); /* adjust offset until visually centered */
  font-size: 1.2rem;
  font-weight: 600;
  color: #444;
  background: rgba(255,255,255,0.8);
  padding: 0.25em 0.7em;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  pointer-events: none; /* avoids interfering with clicks */
  z-index: 2000;        /* ensures it stays visible */
}
/* Match the look of the floating round badge used on Negotiate page */
.round-header {
  text-align: center;
  margin: 1rem 0 1.5rem 0;
}

.round-header span {
  display: inline-block;
  background: rgba(255,255,255,0.8);
  padding: 0.25em 0.7em;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #444;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Enlarge ONLY the icon visually, without changing layout width */
.participant-left img,
.participant-right img {
    transform: scale(1.6);      /* make the icon bigger */
    transform-origin: center;
    display: block;             /* keep it on its own line */
    margin: 0 auto 0.2em auto;  /* centered, small gap below */
}

/* Ensure ID label and gain sit UNDER each other, not side by side */
.participant-left p,
.participant-right p,
.participant-left .gain-box,
.participant-right .gain-box {
    display: block;             /* force vertical stacking */
    text-align: center;
}

/* slightly bigger ID text, without layout weirdness */
.participant-left p,
.participant-right p {
    font-size: 1.3em;
    margin: 0.1em 0;
}